规则生效问题

优先级

特异度的值来决定的

选择器的特异度 Sqecificity

id      （伪)类      标签
#id     .class       tag
百       十           个

继承

某些属性会自动继承其父元素的计算值 除非显示的 指定一个值
文字相关的，颜色，字体 不给会继承
一些盒子模型 大小 不会继承

css可以和不可以继承的属性

不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、
overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、
page-bread-before和unicode-bidi。
所有元素可继承：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。
表格元素可继承：border-collapse。 

显示继承 inherit

例如 
* {
    box-sizing: inherit;
}
上边通过一个通配选择器 让所有的元素都可以继承 box-sizing
后面的元素都可以继承了

初始值

initial
一个元素 一直往上找 没找到继承的值
如果没有继承的值 就用初始值
一个元素 不可继承的 又没有指定值
或者可继承 没有继承到
            例如
                background-color: transparent;
                margin-left: 0;
            可以使用 initial 关键字 显示重置为初始值
                background-color: initial;

额外拓展

media https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media */

CSS求值过程

布局 Layout

布局相关技术

常规流

    normal flow
               块级
               行级
               表格布局
               FlexBox
               Grid
                      盒模型
                        理解成一个一个的盒子
                        margin
                              margin跟padding一样，也有简洁写法。我们可以使用margin属性来设置四个方向的外边距。
                              在实际编程中，我们往往使用的是margin的这种高效简洁写法来编程。
                              margin-top--margin-right--margin-bottom--margin-left，即“上-右-下-左”。以下简写为
                              top--right--bottom--left。其中需要注意的是后三种情况，当有像素值缺省时，浏览器会自动对缺省像素按照
                              “bottom=top”和“left=right”的方法进行赋值。
                              指定元素四个方向的外边框
                              取值可以是长度 百分数 auto
                                auto
                                    ->左右都是auto
                                      会取中间值然后水平居中
                              百分数是相对于容器宽度
                                    margin collapse
                                    margin在垂直方向上有时候会出现边距的折叠融合合并
                                        如：上100px 下100px (margin-bottom: 100px 和 margin-top: 100px)
                                            两个组组件的间距 100px 而不是 200px
                                    **只会取两个边距中较大的，而不是相加**
            ##################### box-sizing:boder-box; 区别：包括padding 和 border 如 设置100% 实际小于 100% 页面无滚动 推荐 ##########            
                        
                        border
                             border 简写属性在一个声明设置所有的边框属性。可以按顺序设置如下属性：border-width border-style 
                             border-color
                            如果不设置其中的某个值，也不会出问题，比如 border:solid #ff0000; 也是允许的。
                            指定边框的样式，粗细和颜色。
                                三种属性
                                    border-width: 可以设置边框的宽度。
                                    border-style: 可以设置边框的样式。
                                    border-color: 可以设置边框的颜色。
                                四个方向
                                    border-top
                                    border-right
                                    border-bottom
                                    border-left
                                可以同时设置多个方向的边框。
                        padding
                                padding 简写属性在一个声明中设置所有内边距属性。可以按顺序设置如下属性：padding-top padding-right
                                指元素四个方向的内边距
                                百分数相对于容器宽度
                                          10px -> 四个都是10px
                                          10px 20px -> 左右两个是10px，上下两个是20px
                                          10px 20px 10px 20px -> 从上开始 顺时针转一圈
                                
                        content (width,height)
                            width -> 指定content box 宽度
                                     取值为 长度 百分数 auto
                                     auto 由浏览器根据其他属性确定
                                     百分数相对于容器的context box宽度
                            height -> 指定content box 高度
                                     取值为 长度 百分数 auto
                                     auto 由浏览器根据其他属性确定
                                     百分数相对于容器的context box高度
                                     容器有指定高度的时候，百分数才生效。
                        层层包裹    

浮动

    float
        可以文字 图片的一些效果

绝对定位

    position
            盖在常规流上面 任意的改变位置 对常规流不会有上面影响 

定位 position

定位属性：
    position: absolute;
    position: relative;
    position: fixed;
    position: sticky;
    position: static;
    position: initial;
    position: inherit;
    position: unset;
定位属性的值：
    static
    relative
    absolute
    fixed
    sticky
    initial
    inherit
    unset
定位属性的作用：
    定位元素的位置
    定位元素的大小
    定位元素的内容
    定位元素的父元素
    定位元素的兄弟元素
    定位元素的子元素
    定位元素的祖先元素
    定位元素的所有祖先元素
    定位元素的所有兄弟元素
    定位元素的所有子元素
    定位元素的所有祖先元素
    定位元素的所有子元素
    定位元素的所有祖先元素
    定位元素的所有子元素
    定位元素的所有祖先元素
    定位元素的所有子元素

overflow

overflow这个属性:

visible -> 超出可见 但是会超越设定的范围
    hidden ->  超出不可见
    scroll -> 超出可见 滚动

overflow-wrap:break-world;换行

块级 and 行级

行级由内容决定

Block Level Box           Inline Level Box
不和其他盒子并列摆放        和其他行级盒子一起放在一行或拆开成多行
适用所有的盒模型属性        盒模型中的width,height不适用

生成块级盒子               生成行级盒子
                          内容分散在多个行盒(line box)中
body,article,div          span,emstrong,cite,code等
main,section,h1-6,p
ul,li等
display: block;           display: inline;
(把任意一个元素转化成块级盒子或者行级盒子）
display 属性
        -> display: block;  => 块级盒子
        -> display: inline; => 行级盒子
        -> display: inline-block;   =>本身是行级，可以放在行盒中 可以设置宽高 作为一个整体不会被拆散成多行  (只能放在一行)
                                         例如 : 一个图片 可以和文字在一行展示 但是没办法 把图片分成两行展示。
        -> display: none;  => 排版时完全被忽略

行级的排版上下文

lnline Formatting Context(IFC)
只包含行级盒子的容器会创建一个IFC
IFC内的排版规则
    盒子在一行内水平摆放
    一行放不下的时候，换行显示
    text-align: 决定一行内盒子的水平对齐
        text-align: left;
        text-align: right;
    vertical-align: 决定一行内盒子的垂直对齐
        vertical-align: top;
        vertical-align: middle;
        vertical-align: bottom;
    避开浮动(float)元素

块级排版上下文

Block Formatting Context(BFC)
某些容器会创建一个BFC
    根元素
    浮动，绝对定位，inline-block
    Flex子项和Grid子项
    overflow值不是visible的块盒
    display: flow-root;
BFC内的排版规则
    盒子从上到下摆放
    垂直margin合并 之前的margin边距不是相加而是取最大
    BFC内盒子的margin不会与外面的合并  解决margin融合重叠问题 分开 放在不同的DFC中 嵌套div并设置display:flow-root;
    BFC不会和浮动元素重叠 清除浮动经常用的一个技巧
    

Flex Box

一种新的排版上下文
它可以控制子级盒子的：
    摆放的流向（上下左右）
    摆放的顺序
    盒子宽度和高度
    水平和垂直方向的对齐
    是否允许折行

使用

设置 display: flex;
遵循flex布局 而不是IFC BFC

控制流向
    flex-direction: row | column | row-reverse | column-reverse
    默认 row 反向 column
控制对齐
    传统 水平 垂直
    引入
        主轴 justify-cnontent
            flex-start | flex-end | center | space-between | space-around
            不设置
                默认 justify-content: flex-start;
            基线对齐
                align-items: flex-start | flex-end | center | baseline | stretch
        侧轴

Flexibility */

Flexibility
    可以设置子项的弹性，当容器有剩余空间是，会伸展，容器空间不够时，会收缩
    flex-grow 有剩余空间时的伸展能力
    flex-shrink 容器空间不足时收缩的能力
    flex-basis 没有伸展或收缩时的基础长度

Flex及FLex的缩写

flex:1                       flex-grow: 1;      弹簧，弹力
flex:100px                   flex-basis: 100px; 基础长度 没有设置 一般读取一些宽度和高度的值 直接写宽度也可以
flex:2 1                      flex-grow: 2;flex-shrink: 1;   
flex: auto
flex: none
flex: stretch               换行

Grid

区别:二维网格 Flex 一维
display: grid; => 创建一个Grid容器
使用grid-template 相关属性将容器划分为网格
    划分网格
        grid-template-columns: 100px 100px 200px;
        grid-template-rows: 100px 10px

        grid-template-columns: 30% 30% auto;
        grid-template-rows: 100px auto;

        grid-template-columns: 100px 1fr 1fr;
        grid-template-rows: 100px 1fr;  fr ==份

        上竖着 下横着
设置每一个子项栈哪些行列

grid lin 网格线

grid-row-start: 1;
grid-column-start: 1;
grid-column-end: 3;
grid-row-end: 3;
或者
grid-area: 1 / 1 / 3 / 3;

float 浮动

实现文字环绕的一个功能
可以使用float属性
    float: left;
    float: right;
    float: none;
    float: inherit;

position 绝对定位

position: static;     默认值，非特定元素
position: relative;   相当于自身位置做一个偏移，不脱离文档流
    ->  
        在常规流里面布局
        相对于自己本应该在的位置进行偏移
        使用top,left,bottom,right设置偏移长度
        流内其他元素当他没有偏移一样布局
position: absolute;   绝对定位，相对非static祖先元素定位
    ->
        脱离常规流
        相对于最近的非static祖先定位
        不好对流内元素布局造成影响
position: fixed;      相对于窗口绝对定位
    -> 
        和absolute区别，后者找父类。前者找窗口
                                        -> 导航栏
position: sticky;      粘性定位。