動態

詳情 返回 返回

css面試題 - 動態 詳情

盒模型

常見的盒模型有w3c盒模型（又名標準盒模型）box-sizing:content-box和IE盒模型（又名怪異盒模型）box-sizing:border-box。
標準盒子模型：寬度=內容的寬度（content）+ border + padding + margin
低版本IE盒子模型：寬度=內容寬度（content+border+padding）+ margin

css3 新特性

常問：

  1. word-wrap 文字換行
  2. text-overflow 超過指定容器的邊界時如何顯示
  3. text-decoration 文字渲染
  4. text-shadow文字陰影
  5. gradient漸變效果
  6. transition過渡效果 transition-duration：過渡的持續時間
  7. transform拉伸，壓縮，旋轉，偏移等變換
  8. animation動畫
  9. audio音頻
  10. vadio視頻
  11. RGBA和透明度

css3 邊框

border-radius 圓角
box-shadow 盒子陰影
border-image 邊框圖片

css3 背景

background-image 背景圖片
background-size 背景大小
background-origin 背景圖像的位置區域
background-clip 背景剪裁屬性是從指定位置開始繪製

css選擇器及優先級

!important
內聯樣式
ID選擇器
類選擇器 屬性選擇器 偽類選擇器
元素選擇器 關係選擇器 偽元素選擇器
通配選擇器
1，class選擇符：10，id選擇符：100，內聯樣式權值最大，為1000

  1. !important聲明的樣式優先級最高，如果衝突再進行計算。
  2. 如果優先級相同，則選擇最後出現的樣式。

  3. 繼承得到的樣式的優先級最低。

    CSS選擇器有哪些？哪些屬性可以繼承？

  • id選擇器(#myid)、
  • 類選擇器(.myclassname)、
  • 標籤選擇器(div, h1, p)、
  • 相鄰選擇器(h1 + p)
  • 子選擇器（ul > li）、
  • 後代選擇器（li a）、
  • 通配符選擇器（*）、
  • 屬性選擇器（a[rel=”external”]）、
  • 偽類選擇器（a:hover, li:nth-child）

可繼承的屬性：

font-size,
font-family,
color

不可繼承的樣式：

border,
padding,
margin,
width,
height

BFC

BFC是塊級格式化上下文。

  • 計算BFC高度時，浮動元素也會參與計算、
  • 在BFC這個元素垂直方向的邊距會發生重疊
  • BFC的區域不會與浮動元素的box重疊
  • BFC在頁面上是一個獨立的容器，其裏外的元素不會互相影響
    BFC應用:
    防止margin重疊
    清除內部浮動
    自適應兩欄佈局
    防止字體環繞

BFC的生成條件：

根元素
float值不為none
overflow的值不為visible
display的值為inline-block,table-cell,table-caption
position的值為absolute，fixed

彈性盒

display:flex;
align-items:center;
justify-conter:center;

圖片整合技術的優勢

  1. 減少對服務器的請求次數

  2. 減少圖片體積，提高加載速度

    元素垂直水平居中

    不需要知道寬和高

position：absolute；top:0；left:0；right:0；bottom:0;margin:auto;

需要知道寬和高

position:absolute;top:50%;left:50%;margin-top:+/-50%(自身高度的50%)；margin-left:+/-50%;

元素水平居中

margin:0 auto;

css定位方式

position：static;//默認定位
position：relative;//相對定位 （參照物是自身,不脱離文檔流）
position:absolute;//絕對定位 （參照物是父元素，遵循就近原則，尋找父元素及其爺爺元素中設置 position:relative 屬性進行定位，脱離文檔流；如果都不設置定位屬性，就以根元素<html>進行定位。）
position:fixed;//固定定位 （參照物是可視區窗口，脱離文檔流）相對於瀏覽器窗口進行定位。
position:sticky;//

display：none和visibility：hidden區別？

display：none指的是元素完全不陳列出來，不佔據空間，涉及到了DOM結構，故產生重排和重繪
visibility：hidden指的是元素不可見但存在，保留空間，不影響結構，故只產生重繪，但不可觸發綁定事件

rem和em的區別

總而言之，就是瀏覽器把誰轉化成“px”
rem 依據的是html的font-size值。1rem=16px
em 依據的是父元素的font-size值。

清除浮動

方法一:clear:both

clear:both;

方法二:萬能清除浮動

    .clean{
        content:'.';
        height:0;
        display:block;
        clear:both;
        overflow:hiddden;
        visibility:hidden;
    }

display 有哪些值？説明他們的作用?

inline默認。此元素會被顯示為內聯元素，元素前後沒有換行符。

block此元素將顯示為塊級元素，此元素前後會帶有換行符。

none此元素不會被顯示（隱藏）。

inline-block行內塊元素。（CSS2.1 新增的值）

list-item此元素會作為列表顯示。

table此元素會作為塊級表格來顯示（類似table），表格前後帶有換行符

為什麼要初始化 CSS 樣式

因為瀏覽器的兼容問題，不同瀏覽器對有些標籤的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。

瀏覽器內核

  • Trident IE瀏覽器
  • Gecko Firefox瀏覽器
  • Webkit Chrome Safari
  • Blink Chrome Opera

移動端1像素問題

一般來説，在pc端瀏覽器中，設備像素比dpr等於1,1個css像素就等於1個物理像素；但是在retina屏幕中，dpr普遍是2或者3 ，1個css像素不在等於一個物理像素，因此在實際設計稿中粗不少。

  1. 偽元素+scale
.box{
    width:100%;
    height:1px;
    margin:20px 0;
    position:relative;
}
.box::after{
    content:'';
    position:absolute;
    bottom:0;
    width:100%;
    height:1px;
    transform:scaleY(0.5);
    transform-origin:0 0;
    background:red;
}

<div class="box"><div>
  1. border-image
div{
    border-width:1px 0px;
    -webkit-border-image:url(xxx.png) 2 0 stretch;
    border-image:url(xxx.png) 2 0 stretch;
}

做移動端開發有沒有遇到不兼容的問題?如何解決？(https://yq.aliyun.com/articles/587092)

1.使用背景圖來代替img標籤

   background:url(../images/icon/all.png) no-repeat center center;
   -webkit-background-size:50px 50px;
   background-size: 50px 50px;
   display:inline-block; 
   width:100%; 
   height:50px

  1. 防止手機中網頁放大和縮小
    設置meta標籤中的viewport;

     <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

  2. 浮動子元素撐開父元素盒子高度

    解決方法如下：

    1.父元素設置為 overflow: hidden;

    2.父元素設置為 display: inline-block;等

    如何解決移動端滾動條卡頓問題？

    安卓或者ios
    -webkit-overflow-scrolling: auto; / 當手指從觸摸屏上移開，滾動會立即停止 */
    -webkit-overflow-scrolling: touch; /* 當手指從觸摸屏上移開，會保持一段時間的滾動 ，繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會創建一個新的堆棧上下文。

link 與 @import 的區別

a.從屬關係區別
@import是 CSS 提供的語法規則，只有導入樣式表的作用；link是HTML提供的標籤，不僅可以加載 CSS 文件，還可以定義 RSS、rel 連接屬性等
b.加載順序區別
加載頁面時，link標籤引入的 CSS 被同時加載；@import引入的 CSS 將在頁面加載完畢後被加載。
c.兼容性區別
@import是 CSS2.1 才有的語法，故只可在 IE5+ 才能識別；link標籤作為 HTML 元素，不存在兼容性問題。
d.DOM可控性區別
可以通過 JS 操作 DOM ，插入link標籤來改變樣式；由於DOM方法是基於文檔的，無法使用@import的方式插入樣式。

常見的佈局方式

  1. 聖盃佈局

    body{
min-width: 550px;
}
#container{
padding-left: 200px;
padding-right: 150px;
}
#container .column{
float: left;
}
#center{
width: 100%;
}
#left{
width: 200px;
margin-left: -100%;
position: relative;
right: 200px;
}
#right{
width: 150px;
margin-right: -150px;
}
<div id="container">
    <div id="center" class="column">center</div>
    <div id="left" class="column">left</div>
    <div id="right" class="column">right</div>
</div>

在這裏插入圖片描述

  1. 雙飛翼佈局
body {
    min-width: 500px;
}
#container {
    width: 100%;
}
.column {
    float: left;
}
#center {
    margin-left: 200px;
    margin-right: 150px; 
}
#left {
    width: 200px;
    margin-left: -100%;
}
#right {
    width: 150px;
    margin-left: -150px;
}
<div id="container" class="column">
    <div id="center">center</div>
</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>
sass , Javascript , less
點贊

Add a new 評論

Some HTML is okay.