前端面试系列--css

云端漂移

2019-07-01

关注关注

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