Css

CSS

0、层叠
1、标准元素-》浮动元素-》定位元素（最上面）
2、标准流元素不可以层叠，
3、定位元素会层叠到标准流元素的上面（z-index只适用于定位元素）
4、浮动元素：
1、解析网页的时候，会把域名通过DNS服务器进行解析成对应的ip地址
1、块级元素和行内元素
1、块级元素
1、块级元素（非替换元素）：独占父元素一行，可以设置宽高，默认宽高由内容决定
2、块级元素的居中显示 margin：0 auto
3、块级元素中的子元素，如果没有设置宽高的话，会继承父元素的宽高
2、行内元素
1、行内元素（替换行内元素）：和其他行内元素同一行显示，可以设置宽高,img input
2、行内元素（非替换行内元素）：和其他行内元素同一行显示，不可以设置宽高，宽高由内容决定
3、行内元素的文字：text-alian center
3、两者区别
1、行内非替换元素不可以设置宽高 ， img/iframe属于替换元素
2、块级元素可以嵌套行内元素
3、p元素不要嵌套div元素
4、行内元素对于width,height,margin-top是无效的，但是对于padding-top/bottom,border-top/bottom比较特殊，看起来设置了但是不占据空间

2、HTML5
1、语义化标签：nav，header，footer，section，acticle，aside
2、多媒体元素：video，autio
3、input的type补充

