CSS一些常见属性的用法

目录

1.Display的常用属性. 2

1.1常见属性值：. 2

2.1区别：. 2

2.position属性的5个值. 4

2.1区别. 5

3.z-index 属性：. 7

4.Float属性：. 8

4.1：向左浮动. 8

4.2clear的用法. 9

1.Display的常用属性

1.1常见属性值：

有 none ，block ，line-block ，line ，flex

2.1区别：

None表示此元素不显示，也不占空间如图一

 图一

如果是visibility:hidden也是隐藏，但占空间如图二

图二

Inline是改成内联元素（就是占据一行，不可以改变其高度宽度，内外边距，文字居中无效）像span、a、label、img（但是他可以改变高度和宽度，内外边距如图三

）

、strong、b、i、em等标签，如图四

图三

 

图四

block为块级元素，可以设置高宽，文字居中有效，宽度缺省是它的容器的100%，除非设定一个宽度（如图五），像<p>, <div>,<h1>~<h6>等，如图六

图五

 

图六

Inline-block为行内块元素

既有块级元素的特征，也有内联元素的特性，元素为内联元素，元素内容为 块级元素，可以居中改变内外边距,如图七

图七

2.position属性的5个值

Static （默认值），absolute（绝对定位），fixed（固定），relative（相对定位），stick（粘贴定位）

2.1区别

Static默认值，没有定位，元素正常定位，则left，right，bottom，top，Z-index无效。如图八

 

图八

Absolute（绝对定位，一定是相对于父元素定位）不受文档流影响，不占文档空间，可能会和其他元素重叠，相对于父元素定位，滑轮可以划掉，如图九 

图九

Relative（相对定位），相对于本身的位置而改变，因此占用原本空间。如图十

 图十

Fixed（定位）无论窗口是否滚动，元素都会在那个位置，浮于上方，不会占据空间，可以与其他元素重叠，如图11

图11

Sticky依赖于用户滚动，没滚动时相当于relative，滚动回来当前页面依然不变如图12，滚动后相当于fixed，要借助于bottom，left，top等如图13

 

图12

 

图13

3.z-index 属性：

指定一个元素的堆叠顺序，元素一定要是定位元素，默认值是 0，其值可为正、负，如果为正数，则离元素越近如图14，为负数则表示在元素后如图15。 失效原因标签含有浮动元素，去除浮动元素即可。

图14

图15

4.Float属性：

会使元素向左向右排，影响周边元素，浮动之前的元素不受影响，之后的元素受影响，浮动元素会一直向左或右，除非碰到外边缘或者另一个浮动元素停止，浮动元素不能上下浮动，只能左右浮动，使用clear可以清除float影响

4.1：向左浮动

如图16，向右浮动也是一样，改成right则反之

 

图16

4.2clear的用法

属性有：both，left，right，分别为两边不存在浮动，左边没有，右边没有。如图17和18对比

图17

 

图18