06-盒子模型-CSDN博客

盒子模型

1. 文档流（normalflow）

网页就是一个多层的结构，一层摁着一层
通过CSS可以分别为每一层来设置样式，作为用户来讲只能看到最顶上一层

这些层中，最底下的一层称为文档流

文档流是网页的基础我们所创建的元素默认都是在文档流中进行排列

对于我们来元素主要有两个状态

在文档流中
不在文档流中（脱离文档流）

2. 块元素

块元素会在页面中独占一行
默认宽度：是父元素的全部（把父元素撑满）
默认高度：由自己的内容区决定

3. 行内元素

行内元素不会独占页面的一行，只占自身的大小
行内元素在页面中左向右水平排列（书写习惯一致）
如果一行之中不能容纳下所有的行内元素，则元素会换到第二行继续自左向右排列
行内元素的默认宽度和高度都是被内容撑开

4. 盒子模型

网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。
这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。1

盒模型、盒子模型、框模型（box model）

CSS将页面中的所有元素都设置为了一个矩形的盒子
在这里插入图片描述
在我们网页中，由很多的矩形方框构成，这些方框就是盒子

页面布局就算通过盒子摆到不同的位置

内容区（content）
内边距（padding）
边框（border）
外边距（margin）

内容区

内容区是盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型

元素中的所有的子元素和文本内容都在内容区中

width和height 设置内容区大小
width 内容区宽度
height 内容区高度

示例

.box1{
    width: 200px; 
    height: 200px; 
    background-color: #bfa;
}

示例
在这里插入图片描述

边框（border）

边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部
注意：边框的大小会影响到整个盒子的大小
边框有三个样式：

边框宽度 border-width
边框颜色 bordr-color
边框样式 border-style

简写

方便没有顺序要求
写在border里面

border: 10px solid red;

border-width

默认值：3px

同时指定四个方向的值，数量不同指定不同的边框

当指定多值时候，对应设置的边框
        四个值：上 右 下 左
        三个值：上 左右 下
        两个值：上下 左右
        一个值：上下左右
border-width: 10px 10px 10px 10px; 上 右 下 左都是10
border-width: 10px 10px; 上下边框为10，左右边框为10

也可以通过top right bottom left设置

border-top-width: 10px;
border-left-width: 30px;

border-style

默认值：none
样式：
- soild 实线
- dotted 点状虚线
- dashed 虚线
- double 双线

内边距

注意：内边距的设置会影响到盒子的大小，背景颜色会延伸到内边距上

内容区和边框之间的距离
四个方向
- padding-top
- padding-right
- padding-bottom
- padding-left

简写
规则跟边框一样

当指定多值时候，对应设置的内边距
四个值：上 右 下 左
三个值：上 左右 下
两个值：上下 左右
一个值：上下左右
padding：10px 10px 10px 10px;

示例

<style>
    .outer{
        width: 200px;
        height: 200px;
        border: 10px orange solid;
        padding-right: 100px;
        padding-bottom: 100px;
        padding-left: 100px;
    }

    .inner {
        width: 200px;
        height: 200px;
        background-color: greenyellow;
    }
</style>

<div class="outer">
    <div class="inner"></div>
</div>

效果
在这里插入图片描述

外边距

外边距，也叫空白边，位于盒子的最外围，是添加在边框外周围的空间。

z空白边使盒子之间不会紧凑地连接在一起，是CSS 布局的一个重要手段

注意：外边距不会影响盒子可见框的大小，但是外边距会影响盒子的位置和占用空间

四个方向

margin-top /right /bottom /left
margin 可以有负值，往反方向
简写
与上诉基本一致

当指定多值时候，对应设置的内边距
四个值：上 右 下 左
三个值：上 左右 下
两个值：上下 左右
一个值：上下左右
margin：10px 10px 10px 10px;

示例

.box1 {
    width: 200px;
    height: 200px;
    background-color: #bfa;
    border: 10px orange solid;
    margin-bottom: 100px;

}

.box2 {
    width: 200px;
    height: 200px;
    background-color: #bfa;
    border: 10px red solid;
    margin-top: 100px;
}

