【CSS】<Cascading Style Sheets>CSS盒子模型

目录

一、盒模型(Box Model)概述:

二、盒模型(Box Model)组成:

1.内容区(Content):

2.内边距(Padding):

 Padding样式:​

 3.边框(Border):

边框样式: 

4.外边距:

外边距样式:

三、盒模型(Box Model)布局:

1.盒模型的水平布局:

2.盒模型的垂直布局:

3.外边距折叠:

嵌套块元素垂直外边距的合并:

4.行内元素盒模型:

display设置元素显示类型:

visability设置元素显示类型:

四、盒子大小:


一、盒模型(Box Model)概述:

        在CSS将页面中的所有元素都设置为一个矩形的盒子,将元素设置为盒子之后,CSS网页布局就是对盒子位置的摆放。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。

        看透网页布局的本质: 把网页元素比如文字图片等等,放入盒子里面,然后利用CSS摆放盒子的过程,就是网页布局。


二、盒模型(Box Model)组成:

        所有的文档元素(标签)都会生成一个矩形框,我们成为元素框(element box),它描述了一个文档元素再网页布局汇总所占的位置大小。因此,每个盒子除了有自己大小和位置外,还影响着其他盒子的大小和位置。 

1.内容区(Content):

        元素中的所有子元素和文本内容都在内容区中排列。内容区的大小由width和height两个属性来设置。      

  • width:设置内容区的宽度。
  • heidgt:设置内容区的高度。

2.内边距(Padding):

CSS padding(填充) | 菜鸟教程 (runoob.com)https://www.runoob.com/css/css-padding.html        内容区和边框之间的距离是内边距,内边距的设置会影响到盒子的大小,背景色会延伸到内边距上(属于盒子内部)。

盒子子的大小:内容区  + 内边距 + 边框 

 Padding样式:

 3.边框(Border):

CSS Border(边框) | 菜鸟教程 (runoob.com)https://www.runoob.com/css/css-border.html        边框属于盒子的边缘,边框属于盒子内部,边框的大小会影响整个盒子的大小。要设置边框,需要设置边框的三个所有样式:

  • 边框宽度(border-width)
  • 边框颜色(border-color)
  • 边框样式(border-style)

边框样式: 

4.外边距:

CSS margin(外边距) | 菜鸟教程 (runoob.com)https://www.runoob.com/css/css-margin.html        外边距不会影响盒子可见框大小(不会影响盒子本身大小),但是外边距会影响盒子的位置。margin 清除周围的(外边框)元素区域。margin 没有背景颜色,是完全透明的。margin 可以单独改变元素的上,下,左,右边距,也可以一次改变所有的属性。

外边距样式:


三、盒模型(Box Model)布局:

1.盒模型的水平布局:

        在水平方向上,一个元素在其父元素中的水平方向位置由以下几个元素决定:

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

        父元素的宽度值必须等于所有子元素上述所有属性值之和,浏览器在解析时,会自动调整元素属性的值,使其满足条件。

        可以通过设置auto值,来使浏览器在动态调整时,可以调整指定的属性:

  • width(width的默认值就是auto)
  • margin-left
  • margin-right

        如果将一个宽度设置为auto,则宽度会被调整至最大。三个值都是auto,则width的值被动态调整到最大,其它都是0,所以一般设置margin为auto,指定width的值!!!

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML学习页面</title>

    <style>
        .inner {
            width: 100px;
            height: 100px;
            border: aqua 10px solid;
            padding: 10px;
            margin: auto;
            background-color: rgb(17, 45, 121);
        }

        .outer {
            border: crimson 10px solid;
            background-color: blueviolet;
        }
    </style>
</head>

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

</html>

2.盒模型的垂直布局:

        默认情况下,父元素的高度被内容撑开!如果父元素设置了指定高度,子元素高度超过父元素高度,则会出现子元素内容溢出!

        使用overflow来处理元素溢出问题。CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

CSS 布局 Overflow | 菜鸟教程 (runoob.com)https://www.runoob.com/css/css-overflow.html属性值:

3.外边距折叠:

        当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和,而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)。解决方案: 避免就好了。

嵌套块元素垂直外边距的合并:

        对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,则父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的绝对值较大者,即使父元素的上外边距为0,也会发生合并。

        父子元素相邻外边距,子元素的外边距会传递给父元素。

解决方案:

  • 可以为父元素定义1像素的上边框或上内边距。
  • 可以为父元素添加overflow:hidden。

4.行内元素盒模型:

  • 行内元素不支持设置宽度和高度,只能由内容大小撑开!
  • 行内元素可以设置padding,但垂直方向padding不会影响页面布局。
  • 行内元素可以设置border,垂直方向border不会影响页面布局。
  • 行内元素可以设置margin,垂直方向margin不会影响页面布局。

display设置元素显示类型:

CSS display 属性 | 菜鸟教程 (runoob.com)https://www.runoob.com/cssref/pr-class-display.html属性值:

 行内块元素:既可以设置宽高,又不会独占一行!

visability设置元素显示类型:

CSS visibility 属性 | 菜鸟教程 (runoob.com)https://www.runoob.com/cssref/pr-class-visibility.html属性值:

  •  visible:默认值,元素在页面种正常显示。
  • hidden:元素在页面种隐藏,不显示,但依然占据页面位置。

四、盒子大小:

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

  • box-sizing:用来设置盒子尺寸的计算方式(设置width和height的作用)
    • content-box:默认值,宽度和高度用来设置内容区的大小
    • border-box:宽度和高度用来设置整个盒子可见框大小。width和height指的是内容区和内边距的边框的总大小。

CSS3 box-sizing 属性 | 菜鸟教程 (runoob.com)https://www.runoob.com/cssref/css3-pr-box-sizing.html属性值:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱吃糖的范同学

你的鼓励是我创作的最大动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值