CSS进击之路

在认识了基本css后，我们今天再来讲解几个属性、选择器，然后再看看css盒子模型，以及一些问题。

css属性进击

1. 文字的一些属性

• text-align 文字水平对齐方式，center/left/right
• text-indent 文字首行缩进
• font-style 文字倾斜，默认normal（标准字体样式）、italic（斜体）、oblique（倾斜）
• 文字的几个属性还可以同时设置，font:font-style font-variant font-weight font-size/line-height font-family;必须按顺序写，若其中有值没有设置，则会使用其默认值。

2. 列表自带的list-style
   由于列表会自带一定的样式，所以一般会先清除样式,list-style:none;,再自己进行样式的添加：

• list-style-type 表项标记类型
• list-style-position 标记的放置位置
• list-style-image 设置图像为表项标记
• 也可以合起来写，list-style:list-style-type list-style-position list-style-image;

3. 元素溢出
   当子元素的尺寸大于父元素时，子元素就会溢出。解决这个问题就会引入overflow这个属性了。

• overflow有4个值
• overflow: visible; 默认值，内容不会被裁剪。
• overflow: hidden; 内容裁剪，超出部分不可见。
• overflow: scroll; 内容裁剪，浏览器显示滚动条来查看其他内容。
• overflow: auto; 只有内容被裁剪，才会显示滚动条来查看其他内容。

盒子模型

盒子模型分为两种：

• 标准w3c盒子模型
• IE盒子模型

标准w3c盒子模型

直接上图就能明白了

标准盒子模型

从图中可以看出内容content部分不包含其他部分。

IE盒子模型

来个图

IE盒子模型

可以看出，内容部分还包含了padding和border。

那么问题来了，怎么知道选用的是什么盒子模型呢？其实很简单，只需要在代码顶部加上DOCTYPE声明，浏览器就会使用标准盒子模型解释盒子了。

margin垂直外边距合并和塌陷问题

1. 垂直外边距合并

问题描述：当两个垂直外边距相遇的时候，就只会形成一个外边距，合并后的外边距为两个外边距中较大的那一个。

解决方法：

• 给父容器设置一个border/padding，均不能为0.
• 给父容器设置属性，overflow:hidden;或者overflow:auto;
• 浮动float：left；或者float：right；
• 定位position：absolute；
• 子容器设置属性display:inline-block;或者display:inline-table;

2. 塌陷

问题描述：盒子嵌套时，里面盒子设置的margin-top会加到外面盒子上，导致内部盒子设置失败。

解决方法：

• 父容器设置边框
• 父容器overflow：hidden
• 一个高级一点的用法，.clearfix:before{content: '';display:table;}，需要使用的地方加上class="clearfix"即可。

好了，到此结束，多动手敲敲，看看效果。