效果
在这里插入图片描述

5. 水平方向布局

盒子的水平位置的大小由以下属性共同决定

margin-left
border-left
padding-left
width
padding-right
border-right
margin-right

请添加图片描述
注意：一个元素在其父元素中，水平布局必须要满足以下等式
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素内容区的宽度
以上等式必须满足，如果相加结果使等式不成立，则称为过渡约束

就是说，不能使等式成立，系统就会自动调整使得成立

在这里插入图片描述

示例

//假定外面父元素内容区宽度1000px
.outer{
    width: 800px;
    height: 200px;
    border: 10px red solid;
}

//则为了满足1000px
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 1000px

  0 + 0 + 0 +800（width） + 0 + 0 + auto（margin-right） = 1000px //则margin-right会自动设置成200px

情况举例

七个值中没有设置auto，默认会调整margin-right
只有三个值可以设置成auto
- width
- margin-left
- margin-right
谁设置auto，谁就会自动调整
如果width和margin-left 、maring-right 同时设置auto，则margin-left 、maring-right 会变成0 ，width则是auto
如果margin-left 、maring-right 同时设置auto，则margin-left 、maring-right 会设置成相等的值，这种情况适合做水平居中
- margin:0 auto; //水平居中

示例

<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: #bfa;
        border: 10px orange solid;
        /* 下列条件等价于 margin: 0 auto */
        margin-left: auto;
        margin-right: auto;
    }
</style>
<div class="box1"></div>

效果
在这里插入图片描述

6. 垂直方向布局

元素溢出

子元素在父元素的内容区中，如果子元素大小超过了父元素，则子元素就会从父元素中溢出
在这里插入图片描述

处理溢出

overflow
overflow-x 单独设置横向
overflow-y 单独设置纵向

可选值：

visible 溢出内容会在父元素外部位置显示，默认值
hidden 溢出内容会被裁剪，不会显示
scroll 生成两个滚动条，通过滚动条来查看完整的内容
auto 根据需要生成滚动条

示例

<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: #bfa;
        overflow: hidden; /* 隐藏溢出内容 */
    }
</style>
<div class="box1">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores aspernatur illo inventore
    deleniti laudantium quaerat excepturi sed quidem tempore? Eaque, cumque porro. Fuga quam error cupiditate quasi
    eveniet in numquam!
</div>

效果
在这里插入图片描述
visible示例
overflow: visible; /* 默认值 */

hidden示例
overflow: visible; /* 默认值 */
scroll 示例
overflow: scroll ; /* 默认值 */

auto 示例
overflow: auto ; /* 默认值 */
在这里插入图片描述

外边距折叠

垂直外边距的重叠（折叠）：相邻的垂直方向外边距会发生重叠现象

两种条件下，重叠也不同：

兄弟元素之间的重叠
父子元素之间的重叠

兄弟元素重叠

注意：兄弟元素之间的外边距重叠对开发是有益的
相邻的兄弟元素，在垂直方向，两个元素的外边距会取两者之间的最大值（两个外边距都是正值）

特殊情况（负数）：

相邻的外边距一正一负，取两者的和
相邻的外边距都是负值，取两者绝对值最大值

示例

.boxl{
    background-color: #bfa;
    /*设置一个下外边距*/
    margin-bottom: 125px;
}

.box2{
    background-color: orange;
    /*设置一个上外边距*/
    margin-top: 100px;
}

效果
在这里插入图片描述

父子元素重叠

注:父子外边距的折叠会影响到页面的布局，必须要进行处理

父子元素间相邻外边距，子元素会传递给父元素（上外边距）

相当于是你设置一个外边距，影响了父子两个人

示例

.box3{
}

.box4{ 
   margin-top: 100px;
   /*只设置的box4*/
}

效果
在这里插入图片描述

处理方法

粗暴方法
- 利用父元素的padding
- 为父元素设置一个边框，这样跟儿子就不是一个起跑线了
还有更好的，后面学

7. 行内元素的盒模型

