🔒 CSS相关题目

与CSS有关的面试题汇总

选择器

有哪些选择器，以及选择器的权重

三栏布局

编写CSS，实现三栏水平布局，其中left、right定宽，main宽度自适应。

布局：三栏布局（7种方法
三栏布局的5种解决方案及优缺点
圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例

圣杯布局

特点：圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。

/* 给容器设置padding-left 和 padding-right */
#box{
  padding-left:100px;
  padding-right:50px;
}

/* 给儿子们设置左浮动 和 相对定位 */
.center,.left,.right{
  float: left;
  position:relative;
}

/* 左儿子margin-left 和 left */
.left{
  left:-100px;
  margin-left:-100%;
}

/* 右儿子margin-left 和 right */
/* 注意！！！右儿子margin的是left，而定位的是right */
.right{
  right:-50px;
  margin-left:-50px;
}

【点击查看圣杯布局在线代码】

双飞翼布局

特点：为了中间div内容不被遮挡，直接在div.mian内部创建子div.inner用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。【不需要设置相对定位来解决遮挡问题】

【双飞翼布局在线例子】

浮动布局

兼容性好，但是会脱离文档流，需要清除浮动

浮动布局的html代码，center放在最后面！！！！！！！！！！！！！
【点击查看代码】

绝对定位

快捷，但是它脱离文档流，导致后面的子元素也会脱离文档流，使得可使用性较差

【绝对定位实现三栏布局在线例子】

table布局

高度由内容决定。

给容器设置display:table,然后width:100%撑开
给儿子们设置display:table-cell

#box{
  display:table;
  width:100%;
  min-height:300px;
}
#box > div{
  display:table-cell;
}

【点击查看代码】

flex布局

这种布局方式，高度由内容决定。

【flex实现三栏布局在线例子】

grid布局

#box{
  display:grid;
  width:100%;
  grid-template-rows: 300px;  /*设置行高*/
  grid-template-columns: 100px auto 50px;  /*左边100px 中间自适应 右边50px*/
}

【点击查看代码】

flex布局

Flex 布局教程：语法篇

box-sizing

CSS3的box-sizing的取值及各值的说明

隐藏元素

通过CSS隐藏元素的方法，并说明其区别。

移动端适配方案

列出移动端适配各种屏幕尺寸的解决方案(至少3种)