标签分为两种
1、行内元素(span , a , b , i , u , em)。
- 与其他行内元素并排。
- 不能设置宽高,默认的宽度就是文字的宽度。
- display:inline; 标签将变为行内元素。
2、块级元素(div , p , h , li , dt , dd)。
- 霸占一行,不能与其他任何元素并列。
- 能接受宽高,如果不设置宽度,那么宽度将默认变为父级的100%。
- display:block; 标签将变为块级元素。
元素脱离标准流文档,也可让块级元素并排。
1、浮动(Float)
- 浮动的的元素脱标。
- 浮动的元素互相贴靠。
- 浮动的元素由"子围"效果。
2、绝对定位(absolute)
- 绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位(绝对或者相对)的父元素,那么它的位置相对于<html>:
3、固定定位(fixed)
CSS 盒子模型
元素可以看作盒子。
- Margin(外边距) :如居中,margin: 0 auto;
- Border(边框) :如 border: 1px solid red;
- Padding(内边距)
- Content(内容)
CSS其他常用属性
1、相对定位(relative)
- 相对定位元素的定位是相对其正常位置。
- 相对定位的特性是虽然它定位了,就算给了偏移量它离开了原来的地方,但是它原来占的地方也不会让出来的,这样的好处是原来在它周围的其他元素不会因为它的离开而改变位置而使页面乱套
2、overflow属性
- 用于控制内容溢出元素框时显示的方式。scroll滚动,hidden隐藏。
3、对齐
- 元素居中对齐, 可以使用 margin: auto;但是需要指定宽度,会将两边的空外边距平均分配
- 文本居中对齐,如果仅仅是为了文本在元素内居中对齐,可以使用 text-align: center;
- 左右对齐,可以使用 position: absolute;绝对定位元素会被从正常流中删除,并且能够交叠元素。
- 左右对齐 - 使用 float 方式
- 垂直居中对齐 - 使用 padding,实现垂直居中对齐。 一个简单的方式就是头部顶部使用 padding:
- 垂直居中 - 使用 line-height,使用height与line-height相等。
- 垂直居中 -我们还可以使用 transform 属性来设置垂直居中: