05-CSS 权重 盒模型 标准文档流 浮动

时间：2021-12-11 17:20:20

一、权重问题

1.1、 !important 标记

可以通过 k : v !important 来给一个属性提高权重，这个属性的权重是无穷大的。

    <style>
        .spac2{
            color: red;
        }
        .spac1{
            color: blue;
        }

    </style>
</head>
<body>
        <p class="spac1 spac2">我是什么颜色?</p>
        <p class="spac2 spac1">我是什么颜色?</p>
</body>
只看 CSS 谁在前谁在后决定颜色，与两个class 的书写顺序没有关系。 
 05-CSS 权重 盒模型 标准文档流 浮动

    <style>
        .spac2{
            color: red !important;
        }
        .spac1{
            color: blue;
        }

    </style>
</head>
<body>
        <p class="spac1 spac2">我是什么颜色?</p>
        <p class="spac2 spac1">我是什么颜色?</p>
</body>
05-CSS 权重 盒模型 标准文档流 浮动通过 !important 提高权重的效果如上图。注意要有 ！,并且写在分号内部。

!important 注意点：

1、!important 提升的是一个属性，而不是一个选择器。

    <style>
        p{
            /*!important 提高的是一个属性的权重,不是一个选择器的权重*/
            /*最终的效果是字号还是 20px 而颜色是 green*/
            color: green !important;
            font-size: 10px;
        }
        .spac2{
            color: red;
            font-size: 30px;
        }
        #para1{
            color: blue;
            font-size: 20px;
        }

    </style>
</head>
<body>
        <p id="para1" class="spac2">我是什么颜色?</p>
</body>

2、!important 无法提升继承的权重，该是0 还是 0。

    <style>
        div{
            /*!important 在这里并不能改变权重(无法提升继承的权重),没有p标签是直接选中的而不是继承*/
            color: red !important;
        }
        p{
            color: greenyellow;
        }
    </style>
        <div>
            <p>!important 无法提升继承的权重,该是0还是0</p>
        </div>

3、!important 不影响就近原则。

一般情况下，开发中!important 是不使用的，因为会让Css写的很乱。

1.2 、权重计算总结

05-CSS 权重 盒模型 标准文档流 浮动

二、盒模型

2.1、 盒子的区域

一个盒子的主要属性有5个：width、height、padding、border、margin

width：宽度 ，指的是内容宽度，而不是盒子的宽度。

height：高度，指的是内容的高度，而不是盒子的高度。

padding: 内边距

border: 边框

margin : 外边距

05-CSS 权重 盒模型 标准文档流 浮动

2.2 、width 、height、padding 

关于 width 和 height 和平时说的不是一个概念，在CSS中宽高指的是内容的宽高。

真实的占有宽度 = left-border + left-padding + width + right-padding + right-border

padding 就是内边距，并且padding 区域是有颜色的，颜色一定和内容区域相同。也就是说background-color 将填充左右的boder 以为的区域。

padding 是 4 个方向的，所以能够分别描述 4 个方向的padding。

方法有两种，第一种写小属性；第二种写综合属性，空格隔开。

小属性的写法：

            padding-top: 50px;
            padding-right: 50px;
            padding-bottom: 5px;
            padding-left: 50px;
综合属性(上、右、下、左)： 

            padding:50px 20px 10px 50px;
如果只写三个值：（上、右、下 、？和右相等） 

padding:50px 20px 10px;

如果只写两个：（padding:50px 20px 等价与如下：）

            padding-top: 50px;
            padding-right: 20px;
            padding-bottom: 50px;
            padding-left: 20px;
还可以用小属性重叠大属性：（但是不能大属性去重叠小属性，也就是说必须要大属性写在前面） 

            padding:50px;
            /*那么对应的 padding-left 由 50px 改为 20px*/
            padding-left: 20px;
有一些元素默认就带有padding ，比如 ul 标签：

开发中，为了便于控制，总是喜欢清除默认的padding 

        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{  
            margin:0;  
            padding:0;
        }

2.3 、border 

border 就是边框。边框有三个要素：粗细、线型、颜色。

颜色不写默认是黑色。粗细、线型不写显示不出来边框。

border属性能够被拆开，有两大种拆开的方式：

1、 按3要素:border-width（线框宽度）、border-style（线型）、border-color（颜色）

2、 按方向：border-top、border-right、border-bottom、border-left

            border-width:10px 20px;
            border-style:solid dashed dotted;
            border-color:red green blue yellow;

如果一个小要素后面是空格隔开多个值，那么就是上右下左的顺序。

border 可以为none ,那么就是某一条边没有，也可以调整某条边边框的宽度为0。

三、标准文档流（web 页面是个“流”，必须从上往下）

