css基础：position定位、高度自适应、伪元素、实线三角形-第十天

一、定位

1、position:

relative:不脱离文档流，相对于自身的原始位置

/absolute：脱离，相对于包含快的原始位置

/fixed：脱离，相对于浏览器的可视区域

/sticky：不脱离，没有达到顶部前随页面滚动，达到之后粘着顶部不动

2、垂直居中

    - left50%，top50%，mrgin-left-自身一半，margin-to-p自身一半

    - left0 right0 top0 bottom0 margin auto

    text-aligncenter  vertical-align：middle

6、控制容器内容溢出隐藏之后的效果，怎么处理

    - overflow

        - 隐藏hiden  自动：auto  滚动：scroll

消除img图像的影响：img{display：block}

 

# 三、自适应

1、宽度自适应

2、高度自适应

    - 不写高度

        - 某种特定情况下，会发生高度塌陷

   

    （- 主动设置高度的单位为相对单位

    - 高度自动跟随内容）

3、高度塌陷

    - 浮动

        -浮动、

    - 定位

        -只能加固定高度

4、图片的处理原则

    - 原则：突出显示内容重点区域，其他区域都可以被隐藏

        - 如何让元素水平居中

        -定位：left、regith：50%  margin-left、right;-自身一半50%

        - 定位：left、投票、right、bottom：0  margin：auto

        -内联块：text-align：center  vertical-align：middle

        借助背景图：background-position：center

 

# 高度塌陷

- 父元素没有写高度，子元素脱离文档流

    - 浮动

    -

# 四、自适应页面练习

3、后台管理页面

    - 圣杯布局

        - 🏆

    - 双飞翼布局

# 五、伪元素选择器

1、after：当前元素之后添加伪元素

    - 元素 ：：after{center：“”；}

    - 在元素最后一个子元素之后添加元素

2、before;当前元素之前添加伪元素

    - 元素 ：：before{center：“”；}

    - 在元素最后一个子元素之前添加元素

3、first-letter：第一个文字

4、first-line：第一行文字

4、selection

5、

 

# 六、边框实线三角形

1、借助不同方向的边框接缝为斜边的特点

2、颜色透明：transparent