CSS基础笔记(2)-盒模型、浮动与定位

2023-02-13 本文已影响0人布拉德澈

盒模型

一、认识盒模型

所有html标签都可以看成矩形盒子，由width、height、padding、border构成，称之为"盒模型"

盒模型示意图.png

二、属性详解

(一)width和height属性

width属性表示盒子内容的 $\color{red}{宽度}$

单位包括：px、百分数、rem等

当块级元素（div、h系列、li等）没有设置width属性时，它将自己撑满，但这并不意味width可以继承。

height属性设置元素的高度。这个属性定义元素内容区的高度，在内容区外面可以增加内边距、边框和外边距。行内非替换元素会忽略这个属性。

$\color{blue}{盒子的总宽度=width+左右padding+左右border}$
$\color{blue}{盒子的总高度=height+上下padding+上下border}$

(二)padding属性详解

padding 是盒子的内边距，即盒子边框内壁到内容的距离

可以分别设置方向属性：
上 padding-padding-top、
右 padding-padding-right、
下 padding-padding-bottom、
左 padding-padding-left
可以使用四数值写法，用空格隔开数值分别表示上、右、下、左：{padding:10px 20px 30px 40px; }
使用三数值写法，分别表示上、左右、下：{padding:10px 20px 30px;}
使用二数字写法，分别表示上下、左右：{padding:10px 20px;}

(三)margin属性详解

margin是盒子的外边距，即盒子和其他盒子之间的距离

可以分别设置方向属性：
上 margin-margin-top、
右 margin-margin-right、
下 margin-margin-bottom、
左 margin-margin-left
可以使用四数值写法，用空格隔开数值分别表示上、右、下、左：{margin:10px 20px 30px 40px; }
使用三数值写法，分别表示上、左右、下：{margin:10px 20px 30px;}
使用二数字写法，分别表示上下、左右：{margin:10px 20px;}

竖直方向的margin有塌陷现象，小的margin会塌陷到大的margin中，从而margin不叠加，只以大值为准。
部分元素（例如：body,ul,p等）具备默认的margin，制作页面时，建议初始化清除。

*{  <!-- 星号通配符选择器，表示选择所有元素-->
  margin:0;
  padding:0;
}
body,ul,p{  <!-- 通配符涉及效率低下，使用并集选择器-->
  margin:0;
  padding:0;
}

盒子的水平居中
将盒子左右两边的margin都设置为auto，盒子将水平居中.box{ margin: 0 auto;}*

(四)box-sizing属性

盒子添加box-sizing:border-box之后，盒子的width、height数字就表示盒子实际占有的宽度（不含margin），即padding、border变为“内缩”，不再外扩。
box-size属性大量应用于移动网页的制作中，结合百分比布局、弹性布局非常好用。

三、display属性

（一）行内元素和块级元素

行内和块级元素.png

行内块
img和表单元素是特殊的行内块,即能够设置宽度高度，也能并排显示

（二）行内元素和块级元素的相互转换

使用display:block;将元素转换为块级元素
使用display:inline;将元素转换为行内元素。将元素转换为行内元素的应用不多见
使用display:inline-block；将元素转为行内块

(三)、元素的隐藏

display:none可以将元素隐藏，元素将彻底放弃位置。
visibility:hidden也可以将元素隐藏，元素不放弃自己位置。

浮动与定位

一、浮动

（一）浮动基本概念

浮动本质功能： $\color{red}{实现并排}$
要点1：要浮动，并排的盒子都要设置浮动。
要点2：父盒子要有足够的宽度，否则盒子会出现下坠。
要点3：子盒子会按顺序进行贴靠，如果没有足够的空间，则会寻找前一兄弟元素。
要点4：浮动元素 $\color{red}{不再区分块级元素、行内元素}$ ，已经脱离标准文档流，都能够设置宽度和高度，计时是span或a标签等。

（二）使用浮动实现布局

垂直显示的盒子，不要设置浮动，只有并排显示的盒子才要设置浮动
外部大盒子内部可以继续使用浮动
合理使用div划分

（三）BFC规范和浏览器差异

BFC（Box Formatting Context，块级格式化上下文）是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。

如何创建BFC

float的值不是none
position的值不是static或者relative
display的值inline-block、flex或者inline-flex
overflow:hidden

什么是overflow:hidden;

overflow:hidden;表示溢出隐藏，溢出盒子边框的内容将会被隐藏
overflow:hidden;是非常好用的让盒子形成BFC的方法

BFC的其他作用

BFC可以取消盒子margin塌陷
BFC可以可以阻止元素被浮动元素覆盖,如下图：

BFC其他作用

（四）清除浮动

为什么要清除浮动?

清除浮动：浮动一定要封闭到一个盒子中，否则就会对页面后续元素产生影响。

