目录
一、盒模型(Box Model)概述:
二、盒模型(Box Model)组成:
1.内容区(Content):
2.内边距(Padding):
Padding样式:
3.边框(Border):
边框样式:
4.外边距:
外边距样式:
三、盒模型(Box Model)布局:
1.盒模型的水平布局:
2.盒模型的垂直布局:
3.外边距折叠:
嵌套块元素垂直外边距的合并:
4.行内元素盒模型:
display设置元素显示类型:
visability设置元素显示类型:
四、盒子大小:
在CSS将页面中的所有元素都设置为一个矩形的盒子,将元素设置为盒子之后,CSS网页布局就是对盒子位置的摆放。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。
看透网页布局的本质: 把网页元素比如文字图片等等,放入盒子里面,然后利用CSS摆放盒子的过程,就是网页布局。
所有的文档元素(标签)都会生成一个矩形框,我们成为元素框(element box),它描述了一个文档元素再网页布局汇总所占的位置大小。因此,每个盒子除了有自己大小和位置外,还影响着其他盒子的大小和位置。
元素中的所有子元素和文本内容都在内容区中排列。内容区的大小由width和height两个属性来设置。
CSS padding(填充) | 菜鸟教程 (runoob.com)https://www.runoob.com/css/css-padding.html 内容区和边框之间的距离是内边距,内边距的设置会影响到盒子的大小,背景色会延伸到内边距上(属于盒子内部)。
盒子子的大小:内容区 + 内边距 + 边框
CSS Border(边框) | 菜鸟教程 (runoob.com)https://www.runoob.com/css/css-border.html 边框属于盒子的边缘,边框属于盒子内部,边框的大小会影响整个盒子的大小。要设置边框,需要设置边框的三个所有样式:
CSS margin(外边距) | 菜鸟教程 (runoob.com)https://www.runoob.com/css/css-margin.html 外边距不会影响盒子可见框大小(不会影响盒子本身大小),但是外边距会影响盒子的位置。margin 清除周围的(外边框)元素区域。margin 没有背景颜色,是完全透明的。margin 可以单独改变元素的上,下,左,右边距,也可以一次改变所有的属性。
在水平方向上,一个元素在其父元素中的水平方向位置由以下几个元素决定:
父元素的宽度值必须等于所有子元素上述所有属性值之和,浏览器在解析时,会自动调整元素属性的值,使其满足条件。
可以通过设置auto值,来使浏览器在动态调整时,可以调整指定的属性:
如果将一个宽度设置为auto,则宽度会被调整至最大。三个值都是auto,则width的值被动态调整到最大,其它都是0,所以一般设置margin为auto,指定width的值!!!
HTML学习页面
默认情况下,父元素的高度被内容撑开!如果父元素设置了指定高度,子元素高度超过父元素高度,则会出现子元素内容溢出!
使用overflow来处理元素溢出问题。CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
CSS 布局 Overflow | 菜鸟教程 (runoob.com)https://www.runoob.com/css/css-overflow.html属性值:
当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和,而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)。解决方案: 避免就好了。
对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,则父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的绝对值较大者,即使父元素的上外边距为0,也会发生合并。
父子元素相邻外边距,子元素的外边距会传递给父元素。
解决方案:
CSS display 属性 | 菜鸟教程 (runoob.com)https://www.runoob.com/cssref/pr-class-display.html属性值:
行内块元素:既可以设置宽高,又不会独占一行!
CSS visibility 属性 | 菜鸟教程 (runoob.com)https://www.runoob.com/cssref/pr-class-visibility.html属性值:
默认情况下,盒子可见框大小由内容区、内边距、边框共同决定!
CSS3 box-sizing 属性 | 菜鸟教程 (runoob.com)https://www.runoob.com/cssref/css3-pr-box-sizing.html属性值: