CSS的三大特性、隐藏元素的方式和布局方式

目录

一、CSS三大特性

1.继承性

2.层叠性

3.优先级

二、CSS隐藏元素的方式

  1.display:none

  2.visiblity:hidden

  3.opacity:0

三、CSS布局方式

1.浮动布局

 2.弹性盒布局

 3.定位布局

 4.响应式布局

---

一、CSS三大特性

1.继承性

    给父元素设置样式 后代元素可以继承 

    可继承属性:color text- line- font- letter-spacing word-spacing

                  注意：h1作为子元素时候无法继承font-size 参考自身font-size
                             a标签作为子元素无法继承color 和 取消下划线 

2.层叠性

    使用多个选择器给同一个标签设置样式

3.优先级

    层叠性冲突问题 
    内联样式 > 内部样式 / 外部样式(就近原则)
    !important 不计入权重 优先级最高
    style 属性 1000
    id选择器 100
    类选择器 伪类选择器 属性选择器 10
    标签选择器 伪元素选择器 1         通配符选择器 0

可以使用如下代码进行测试CSS的三大特性：

    
    
    
    


    

        我是父元素
        
我是子元素div
            
我是孙子元素
        
        
        
一级标题
        
        百度一下
    
    
段落标签
    
段落标签

---

二、CSS隐藏元素的方式

  1.display:none

           block 显示元素

           不占据原先在浏览器空间 绑定js事件不生效 会引起浏览器重排

  2.visiblity:hidden

           visible 显示元素

           占据原先在浏览器空间 绑定js事件不生效 会引起浏览器重绘

  3.opacity:0

            透明度 0-1  0完全透明（隐藏元素）    1不透明（显示元素）

           占据原先在浏览器空间 绑定js事件生效 一般会引起浏览器重绘(一个图层)

可以自行利用代码进行测试： 

三、CSS布局方式

1.浮动布局

浮动元素是脱离文档流的，但不脱离文本流，这是什么意思呢，用过 word 的应该知道有一种图片环绕的方式是文字环绕吧，就是这种效果。这就是字围浮动。

他可以让块级元素水平排列，但是设置浮动会给父元素带来很大的影响，会让父元素发生高度塌陷甚至“消失”。所以通常设置浮动之后都要给父元素进行清除浮动的操作。特性：脱离文档流，飘在文档流上方，原先位置不保留

为什么会发生高度塌陷？

     父元素高度由子元素撑起，给子元素设置浮动，父元素发生高度塌陷

如何清除浮动？

    1.给父元素设置高度
    2.给父元素清除浮动  使用伪元素清除浮动
      ::after{
        display:block;
        content:"";
        clear:both;
      }
     3.在父元素最后设置一个空的一个标签 给空标签清浮动

 2.弹性盒布局

2.1：核心概念：容器 弹性元素 交叉轴 主轴

     给元素设置个display为flex，该元素成为弹性盒，子元素也就是弹性元素永远沿着主轴方向排列，主轴方向默认为水平方向，交叉轴方向默认为垂直方向，主轴和交叉轴可以通过flex-direction 更改排列方向

