CSS0-1课程复习和总结

2015-07-29 本文已影响24人鹿惊_silence

1、页面的背景是固定的，不随页面的滚动而滚动

背景固定有两种实现方式，一种是元素 fixed，其背景不做特殊处理；另一种是背景固定，元素不做特殊处理。

2、同时放大和缩小窗口可以发现页面背景也会随之放大和缩小

第二种实现方式

3、居中外包围框

页面的外包围框有几个作用：

（1）居中内容

（2）围框里所有 block 元素的默认宽度是充满父容器的宽度，不需要个别为每个元素设置宽度。

我们之后支持响应式布局只需要调整外包围框的宽度即可改变内部所有元素的宽度，非常方便。

居中外包围框

width:960px;设置外包围框的宽度。之所以设置为960px,是因为一般浏览器宽为1024，加上滚动条就为1000-1004。960给滚动条和其他浏览器UI预留了足够的空间，并且960这个数字可以被2,3,4,5,6,8,10,12等数字除尽，方便做网络。

margin:0 auto;让浏览器自动计算左右边距，使外包围框居中。这个居中技巧这能在设置了宽度的容器时使用。

3、针对块级元素，行元素的不同居中技巧。

块级元素：p, div, h1, h2, table, ol 等等。

行元素：在文字流里面显示，浏览器不会添加断行。默认宽度刚好适应内容。span, img, a, button, input 等等。

居中

centered-image是将一个行元素居中，首先将img用display:block;变为块级元素，再用margin: 0 auto;居中块元素（元素一定要有width属性）。如果想要居中一个行元素（比如img），但不影响同个容器里面的其他元素，那你可以选择把它设定为块元素来居中。

centered-container使用text-align居中,必须经过一个元素的父元素来居中(这里的父元素为contianer,子元素是包含在里面的p,h,img，进过对父元素设置center来使p,h,img居中，所以text-aligh是设置在父元素上的属性)，这会影响在这个容器里所有的元素。

4、text-shadow属性

text-shadow:h-shadow v-shadow blur color；

border-radius属性

border-radius:1-4 length|%/1-4 length|%;

如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。

5、用 margin 调整间距（解决 margin collapse 的问题）

margin调整间距

在 .container 上面加上的padding: 1px;有点神奇。假如没有加上这个padding: 1px;，你会发现效果变成了这样：

没有padding:1px;

这是因为容器本身的 margin-top 会和第一个子元素的 margin-top 折叠在一起。在容器和top这个字符之间的空白其实是子元素的 margin-top。同样的，父元素的 margin-bottom 会和最后一个子元素的 margin-bottom 也折叠一起了。

6、CSS属性排列顺序规则

定位属性: position, float, z-index, clear

盒模型相关属性: padding, margin, display, width, height, border

字体相关

CSS2 视觉相关属性 (background)

CSS3 属性 (border-radius, box-shadow)

7、

分页

8、

面包屑

9、

下拉菜单

10、去除列表风格，且同行展示

列表

list-style是针对整个列表样式而言的，display针对ul里的li而言的。li默认是块元素，需要元素在同行显示的把它们变成行元素即可。

11、inline-block

inline 元素只能设置左右内边距和外边距，而不能设置其高度和上下内外边距。和垂直高度有关的 padding, margin, height 都无效。这时可以使用display: inline-block。inline-block元素可以简单理解为对外表现为行元素，而对内表现为块元素。上下 padding, margin 有效,容器的 text-align 会对它居中。

12、用 Float 布局来占满父容器的宽度