CSS的三大特性
a.层叠性
- 就近原则，哪个样式离结构近，就执行哪个样式
- 样式不冲突不会层叠
b.继承性
例如：给div这个样式的同时会给p这个样式
<div>
<p>2345</p>
</div>
- 子元素可以继承父元素的样式(text-, font-, line-这些元素开头的可以继承，以及color属性)
- 简化代码
行高的继承性
body {
font:12px/1.5 'Mircrosoft YaHei'
子元素继承了父元素body的行高的1.5倍
}
<body>
<div> 1234 </div>
<p> 1234 </p>
</body>
c.优先级
当同一个元素指定多个选择器，就有优先级的产生
- 选择器相同，则执行层叠性
- 选择器不同，则根据选择器权重执行
| 选择器 | 选择器权重 |
|---|---|
| 继承或者* | 0,0,0,0 |
| 元素选择器 | 0,0,0,1 |
| 类选择器，伪类选择器 | 0,0,1,0 |
| ID选择器 | 0,1,0,0 |
| 行内样式style="" | 1,0,0,0 |
| !important | 无穷大 |
1.CSS盒子模型
1.1边框(border)
border可以设置元素的边框
border: border-width || border-style || border-color
| 属性 | 作用 |
|---|---|
| border-width | 定义边框粗细，单位是px |
| border-style | 边框的样式,solid实线边框,dashed虚线边框,dotted点线 |
| border-color | 边框颜色 |
边框简写：
border: 1px solid red; 没有顺序
1.2表格的细线边框
边框会影响盒子实际大小
border-collapse属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框
border-collapse:collapse;
- collapse单词是合并的意思
- border-collapse: collapse;表示相邻边框合在一起
1.3内边距(padding)
内边距也会影响盒子实际大小
padding属性用于设置内边距，即边框与内容之间的距离
简写：
| 值的个数 | 表达意思 |
|---|---|
| padding: 5px | 上下左右 |
| padding: 5px 10px | 上下5px 左右10px |
| padding: 5px 10px 20px | 上5px 左右10px 下5px |
| padding: 5px 10px 20px 30px | 上5px 右10px 下20px 左30px 顺时针 |
如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小
(写了width: 100%可撑开)
1.4外边距(margin)
margin属性用于设置外边距，即控制盒子与盒子之间的距离
margin简写方式代表的意义跟padding完全一致
外边距可以让块级盒子水平居中，但需符合两个条件：
1）盒子必须制定了宽度(width)
2）盒子左右的外边距都设置为auto
.header { width:960px; margin:0 auto;}
行内元素或者行内块元素水平居中，给父元素添加text-align: center即可
父元素和子元素都用margin，会出现嵌套块元素塌陷的情况
解决方案：
- 为父元素定义上边框/上内边距
- 为父元素添加overflow: hidden
1.5内外边距的清除
网页元素很多都带有默认的内外边距，不同1浏览器不同，在布局前要清楚网页元素的内外边距
* {
margin: 0;
padding: 0;
}
行内元素为了照顾兼容性，尽量只设置左右的内外边距
去掉li前面项目符号的小圆点
list-style:none;
圆角边框
border-radius:length; //length为数值或百分比(圆的半径)
radius半径(圆的半径)原理：(椭)圆与边框的交集形成圆角效果
圆角矩形设为高度的一半，也可以设置不同的圆角，四个值按顺时针显示出效果
盒子阴影
使用box-shadow属性添加阴影。语法：
box-shadow: h-shadow v-shadow blur spread color inset
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置，允许负值 |
| v-shadow | 必需。垂直阴影的位置，允许负责制 |
| blur | 可选，模糊距离 |
| spread | 可选，阴影的尺寸 |
| color | 可选，阴影的颜色 |
| inset | 可选，将外部阴影(outset)改为内部阴影 |
文字阴影
使用text-shadow属性
2.CSS浮动float
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法：
选择器 {float: 属性值(left/right/none[默认]);}
2.1标准流(普通流/文档流)
标签按照规定好的默认方式排列,最基本的布局方式
1.块级元素，从上向下排列
常用元素：div，hr，p，h1~h6，ul，ol，dl，form，table
2.行内元素，从左到右排列，碰到父元素边缘则自动换行
常用元素：span，a，i，em
- 如果要把几个div排成一行，则要用display: inline-block;
- 浮动可以改变元素标签默认的排列方式(可以让多个块级元素在一行内排列显示)
多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
2.2浮动特性
a.脱标
- 脱离标准普通流的控制(浮)移动到指定位置(动)，(俗称脱标)
- 浮动的盒子不再保留原先的位置
b.浮动一行显示
- 如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列
- 浮动的元素是互相贴靠在一起的
c.浮动元素具有行内块元素特性
-
任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性
-
如果行内元素有了浮动，则不需要转换就可以直接给高度和宽度
-
如果块级元素没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
2.3浮动元素和标准流父级搭配使用
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
3.常见网络布局模式
3.1常见网络布局
header -> banner -> main(left/right) -> footer
浮动布局注意点
浮动的盒子只会影响浮动盒子后面的标准流(一般都设置为浮动)
3.2清除浮动
浮动盒子不占用位置，最后给父级盒子高度为0时。会影响下面的标准流盒子,因此要清除浮动。清除浮动后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了。
语法：
选择器{clear:属性值(both);}
方法：闭合浮动
a.父级添加overflow属性
添加overflow属性，将其属性值设置为hidden,auto或scroll
overflow: hidden(缺点：溢出隐藏)
b.父级添加 :after伪元素
代码实现:
.clearfix:after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/*IE6、7 专有*/
*zoom: 1;
}
c.父级添加双伪元素
代码实现：(前后插盒子，闭合浮动)
.clearfix: before,cleardix:after {
content: "";
display: table;
}
.clearfix: after {
clear: both;
}
.clearfix {
*zoom: 1;
}
d.额外标签法(clear: both) //必须是块级元素
4518
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
