相关属性
display
属性 | 属性值 |
---|---|
inherit | 元素从父元素继承 display 属性值 |
none | 元素不显示 |
block | 元素为块级元素 |
inline | 元素为行内元素 |
inline-block | 元素为行内块元素 |
flex | 元素为弹性布局 |
-
块级元素
- 没有设置宽度时,它的宽度是其容器的 100%
- 可以给块级元素设置宽高、内边距、外边距等盒模型属性
- 块级元素可以包含块级元素和行内元素
-
行内元素
- 行内元素不会独占一行,只会占领自身宽高所需要的空间
- 给行内元素设置宽高不会起作用,margin 值只对左右起作用,padding 值也只对左右起作用
- 行内元素一般不可以包含块级元素,只能包含行内元素和文本
-
行内块元素
- 既有行内元素的特性又有块级元素的特性
position
属性 | 属性值 |
---|---|
relative | 相对定位,相对于元素的正常位置进行定位 |
absolute | 绝对定位,相对于除 static 定位以外的元素进行定位 |
fixed | 固定定位,相对于浏览器窗口进行定位,网站中的固定 header 和 footer 就是用固定定位来实现的 |
inherit | 继承父元素的 position 属性值 |
static | 默认值,没有定位属性,元素正常出现在文档流中 |
float
属性 | 属性值 |
---|---|
left | 向左浮动 |
right | 向右浮动 |
清除浮动的方法
- 通过添加额外的标签,利用 clear 属性来清除浮动
- 使用 br 标签(不推荐使用),会存在结构样式行为分离的问题
- 给父元素设置 overflow:hidden; zoom:1(兼容IE6,IE7)
- 使用 after 伪元素
转载地址
网友评论