CSS总结(上)
由于最近在准备前端方面的面试，所以对自己平常工作中用到的地方做出一些总结。该篇是CSS部分(上)，有许多地方叙述的并不是十分详细，只是大致的描述一下，给自己提供一个知识轮廓。本篇中主要描述了CSS中的基础部分，以及一些CSS3的新特性。下篇将会继续介绍CSS3动画部分以及移动端部分。
CSS渲染的过程就好像在一张白纸上画画一样，你需要清楚的知道在什么位置画上那些内容(定位过程)，这些内容的大小(盒模型)是多少以及该内容的颜色(color)，背景(background属性)，文字(text属性)等属性。
盒模型
文档中的每个元素被描绘为矩形盒子。渲染引擎的目的就是判定大小，属性——比如它的颜色、背景、边框方面——及这些盒子的位置。在CSS中，这些矩形盒子用标准盒模型来描述。这个模型描述了一个元素所占用的空间。每一个盒子有四条边界：外边距边界margin, 边框边界border, 内边距边界padding与内容边界content。
IE盒模型和W3C盒模型在计算总宽度存在一些差异详细内容请参考该链接
- 在W3C模型中: 总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
- 在IE模型中: 总宽度 = margin-left + width + margin-right
在CSS3中引入了box-sizing属性, 它可以允许改变默认的CSS盒模型对元素宽高的计算方式.
共包括两个选项：
- content-box：标准盒模型，CSS定义的宽高只包含content的宽高
- border-box：IE盒模型，CSS定义的宽高包括了content，padding和border
定位机制
css有三种基本定位机制: 标准文档流(Normal flow), 浮动(Floats)和绝对定位(Absolute positioning)。
- 标准文档流
- 从左到右，从上向下，输出文档内容
- 由块级元素(从左到右撑满页面，独占一行，触碰到页面边缘时自动换行的元素, 如div, ul, li, dl, dt, p)和行级元素组成(能在同一行内显示并且不会改变HTML文档结构，如span, input)
- 浮动
- 设置为浮动的元素将会往左(float:left)或者往右(float:right)漂移, 直到遇到阻挡 - 其他浮动元素或者父元素的边框。浮动元素不在标准文档流中占据空间,但会对其后的浮动元素造成影响。
- 绝对定位
- 设置为绝对定位的元素(posistion:absolute)将从标准文档流中删除，其所占据的标准流空间也不存在。然后通过top,left,right,bottom属性对其相对父元素进行定位。
网页布局
- 流动布局
需了解实现块居中常见的几种方式 - 浮动布局
- 当设置float:left或者float:right时, 元素会左移或右移直到触碰到容器位置，仍然处于标准文档流中。当元素没有设置宽度值，而设置了浮动属性，元素的宽度随内容的变化而变化。当元素设置为浮动属性后，会对紧邻之后的元素造成影响，紧邻之后的元素会紧挨着该元素显示。当父元素包含块缩成一条时，用clear:both方法无效，它一般用于紧邻后面的元素的清除浮动，要用overflow属性。清除浮动的方法有两种:使用clear属性 - clear: both; 同时设置width:100%(或固定宽度) + overflow:hidden。
- 浮动布局可实现横向多列布局
- 绝对定位布局
- position：static, relative, absolute, fixed
- static是默认值
- 相对定位relative
- 相对于自身原有位置进行偏移
- 仍处于标准文档流中
- 随即拥有偏移属性和z-index属性
- 固定定位fixed
- 一个固定定位（position属性的值为fixed）元素会相对于视窗来定位,这意味着即便页面滚动，它还是会停留在相同的位置。一个固定定位元素不会保留它原本在页面应有的空隙。
- 绝对定位absolute
- 相对于最近的已定位的祖先元素, 有已定位(指position不是static的元素)祖先元素, 以最近的祖先元素为参考标准。如果无已定位祖先元素, 以body元素为偏移参照基准, 并且它会随着页面滚动而移动。
- 完全脱离了标准文档流。
- 随即拥有偏移属性和z-index属性。
- 实现横向两列布局
- 常用于一列固定宽度，另一列宽度自适应的情况
- relative - 父元素相对定位
- absolute - 自适应宽度元素定位
- 能够实现横向多列布局
- position：static, relative, absolute, fixed
常见布局实现
常见的布局有以下几种: 单列水平居中布局, 一列定宽一列自适应布局, 两列定宽一列自适应布局, 两侧定宽中间自适应三列布局。
重点介绍一下常见的三列布局之: 圣杯布局和双飞翼布局。
圣杯布局和双飞翼布局
两者都属于三列布局，是一种很常见的页面布局方式，三列一般分别是子列sub、主列main和附加列extra，其中子列一般是居左的导航，且宽度固定；主列是居中的主要内容，宽度自适应；附加列一般是广告等额外信息，居右且宽度固定。
圣杯布局
<div class="container">
<div class="main"></div>
<div class="sub"></div>
<div class="extra"></div>
</div>
body {
min-width: 600px; /* 2*sub + extra */
}
.container {
padding-left: 210px;
padding-right: 190px;
}
.main {
float: left;
width: 100%;
height: 300px;
background-color: rgba(255, 0, 0, .5);
}
.sub {
position: relative;
left: -210px;
float: left;
width: 200px;
height: 300px;
margin-left: -100%;
background-color: rgba(0, 255, 0, .5);
}
.extra {
position: relative;
right: -190px;
float: left;
width: 180px;
height: 300px;
margin-left: -180px;
background-color: rgba(0, 0, 255, .5);
}
双飞翼布局(淘宝使用的布局方式)
<div class="main-wrapper">
<div class="main"></div>
</div>
<div class="sub"></div>
<div class="extra"></div>
.main-wrapper {
float: left;
width: 100%;
}
.main {
height: 300px;
margin-left: 210px;
margin-right: 190px;
background-color: rgba(255, 0, 0, .5);
}
.sub {
float: left;
width: 200px;
height: 300px;
margin-left: -100%;
background-color: rgba(0, 255, 0, .5);
}
.extra {
float: left;
width: 180px;
height: 300px;
margin-left: -180px;
background-color: rgba(0, 0, 255, .5);
}
总结:
- 俩种布局方式都是把主列放在文档流最前面，使主列优先加载。
- 两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。
- 两种布局方式的不同之处在于如何处理中间主列的位置：圣杯布局是利用父容器的左、右内边距定位；双飞翼布局是把主列嵌套在div后利用主列的左、右外边距定位。
TODO:
- margin为负值时的使用
border-radius
又称圆角属性，通常使用该属性将图片圆角化，如头像。
border-radius: 50%;
border-radius另外一个常用的手段是CSS动画。
word-wrap & text-overflow
word-wrap属性用来指出浏览器在单词内进行断句，防止字符串太长而找不到它的自然断句点时产生的溢出。
word-wrap: break-word;
text-overflow用于文本溢出:
单行缩略的实现如下:
.oneline {
white-space: nowrap; //强制文本在一行内输出
overflow: hidden; //隐藏溢出部分
text-overflow: ellipsis; //对溢出部分加上...
}
多行缩略实现如下(主要针对webkit内核):
.multiline {
display: -webkit-box !important;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
