面试-CSS

Charlotte412
235 阅读6分钟

1.盒子模型

盒子模型就是所有的HTML元素都可以看作盒子，由外边距margin、边框border、内填充padding、以及内容content组成。width与height设置的是content的宽高，这是标准盒子模型。还有一种IE盒子模型，width与height设置的不是content的宽高，而是content、padding和border的宽高的总和。可以通过css属性box-sizing来切换标准盒子模型（content-box）和IE盒子模型（border-box）。

2.垂直居中

// 在父元素上使用flex布局 
.vertical{
    display: flex;
    align-item: center;
}

// 使用绝对定位和transform（绝对定位和margin也可以）
.vertical{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

// 如果是单行文本可以使用line-height,让其与包含元素的高度相等即可。
.vertical{
    height: 60px;
    line-height: 60px;
}

// 父元素设置display为table,子元素设置display为table-cell，vertical-align为middle
.parent{
    display: table;
}
.child{
    display: table-cell;
    vertical-align: middle;
}
  1. 三栏布局

可以使用浮动float、绝对定位absolute、或者flex布局来实现。

// flex布局
.home{
    display: flex;
    width: 100%;
    height: 300px;
    background: #000;
    .left,.right {
        width: 300px;
        height: 100%;
        background: rgb(14, 214, 171);
    }
    .mid {
        flex: 1;
        height:100%;
        background: #ff5555;
    }
}

// 使用float,这里要注意浏览器解析HTML文档是从上到下按顺序解析的，mid元素和right元素要换下位置（mid元素放在最下面），否则设置右浮动不会对mid有影响
.home{
    width: 100%;
    height: 300px;
    background: #000;
    .left,.right {
        width: 300px;
        height: 100%;
        background: rgb(14, 214, 171);
    }
    .left{
        float: left;
    }
    .right{
        float: right;
    }
    .mid {
        margin-left: 300px;
        margin-right: 300px;
        height:100%;
        background: #ff5555;
    }
}

// 使用绝对定位，mid元素和right元素要换下位置（mid元素放在最下面），原因同float实现方案一样
.home{
    position: relative;
    width: 100%;
    height: 300px;
    background: #000;
    .left,.right {
        position: absolute;
        width: 300px;
        height: 100%;
        background: rgb(14, 214, 171);
    }
    .left{
        left: 0;
    }
    .right{
        right: 0;
    }
    .mid {
        margin-left: 300px;
        margin-right: 300px;
        height:100%;
        background: #ff5555;
    }
}

4.选择器权重计算方式

常用的选择器有ID选择器、类选择器、类型选择器，他们的优先级是递减的。通配选择符（*）关系选择符（+, >, ~, ' ', ||）和否定伪类（:not()）对优先级没有影响。给元素添加的内联样式(例如，style="font-weight:bold") 总会覆盖外部样式表的任何样式，因此可看作是具有最高的优先级。当在样式中使用!important时，此声明将覆盖任何其他声明（优先级最高）。

  • 第一等：代表内联样式，如: style=””，权值为1000。
  • 第二等：代表ID选择器，如：#content，权值为0100。
  • 第三等：代表类，伪类和属性选择器，如.content，权值为0010。
  • 第四等：代表标签选择器和伪元素选择器，如div p，权值为0001。
  • 通配符、子选择器、相邻选择器等的。如、>、+,权值为0000。继承的样式没有权值。

5.清除浮动的方法

清除浮动主要是为了防止父元素塌陷，清除浮动的方法很多，常用的是clearfix伪类。

// clearfix
<div class="outer clearfix">
    <div class="inner">inner</div>
</div>
.outer{
    background: blue;
}
.inner{
    width: 100px;
    height: 100px;
    background: red;
    float: left;
}
.clearfix:after{
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}

// 额外加一个div，clear:both
<div class="container">
    <div class="inner"></div>
    <div class="clear"></div>
</div>
.container{
    background: blue;
}
.inner {
    width: 100px;
    height: 100px;
    background: red;
    float: left;
}
.clear{
    clear:both;
}

// 触发父盒子BFC，overflow:hidden
<div class="outer">
    <div class="inner">inner</div>
</div>
.outer{
    background: blue;
    overflow: hidden;
}
.inner {
    width: 100px;
    height: 100px;
    background: red;
    float: left;
}
  1. flex

相关链接

  1. BFC (block formatting context) 块状格式化上下文
  • 根元素(html)
  • 浮动元素（元素的 float 不是 none）
  • 绝对定位元素（元素的 position 为 absolute 或 fixed）
  • 行内块元素（元素的 display 为 inline-block）
  • 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
  • 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
  • 匿名表格单元格元素（元素的 display为 table、table-row、table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
  • overflow 值不为 visible 的块元素
  • display 值为 flow-root 的元素
  • contain 值为 layout、content或 paint 的元素
  • 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
  • 网格元素（display为 grid 或 inline-grid 元素的直接子元素）
  • 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
  • column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

BFC布局规则:

  • 内部的box会在垂直方向，一个接一个的放置。
  • box垂直方向的距离有margin决定。属于同一个BFC的两个相邻box的margin会发生重叠
  • 每个元素的左外边距与包含块的左边界相接触，即使浮动元素也是如此。
  • BFC的区域不会与float的元素区域重叠。
  • 计算BFC的高度时，浮动子元素也参与计算。
  • BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。

作用：

  • 父元素塌陷
  • 外边距重叠
  • 清除浮动

8.如何实现一个自适应的正方形

// vw 视窗宽度，1vw=视窗宽度的1%
.square {
    width: 10vw;
    height: 10vw;
    background: red;
}
// 利用margin或者padding的百分比计算是参照父元素的width属性
.square {
    width: 10%;
    padding-bottom: 10%; 
    height: 0; // 防止内容撑开多余的高度
    background: red;
}
  1. 如何用css实现一个三角形
// 使用border属性
.triangle{
    display: inline-block;
    width: 0;
    height: 0;
    border-width: 100px;
    border-color: transparent transparent transparent pink;
    border-style: solid;
}
// 利用CSS3的clip-path属性

.triangle {
    display: inline-block;
    width: 30px;
    height: 60px;
    background: red;
    clip-path: polygon(0px 0px, 0px 60px, 30px 30px); // 将坐标(0,0),(0,60),(30,30)连成一个三角形
}

10.link 和 @import的区别

页面使用css有三种方法，外部样式（link标签引入），内部样式（写在style标签里），内联样式（写在元素的标签上style属性）。link和import都可以对css样式进行外部引用。

(1). 从属关系区别：@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

(2). 加载顺序区别：加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

(3). 兼容性区别：@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

(4). DOM可控性区别：可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

avatar
文章
阅读
粉丝