目录
一、CSS样式
1、行内样式
在标签中使用html属性"stye"来引用css样式，尽量少写，行内样式只在该标签中有效
2、内嵌样式：
在本页面的head中的<style></style>标签中书写，内嵌样式的作用范围就是本页面
3、外部样式：
建立独立的样式文件来书写css样式：*.css
在页面中引用该样式文件：
<link type="text/css" rel="stylesheet" href="css样式名">
好处：作用范围最宽广;大批量的复用;
html内容和样式分离,有利于开发过程各个职位分工合作
二、选择器
1、标签选择器：标签名 选取规则：以选择器名作为标签名的标签 效果：所有同类标签同一种外观
2、类选择器：.类名 如class="big" .big 选取规则：标签中的class是否等于类名 效果：同一种标签不同外观，不同标签同一种外观
3、id选择器：#id名 选取规则：标签的id值是否等于id名 效果：页面中唯一
4、通配符选择器：* 用来统一设置页面中全部字大写，内外边距
*{
margin:0; /*外边距*/
padding:0; /*内边距*/
}
5、后代选择器：父选择器 子选择器 （如：main p）
6、伪类选择器：a:linked或a:visited,a:hover,
效果：超链接+操作的动作
a:visited：被点击过的超链接
三、CSS的三大特性：
1、继承性：子标签可以继承父标签的一些css属性：text-,font-，line-,color
适当利用一些代码，减少重复性代码
2、覆盖性：如果有多个选择器选取了同一个网页元素，
css属性表现为：没有冲突则层叠，
有冲突：若选择器名相同，则后面覆盖前面，就近原则
3、优先级： 选择器名不相同，则需要确定优先级---计算权重值（权重值大的优先）
| 选择器 | 权重值(分4部分，代表权重级别，不能计算进位) |
| 继承或* | 0，0，0，0（无权重） |
| 标签 | 0，0，0，1（1个权重） |
| 类,伪类 | 0，0，1，0 |
| id | 0, 1, 0, 0 |
| 行内样式 | 1，0，0，0 |
| !important | 无限大 |
!important 无限大 [在css样式的属性值后加!improtant(color:red!improtant)]
注意 ：.nav a复合选择器，应该拆开相加权重
0,0,1,0+0,0,0,1=0,0,1,1
先比较左边，再比较右边
四、盒子模型：
边框：border:border-width|border-style|border-color 如：border:3px solid red;
border-width：边框粗细
border-style：边框线的形状
none:没有边框线
solid:实线
dotted:点画线
dashed:虚线
double:双实线
border-top:上边框
border-left:左边框
border-right:右边框
border-bottom:下边框
border-collapse:边框线合并，表格和单元格的边框线进行合并
padding：内边距(内容和边框之间的距离)
效果：将内容反方向挤动，撑大盒子
1个值，上下左右
2个值 上下 左右
3个值 上 左右 下
4个值 上 右 下 左
若只设置一个方向的内边距：padding-top|padding-left|padding-right|padding-bottom
内边距会撑大盒子，解决办法：设置盒子宽高，用盒子宽高减去相应的内边距值
padding不撑大盒子的情况：一开始没有设置盒子的宽高
margin属性用于设置外边距，margin就是控制盒子与盒子之间的距离
margin-
margin-top|margin-left|margin-right|margin-bottom
块级元素水平居中：1，设置了width 2.margin设置auto
网页元素中有默认的内外边距且数值不一样，造成css困扰，一般先清除默认内外边距
清除操作：
*{
margin:0;
padding:0;
}
注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距
盒子中的文字水平居中text-align：center
块级盒子水平居中，左右margin:0 auto
根据稳定性，优先使用宽度，其次使用内边距，再次外边距
外边距合并：
使用margin定义块元素的垂直外边距时，可能会出现外边距合并
1、相邻块元素垂直外边距的合并
解决办法：尽量只给一个盒子添加margin值
2、嵌套块元素垂直外边距的合并（塌陷）
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
父元素的上外边距会与子元素的上外边距发生合并
合并后的外边距为两者中的较大者
解决办法：1>可以为父元素定义上边框
2>可以为父元素定义上内边距
3>可以为父元素添加overflow:hidden
或其他办法，如浮动，固定，绝对定位
五、css布局的三种机制：
1、普通流（标准流）
块级元素独占一行，从上而下排列
div hr p h1-h6 ul ol dl form table
行内元素按照顺序从左到右排列，碰到父元素边缘则自动换行
span a img i
2、浮动float:left|right|none;
让盒子从普通流脱离标准流的控制，移动到指定位置
作用：让多个div水平排成一列，使得浮动成为布局的重要手段
可以实现盒子的左右对齐等等
display:inline-block会造成盒子之间有边距，不容易消除
浮动元素与兄弟盒子的关系：
在一个父级盒子中，如果前一个兄弟盒子是：
1>浮动的，则当前盒子会与前一个盒子顶部对齐
2>普通流，则当前盒子会显示在前一个兄弟盒子的下方
浮动只会影响当前的或者后面的标准流盒子，不会影响前面的标准流
如果一个盒子里面有多个盒子，如果其中一个盒子浮动了，其他盒子也要设置浮动
清除浮动：clear:left|right|both(清除左或右或全部)
why清除浮动?父盒子很多情况下不方便给高度
浮动布局解决什么问题？
（1）很多情况下，如果我们使用了float特效，出现margin，padding设置不能正确显示
浮动会导致父级子级之间设置了padding，导致了属性不能正常传达，导致margin不能正常显示，所以我们要清除浮动。
（2）导致背景不能显示
如果对父级设置了背景属性，导致父级不能撑开，会影响到背景图片不能正常打开。
（3）边框不能撑开
由于子级使用了浮动效果，
并且已经产生了浮动，父级不能撑开，所以影响边框不会随着内容的变化而变化。
方法：1、额外标签法（隔墙法）：通过在浮动元素末尾添加一个空的标签，例如<div style="clear:both"></div>或其他标签br等亦可
2、父级元素添加overflow：hidden|auto|scroll（滚动）
3、定位：定位=定位模式+边偏移
边偏移用top,bottom,left,right表示偏移值
定义元素相对于父元素上下左右偏移
定位模式：position:static(静态定位)|relative(相对定位)|absolute(绝对定位)|fixed(固定定位)
static静态定位是元素的默认方式，无定位的意思，相当于border里面的none，不要定位的时候用
按照标准流特性摆放，没有边偏移，几乎不用
relative相对定位是元素相对于它原来在标准流中的位置来说的
absolute绝对定位是元素以带有定位的父级元素来移动位置（拼爹型）
1.完全脱标——完全不占位置
2.父元素没有定位，则以浏览器为准定位
fixed固定定位是绝对定位的一种特殊形式
1.完全脱标——完全不占位置
2.只认浏览器的可视窗口——"浏览器可视窗口+边偏移属性"来设置元素的位置
例如：
实现子盒子在父盒子上面
父： position:relative;
子： position:absolute;
top:0;
left:0;*/
1742
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
