码迷,mamicode.com
首页 > Web开发 > 详细

CSS相关

时间:2016-06-05 12:37:37      阅读:130      评论:0      收藏:0      [点我收藏+]

标签:

1.盒子3D模型(5层):border、content+padding、background-image、background-color、margin

2.CSS布局模型:绝对定位(absolute)、相对定位(relative)、固定定位(fixed,与background-attachment:fixed功能相同)

3.定宽块状元素水平居中:用margin-left/right:auto;

不定宽块状元素水平居中:加table标签,display:inline ;table{margin:0 auto;};

设置position:relative和left:50%;

自动居中,设置包裹层,如:#a{width:200px;margin:0 auto;},auto会根据浏览器的宽度自动的设置外边距,外边距=(浏览器的宽度-外包含层的宽度)/2

如果想让页面自动居中,设置margin:auto后不能再设置浮动或绝对定位属性

4.设置了浮动的元素,仍旧处于标准文档流中,仍占据空间。

5.横向两列布局:relative——父元素相对定位(固定宽度列)

absolute:自适应宽度元素绝对定位

注意:固定宽度列的高度>自适应宽度的列

5.fixed定位——绝对定位:脱离文档流,位置固定不变,兄弟元素会从其下穿过

未设置偏移量:有已定位祖先元素:以祖先元素为基准定位;无已定位祖先元素:以浏览器窗口为基准定位

已设置偏移量:有无已定位祖先元素,均以浏览器窗口为基准偏移。

 

CSS相关

标签:

原文地址:http://www.cnblogs.com/mo-cha/p/5560430.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!