前端总结--css

1.盒子模型

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

2.选择器优先级

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

3.BFC

块级格式化上下文（Block Formatting Context，BFC）
块级格式化上下文（Block Formatting Content）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域
简而言之，可以把BFC理解成一个箱子，箱子内部的元素如何摆放都不会影响外部

3.1 触发条件

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

3.2 外边距塌陷

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

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>

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>

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.如何居中一个元素

5.1 水平居中

5.2 垂直居中

5.3 水平垂直居中

5.3.1 已知高度

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent {
            position: relative;

            height: 300px; /*随便写，只要比child高 */
            border: 1px solid #ccc;
        }

        .child {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -50px 0 0 -50px; /*分别对应高度和宽度的一半 */

            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child">
        </div>
    </div>
</body>

</html> -->

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent {
            position: relative;

            height: 300px;  /*随便写，只要比child高 */
            border: 1px solid #ccc;
        }

        .child {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;

            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child">
        </div>
    </div>
</body>

</html> -->

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent {
            position: relative;

            height: 300px;  /*随便写，只要比child高 */
            border: 1px solid #ccc;
        }

        .child {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child">
        </div>
    </div>
</body>

</html> -->

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent {
            display: flex;
            justify-content: center;
            align-items: center;

            height: 300px;
            border: 1px solid #ccc;
        }

        .child {

            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child">
        </div>
    </div>
</body>

</html> -->

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent {
            display: grid;

            height: 300px;
            border: 1px solid #ccc;
        }

        .child {
            margin: auto;

            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child">
        </div>
    </div>
</body>

</html>

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>

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>

8.4 移动端布局终极解决方案

hotcss

8.5 参考

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>

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>

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>

11 chrome显示小于12px字体

在chrome谷歌下 css设置字体大小为12px及以下时，显示都是一样大小，都是默认12px; ie、火狐正常

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

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>

14. animation(动画)

定义一个属性， @keyfframes + 属性

div{
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 5s;
}
@keyframes myfirst
{
    0%   {background:red;}
    25%  {background:yellow;}
    50%  {background:blue;}
    100% {background:green;}
}

15 opacity: 0、visibility: hidden、display: none 优劣和适用场景

display: none (不占空间，不能点击)（场景，显示出原来这里不存在的结构）
visibility: hidden（占据空间，不能点击）（场景：显示不会导致页面结构发生变动，不会撑开）
opacity: 0（占据空间，可以点击）（场景：可以跟transition搭配）

16 移动端 1px 像素问题及解决办法

16.1为什么会有1px问题

要处理这个问题，必须先补充一个知识点，就是设备的物理像素[设备像素] & 逻辑像素[CSS像素]；

物理像素：
移动设备出厂时，不同设备自带的不同像素，也称硬件像素；
逻辑像素：
即css中记录的像素。

在开发中，为什么移动端CSS里面写了1px，实际上看起来比1px粗；了解设备物理像素和逻辑像素的同学应该很容易理解，其实这两个px的含义其实是不一样的，UI设计师要求的1px是指设备的物理像素1px，而CSS里记录的像素是逻辑像素，它们之间存在一个比例关系，通常可以用 javascript 中的window.devicePixelRatio来获取，也可以用媒体查询的-webkit-min-device-pixel-ratio来获取。当然，比例多少与设备相关。

在手机上border无法达到我们想要的效果。这是因为devicePixelRatio特性导致，iPhone的devicePixelRatio==2，而border-width: 1px;描述的是设备独立像素，所以，border被放大到物理像素2px显示，在iPhone上就显得较粗。

16.2 解决方案

transform: scale(0.5) 很灵活
设置height: 1px，根据媒体查询结合transform缩放为相应尺寸

div {
    height:1px;
    background:#000;
    -webkit-transform: scaleY(0.5);
    -webkit-transform-origin:0 0;
    overflow: hidden;
}

16.3 参考

https://www.jianshu.com/p/31f8907637a6

17 浮动

17.1 float 浮动的原因

使用浮动之后，元素会脱离标准的文档流。

17.2 float 浮动的副作用

两个块级元素，会被浮动元素覆盖

一个块元素，一个行内元素。行内元素如文字会浮动在浮动元素的周围，为浮动元素留出空间

è¿éåå¾çæè¿°

两个块级元素浮动，出现父元素塌缩