前端面试系列--css

1.盒子模型

  1. wac标准: width: content
  2. ie标准: width: content+padding+border
  3. 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 外边距塌陷

  1. 当两个元素垂直排列时,第一个元素的下外边距与第二个元素的上外边距会发生合并

    前端面试系列--css

  2. 当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并

    前端面试系列--css

  3. 假设有一个空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并

    前端面试系列--css

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 区别

  1. @import是 CSS 提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。
  2. 加载页面时,link标签引入的 CSS 被同时加载;@import引入的 CSS 将在页面加载完毕后被加载。
  3. @import是 CSS2.1 才有的语法,故只可在 IE5+ 才能识别;link标签作为 HTML 元素,不存在兼容性问题。
  4. 可以通过 JS 操作 DOM ,插入link标签来改变样式;由于 DOM 方法是基于文档的,无法使用@import的方式插入样式。
  5. 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.可继承:颜色,文字,字体间距行高对齐方式,和列表的样式可以继承

  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

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

8.2 em

  1. em的值并不是固定的;
  2. em会继承父级元素的字体大小。
  3. 任意浏览器的默认字体高都是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

  1. rem是css3中新增加的单位相对的只是HTML根元素,默认也是16px
  2. 通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应;
  3. 区别em是根据父元素继承相应大小而不是固定的,rem是继承html根元素的大小
  4. 只有改变根元素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

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

13. transition

  1. 过渡
  2. 四个过渡属性

    • 规定应用过渡的 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

相关推荐