标准文档流的微观现象：

1、空白折行现象（比如让多个 img 标签之间没有空隙，必须紧密相连 ）

2、高矮不齐，底边对齐

3、自动换行，一行写不满换行写。

3.1、 块级元素和行内元素

    <style>
        p{
            width: 200px;
            height: 40px;
            background-color: green;
        }
        span{
            width: 200px;
            height: 40px;
            background-color: red;
        }
    </style>
</head>
<body>
        <p>呵呵呵呵</p>
        <p>哈哈哈哈</p>

        <span>呵呵呵呵</span>
        <span>哈哈哈哈</span>
</body>
05-CSS 权重 盒模型 标准文档流 浮动

块级元素：

  • 霸占一行，不能和其他元素并列。
  • 能接受宽、高。
  • 如果不设置宽高，那么宽高默认是父亲的100%。

行内元素：

  • 与其他行内元素并排。
  • 不能设置宽、高。默认的宽度，就是文字的宽度。

HTML中把标签分为两类，文本级、容器级

文本级别：p、span 、a、b、i、u、em

容器级标签：div 、h系列、 li、 dt、 dd

CSS 的分类和 HTML 分类很像，就 p 不一样：

所有的文本级标签都是行内元素，除了 p ，p 是一个文本级，但是是个块级元素。

所有的容器级标签都是块级元素。

05-CSS 权重 盒模型 标准文档流 浮动

3.2、 块级元素和行内元素的相互转换

块级元素可以设置为行内元素。（display:inline）

行内元素可以设置为块级元素。   (display:block)

    <style>
        p{
            display: inline;    //块级元素可以通过 inline 设置为行内元素
            width: 200px;
            height: 40px;
            background-color: green;
        }
        span{
            display: block;   //行内元素可以通过 block 设置为块级元素 
            width: 200px;
            height: 40px;
            background-color: red;
        }
    </style>
</head>
<body>
        <p>呵呵呵呵</p>
        <p>哈哈哈哈</p>

        <span>呵呵呵呵</span>
        <span>哈哈哈哈</span>
</body>

05-CSS 权重 盒模型 标准文档流 浮动

标准文档流的限制非常多，标签的性质很恶心，比如要设置并排、并且还要设置宽高。那么就要脱离文档流：

CSS 中一共有三种手段，让一个元素脱离标准文档流：

1、浮动

2、绝对定位

3、固定定位

四、浮动 

浮动是CSS里面布局用的最多的属性。

    <style>
        .box1{
            float: left;
            width: 80px;
            height: 50px;
            background-color: yellowgreen;
        }
        .box2{
            float: left;
            width: 100px;
            height: 70px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
05-CSS 权重 盒模型 标准文档流 浮动两个元素并排了，并且两个元素能够设置宽高了，这就是浮动。

4.1 、浮动的元素脱标

如果把上面box2 的 float:left 去掉就会变成下面的效果：

05-CSS 权重 盒模型 标准文档流 浮动绿色盒子float:left ,蓝色盒子没有float，绿色的盒子脱离了标准文档流，所以蓝色的盒子就是现在的标准文档流中的第一个盒子，所以就渲染在了页面的饿左上方。

    <style>
        span{
            float: left;
            width: 100px;
            height: 30px;
            background-color: gold;
        }
    </style>
</head>
<body>
    <span>哈哈哈哈</span>
    <span>呵呵呵呵</span>
    <span>哎呀哎呀</span>
    <span>好吧好吧</span>
</body>
05-CSS 权重 盒模型 标准文档流 浮动未添加 float:left
05-CSS 权重 盒模型 标准文档流 浮动添加了float:left 后

综上说明：一个span 标签不需要转换成块级元素，就能设置宽度、高度；这就是说标签已经不区分行内、块了。也即是说，一旦一个元素浮动了，那么就能够并排了，能够设置宽高了。无论原来是div 还是 span 

4.2、 浮动的元素相互贴靠

    <style>
        .box1{
            float: left;
            width: 80px;
            height: 200px;
            background-color: green;
        }
        .box2{
            float: left;
            width: 50px;
            height: 60px;
            background-color: yellowgreen;
        }
        .box3{
            float: left;
            width: 80px;
            height: 100px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
05-CSS 权重 盒模型 标准文档流 浮动05-CSS 权重 盒模型 标准文档流 浮动

4.3、浮动的元素有“字围”效果

    <style>
        .box1{
            float: left;
            width: 80px;
            height: 60px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
</body>
05-CSS 权重 盒模型 标准文档流 浮动

关于浮动，要遵循一个原则：永远不是一个东西在浮动，浮动是一起浮动，要浮动大家一起浮动。















标签：

相关文章