CSS面試題目（參考）

1.介紹一下標準的css的盒子模型？低版本IE的盒子模型有什麼不同

標準模型由四部分組成：

• #內容區域: 可以放置元素的區域如文字,圖像等，一般設定寬高指的是這個內容的寬高
• 內邊距的區域：內容與邊框之間的距離
• #邊框區域: 邊框
• 外邊框區域：由外部邊框限制，用空白區域擴展邊框區域，開分開相鄰的元素

模型區分：
標準表型指的是設定box-sizing為content-box的盒子模型，一般width, height指的是content的寬高。 IE盒模型指的是box-sizing為border-box的盒子。寬高的計算是content padding border;

專題推薦：2020年CSS面試題總結（最新）

2. CSS選擇符有哪些？那些屬於可以繼承？

• id選擇器(#myid)
• 類別選擇器(.myclassName)
• 標籤選擇器(p,h1,p)
• 子代選擇器(ul>li)
• 後位選擇器(li a)
• 通配符選擇器(*)
• 屬性選擇器(a[rel=" external"])
• 偽類別選擇器(a:hover,li:nth-child)

可繼承的樣式： font-size font-family color
不可繼承的樣式： border padding margin height width

3. css優先權如何計算?

• 優先權就近原則，同權重情況下樣式定義最近這位準
• 載入樣式以最後載入的定位為準

優先權為：

• 同權重： 內嵌樣式(標籤內部)> 嵌入樣式表(目前檔案中)>外部樣式(外部檔案中)
• !important >id >class >tag
• !important 比內聯優先權高

• ##4. display有哪些值？說明他們的作用

block  塊類型。預設寬度為父元素寬度，可設定寬高，換行顯示

• none  元素不顯示，並從文件流中移除
• inline  行內元素，預設寬度為內容寬度，不可設定寬高，同儕顯示
• inline-block   預設寬度為內容寬度，可設定寬高，同儕顯示
• list-item 像區塊類型元素一樣，可以設定寬高，同行顯示
• table  此元素會作為會計表格來顯示

inherit  規定應該從父元素繼承display屬性的值

5. position的值releave和absolute定位遠點是？

absolute 產生絕對定位元素，相對與值部位static的第一個父元素進行定位

• fixed 產生絕對的元素，相對於瀏覽器視窗進行定位

relative 產生相對定位的元素，相對於其正常位置進行定位

static 預設值。沒有定位，元素出現在正常出現的流中

inherit 規定從父元素繼承position屬性的值

• 6. css有哪些特性?

• 過渡

    transition-property:width
    transition-duration:1s
    transition-timing-function:linear
    transition-delay:2s

• 動畫

animation:動畫名稱，一個週期花費時間,雲頂曲線(預設ease),動畫延遲(默認0),動畫播放次數(預設1),是否反向播放動畫(預設normal),是否暫停動畫(預設running)

形狀轉換

• #

  transform: 使用于2D或3D转换的元素
  transform-origin: 装换元素的位置(围绕哪个点进行装换).默认(x,y,z);

選擇器

陰影

• #box-shadow: 水平陰影的位置垂直陰影的位置模糊距離陰影的大小陰影的顏色陰影開始的方向(預設是從裡向外，設定inset就是從外往裡)

邊框圖片

• border-image: 設定圖片路徑設定邊框背景圖的分割方式設定或擷取物件的邊框厚度設定或擷取物件的邊框背景圖向外擴展設定邊框圖片的平鋪方式

• #邊框圓角

    border-radius: n1 n2 n3 n4;
  /* n1-n4 四个值得顺序是左上角，右上角，右下角，左下角 */

• #反射(倒影)

• box-reflect: 方向[above-上|below-下|right-右|left-左],偏移量,遮罩圖片

• 文字

換行word-break: normal(預設使用瀏覽器預設的換行規則)|break-all(允許在單字內換行)|keep-all(只能在半角空格或連字號處換行)

• 超出省略號

overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;

多行省略號

• overflow:hiden;
  text-overflow:ellipsis;用省略号"..."隐藏超出范围的文本
  display:-webkit-box;  //将对象作为弹性伸缩盒子模型显示
  -webkit-line-clamp:2; //用来限制在一个块元素显示的文本的行数
  -webkit-box-orient:vertical;设置弹性盒对象的子元素的排列方式

#文字陰影

######text-shadow: 水平陰影垂直陰影模糊陰影陰影顏色############顏色#########rgba(rgb顏色值，a為透明度)#########漸變##### #####線性漸層與徑向漸層####

• filter(滤镜)

filter: 滤镜效果(透明度)

• 弹性布局

弹性布局就是flex布局

-栅格布局

栅格化布局。就是grid

• 盒模型

• border-box 边框和内边距包含在元素的宽高之内
• content-box 边框和内边距不包含在元素的宽高之内

7. 请解释一下css3的flex(弹性盒布局模型)以及使用场景

一个用于页面布局的全新css3功能，flexbox可以把列表放在同一个方向(从上到下排列，从左到右)，并且列表能延伸到占用可用的空间，较为复杂的布局还可以嵌套一个伸缩容器(flex container)来实现。采用flex布局的元素，成为flex容器。常规布局是基于块和内联流方向，而flex布局是基于flex布局flex-flow流可以很方便的用来做居中，能对不同屏幕大小自适应，在布局上有了比以前更加灵活的空间

8. 经常遇到的浏览器的兼容性问题有哪些，原因，解决方法是什么

• png24位的图片在Ie6浏览器上出现背景。解决方案是做成png8
• 浏览器默认的margin和padding不同。解决方案是假一个全局的*{margin:0;padding:0}来统一
• IE6双边距bug；矿属性变迁float后，又有横向的margin情况下，在Ie6显示margin比设置的大。解决方案是在float的标签控制中加入display:inline；将其妆花为行内渐进识别的方式，从总体中逐步排除局部。
• 设置较小高度标签(一般小于10px)，在IE6，IE7中高度超出自己设置高度。解决方法:给超出高度的标签设置overflow:hidden;或者设置行高line-hieght小于你设置的高度
• chrome中文界面默认或将小于12px的文本强制按照12px的文本强制按照12px显示，可通过加入css属性 -webkit-text-size-adjust:none 解决

移动端

• 1px边框问题。解决方案采用微元素模拟的方式

 .scale{
  position: relative;
  border:none;
 }
.scale:after{
  content: '';
  position: absolute;
  bottom: 0;
  background: #000;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

• 点透问题，在安卓某些版本触发两次点击问题。解决方案：引入fastclick处理点透问题
• 安卓部分版本input里的placeholder位置偏上。解决方案：把input的line-height设为normal
• ios的body位置overflow：hidden后仍然可以滚动。解决方案：一般在所有元素最外层再包一大盒子.wrapper

 .wrapper{
   position:relative;
   overflow:hidden;
 }

• ios滚动卡顿。解决方案：在滚动的容器上加上webkit-over-flow-scrolling:touch;

9. 请解释一下为什么需要清浮动？清浮动的方式

清浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使页面后面的布局不能正常显示

• 父级p定义height
• 在浮动元素后面添加class为clear的空p元素，给这个p设置样式.clear{clear:both}
• 给父容器添加overflow:hidden或者auto样式
• 给父容器添加clearfix的class，用伪类clearfix:after；来这个样式。清除浮动

.clearfix{
    zoom:1;
}
.clear:after{
    content:'.';
    height:0;
    clear:both;
    display:block;
    visibility:hidden;
}

10. margin和padding分别适合什么场景使用？

margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin是用来布局分开元素，使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容与元素之间有一段间距

11.什么是伪类，什么是伪元素，他们的区别？

• 伪类的受体是文档树中已有的元素，而伪元素则创建了一个DOM外的元素
• 伪类用于添加元素的特殊效果，而伪元素则是添加元素的内容
• 伪类使用的一个冒号，为元素使用两个冒号
• 伪类更常用一些简单的动画或者交互的样式，例如滑入滑出，而为伪元素更常用语字体图标，清除浮动等

12. 什么是外边距合并

外边距合并指的是，当两个垂直外边距相遇时，他们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中较大者

13. 实现水平垂直居中

示例：

<p class="md-warp">
    <span class="md-main"></span>
</p>
.md-warp{
    width: 400px;
    height: 300px;
    max-width: 100%;
    border: 1px solid #000;
}
.md-main{
    display: block;
    width: 100px;
    height: 100px;
    background: #f00;
}

水平居中

• margin法
  需要满足三个条件

• 元素定宽
• 元素为块级元素或行内元素设置display:block
• 元素的margin:left或者margin-right都必须设置auto
  三个条件缺一不可

.md-main{
    margin: 0 auto
}

• 定位法

• 元素定宽
• 元素绝对定位，并设置left:50%;
  +元素负做边距margin-left为宽度的一半

.md-wrap{
    position:relative;
}
.md-main{
    position:absolute;
    left:50%;
    margin-left:-50px
}

有些时候元素宽度不是固定的，依然可以使用定位法实现水平居中用到css3中的transform属性中的translate

.md-warp{
    position: relative;
}
// 注意此时md-main不设置width为100px
.md-main{
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
}

• 文字水平居中

直接使用text-align:center即可

垂直居中

• 定位法

和水平居中类似，只是把left:50%换成top:50%,副边距和transform属性进行对应更改即可

优点：能在各个浏览器下工作，结构简单明了，不需要增加额外的标签

 .md-warp{
    position: relative;
}
.md-main{
    position: absolute;
    /* 核心 */
    top: 50%;
    margin-top: -50px;
}

不确定高度的时候

.md-warp{
    position: relative;
}
.md-main{
    position: absolute;
    top: 50%;
    // 注意此时md-main不设置height为100px
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
}

• 单行文本垂直居中

需要满足两个条件：

• 元素内容是单行，并且其高度是固定不变的
• 将其line-height设置成height的值一样

p{
    width: 400px;
    height: 300px;
    border: 1px solid #000;
}
span{
    line-height: 300px;
}

视窗单位的解决办法

让元素在视窗中居中，使用vh实现

.md-warp{
    position: relative;
}
.md-main{
    position: absolute;
    margin: 50vh auto 0;
    transform: translateY(-50%);
}

Flexbox的解决方案

完成这项工作只需要两个样式，在需要水平垂直居中的父元素中设置display:flex和在水平存执居中的元素设置margin:auto

.md-wrap{
    display:flex
}
.md-main{
    display:auto
}

Flexbox的实现文本的水平垂直居中同样很简单

 .md-warp{
    display:flex;
}
.md-main{
    display: flex;
  align-items: center;
  justify-content: center;
    margin: auto;
}

绝对垂直居中

.md-wrap{
    position: relative;
}
.md-main{
    position:absolute;
    top:0'
    right:0
    bottom:0;
    left:0;
    margin:auto;
}

最好不要使用绝对定位，因为他对整体的布局影响相当的大

相关教程推荐：CSS视频教程

以上是CSS面試題目（參考）的詳細內容。更多資訊請關注PHP中文網其他相關文章！