CSS进击之路
2017-09-20 本文已影响0人
小白李呆呆
在认识了基本css后，我们今天再来讲解几个属性、选择器，然后再看看css盒子模型，以及一些问题。
css属性进击
- 文字的一些属性
- 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;必须按顺序写，若其中有值没有设置，则会使用其默认值。
- 列表自带的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;
- 元素溢出
当子元素的尺寸大于父元素时，子元素就会溢出。解决这个问题就会引入overflow这个属性了。
- overflow有4个值
- overflow: visible; 默认值，内容不会被裁剪。
- overflow: hidden; 内容裁剪，超出部分不可见。
- overflow: scroll; 内容裁剪，浏览器显示滚动条来查看其他内容。
- overflow: auto; 只有内容被裁剪，才会显示滚动条来查看其他内容。
盒子模型
盒子模型分为两种：
- 标准w3c盒子模型
- IE盒子模型
标准w3c盒子模型
直接上图就能明白了
标准盒子模型
从图中可以看出内容content部分不包含其他部分。
IE盒子模型
来个图
IE盒子模型
可以看出，内容部分还包含了padding和border。
那么问题来了，怎么知道选用的是什么盒子模型呢？其实很简单，只需要在代码顶部加上DOCTYPE声明，浏览器就会使用标准盒子模型解释盒子了。
margin垂直外边距合并和塌陷问题
- 垂直外边距合并
问题描述：当两个垂直外边距相遇的时候，就只会形成一个外边距，合并后的外边距为两个外边距中较大的那一个。
解决方法：
- 给父容器设置一个border/padding，均不能为0.
- 给父容器设置属性，overflow:hidden;或者overflow:auto;
- 浮动float：left；或者float：right；
- 定位position：absolute；
- 子容器设置属性display:inline-block;或者display:inline-table;
- 塌陷
问题描述：盒子嵌套时，里面盒子设置的margin-top会加到外面盒子上，导致内部盒子设置失败。
解决方法：
- 父容器设置边框
- 父容器overflow：hidden
- 一个高级一点的用法，.clearfix:before{content: '';display:table;}，需要使用的地方加上class="clearfix"即可。
好了，到此结束，多动手敲敲，看看效果。