span a等行内元素也是一个盒子

行内元素不支持设置宽度和高度
行内元素可以设置padding border margin ，但垂直方向都不会影响布局，只会影响水平方向

如果我就是想要行内元素对页面布局产生影响呢？

display
也是有办法的，使用 display
可选设置:

visible 将元素设置为行内元素
hidden 将元素设置为块元素
inline-block 将元素设置为行内块元素
- 行内块，结合行和块元素，既可以设置宽度和高度又不会独占一行
table将元素设置为一个表格
none元素不在页面中显示
- 不会占用空间，直接消失在网页

visibility
可选属性

visible默认值，元素在页面中正常显示
hidden元素在页面中隐藏不显示，但是依然占据页面的位置

注意：display的none，隐藏之后是不占用空间的，而visibility是会保留布局的

8. 浏览器的默认样式

通常情况下，浏览器会为元素设置一些默认样式

默认样式的存在会影响到页面的布局，通常情况下编写网页时必须要去除浏览器的默认样式（PC端的页面）

效果
我们可以看到会一些间距默认设置
在这里插入图片描述
去除默认样式
如果我们给每个元素单独设置太麻烦了，一般来说，默认样式都是margin padding

所以我们只要同一简写设置为

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

去除浏览器的默认样式的需求是非常普遍的，我们难道每次都需要手动去除浏览器的默认样式？

这样岂不是很麻烦，难道官方就没有想到解决方案吗？

答案也是肯定的，有！

下方两种css样式，我们引入其中一个即可

reset是将所有默认样式去除
而normalize是将所有默认样式统一，这样在不同的浏览器里显示效果也是统一的

reset样式
官方地址：reset.css

<link rel="stylesheet" href="assets/reset.css">

normalize样式
官方地址：normalize.css

<link rel="stylesheet" href="assets/reset.css">

10.盒子大小

默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定

border-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）

可选值：

content-box 默认值，宽度和高度用来设置内容区的大小
border-box 宽度和高度用来设置整个盒子可见框的大小

11.轮廓

outline用来设置元素的轮廓线，用法和border一模一样

.box {
    width: 200px;
    height: 200px;
    background-color: yellow;
    outline: 10px red solid;
}

区别：outline不会影响布局，边框会覆盖到其他元素，而border会影响到布局

在这里插入图片描述

12. 阴影

box-shadow属性用于在一个元素的框架周围添加阴影效果
你可以设置多个由逗号分隔的效果
一个盒状阴影由相对于元素的X和Y的偏移量、模糊和扩散半径以及颜色来描述

box-shadow 用来设置元素的阴影效果，阴影不会影响页面布局

box-shadow: 10px 10px 5px rgba(0, 0, 0, .2);

第一个值：水平偏移量：设置阴影的水平位置
- 正值向右移动
- 负值向左移动
第二个值：垂直偏移量：设置阴影的垂直位置
- 正值向下移动
- 负值向上移动
第三个值：阴影的模糊半径
第四个值: 阴影的颜色

13.圆角

border-radius属性使一个元素的外边框边缘的角变圆
你可以设置一个半径来做圆角，或者设置两个半径来做椭圆角

border-radius用来设置圆角，圆角设置的是圆的半径大小

border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius

border-radius 可以分别指定四个角的圆角

四个值：左上右上右下左下
三个值：左上右上/左下右下
两个值：左上/右下右上/左下
一个值：左上/右上/右下/左下

示例

.box {
    width: 200px;
    height: 200px;
    background-color: yellow;
    border-radius: 50%;
}

在这里插入图片描述

06-盒子模型

文章目录

盒子模型

1. 文档流（normalflow）

2. 块元素

3. 行内元素

4. 盒子模型

盒模型、盒子模型、框模型（box model）

内容区

边框（border）

内边距

外边距

5. 水平方向布局

6. 垂直方向布局

元素溢出

外边距折叠

兄弟元素重叠

父子元素重叠

7. 行内元素的盒模型

8. 浏览器的默认样式

10.盒子大小

11.轮廓

12. 阴影

13.圆角