2.2：容器属性：

     2.2.1display:flex

          开启伸缩盒    给当前元素开启伸缩盒布局/弹性盒布局，当前元素成为伸缩盒 弹性元素（子元素）沿着主轴方向排列 主轴方向默认是水平方向

     2.2.2flex-direction: row   

          更改主轴排列方向 flex-direction row (默认值)从左到右水平依次排列

          row-reverese 从右到左依次排列 起点和终点交换

          column 更改主轴方向为垂直方向 从上到下依次排列

          column-reverse 从下到上依次排列

     2.2.3flex-wrap: wrap;

          当父容器主轴无法放下所有弹性元素 弹性元素会进行等比例压缩 不会换行显示 

          开启换行显示 nowrap(默认值不换行) wrap换行显示弹性元素 wrap-reverse换行并且反转 

    2.2.4justify-content: stretch;

          更改主轴弹性元素排列方式

                flex-start 默认值

                flex-end 沿着终点排列

                center 容器中间

                space-around 中间弹性元素的空间是左右两侧弹性元素空间两倍

                space-between 左右两侧弹性元素紧贴父容器排列

                space-evenly 弹性元素左右两侧的空间均匀分配

                stretch 平铺 拉伸 注意：如果给弹性元素设置了height 不生效

                          平铺或者拉伸占满父容器空间

     2.2.5align-items: baseline;

           更改弹性元素在交叉轴排列方式 flex-start沿着交叉轴起点排列

                flex-end 沿着交叉轴终点排列

                center 沿着交叉轴中间排列

                baseline 基线对齐 文字对齐

                stretch (默认值）平铺 拉伸 注意：如果给弹性元素设置了height 不生效

                         平铺或者拉伸占满父容器空间

      2.2.6align-content: flex-start;

            设置弹性元素多行对齐方式 align-content 前提：必须设置换行显示

                flex-start 顶部对齐

                flex-end 底部对齐

                center 中心位置对齐

                space-around 上下两侧弹性元素空间是其他行弹性元素空间的二分之一

                space-between 上下两侧弹性元素紧贴父容器

                space-evenly 弹性元素上下两侧空间相等

                stretch 平铺 拉伸 占满父容器空间 height不设置或者为auto

可以使用如下代码进行测试：

    
    
    
    


    

        
弹性元素1
        
弹性元素2
        
弹性元素3
        
弹性元素1
        
弹性元素2
        
弹性元素3
        
弹性元素1
        
弹性元素2
        
弹性元素3
        
弹性元素1
        
弹性元素2
        
弹性元素3
    

浏览器运行结果如下：

 

    2.3元素属性：

         2.3.1order

                order属性是弹性元素属性 更改弹性元素排列顺序 值越大 越靠后   值越小 越靠前

/* order属性是弹性元素属性 更改弹性元素排列顺序 值越大 越靠后   值越小 越靠前 */
        .parent>div:first-child{
            order: 3;
        }
        .parent>div:nth-child(2){
            order: 2;
        }
        .parent>div:last-child{
            order: 1;
        }

          2.3.2flex-grow: 1;        

               flex-grow 当父容器空间有剩余是否进行放大 默认不放大 默认值0 

               将父容器剩余空间分为一份 给到弹性元素2 

               如果给多个元素设置flex-grow 将父容器剩余空间分为flex-grow值的和 依次分给弹性元素

.parent>div:nth-child(2){
            /* flex-grow 当父容器空间有剩余是否进行放大 默认不放大 默认值0 */
            /* 将父容器剩余空间分为一份 给到弹性元素2 */
            /* 如果给多个元素设置flex-grow 将父容器剩余空间分为flex-grow值的和 依次分给弹性元素 */
            flex-grow: 1;
        }
        .parent>div:last-child{
            flex-grow: 2;
        }

           2.3.3 flex-shrink: 0;        

               flex-shrink 默认值是1 如果父容器空间不足弹性元素会默认进行等比例压缩 如果不想压缩

               父容器空间不足不进行等比例压缩

           2.3.4flex-basis: 100px；

               给弹性元素设置宽度 优先级高于width

           2.3.5align-self: flex-start;

                设置自身在交叉轴的对齐方式   属性取值和上面一样

 可以使用如下代码进行测试：

    
    
    
    


    

        
弹性元素1
        
弹性元素2
        
弹性元素3
    

 运行结果如下：

 3.定位布局

       3.1.静态定位 position:static 
               默认所有元素在浏览器都是静态定位 
       3.2.相对定位 position:relative 
            特点：1.不脱离文档流 2.参照自身在浏览器位置定位                                                                            与定位配合的属性 top  bottom  left  right注意：同一方向属性不可以同时设置 top                             bottom（left right）只设置其中一个
       3.3.绝对定位 position:absolute 
            特点:1.脱离文档流 原先位置不保留 飘在文档流上方 
                    2.无论有没有父元素或者祖先元素 参照浏览器视口区域定位
                    3.给父元素或者祖先元素设置定位 参照父元素或者祖先元素定位
      3.4.固定定位 position:fixed
            特点：1.脱离文档流 原先位置不保留 飘在文档流上方 
                       2.参照浏览器视口区域定位
      3.5.粘滞定位 position:sticky 
            特点：1.不脱离文档流 
                       2.没有达到指定阈值之前是相对定位 达到阈值后是固定定位

使用如下代码中的设置水平垂直居中小案例可以明白定位布局：

 浏览器运行结果如下：

 4.响应式布局

    媒体查询：满足不同的条件，展示不同的CSS效果

    使用媒体查询：1.使用link标签引入CSS                                                                                                                     2.使用媒体查询方法  @media（条件）{  执行体 }

      and  并且 必须满足两个条件                             

      ，或者 满足其中一个条件           

       only 仅满足当前条件 样式才会生效                   

       not对媒体查询条件进行取反 not(max-width:800px) => 等同于 min-width:800px  

       设置多个媒体特性连用 and  

 使用如下代码理解媒体查询响应式布局：

不同的屏幕分辨率展示不同的CSS样式效果 

    
    
    
    
    
    


    
我是div
    
段落标签

浏览器运行结果如下：

 

不同的屏幕分辨率展示不同的CSS样式效果 。