盒子模型(自学笔记)

看透网页布局的本质

把网页元素比如图片文字等等,放入盒子,然后利用css摆盒子的过程,就是网页布局

盒子模型

盒子边框(border)

属性 作用
border-width 边框粗细 像素值
border-style 边框样式 solid(实线);dashed(虚线);dotted(点线)
border-color 边框颜色 red;blue等

连写一般按照以下顺序书写:
border:width style color;
在border后加入方位就可以指定单边的边框样式如:
例:

border-top:1px solid red;

表格的细线边框

table,td {
border-collapse: collapse(表格边框合并)
)

内边距(padding)

padding属性用于设置内边距,是指边框与内容之间的距离
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
注意:后面跟几个数值所表达的意思是不一样的

值得个数 表达的意思
1个值 padding:3px; 表示上下左右都是3px
2个值 padding:3px 5px; 表示上下3px,左右5px
3个值 padding:3px 5px 10px; 表示上3px,左右5px ,下10px
4 个值 padding:3px 5px 10px 15px; 表示上3px,右5px ,下10px,下15px

padding会撑开带有width和height的盒子

外边距(margin)

同内边距用法相同

外边距实现盒子水平居中

text-align:center;可以让盒子内容(文字、行内元素、行内块元素)居中对齐

margin:0 auto; 让盒子水平居中对齐
margin-left: auto 左侧自动充满,盒子靠右
margin-right: auto 右侧自动充满,盒子靠左
margin: auto 上下左右自动充满,盒子居中

实现盒子居中必须满足的条件

  1. 必须是块级元素
  2. 盒子必须设置宽度(width)

然后把左右外边距都设置成auto就能是盒子水平居中

清除默认内外边距

* {
	margin:0;
	padding;0;
}

行内元素没有上下外边距,只有左右外边距

外边距合并

使用margin定义块元素的垂直外边距是时,会出现外边距合并

相邻块元素的垂直外边距合并

当上下相邻的两个块元素 相遇时,如果上面的块元素有margin-bottom, 下面的块级元素有margin-top,它们的垂直间距不是margin-bottom+margin-top之和而是取它们中较大的值,这被称为相邻块元素垂直外边距合并(也称外边距塌陷)

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

对于两个嵌套的块级元素,如果父元素没有上内边距和边框,则父元素的上边距会与子元素的上边距发生合并,合并后外边距为两元素中的较大者,即是父元素的上边距为零也会发生合并

解决方法:

  1. 为父元素添加1px的上内边距或上边框
  2. 为父元素设定:overflow:hidden

content宽度和高度

外盒尺寸计算(元素空间尺寸)
空间高度=height+padding+border+margin
空间宽度=widtht+padding+border+margin

内盒尺寸计算(元素实际大小)
实际高度=height+padding+border
实际宽度=width+padding+border

padding 不会撑开盒子的情况

如果一个盒子没有指定宽度,就会沾满父亲的宽度,和父亲一样宽,这时padding 不会撑开盒子

你可能感兴趣的:(自学笔记)