文档流、盒子模型与外边距折叠问题

独立寒秋-

已于 2022-04-16 10:16:37 修改

阅读量247

点赞数

分类专栏：笔记文章标签：前端 html css

于 2022-04-12 15:39:13 首次发布

本文链接：https://blog.csdn.net/weixin_51445423/article/details/124125386

版权

笔记专栏收录该内容

28 篇文章 2 订阅

订阅专栏

一、什么是文档流？

网页是一个多层结构，一层摞着一层
通过css可以设置每一层的样式
我们能够看到的是网页的最上一层
在这些层中最底下的一层称为文档流，文档流是网页的基础
元素默认是在文档流中进行排列的
简单地说文档流就是网页的一个位置，它位于网页的最底层

二、元素的主要状态

在文档流中
脱离文档流

三、元素在文档流中的特点

块元素在文档流中的特点

会在页面中独占一行，自上向下垂直排列
宽度默认是父元素的100%
高度默认是被内容撑开

行内元素在文档流中的特点

不会独占一行，在页面中自左向右水平排列(一行容纳不下时会自动换行)
宽度和高度默认是被内容撑开

盒子模型

css将页面中的所有元素都设置为一个矩形的盒子

将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置

盒子的组成部分

内容区（content）

width: 100px;
height: 100px;
background-color: #f00;
/*此时内容区大小为100px * 100px*/

边框（border）

border: 1px solid #ff0;
/* border: 1px dotted #ff0;
border: 1px dashed #ff0; */
/*可设置top、right、bottom、left四个方向的值*/

内边距（border）

padding: 1px;
padding: 1%;
/*可设置top、right、bottom、left四个方向的值
当设置为%比时参照于父元素的宽度*/

外边距（margin）

margin:10px;
/* 
    可设置top、right、bottom、left四个方向的值
	负值会向相反方向移动
    不会影响盒子可见框的大小
    会影响盒子的位置
    设置left、top、会移动自身
    设置right、bottom会移动其他元素
*/

在这里插入图片描述

块元素的标准盒模型

box-sizing:content-box;

盒子的可见框大小：
由内容区、内边距、和边框共同决定

盒子的实际大小：
由内容区、内边距、边框、外边距共同决定

.div2{
            box-sizing: content-box;
            width: 100px;
            height: 100px;
            background-color: #f00;
            padding: 10px;
            border: 1px solid #000;
            margin: 20px;
        }

在这里插入图片描述

行内元素的标准盒模型

行内不支持设置宽度和高度
行内元素可以设置padding，会覆盖住下面的兄弟元素
可以设置border，会覆盖住下面的兄弟元素
可以设置margin，不会覆盖住下面的兄弟元素

边框盒模型

特点：

padding、border、不会撑开盒子
盒子可见模型只由内容区决定，（把内边距、边框的计算方式放进内容区里了），会把盒子变小

盒子的可见框大小=盒子的实际大小

由内容区决定

.div1{
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            background-color: #bfa;
            padding: 10px;
            border: 1px solid #000;
            margin: 20px;
        }

在这里插入图片描述

垂直外边距重叠问题

兄弟元素

相邻的兄弟元素垂直外边距会取两者之间的较大者

如果使一正一负的值取两者的和

都是负值时取两者中绝对值较大的

在这里插入图片描述

.div1{
    width: 400px;
    height: 400px;
    background-color: #f00;
    margin-bottom: 10px;
}
.div2{
    width: 100px;
    height: 100px;
    background-color: #ff0;
    margin-top: 20px;
     /* 此时两者的外边距为20px */
}

父子元素

父子元素间的外边距，子元素会传递给父元素

会影响页面布局

.father{
    width: 400px;
    height: 400px;
    background-color: #f00;
}
.son{
    width: 100px;
    height: 100px;
    background-color: #ff0;
    margin-top: 100px;
}

在这里插入图片描述

解决方式：

<style>
    .father{
        width: 400px;
        height: 400px;
        background-color: #f00;
    }
    .son{
        width: 100px;
        height: 100px;
        background-color: #ff0;
        margin-top: 100px;
        }
        .clearfix::after,
        .clearfix::before{
        /* //将他显示为一个表格，（表格有边框，可以将父子元素的外边距隔开），解决重叠问题 要给折叠的父元素/失去高度的元素设置 */
        display: table;
        content:"";
        clear:"both";
    }
</style>
</head>
<body>
<div class="father clearfix">
    <div class="son "></div>
</div>
</body>

在这里插入图片描述

独立寒秋-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
文档流、盒子模型与外边距折叠问题

一、什么是文档流？网页是一个多层结构，一层摞着一层通过css可以设置每一层的样式我们能够看到的是网页的最上一层在这些层中最底下的一层称为文档流，文档流是网页的基础元素默认是在文档流中进行排列的简单地说文档流就是网页的一个位置，它位于网页的最底层二、元素的主要状态在文档流中脱离文档流三、元素在文档流中的特点块元素在文档流中的特点会在页面中独占一行，自上向下垂直排列宽度默认是父元素的100%高度默认是被内容撑开行内元素在文档流中的特点不会独占一行，在页面中自左向右水
复制链接

扫一扫