1.盒子模型

wac标准: width: content
ie标准: width: content+padding+border
elementUi,bootstrap: box-sizing:border-box;

前端面试系列--css

2.选择器优先级

!important > 行内样式 > #id > .class > tag > * > 继承 > 默认

前端面试系列--css

3.BFC

块格式化上下文（Block Formatting Context，BFC）

3.1 触发条件

1. 根元素
1. position: absolute/fixed
2. display: inline-block / table
3. float 元素
4. ovevflow !== visible

3.2 外边距塌陷

当两个元素垂直排列时，第一个元素的下外边距与第二个元素的上外边距会发生合并
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并

3.2.1 外边距塌陷情况

<style>
        .blue {
            background: blue;
            margin: 10px 0;
        }
        
        .red {
            background: red;
            margin: 10px 0;
        }
    </style>
<body>
    <div class="blue">blue</div>
    <div class="red">red</div>
</body>

前端面试系列--css

3.2.2 外边距塌陷解决

<style>
        .blue {
            background: blue;
            margin: 10px 0;
        }
        
        .red-box {
            overflow: hidden;
        }
        
        .red {
            background: red;
            margin: 10px 0;
        }
    </style>
<body>
    <div class="blue">blue</div>
    <div class="red-box">
        <div class="red">red</div>
    </div>
</body>

前端面试系列--css

3.3 参考

https://www.cnblogs.com/ianya...

4.link与@import

4.1 区别

@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
link引入的样式权重大于@import引入的样式。(@import引入的样式，会被层叠掉了。其虽然后被加载，却会在加载完毕后置于样式表顶部，最终渲染时自然会被下面的同名样式层叠)

4.2参考

https://www.jianshu.com/p/fc1...

5.如何居中一个元素

前端面试系列--css

5.1 水平居中

5.2 垂直居中

5.3 水平垂直居中

5.4 参考

https://github.com/ljianshu/B...

6. css继承

6.1什么是css继承

继承就是指子节点默认使用父节点的样式属性。
1.可继承：颜色，文字，字体间距行高对齐方式，和列表的样式可以继承

不可继承: 其它

所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
终端块状元素可继承：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

6.2参考

https://www.nowcoder.com/ques...

7.css选择器

7.1 参考

8.px,em,rem

8.1 px

px:像素,px是相对于显示器屏幕分辨率而言的
1920*1024 前者是屏幕宽度总共有1920个像素宽度后者则是高度为1024个像素

8.2 em

em的值并不是固定的；
em会继承父级元素的字体大小。
任意浏览器的默认字体高都是16px

.p1 {
            font-size: 1em;
        }
        
        .div {
            font-size: 30px;
        }
        
        .div p {
            font-size: 1em;
        }
    </style>
    <body>
        <div class="p1">我的父级是body</div>
        <div class="div">
            <p>我的父级是div</p>
        </div>
    </body>

前端面试系列--css

8.3 rem

rem是css3中新增加的单位相对的只是HTML根元素，默认也是16px
通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应；
区别em是根据父元素继承相应大小而不是固定的，rem是继承html根元素的大小
只有改变根元素html的值才能改变rem的值

psd设计图的宽度是750px,如何做移动端的适配?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        
        .box {
            width: 7.5rem;
            height: 1.0rem;
            line-height: 1.0rem;
            border: 1px solid #ccc;
        }
    </style>
    <script>
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
    </script>
</head>

<body>
    <div class="box">
        <p>i am p</p>
    </div>
    <!-- 不能放在这里 -->
    <!-- <script>
        (function() {
            document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
        })
    </script> -->
</body>

</html>

前端面试系列--css

8.4 参考

https://www.jianshu.com/p/a0b...

9. 文字超出显示省略号

9.1 单行

<style>
        .p1 {
            width: 100px;
            border: 1px solid #ccc;
        }
        
        .p1 {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }
    </style>
    <body>
        <p class="p1">CSS文本溢出显示省略号CSS文本溢出显示省略号</p>
    </body>

前端面试系列--css

9.2 多行

<style>
        .div {
            width: 100px;
            border: 1px solid #ccc;
        }
        
        .div {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    </style>
    <body>
        <div class="div">CSS文本溢出显示省略号CSS文本溢出显示省略号CSS文本溢出显示省略号</div>
    </body>

前端面试系列--css

10. CSS创建一个三角形的原理

<style>
        .box {
            width: 0;
            height: 0;
            border-top: 10px solid red;
            border-right: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-left: 10px solid transparent;
        }
    </style>
    <body>
        <div class="box"></div>
    </body>

前端面试系列--css

11 chrome显示小于12px字体

<style>
        .shrink {
            -webkit-transform: scale(0.8);
            -o-transform: scale(1);
            display: inline-block;
        }
    </style>
    <div class="shrink">
        shrink
    </div>

前端面试系列--css

12.transform

transform：转换
可以可以对元素进行移动、缩放、转动、拉长或拉伸
2d和3d

13. transition

过渡
四个过渡属性
- 规定应用过渡的 CSS 属性的名称
- 定义过渡效果花费的时间。默认是 0。
- 规定过渡效果的时间曲线。默认是 "ease"。
- 规定过渡效果何时开始。默认是 0。

<style>
        .box {
            width: 100px;
            height: 100px;
            background: red;
            transition: width 2s ease 1s;
        }
        
        .box:hover {
            width: 200px;
        }
    </style>
    <body>
        <div class="box"></div>
    </body>

前端面试系列--css

前端面试系列--css

1.盒子模型

2.选择器优先级

3.BFC

3.1 触发条件

3.2 外边距塌陷

3.2.1 外边距塌陷情况

3.2.2 外边距塌陷解决

3.3 参考

4.link与@import

4.1 区别

4.2参考

5.如何居中一个元素

5.1 水平居中

5.2 垂直居中

5.3 水平垂直居中

5.4 参考

6. css继承

6.1什么是css继承

6.2参考

7.css选择器

7.1 参考

8.px,em,rem

8.1 px

8.2 em

8.3 rem

8.4 参考

9. 文字超出显示省略号

9.1 单行

9.2 多行

10. CSS创建一个三角形的原理

11 chrome显示小于12px字体

12.transform

13. transition

相关推荐