1.块元素、内联元素、内联块元素
元素就是标签,布局中常用的有三种标签,块标签、内联标签、内联块元素。
块元素
块元素,也称为行元素,布局中常用的标签如:div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素,他在布局的行为:
- 支持全部的样式
- 如果没有设置宽度,默认的宽度为父级宽度100%
- 盒子占据一行,即使设置了宽度
内联元素
内联元素,也可以称为行内元素,布局中常用的标签如:a、span、em、b、strong、i等等都是内联元素,它们在布局中的行为:
- 支持部分样式(不支持宽、高、margin上下、padding上下)
- 宽高由内容决定
- 盒子并在一行
- 代码换行,盒子之间会产生间距
- 子元素时内联元素,父元素可以使用text-align属性设置元素水平对齐方式
解决内联元素间隙的方法
- 去掉内联元素之间的换行
- 将内联元素的父级设置font-size为0,内联元素自身再设置font-size
内联块元素
内联块元素,也叫行内元素,是新增的元素类型,现在有元素没有归于此类别的,img和input元素的行为类似这种元素,但是也归类与内敛元素,我们可以使用display属性将块元素或者内联元素转化成这种元素。
- 支持全部的样式
- 如果没有设置宽高,宽高由内容决定
- 盒子并在一行
- 以代码换行,盒子会产生间距
- 子元素是内联元素块,父元素可以使用text-align属性设置子元素水平对齐的方式
这三种元素,可以通过display属性来进行转化,不过实际的开发中,块元素用的比较多,所以我们经常把内联元素转化为块元素,少量转化为内联块,而要使用内联元素时,直接使用内联元素,而不用块元素转化了。
display属性
display属性时用来设置元素的类型以及隐藏的,常用的属性有:
- none元素隐藏且不占据位置
- block元素以块元素显示
- inline元素以内联元素显示
- inline-block元素以内联块元素显示
2.浮动
浮动特性
- 浮动元素有左浮动(float:left)和右浮动(float:right)两种。
- 浮动的元素会向左或者向右浮动,碰到父元素边界、其他元素才会停下来。
- 相邻浮动的块元素可以并在一行,超过父级宽度就换行。
- 浮动让行内的元素或者块元素自动的转化为行内块元素(此时不会有行内块元素间隙问题)。
- 浮动元素后面没有浮动的元素会占据浮动元素的位置,没有浮动的元素内的文字会避开浮动的元素,形成文字绕图的效果。
- 父元素如果没有设置尺寸(一般是高度不设置),父元素内整体浮动的元素无法撑开父元素,父元素需要清除浮动。
- 浮动元素之间没有垂直margin的合并。
清除浮动
- 父级上增加属性overflow:hidden
- 在最后一个子元素的后面加一个空的div,给他样式属性clear:both(不推荐)
- 使用成熟的清除浮动样式类:clearfix
.clearfix:after,clearfix:before{content:"";display:table}
.clearfix:after{clear:both}
.clearfix{zoom:1;}
清除浮动的使用方式:
.con{... overflow:hidden}
或者<div class="con" clearfix>
3.定位
文档流
文档流是指的是盒子按照html标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先进行排列,后写的排在后面,每一个盒子都占据自己的位置。
关于定位
我们可以使用css的position属性来设置元素的定位类型,position的设置项如下:
- relative生成相对定位元素,元素所占据的文档流的位置保留,元素元素本身相对于自身原位置进行偏移。
- absolute生成绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了定位的父级元素来进行定位,如果找不到,则相对于body元素进行定位。
- fixed生成固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于浏览器窗口进行定位。
- station默认值,没有定位,元素出现在正常的文档流中,相当于取消定位属性或者不设置定位属性。
- inherit从父元素继承position属性值。
定位元素偏移
定位元素还需要用left、right、top或者bottom来设置相对于参照元素的偏移值。
定位元素层级
定位元素是浮动的正常的文档流之上的,可以使用z-index属性来设置元素的层级
伪代码:
.box{
.......
position:absolute; /*设置了绝对定位*/
left:200px; /* 相对于参照物元素左边向右偏移200px*/
top:100px; /* 相对于参照物元素顶部向下偏移100px*/
z-index:10; /* 将元素层级设置为10*/
}
定位元素特性
绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素。
4.background属性
属性解释
background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解为下面几个:
- background-color:设置背景颜色
- background-image:设置背景背景图片地址
- background-repeat:设置背景图片如何重复平铺
- background-position:设置背景图片的位置
- background-attachment:设置背景图片是固定还是随着页面滚动条滚动
实际应用中,我们可以使用background属性将上面所有的设置项放置在一起,而且也建议这么做,这样可以让性能更高,而且兼容性也很好。