阿里前端CSS下

标准文档流

浮动

浮动案例

清除浮动

1.给父元素添加高度

2.使用清除浮动的样式属性 clear:left;

空白的div，任务是清除浮动；

3.overflow:hidden;

盒子模型

width,padding,margin,border

padding

margin

margin塌陷现象

在标准流文档中，竖直方向的margin值不会叠加，它取两者中较大的值；

浮动元素，是没有margin的塌陷现象的。

margin居中

块级元素设置固定的宽度后，可以实现水平居中；

行内元素不可以。

标准文档流才可以实现水平居中；

浮动元素不可以。

文本对齐：text-align:center;

使用父元素的padding而不是子元素的margin

父元素设置边框线，子元素margin；一般不使用

margin用来描述兄弟元素之间的关系；

父元素设置padding，效果相同；

父子元素使用padding。

border属性

边框的线型

dotted,dashed,solid,double,

display属性

块级元素和行内元素之间的转换

display : block;

display : inline;

将一个显示的元素隐藏display : none;

将一个隐藏的元素显示display : block;

固定定位、相对定位、绝对定位

position : fixed;relative;absolute

*固定定位元素脱离了标准文档流，会挡住标准文档流，不再占用空间，显示的位置不随浏览器而滚动

*相对定位元素没有脱离标砖文档流，以原来的自己为参照物（若没有设置定位的坐标），会将标准文档流中的元素盖住，定位坐标值可以是负数；

配合绝对定位使用。

*绝对定位：祖先定位元素；绝对定位元素脱离了标准文档流，不再占用空间，会盖住标准文档流，

子绝父相：祖先元素可以是以上几种定位，一般使用的是相对定位。

z-index属性

没有设置的话，按照顺序来。

CSS3

包含css2和新的语法和新的属性

结构伪类

border-collapse

伪元素

文本阴影

text-shadow

盒子阴影

圆角矩阵

border-radius

圆角矩阵案例

透明度