CSS学习笔记-盒模型

最新推荐文章于 2023-07-11 20:20:15 发布

weixin_34138255

最新推荐文章于 2023-07-11 20:20:15 发布

阅读量126

点赞数

原文链接：https://juejin.im/post/5c14993cf265da611639ad89

版权

盒模型

关于盒模型

盒模型作为css的基本概念特别重要。盒模型表示的是页面元素占据的区域，这个区域由4部分组成：

其中元素盒子有两部分可见，分别为内容和边框，内边距是内容和边框之间的空间，外边距是边框和页面上其它元素之间的空间。其中内边距边界和边框边界之间的部分就是边框区域。
当元素包含其它元素时，父元素的内容盒子称为子元素的块容器（container block），通常称为容器。

元素盒模型的常用css属性

padding：用于设置盒子内边距区域尺寸
margin：用于设置盒子外边距区域的尺寸
width, height：设置元素的尺寸
box-sizing：设置尺寸应用到盒子的哪一部分
max-width,min-width,max-height,min-height：设置元素尺寸的范围
overflow, overflow-x, overflow-y：设置元素溢出内容的处理方式
display: 设置元素盒子的可见性
visibility：设置元素的可见性
float：将元素移动到其包含块的左边界或者右边界，或者另一个浮动元素的边界
clear：设置盒子的左边界、右边界或左右两个边界不允许出现浮动元素
复制代码

关于padding和margin

padding，margin属性理解起来比较简单。padding和margin是简写，单独写padding和margin会同时设置盒模型四条边的边距属性，可以为这些属性指定1~4个值，具体含义如下

padding: 5px 25px 5px 40px; 表示分别为顶边，右边，底边和左边（顺时针方向）的内边距设置边距值为5px，25px， 5px和40px

padding：5px 25px 5px; 表示分别为顶边，右边，底边和左边的内边距设置边距值为5px，25px，5px和25px

padding：5px 25px; 表示分别为顶边，右边，底边和左边的内边距设置边距值为5px，25px， 5px和25px

padding：5px; 表示分别为顶边，右边，底边和左边的内边距设置边距值为5px
复制代码

可见padding的设置中，如果省略底边距，则默认使用顶边距，如果省略右边距，则默认使用左边距。margin也有如此性质。
同时我们也可以指定某个特定边的内（外）边距，如使用padding-top, padding-bottom, padding-left, padding-right（margin-top, margin-botton, margin-left, margin-right）

关于box-sizing

width，height，max-width，min-width,max-height，min-height几个属性都是用于调整元素的尺寸的（盒子的大小），其默认值是auto（即浏览器会为我们设置好元素的宽度和高度）。
而box-sizing是css3才出现的属性，该属性用于设置元素的尺寸调整应用于元素盒子的哪一部分。box-sizing的几个值有content-box，padding-box，border-box和margin-box（对应盒子的四个部分）

关于overflow

当显示内容无法完全显示在元素的内容盒子中时，默认情况下内容会溢出，并在盒子区域外继续显示，我们也可以调整overflow属性来处理溢出的情况。overflow-x和overflow-y的含义就是处理水平方向和垂直方向的溢出方式。

overflow有几个值

auto：当内容溢出时添加滚动条
hidden：溢出内容不现实
no-content：有内容溢出就将全部内容移除
no-display：有内容溢出则全部内容不显示（但是内容还是占据着对应的空间）
scroll：添加滚动条（即使内容没有溢出）
visible：默认方式
复制代码

关于visibility

简单的控制元素可见性的属性，有三个值可选

collapse：元素不可见同时元素在页面布局中不占据空间
hidden：元素不可见但在页面布局中占据空间
visible：元素在页面上可见

复制代码

关于display属性

display是一个很重要的属性，主要作用是用于改变元素盒类型，同时该改变也会影响到元素在页面上的布局方式。display的几个较为常用的值有：

inline：盒子显示可类比为文本中的字
block：盒子显示可类比为文本中的段落
inline-block：盒子显示可类比为文本中的文本行
list-item：盒子显示可类比为列表项，通常具有项目符号或其它标记符号
flex-box：弹性盒布局
table：与表格中的元素布局相关
复制代码

块级元素 block

块级元素表示该元素独占页面中的一行，其效果类似于在元素的前后放置换行符。块级元素的特点有：

每个块级元素都从新的一行开始，并且其后的元素也另起一行。
元素的高度、宽度、行高以及顶和底边距都可设置。
元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

在html中有一些display默认为block的标签，例如 div，p，h1~hn，form，ul和li等等。如下例：

<style>
    .div_1{
        background-color: #ff2421;
    }

    .div_2{
        background-color: #abcdef;
    }
</style>
<div class='div_1'>1234567</div>
<div class='div_2'>7654321</div>
复制代码

显示效果如下，div元素默认的display属性为block，因此显示为两个占据不同行的分块。