3、CSS的特性 （继承性、层叠性、权重比较）查MDN
0、继承性
1、img、width等不会继承父元素的属性
注意：继承的是计算后的值，而不是属性中的字面量的值
层叠性
1、当元素上的选择器不同的时候，需要看选择器的权重来决定起作用的属性
权重比较
1、内联样式>id选择器 > class选择器(属性选择器、伪类) > 标签选择器（伪元素）
注意：可以通过给权重低的选择器设置 !important 属性来提高当前选择器的权重，使其设置的属性生效
1、CSS选择器
1、属性选择器 [ title ] （表示找到属性为title的所有元素）
2、后代选择器 div span （表示找到div下面所有span元素，包含直接span元素和间接span元素）
div p span （表示找到div下面的p元素下面的span元素）
3、子代选择器 div > span （表示找到div下面直接的span子元素，只包含直接span元素）
4、相邻兄弟选择器 div + p （表示找到div元素后面紧挨着的一个p元素，而且div、p元素必须是兄弟关系）
5、全兄弟选择器 div ~ p （表示找到div元素后面所有的p元素，而且div、p元素必须是兄弟关系）
6、交集选择器 div.one （表示同时符合是div元素并且类名是one的元素）
7、并集选择器 div，.one (表示只要符合其中一个条件，元素就可以改变样式）
8、伪类选择器
1、目标伪类 :target
2、元素状态伪类 :enable
3、动态伪类
:link :visited :hover :focus :active
4、结构伪类
9、 伪元素
p::first-letter （表示找到p元素的第一个字符修改样式）
p::first-line （表示找到p元素的第一行的元素修改样式）

         （再使用before、after伪元素的时候，必须加content:""，否则没有效果）
           p::before      （表示在每个p元素之前加样式或者加不同的文本文字）
           p::after       （表示在每个p元素之后加样式或者加不同的文本文字）
 2、transform
        translate、scale、rotate、skew、transition
 3、vertical-align
 4、颜色渐变  background：linear-gradient
 5、圆角效果：border-radius
 6、设置轮廓：outline
 7、设置元素阴影效果：box-shadow：x偏移量 y偏移量 向外扩展 模糊度 颜色
 8、设置问题的阴影效果： text-shadow

3、定位
1、相对定位(不会脱落标准流，会占空间)：relative （参照点就是自己本身原来的位置 ,设置left，元素向右移动，或者设置-left，元素会向左移动）

 2、绝对定位元素：  定位参照对象的宽度 = left + right +margin-left + margin-right + 绝对定位元素的实际宽度
       1、绝对定位(脱离标准流，不占空间)：absolute  （参照点是最邻近、有定位的元素、不是静态定位的元素）
       2、固定定位(脱离标准流，不占空间)： fiexd  （参照点是浏览器的左上角）
 3、注意
      1、如果两个并列的行内元素，想要移动的话，如果使用margin进行移动的话，会把这两个元素都向左移动，
                                                                        如果使用相对定位的话，右边的元素不会动，左边的元素会覆盖到上面
      2、当使用绝对定位的话，必须得有一个参照点，它会往上一层找  （不是静态定位static）的元素作为坐标点，
           当上一层没有定位的元素的话，还会再往上一层找，直到找到不是静态定位的元素，如果一直找不到，就
           会以浏览器的左上角作为参考点，  所以，如果使用绝对定位的话，可以给父元素一个相对定位。
      3、绝对定位的话：希望相对于父元素进行定位，但是不希望父元素脱离标准流 ?  （子绝父相）
            1、父元素可以使用相对定位，不脱离标准流，可以设置宽高
            2、子元素脱离标准流，可以继承父元素的宽高
            3、如果希望绝对定位元素居中显示的话：可以设置left，right，top，bottom都为0，margin为auto就可以居中显示
      4、定位元素会覆盖在非定位元素上面，后面的元素覆盖前面的元素。  z-index（只能用于设置定位元素的层叠顺序），大值在上面

4、浮动 (脱离标准流，不占空间)：float
1、脱离标准流，如果有2个元素浮动的话，当碰到自己的父元素或者其他浮动的元素的话，当前浮动的元素就会在其他元素
附近停止下来，
2、浮动元素不能和行内元素进行层叠，行内元素会被浮动元素挤出去，
3、行内元素，行内块元素浮动之后，它的顶部会跟所在的行的顶部对齐
4、脱标之后，浮动的元素不再占用空间，而且不再向父元素汇报高度，所以父元素就会没有高度，父元素在计算高度的时候，
不会再计算浮动的元素高度，导致高度坍塌的问题 ，下面的元素都会移动到浮动元素的旁边
（清除浮动----就是让父元素计算高度的时候重新计算上浮动元素的高度）
5、浮动之后对应的元素就成block块级元素

5、清除浮动
1、给父元素设置指定的高度（扩展性不强）
2、在父元素的下面，加一个空的div，并设置属性clear:both（增加了一些没用的标签）
3、给父元素的最后加一个br标签，并设置属性
（增加了一些没用的标签）
4、给父元素添加伪元素并且添加样式，伪元素的话必须加content:"" .main::after{clear:both;} dispaly:block （伪元素默认是行内元素）
5、在css中写好一个清楚浮动的样式，以后哪里需要清除浮动直接引用即可

6、脱离标准流的特点：
1、可以设置宽高
2、不设置宽高的话根据内容来决定
3、不再受标准流的约束

7、脱标元素和display有什么关系：
脱标后没有父元素，就会没有宽度和高度，但是可以设置宽高，没设置的话只能是包裹内容，变成display：block 块级元素，
display：block之后，宽高会根据父元素进行设置，

8、应用场景
1、标准流：垂直布局
2、绝对定位：层叠布局
3、浮动： 水平布局

9、盒子模型
1、content
width height max-width max-height min-width -min-height
2、padding
3、border
4、margin

10、flex布局
1、flex-container（容器）

   2、flex-items（项目）

11、移动端适配
1、视口的设置，浏览器中能看到内容的大小， （可见视口，布局视口，理想视口）
在进行设置，意思就是浏览器的视口就是200px
1、content：定义视口的宽度，一般为device-width：表示宽度为设备屏幕的宽度
2、rem设置，相对于html字体大小进行对比，本质就是等比缩放
1、针对不同的手机屏幕，设置不同的html根元素的font-size大小
2、将需要适配的图片/元素，统一设置rem的大小
3、通过js动态计算根元素font-size的值，然后用rem
4、浏览器默认的根元素的font-size 是 16px，所有 1rem = 16px

     注意： 怎么动态设置根元素的font-size大小？
                     1、针对需要适配的手机屏幕，在root中设置不同的html大小，统一使用rem
                           1、使用媒体查询，通过分辨不同的手机屏幕，然后设置不同的html大小
                           @media screen and(min-width:320px){ //最大宽度320px,iphone5
                                  html { 
                                          font-size:9px;
                                  }
                           }
                          @media screen and(min-width:375px){ //最大宽度320px,iphone6
                                  html { 
                                          font-size:10px;
                                  }
                           }
                    2、通过js动态计算html根元素的值，来使用rem
     注意：怎么根据不同的根元素font-size大小计算出正确的rem值？
                    1、利用vscode插件转化（px to rem），alt + z 动态转化
                    2、理由node.js   postcss-pxtorem插件打包
                    3、less，sass 编译成css
   尺寸：
           1、px 像素
           2、em 当自己没有设置的情况下，相对于父元素字体的大小，如果当前父元素为16px，2em就代表为2*16=32px，
                          当自己设置的情况下，相对于自己的
           3、百分比，用在不同的场景是不一样的，如果是字体的话，就相当于父元素的字体百分比，  
                                                                      如果是宽度的话，就相当于父元素的宽度百分比
           4、rem，相对于根元素（root）里面的font-size大小设置，15px * 2rem = 30px
           5、vw、vh
                1、vw ：1vw等于视口宽度的1%
                2、vh ： 1vh等于视口高度的1%

12、网络字体，动画补充
1、字体图标，阿里icon
2、文字换行：
1、显示一行，并且显示省略号，文字超出自动换行
white-space: nowrap; //文字超出后，是否自动换行， 默认是换行
overflow: hidden;
text-overflow: ellipsis; //当文字溢出时，怎么显示

      2、显示两行，并且显示省略号，文字超出自动换行
                    display:-webkit-box
                    -webkit-line-clamp:2
                    -webkit-box-orient:vertical
                    text-overflow:ellipsis
                    overflow:hidden

       注意：text-overflow属性生效的前提是 overflow属性不是visible 

13、HTML5：定义HTML标准的最新版本
1、HTML5中新增的元素和属性
2、HTML5说的是新的标准，包括最新的HTML元素和CSS的新特性和js
3、语义化元素—属于块级元素
header、nav、main、footer、section、active（文章）、aside（侧边栏）
video（视频），audio（音频），input扩展标签（autofocus）

15、用webpack（模块化打包工具）打包的作用：可以将在本地写的css属性加上浏览器前缀（为了适配浏览器兼容），也可以压缩代码，还可以
把一些es6的代码转化为es5

16、CSS属性
1、text-decoration：给文字加一些修饰（文本中加一条线，文本下加一条线）