css自问自答(二)

css自问自答(二)

7.掌握定位的一些属性

position 和 display 属性，以及如何浮动（float）和清除（clear）元素,z-index属性

三个属性控制： position 属性、 display 属性和 float 属性。

position属性：控制页面上元素间的位置关系，
display属性：控制元素是堆叠、并排，还是根本不在页面上出现，
float属性：提供控制的方式，以便把元素组成成多栏布局。

8.定位

（1）相对定位

相当于它把自己从原来的包含元素中挣脱出来了，要注意，除了这个元素自己相对于原始位置挪动了一下之外，页面没有发生任何变化。换句话说，这个元素原来占据的空间没有动，其他元素也没动。
多数情况下，只用 top 和 left 就可以实现我们想要的效果
{position:relative; top:25px; left:30px;}

(2)绝对定位

绝对定位会把元素彻底从文档流中拿出来
{position:absolute; top:25px; left:30px;}
绝对定位的元素完全脱离了常规文档流

(3)固定定位

固定定位与绝对定位类似。
 {position:fixed; top:30px; left:20px;}
但不同之处在于，固定定位元素的定位上下文是视口（浏览器窗口或手持设备的屏幕），因此它不会随页面滚动而移动。

9.浮动与清除

应用：

一是可以实现传统出版物上那种文字绕排图片的效果
二是可以让原来上下堆叠的块级元素，变成左右并列，从而实现布局中的分栏。

强迫父元素包围其浮动的子元素有三种方式

（1）为父元素应用 overflow:hidden

（2）浮动父元素

（3）在父元素内容的末尾添加非浮动元素，可以直接在标记中加，也可以通过给父元
素添加 clearfix 类来加（当然，样式表中得需要相应的 clearfix 规则）
.clearfix:after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}

10.厂商前缀

-moz-transform:skewX(-45deg); /* Firefox */
-webkit-transform:skewX(-45deg); /* Chrome 及 Safari */
-ms-transform:skewX(-45deg); /* 微软 Internet Explorer */
-o-transform:skewX(-45deg); /* Opera */
transform:skewX(-45deg); /* 最后是 W3C 标准属性 */

提示：在一些新的css3属性中需要用上

11.流动布局，固定宽度布局，弹性布局的区别

固定宽度布局

固定宽度布局的大小不会随用户调整浏览器窗口大小而变化，一般是 900 到 1100像素宽。其中 960 像素是最常见的，因为这个宽度适合所有现代显示器，而且能够被 16、 12、 10、 8、 6、 5、 4 和 3 整除，不仅容易计算等宽分栏的数量，而且计算结果也能得到没有小数的像素数。

流动布局

流动布局的大小会随用户调整浏览器窗口大小而变化。这种布局能够更好地适应大屏幕，但同时也意味着放弃对页面某些方面的控制，比如随着页面宽度变化，文本行的长度和页面元素之间的位置关系都可能变化。在各栏宽度加大时通过为内容元素周围添加空白来保持内容居中，而且现在的导航条会在布局变窄到某个宽度时收缩进一个下拉菜单中，从而为内容腾出空间。

弹性布局

弹性布局与流动布局类似，在浏览器窗口变宽时，不仅布局变宽，而且所有内容元素的大小也会变化，让人产生一种所有东西都变大了的感觉。

12.了解响应式设计

响应式网站设计主要是指利用 媒体查询，流动布局和自适应图片等方式，创建的一个在不同屏幕下都能漂亮显示的站点

13.IE条件注释

<!-- HTML 标记 -->
<!-- 只让 IE8 之前的 IE 加载它 -->
<!--[if lt IE 8 ]>
<script src="helpers/borderBoxModel.js"></script>
<![endif]-->