HTML/CSS基础
目录
- 盒模型
- margin叠加
- 块级元素和内联级元素
- z-index属性
- 浮动
盒模型
content-box(默认)
- 布局所占宽度Width
Width = width + padding-left + padding-right + border-left + border-right
- 布局所占高度Height
Height = height + padding-top + padding-bottom + border-top + border-bottom
padding-box
- 布局所占宽度Width
Width = width(包含padding-left + padding-right) + border-top + border-bottom
- 布局所占高度Height
Height = height(包含padding-top + padding-bottom) + border-top + border-bottom
border-box
- 布局所占宽度Width
Width = width(包含padding-left + padding-right + border-left + border-right)
- 布局所占高度Height
Height = height(包含padding-top + padding-bottom + border-top + border-bottom)
margin叠加
一种情况-父子元素叠加
子元素的外边距隔着父元素的内边距和边框. 当这两项都不存在的时候, 父子元素垂直外边距相邻, 产生叠加.
解决方法
- 添加父元素的内边距和边框任何一项即可取消叠加
- 给父元素加上样式即可
块级元素和内联级元素
根据display属性,可以将元素分为块级元素(block)和内联级元素(inline)。
最大区别
- block元素
可以设置宽度,独占一行。
- inline元素
宽度由内容决定,与其他元素并列在一行。
元素举例
div, h1-h6, ul, li, ol, dl, dd, dt
inline-block
宽度可以自行设置,类似block,但是与其他元素共占一行,类似inline.
常用于设置垂直居中.
z-index属性
定义
设置元素的堆叠顺序
用法
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
注意
- 可拥有负的 z-index 属性值
- 仅能在定位元素上奏效
浮动
定义
使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停下来
清除浮动
.clearfix:after {
content:'';
display:block;
clear:both;
}
.clearfix {
*zoom:1;
}