web前端面試題[css篇]


css使用em和rem換算px

1、實現一個div在不同分辨率下的水平垂直居中

方法1:table-cell
<div class="box box1">
        <span>垂直居中</span>
</div>

.box1{
    display: table-cell;
    vertical-align: middle;
    text-align: center;        
}

方法2:display:flex
.box2{
    display: flex;
    justify-content:center;
    align-items:Center;
}

方法3:絕對定位和負邊距
.box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid pink;
      width: 100px;
      height: 100px;
}

方法4:絕對定位和0
.box4 span{
  width: 50%; 
  height: 50%; 
  background: #000;
  overflow: auto; 
  margin: auto; 
  position: absolute; 
  top: 0; left: 0; bottom: 0; right: 0; 
}

方法5:translate
.box6 span{
    position: absolute;
    top:50%;
    left:50%;
    width:100%;
    transform:translate(-50%,-50%);
    text-align: center;
}

方法6:display:inline-block
.box7{
  text-align:center;
  font-size:0;
}
.box7 span{
  vertical-align:middle;
  display:inline-block;
  font-size:16px;
}
.box7:after{
  content:'';
  width:0;
  height:100%;
  display:inline-block;
  vertical-align:middle;
}

方法7:display:flex和margin:auto
.box8{
    display: flex;
    text-align: center;
}
.box8 span{
  margin: auto;
}


2、左右固定,中間自適應樣式

