认识盒模型
所有HTML标签都可以看成矩形盒子,由width、height、padding、border构成,称为“盒模型"
width、height不是盒子总宽高
盒子的总宽度=width+左右padding+左右border
属性width和height属性详解
属性
padding、margin、border
padding
内边距
影响盒子实际大小,会让元素的内容增大
margin
外边距
不影响盒子实际大小,不会让元素的内容增大,是和另一个元素的间距
盒子实际大小受padding和border的影响,跟margin没有关系
若加了padding和margin值,设置width和height时,注意减去padding和margin的值
使用margin值的情况:
1.需要在border外侧添加空白时;
2.空白处不需要背景色时;
3.上下相连得两个盒子之间的空白需要相互抵消时,如15px+20px得margin,将得到20px的空白。(margin折叠)
4.需要使用负值对页面布局时(margin值可以取负值,padding不行)
使用padding时的情况:
1.需要在border内侧添加空白时。
2.空白处需要背景(色)时。
上下相连的两个盒子之间的空白,希望等于两者之和时。如15px+10px将得到25px的空白。
最后,需注意margin是用来隔开元素与元素的间距;padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不干扰;padding用于元素与内容之间的间隔,让内容与元素之间有一段距离。
在怪异盒模型中,一个块的总宽度受margin影响但不受padding影响。
width
表示盒子内容的宽度
未设置width属性时自动撑满,并不意味着width可以继承
height
表示盒子内容的高度
未设置height属性时自动被其内容撑开,如果无内容则height为0
padding
包含四个方向
可分别用小属性设置
小属性 意义
padding-top 上padding
padding-right 右padding
padding-bottom 下padding
padding-left 左padding
如何灵活设置padding?
四数值写法
分别表示上、右、下、左
padding: 10px 20px 30px 40px;
三数值写法
分别表示上、左右、下
padding: 10px 20px 30px;
二数值写法
分别表示上下、左右
padding: 10px 20px;
小属性层叠大属性
上左右padding为40,下padding为0
padding: 40px;
padding-bottom: 0;
margin
也有四个方向
小属性 意义
margin-top 上margin,“向上踹”
margin-right 右margin,“向右踹”
margin-bottom 下margin,“向下踹”
margin-left 左margin,“向左踹”
塌陷
存在于竖直方向
小的margin塌陷到大的margin中,即margin不叠加以大值为准
默认值
一些元素(比如body、ul、p等)有默认的margin
在开始制作网页的时候,要清除
/* 通配符选择器表示选择所有元素 */
* {
margin: 0;
padding: 0;
}
/* 通配符有效率问题,应使用并集选择器 */
body,
ul,
p {
margin: 0;
padding: 0;
}
盒子居中
谁要居中 | 水平 | 竖直 |
---|---|---|
文本 | text-align:center; | line-height=盒子高height |
盒子 | margin:0 auto; | (如下代码) |
父亲{
position:relative;
}
元素{
position: absolute;
top: 50%;
margin-top: -自己高度一半;
}
盒模型计算
标准盒子模型
元素实际大小
元素的实际宽度= width + padding-left + padding-right + border-left + border-right
元素空间尺寸
元素空间宽度=元素实际宽度 + margin-left + margin-right
box-sizing
设置 box-sizing: border-box;后 width、height表示元素实际大小
.box {
box-sizing: border-box;
width: 200px;
height: 200px;
border: 10px solid #000;
padding: 10px;
}
大量应用于移动网页制作中,结合百分比布局、弹性布局等非常好用
在PC页面开发中使用较少
兼容到IE9
文档流
指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式,
最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素
标签分类
HTML中
文本级标签-只能放文字、图片、表单元素;
容器级标签-可放任意(容器级标签、文本级标签、文字、图片、表单元素)
CSS中
分类和HTML很像,p不一样
元素分类
display属性类型 | 是否能并排显示 | 是否能设置宽高 | 不设置width属性时 |
---|---|---|---|
块级元素 | 否 | 是 | 宽度默认是父亲的100%(自动撑满) |
行内元素 | 是 | 否 | 宽度是内容的宽度(自动收缩) |
行内块元素 | 是 | 是 |
特殊的行内块: 图片、表单元素
关系:定位后,行内元素转换成块级元素
元素类型转换
语句 | 意义 |
---|---|
display:block | 转化为块级元素 |
display:inline | 转化为行内元素(不多见) |
display:inline-block | 转化为行内块元素 |
元素隐藏
display:none
元素彻底放弃自己的位置,如同没有写它的标签一样
visibility:hidden
元素不放弃自己的位置