下面这个例子，有两个块级元素div，div没有任何属性，每个div里有p，如果我们给里面的p标签加浮动,效果如下：

图片描述

上图中，我们发现：第二组中的第1个p，去贴靠第一组中的最后一个p了（我们本以为这些p会分成两排）。浮动的元素，只能被有高度的盒子关住。

清除浮动方法

(1) 清除浮动方法1：
让内部有浮动的父盒子形成BFC，它就能关闭住内部的浮动。此时最好的方法就是overflow:hidden属性

        <style>
            * {
                margin: 0;
                padding: 0;
            }

            div {
                overflow: hidden;
                margin-bottom: 10px;
            }

            p {
                float: left;
                width: 100px;
                height: 100px;
                background-color: orange;
                margin-right: 20px;
            }
        </style>
    <body>
        <div>
            <p></p>
            <p></p>
        </div>
        <div>
            <p></p>
            <p></p>
        </div>
    </body>

(2)清除浮动方法2：给后面的父盒子设置clear:both属性。clear：both表示清除浮动对自己的影响，表示左右浮动都清除。这种方法有一个非常大的、致命的问题，它所在的标签，margin属性失效了。

        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .box2 {
                margin-top: 20px;
                clear: both;
            }

            p {
                float: left;
                width: 100px;
                height: 100px;
                background-color: orange;
                margin-right: 20px;
            }
        </style>
    <body>
        <div>
            <p></p>
            <p></p>
        </div>
        <div class="box2">
            <p></p>
            <p></p>
        </div>
    </body>

*(3) 清除浮动方法3：使用::after伪元素，并且给::after设置clear:both。

        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .clearfix::after {
                content: '';
                clear: both;
                /* 转为块级元素 */
                display: block;
            }

            div {
                margin-bottom: 10px;
            }
            p {
                float: left;
                width: 100px;
                height: 100px;
                background-color: orange;
                margin-right: 20px;
            }
        </style>
    <body>
        <div class="clearfix">
            <p></p>
            <p></p>
        </div>
        <div class="clearfix">
            <p></p>
            <p></p>
        </div>
    </body>

(4) 清除浮动方法4：在两个父盒子之间“隔墙”，隔一个携带clear:both的盒子。上面这个例子中，为了防止第二个div贴靠到第一个div，我们可以在这两个div中间用一个新的div隔开，然后给这个新的div设置clear: both;属性；同时，既然这个新的div无法设置margin属性，我们可以给它设置height，以达到margin的效果（曲线救国）。这便是隔墙法。

    <style>
            * {
                margin: 0;
                padding: 0;
            }
            p {
                float: left;
                width: 100px;
                height: 100px;
                background-color: orange;
                margin-right: 20px;
            }
            .cl{
                clear: both;
            }
            .h20 {
                height: 20px;
            }
            .h22 {
                height: 22px;
            }
        </style>

    <body>
        <div>
            <p></p>
            <p></p>
        </div>
        <div class="cl h20"></div>
        <div>
            <p></p>
            <p></p>
        </div>
    </body>

二、定位

（一）相对定位

相对定位：盒子可以相对自己原来的位置进行位置调整
position:relative; 设置相对定位
top:10px; 相对原位置向下移动10px
left:10px; 相对原位置左向右移动10px

相对定位的元素，本质上仍在原位置，只不过渲染咋新的地方，渲染的图形可以比喻成“影子”，部位对页面其他元素产品任何影响。
相对定位用来微调元素位置，相对定位的元素还可以当作绝对定位的参考盒子。

（二）绝对定位

绝对定位：盒子可以在浏览器中坐标进行位置精准描述，拥有自己的绝对位置。
position:absolute; 设置绝对定位
top:20px; 从顶部向下移动20px
left:20px; 从左向右移动20px

绝对定位的元素脱离标准文档流，将释放自己的位置，对其他元素不会产生任何干扰，而是对他们进行压盖。
脱离标准文档流的方法：浮动、绝对定位、固定定位。
绝对定位的盒子并不是永远以浏览器作为基准点。
绝对定位的盒子 $\color{red}{以自己祖先元素中,离自己最近的拥有定位属性的盒子}$ ，当作基准点。这个盒子通常是相对定位的，所以这个性质也叫“子绝父相”。

$\color{red}{主要用途：}$
（1）绝对定用来制作“压盖”、“遮罩”效果
（2）用来结合CSS精灵使用
（3）可以结合JS实现动画

（三）固定定位

固定定位：不管也买你如何卷动，永远固定在那里。
position:fixed; 设置固定定位
top:·100px; 从顶部向下移动20px
left:100px; 从左向右移动20px

固定定位只能以页面为参考点，没有子固父相。脱离标准文档流。