面試題 css html

阿新 • • 發佈：2022-02-23

1. 左200px 中右200px 中間先載入

<style>
    .container {
      width: 100%;
      float: left;
    }

    .middle {
      background-color: aqua;
      margin-left: 200px;
      margin-right: 200px;
    }

    .left {
      background-color: red;
      float: left;
      width: 200px;
      margin-left: -100%;
    }

    .right {
      background-color: blue;
      float: left;
      width: 200px;
      margin-left: -200px;
    }
  </style>

 <div class="container"><div class="middle">1</div></div>
 <div class="left">2</div>
 <div class="right">3</div>

2. 清除浮動

1  .clearfix::after{content: ""; clear: both;
                    display: block; height: 0; visibility: hidden;}
2  overflow:hidden
3  空div{clear:both}  父height

3 盒子模型

標準盒子模型寬高是content的 box-sizing:content-box
低版本ie盒子寬高是content+padding+border的 box-sizing:border-box

4 元素

元素 (display)	換行	width, height	padding, margin	line-height
塊 (block) div ul li p h1 dl dt標題 dd內容	✔	✔	✔	❌
行內塊 (inline-block) img input select	❌	✔	✔	❌
行內 (inline) a b span	❌	❌	左右可以,上下不行	✔

5 選擇器與優先順序

偽類  :hove  :focus  :checked  :first-child  :nth-child()  :nth-of-type(n)
// p:nth-of-type 父元素p集合的第n個，p:nth-child 父元素子集合的第n個
偽元素 ::before  ::after  ::first-line
屬性選擇器: 匹配屬性[title]  [href][title]  匹配屬性值[href~ | ^ $ =""]
// title=“figure_1 DEF”  ~="figure_1"  |="figure"

!important > 行內 > id >  class(偽類,屬性) > 元素(偽元素) > * > 繼承
//優先順序相同選擇寫在後邊的

6 css3新增偽類

:checked :target
:first-child :last-child :only-child
:nth-child() :nth-last-child()
:nth-of-type() :nth-last-of-type()

7 瀏覽器核心

Trident ie/360/搜狗/百度雙核心(webkit)
Geoko 火狐
webkit Chrome谷歌, Safari[səˈfɑːri]蘋果

8 瀏覽器相容

*{margin:0 padding:0} reset.css
Css3新屬性，加瀏覽器字首

`-moz-` **火狐瀏覽器**  
`-webkit-` **Safari,谷歌瀏覽器等使用Webkit引擎**  
`-o-` **Opera瀏覽器(早期)**  
`-ms-` **IE**
.myClass {
	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-o-animation-name: fadeIn;
	-ms-animation-name: fadeIn;
	animation-name: fadeIn;  /* 不帶字首的放到最後 */
}

設定較小高度標籤(一般小於10px)，在IE6，IE7，遨遊中高度超出自己設定的高度

 overflow: hidden

幾個圖片放在一起預設有間距, 使用float屬性為img佈局(所有圖片左浮動)
IE瀏覽器div最小寬度和高度不生效 , IE不認得min-這個定義, 只寫min-等於沒有寬高

#box{ width: auto; height: auto; min-width: 80px; min-height: 35px; }

9 html5新標籤及相容

canvas
video 和 audio
footer、header、nav、section
新的表單控制元件，比如 calendar、date、time、email、url、search

IE9 以下版本瀏覽器相容HTML5的方法，使用百度靜態資源的html5shiv包：

<head>  </head> 並在CSS加上以下程式碼，手工把它們轉為塊狀元素方便佈局： /*html5*/ article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}