<style>
    .box {
      display: flex;
      height: 200px;
    }
    .left {
      flex: 0 0 200px;
      background-color: pink;
    }
    .center {
      flex: 1;
      background-color: yellow;
    }
    .right {
      flex: 0 0 200px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <div class="box">
      <div class="left"></div>
      <div class="center"></div>
      <div class="right"></div>
  </div>
</body>

3、闡述清楚浮動的幾種方式(常見問題)

1、浮動的產生
float: left/right(設置后產生浮動)
初衷:浮動原先的設計初衷是為了實現文字環繞效果
結果:父元素高度塌陷,理解起來就是元素浮動飄起來了,失去高度,下面的元素會頂上來,就造成了原有的元素背景不見了,margin/padding也不能正常顯示

2、解決浮動的方法
(1)clear: both,在元素最后下加一個元素設置clear:both屬性,缺點是會增加多余無用的html元素
<div class="container"> 
  <div class="left">left浮動</div> 
  <div class="right">right浮動</div>
  <div  style="clear:both;"></div>
</div>
(2)使用after偽元素
.box 父元素
.box::after {
    content: ' ';
    display: block;
    clear: both;
 }
(3)給父元素設置明確的高度,缺點是並不是所有元素的高度都是固定
(4)給父級元素設置overflow:hidden, 缺點:不能和position配合使用

4、解釋css sprites ,如何使用?

1、什么是精靈圖
將一些小圖標放在一張圖上

2、精靈圖的優點
減少圖片的總大小
減少下載圖片資源請求,減小建立連接的消耗

3、精靈圖的使用方式
.icon1 {
    background-image: url(css/img/sidebar.png);
    background-repeat: no-repeat;
    background-position: 20px  20px;
 }
// 第一個數是x軸, 第二個數是y軸

5、box-sizing常用的屬性有哪些?分別有什么作用?

(1)content-box
寬高是元素本身的寬高 不包含border+padding

(2)border-box
元素的寬高已經包含了border+padding

(3)inherit
從父元素繼承box-sizing屬性

6、CSS樣式覆蓋規則

!important > 內聯樣式 > id選擇 > (class選擇 = 偽類選擇) > (標簽選擇 = 偽元素選擇)

7、請簡要描述margin重合問題,及解決方式

問題:相鄰兩個盒子垂直方向上的margin會發生重疊,只會取比較大的margin

解決:(1)設置padding代替margin
(2)設置float
(3)設置overflow
(4)設置position:absolute 絕對定位
(5)設置display: inline-block

8、對標簽有什么理解

1、meta是html文檔頭部的一個標簽,這個標簽對用戶不可見,是給搜索引擎看的。
2、meta標簽屬性用法分成兩大類
3、<meta charset="UTF-8"> 使用的編碼格式,大部分是utf-8

9、display none visibility hidden區別?

10、重繪和回流(哪些情況重繪,哪些回流)

11、說說你對語義化的理解?

12、為什么要初始化css樣式?

因為瀏覽器的兼容問題,不同瀏覽器對有些標簽的默認值不同,如果不初始化css,會導致不同瀏覽器頁面間的顯示差異。

13、移動端適配1px問題

* {
  margin: 0;
  padding: 0;
}
ul, li{
  list-style: none;
}
.hairlines {
  width: 300px;
  margin: 100px auto;
}
.hairlines li{
  position: relative;
  border:none;
  margin-top: 10px;
}
.hairlines li:after{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  background: #cccccc;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

14、居中為什么要使用transform(為什么不使用marginLeft/Top)

transform 屬於合成屬性,不會引起整個頁面的回流重繪,節省性能消耗,但是占用內存會大些
top/left屬於布局屬性,會引起頁面layout回流和repaint重繪。

15、介紹css3中position:sticky

<div class="div1">
     元素一
</div>
<div class="div2">
    元素二
</div>

.div1 {
    width: 100%;
    height: 50px;
    background-color: yellow;
    position: sticky;
    top: 0;
}
.div2 {
    width: 100%;
    height: 1500px;
    background-color: pink;
}
設置了sticky的元素,在屏幕范圍(viewport)時該元素的位置並不受到定位影響(設置是top、left等屬性無效),
當該元素的位置將要移出偏移范圍時,定位又會變成fixed,根據設置的left、top等屬性成固定位置的效果。
該元素並不脫離文檔流,仍然保留元素原本在文檔流中的位置。
當元素在容器中被滾動超過指定的偏移值時,元素在容器內固定在指定位置。亦即如果你設置了top: 50px,那么在sticky元素到達距離相對定位的元素頂部50px的位置時固定,不再向上移動。
元素固定的相對偏移是相對於離它最近的具有滾動框的祖先元素,如果祖先元素都不可以滾動,那么是相對於viewport來計算元素的偏移量

16、上下固定,中間滾動布局如何實現

<div class="father">
    <div class="top">header</div>
    <div class="main">main</div>
    <div class="footer">footer</div>
</div>

.father {
    display: flex;
    flex-direction: column;
    height: 100vh;
}
.header,
.footer {
    width: 100%;
    height: 100px;
}
.main {
    width: 100%;
    flex: 1;
    overflow: auto;
}

17、css實現border漸變

從上到下的線性漸變(默認情況下):background-image: linear-gradient(#e66465, #9198e5);
從左到右的線性漸變:background-image: linear-gradient(to right, red , yellow);
從左上角到右下角的線性漸變:background-image: linear-gradient(to bottom right, red, yellow);
帶有多個顏色節點的從上到下的線性漸變:background-image: linear-gradient(red, yellow, green);
從左到右的線性漸變,帶有透明度:background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
一個重復的線性漸變: background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
顏色節點均勻分布的徑向漸變:background-image: radial-gradient(red, yellow, green);

18、純css實現一個高寬比為1:3的盒子 列舉幾種方式

方法1:使用vh視窗單位;屏幕百分比
方法2:使用padding內邊距顯示內容

<p class="father">
    <img src="./p1.png">
</p>
.father {
    width: 100px;
    height: 0; /* 設置高為0 */
    padding-bottom: 50px;
    overflow: hidden;
    border: 1px solid red;
}
img {
    width: 100%;
}

方法3:使用calc計算屬性

div {
    width: 100px;
    height: calc(100px * 2 / 3); /* 設置高為0,使用padding內邊距顯示內容 */
    border: 1px solid red;
}

方法4:使用偽元素::before或者::after,使其變成塊元素,再配合padding或者calc計算寬高比

 div::after {
    content: "";
    display: block;
    width: 100px;
    /* padding-bottom: 50px; */
    height: calc(100px /2);
    border: 1px solid red;
}

19、 css實現一個旋轉的圓

transform:rotate(7deg);屬性

20、BFC,IFC,FFC的區別

BFC:塊級格式化上下文
1. 內部的盒子會在垂直方向,一個個地放置;
2. 盒子垂直方向的距離由margin決定,屬於同一個BFC的兩個相鄰Box的上下margin會發生重疊;
3. 每個元素的左邊,與包含的盒子的左邊相接觸,即使存在浮動也是如此;
4. BFC的區域不會與float重疊;
5. BFC就是頁面上的一個隔離的獨立容器,容器里面的子元素不會影響到外面的元素,反之也如此;
6. 計算BFC的高度時,浮動元素也參與計算。
哪些元素會產生BFC
* 根元素;
* float的屬性不為none;
* position為absolute或fixed;
* display為inline-block,table-cell,table-caption,flex;
* overflow不為visible
IFC:內聯格式上下文
框會從包含塊的頂部開始,一個接一個地水平擺放。
擺放這些框的時候,它們在水平方向上的外邊距、邊框、內邊距所占用的空間都會被考慮在內。在垂直方向上,這些框可能會以不同形式來對齊:它們可能會把底部或頂部對齊,也可能把其內部的文本基線對齊。能把在一行上的框都完全包含進去的一個矩形區域,被稱為該行的行框。水平的margin、padding、border有效,垂直無效。不能指定寬高。
行框的寬度是由包含塊和存在的浮動來決定。行框的高度由行高計算這一章所描述的規則來決定。

GFC(GrideLayout formatting contexts):網格布局格式化上下文
當為一個元素設置display值為grid的時候,此元素將會獲得一個獨立的渲染區域,我們可以通過在網格容器(grid container)上定義網格定義行(grid definition rows)和網格定義列(grid definition columns)屬性各在網格項目(grid item)上定義網格行(grid row)和網格列(grid columns)為每一個網格項目(grid item)定義位置和空間。那么GFC有什么用呢,和table又有什么區別呢?首先同樣是一個二維的表格,但GridLayout會有更加豐富的屬性來控制行列,控制對齊以及更為精細的渲染語義和控制

FFC(Flex formatting contexts):自適應格式上下文
display值為flex或者inline-flex的元素將會生成自適應容器(flex container),可惜這個牛逼的屬性只有谷歌和火狐支持,不過在移動端也足夠了,至少safari和chrome還是OK的,畢竟這倆在移動端才是王道。Flex Box 由伸縮容器和伸縮項目組成。通過設置元素的 display 屬性為 flex 或 inline-flex 可以得到一個伸縮容器。設置為 flex 的容器被渲染為一個塊級元素,而設置為 inline-flex 的容器則渲染為一個行內元素。伸縮容器中的每一個子元素都是一個伸縮項目。伸縮項目可以是任意數量的。伸縮容器外和伸縮項目內的一切元素都不受影響。簡單地說,Flexbox 定義了伸縮容器內伸縮項目該如何布局

21、css3有哪些新特性

CSS3有哪些新特性?
新增選擇器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}

彈性盒模型 display: flex;

多列布局 column-count: 5;

媒體查詢 @media (max-width: 480px) {.box: {column-count: 1;}}

個性化字體 @font-face{font-family:BorderWeb;src:url(BORDERW0.eot);}

顏色透明度 color: rgba(255, 0, 0, 0.75);

圓角 border-radius: 5px;

漸變 background:linear-gradient(red, green, blue);

陰影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);

倒影 box-reflect: below 2px;

文字裝飾 text-stroke-color: red;

文字溢出 text-overflow:ellipsis;

背景效果 background-size: 100px 100px;

邊框效果 border-image:url(bt_blue.png) 0 10;

轉換
旋轉 transform: rotate(20deg);

傾斜 transform: skew(150deg, -10deg);

位移 transform:translate(20px, 20px);

縮放 transform: scale(。5);

平滑過渡 transition: all .3s ease-in .1s;

動畫 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;

22、CSS3新增偽類有那些?

p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素。
p:last-of-type  選擇屬於其父元素的最后 <p> 元素的每個 <p> 元素。
p:only-of-type  選擇屬於其父元素唯一的 <p> 元素的每個 <p> 元素。
p:only-child    選擇屬於其父元素的唯一子元素的每個 <p> 元素。
p:nth-child(2)  選擇屬於其父元素的第二個子元素的每個 <p> 元素。
:enabled  :disabled 控制表單控件的禁用狀態。
:checked        單選框或復選框被選中。

23、介紹一下標准的CSS的盒子模型?低版本IE的盒子模型有什么不同的?


在標准盒模型中,元素寬度 = width + padding + border + margin。
怪異(IE)盒模型中,元素寬度 = width + margin
標准瀏覽器通過設置 css3 的 box-sizing: border-box 屬性,觸發“怪異模式”解析計算寬高

24、display:inline-block 什么時候不會顯示間隙?

原因:
元素被當成行內元素排版的時候,元素之間的空白符(空格、回車換行等)都會被瀏覽器處理,
根據white-space的處理方式(默認是normal,合並多余空白),
原來HTML代碼中的回車換行被轉成一個空白符,在字體不為0的情況下,空白符占據一定寬度,所以inline-block的元素之間就出現了空隙。
這些元素之間的間距會隨着字體的大小而變化,當行內元素font-size:16px時,間距為8px。
解決方案:
* 將子元素放置在同一行
* 為父元素中設置font-size: 0,在子元素上重置正確的font-size
* 為inline-block元素添加樣式float:left
* 設置子元素margin值為負數
* 設置父元素,display:table和word-spacing

25、行內元素float:left后是否變為塊級元素?

行內塊級元素,
設置成這個屬性的元素會同時擁有行內和塊級的特性,最明顯的不同是它的默認寬度不是100%,行內元素默認100%寬度占據一行
這時候給行內元素設置 padding-top 和 padding-bottom 或者 width、height 都是有效果的

26、在網頁中的應該使用奇數還是偶數的字體?為什么呢?

偶數字號相對更容易和 web 設計的其他部分構成比例關系
Windows 自帶的點陣宋體(中易宋體)從 Vista 開始只提供 12、14、16 px 這三個大小的點陣

27、::before 和 :after中雙冒號和單冒號 有什么區別?解釋一下這2個偽元素的作用

單冒號(:)用於css3的偽類
雙冒號(::)用於css3的偽元素
想讓插入的內容出現在其它內容前,使用::before,否者,使用::after;
在代碼順序上,::after生成的內容也比::before生成的內容靠后。
如果按堆棧視角,::after生成的內容會在::before生成的內容之上
::before就是以一個子元素的存在,定義在元素主體內容之前的一個偽元素。
並不存在於dom之中,只存在在頁面之中。:before 和 :after 這兩個偽元素,是在CSS2.1里新出現的。
起初,偽元素的前綴使用的是單冒號語法,但隨着Web的進化,在CSS3的規范里,偽元素的語法被修改成使用雙冒號,成為::before ::after

28、如果需要手動寫動畫,你認為最小時間間隔是多久,為什么?(阿里)

多數顯示器默認頻率是60Hz,即1秒刷新60次,所以理論上最小間隔為1/60*1000ms = 16.7ms。

29、CSS3動畫(簡單動畫的實現,如旋轉等)

div
{
  animation:mymove 5s infinite;
  -webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}

30、base64的原理及優缺點

優點可以加密,減少了 HTTTP 請求 
缺點是需要消耗 CPU 進⾏編解碼

31、流體布局、聖杯布局、雙飛翼布局

流式布局:
* 百分比布局,同時搭配 max-width、min-width使用,解決屏幕差異化
* 缺點:頁面元素寬度是百分比,但是頁面的字體等元素大小是固定的px,導致屏幕如果過大的話,
  雖然元素被拉伸邊長了,但是字體沒有變大,導致頁面顯示非常不協調。
聖杯布局: 兩側寬度固定,中間寬度自適應的“三欄布局“
<div id="container">
    <div id="center">center</div>
    <div id="left">left</div>
    <div id="right">right</div>
</div>
container包裹中,先展示center,再讓left和right的float顯示
雙飛翼布局:兩側寬度固定,中間寬度自適應的“三欄布局”
<div id="container">
    <div id="center">center</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
* 和聖杯布局不同的是,container 容器只是包裹 center 元素,且 container 容器進行浮動
* left 和 right 都在 container 容器外部浮動
flex實現 三欄布局:他們其實都是差不多的

32、stylus/sass/less區別

都是CSS 預處理器技術
Less 使用 .less 擴展名
Sass 使用.scss 擴展名
Stylus 支持的語法要更多樣性一點,它默認使用 .styl 的文件擴展名
Sass 同時也支持老的語法,就是不包含花括號和分號的方式, 縮進式寫法:
變量的定義:
  Less css中變量都是用@開頭的
  sass變量必須是以$開頭的,然后變量和值之間使用冒號(:)隔開,和css屬性是一樣的
  stylus對變量是沒有任何設定的,可以是以$開頭,或者任何的字符,而且與變量之間可以用冒號,空格隔開,但是在stylus中不能用@開頭
嵌套:
CSS中相同的 parent 引用多個元素
sass,Less,stylus都支持多層嵌套
運算符:
sass,Less,stylus都支持運算
body {
  margin: (14px/2);
  top: 50px + 100px;
  right: 80 * 10%;
}
顏色函數:
sass的顏色處理函數:
lighten($color, 10%); 
darken($color, 10%);  
saturate($color, 10%);   
$color: #0982C1;
h1 {
  background: $color;
  border: 3px solid darken($color, 50%);
}
Less css顏色處理函數:
lighten(@color, 10%); 
darken(@color, 10%);  
saturate(@color, 10%); 
@color: #0982C1;
h1 {
  background: @color;
  border: 3px solid darken(@color, 50%);
}
Stylus顏色處理函數:
lighten(color, 10%); 
darken(color, 10%);  
saturate(color, 10%);
color = #0982C1 
h1
  background color
  border 3px solid darken(color, 50%)

導入 (Import),預處理css的導入最后都會生成一個css文件
  @ import "1.css";
  @ import "file.{type}";
繼承:
sass可通過@extend來實現, Less 表現的稍微弱一些,更像是混入寫法:
sass如下:
.success {
  @extend .message;
  border-color: green;
}
less如下:
.success {
  .message;
  border-color: green;
}
Mixins(混入):::
Sass 的混入語法:
@mixin error($borderWidth: 2px) {
  border: $borderWidth solid #F00;
  color: #F00;
}
.generic-error {
  padding: 20px;
  margin: 4px;
  @ include error(); //這里調用默認 border: 2px solid #F00;
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  @ include error(5px); //這里調用 border:5px solid #F00;
}

Less CSS 的混入語法:
.error(@borderWidth: 2px) {
  border: @borderWidth solid #F00;
  color: #F00;
}
.generic-error {
  padding: 20px;
  margin: 4px;
  .error(); //這里調用默認 border: 2px solid #F00;
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  .error(5px); //這里調用 border:5px solid #F00;
}

.Stylus 的混入語法:
error(borderWidth= 2px) {
  border: borderWidth solid #F00;
  color: #F00;
}
.generic-error {
  padding: 20px;
  margin: 4px;
  error(); 
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  error(5px); 
}

在sass中,還支持條件語句:
$lte7: true;
$type: monster;
.ib{
    display:inline-block;
    @if $lte7 {
        *display:inline;
        *zoom:1;
    }
}
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

for循環有兩種形式:
1.@for $var from <start> through <end>
2.@for $var from <start> to <end>。

同時支持each命令,作用與for類似:
$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

33、postcss的作用

它可以被理解為一個平台,可以讓一些插件在上面跑
它提供了一個解析器,可以將CSS解析成抽象語法樹
通過PostCSS這個平台,我們能夠開發一些插件,來處理CSS。熱門插件如autoprefixer
npm install -g postcss-cli     //全局安裝postcss
npm install -g autoprefixer      //全局安裝autoprefixer
autoprefixer 插件會幫我們做好兼容處理

34、垂直塌陷及解決方法

.parent {
    margin-top: 200px;
    
    width: 200px;
    height: 200px;
    background: red;
  }

  .child {
    margin-top: 50px;
    
    width: 100px;
    height: 100px;
    background: black;
  }


parant的margintop=200px,正常效果,但是child的margintop=50px卻沒有給到我們預期的效果
border,給parent加上border,就是說child有了頂部的參考了,所以他的margintop就起效

35、粘性定位通常在什么場景下使用,使用方法,使用條件?

* 場景:場景自定義,我通常用在header,很好用
* 使用方法:設置 position:sticky 同時給一個 (top,bottom,right,left) 之一即可
* 使用條件:
  1. 父元素不能overflow:hidden或者overflow:auto屬性。
  2. 必須指定top、bottom、left、right4個值之一,否則只會處於相對定位
  3. 父元素的高度不能低於sticky元素的高度
  4. sticky元素僅在其父元素內生效

36、css有哪些內置函數?舉兩個具體用法?

calc()
cubic-bezier()
hsl()
hsla()
linear-gradient()
radial-gradient()
repeating-linear-gradient()
repeating-radial-gradient()
rgb()
rgba()
var()


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM