【前端基础】14.针对css的一些补充

1.html核心解读–元素分类（根据css）

块级元素，内联元素，内联块级元素。
dispaly:none;隐藏（空间释放）
display:inline;
行级元素
1 多个元素占一行
2 不可设置宽高

dispaly:none;隐藏（空间释放）
        display:inline;
            行级元素
                1 多个元素占一行
                2 不可设置宽高
            
 span a strong

disolay:block;
    块级元素
        1 自己占一行
        2 可以设置宽高
    
    div h1-h6 ul li table

display:inline-block;
    行级块元素
        既可设置宽高，又可共占一行
    
    img input button
    
visibility:hidden;元素不可见（但空间占着）

2.css盒子模型

css模型本质上是一个盒子，封装周围的HTML元素，它包括：边距（margin），边框（border）,填充（padding）,和实际内容（content）。

3.两种盒子模型类型

1.box-sizing:content-box(默认)
此时，元素的width=content的宽度
自己会膨胀
2.Box-sizing:border-box
此时，元素的width=content的宽度+padding+border
自己不会膨胀

注意：和margin没有任何关系。

4.补充

1.对于行级元素，margin-top和margin-bottom无效
2.对于行级元素，padding-top和padding-bottom显示上有效果，但是对周围元素没有影响，也可理解为无效。
3.外边距合并（取margin最大值）
4.嵌套块元素垂直外边距的合并
如果父元素没有上边距及边框，则父元素的上边框会与子元素的上边框发生合并，合并后的外边距为两者中的较大着，即使父元素的上外边距为0，也会发生合并。

建议优先级：width>padding>margin

5.position(定位)

Absolute,relative,fixed,static,sticky
Top,left,bottom,css,z-index

Sticky 一些时候是relative定位，另一些时候自动变成fixed定位（定位基点是视口）