行内元素 inline

当元素的display属性为inline的时候，元素会和其它元素并列占据一行，直到行内无法放下新元素的时候才会跳转到下一行，行内元素的性质有：

和其他元素都在一行上；
元素的高度、宽度及顶部和底部边距不可设置；
元素的宽度就是它包含的文字或图片的宽度，不可改变。
span、a、label、 strong 和em等标签默认都是行内元素。

<style>
    .div_1{
        width: 50px;
        height: 50px;
        background-color: #ff2421;
        display:inline;
    }
    .div_2{
        width: 50px;
        height: 50px;
        background-color: #abcdef;
        display:inline;
    }
</style>
<div class='div_1'></div>
<div class='div_2'></div>
复制代码

此时看到的是一片空白，其原因在于inline类型的元素其尺寸是不可设置的，大小由其内容确定。接下来在div标签中加入内容。

<style>
    .div_1{
        background-color: #ff2421;
        display:inline;
    }
    .div_2{
        background-color: #abcdef;
        display:inline;
    }
</style>
<div class='div_1'>1234567</div>
<div class='div_2'>7654321</div>
复制代码

如下可见两段文字现在显示在一排之内

当设置多个inline元素之后，如果inline元素占据的宽度大于行的宽度，则会自动换到下一行

行内-块级元素 inline-block

顾名思义，inline-block元素兼具inline元素和block元素的特性，其主要是使得元素在同一行中显示，同时元素的尺寸可以设置：

和其他元素都在一行上；
元素的高度、宽度、行高以及顶和底边距都可设置
img，input标签默认就是行内-块级标签

<style>
    .div_1{
        background-color: #ff2421;
        display:inline-block;
    }
    .div_2{
        background-color: #abcdef;
        display:inline-block;
    }
</style>
<div class='div_1'>1234567</div>
<div class='div_2'>7654321</div>
复制代码

display还有一个none值，设置为该值后元素的内容不会显示在页面上，而且元素在页面空间中不会占据任何空间。

关于浮动 float 和 clear

float会将元素的左边界或者右边界移动到包含块或另一个浮动盒模型的边界，其取值有 left， right 和 none 三个。

left： 移动元素，使该元素的左边界紧挨包含块的左边界，或另一个浮动元素的右边界

right：移动元素，使该元素的右边界紧挨包含块的右边界，或另一个浮动元素的左边界

none：元素位置固定
复制代码

<style>
    .div_1{
        background-color: #ff2421;
        float:left;
        width:40%;
    }

    .div_2{
        background-color: #abcdef;
        float:left;
        width:40%;
    }
</style>
<div class='div_1'>
    1234567 1234567 1234567 1234567 1234567 1234567 1234567 
    1234567 1234567 1234567 1234567 1234567 1234567 1234567 
    1234567 1234567 1234567 1234567 1234567 1234567 1234567 
    1234567 1234567 1234567 1234567 1234567 1234567 1234567 
</div>
<div class='div_2'>
    7654321 7654321 7654321 7654321 7654321 7654321 7654321 
    7654321 7654321 7654321 7654321 7654321 7654321 7654321 
    7654321 7654321 7654321 7654321 7654321 7654321 7654321 
</div>
<div>
    1234567 1234567 1234567 1234567 1234567 1234567 1234567 
    1234567 1234567 1234567 1234567 1234567 1234567 1234567 
    1234567 1234567 1234567 1234567 1234567 1234567 1234567 
    1234567 1234567 1234567 1234567 1234567 1234567 1234567 
</div>
复制代码

clear属性指定了浮动元素的某一个边界或者左右边界不能紧挨着其它浮动元素的边界，如下示例：

<style>
    .div_1{
        background-color: #ff2421;
        float:left;
        width:40%;
    }

    .div_2{
        background-color: #abcdef;
        float:left;
        width:40%;
        clear:left; 
    }
</style>
<div class='div_1'>
    1234567 1234567 1234567 1234567 1234567 1234567 1234567 
    1234567 1234567 1234567 1234567 1234567 1234567 1234567 
    1234567 1234567 1234567 1234567 1234567 1234567 1234567 
    1234567 1234567 1234567 1234567 1234567 1234567 1234567 
</div>
<div class='div_2'>
    7654321 7654321 7654321 7654321 7654321 7654321 7654321 
    7654321 7654321 7654321 7654321 7654321 7654321 7654321 
    7654321 7654321 7654321 7654321 7654321 7654321 7654321 
</div>
<div>
    1234567 1234567 1234567 1234567 1234567 1234567 1234567 
    1234567 1234567 1234567 1234567 1234567 1234567 1234567 
    1234567 1234567 1234567 1234567 1234567 1234567 1234567 
    1234567 1234567 1234567 1234567 1234567 1234567 1234567 
</div>
复制代码