Css03
复习昨天知识
Css书写位置
☞内嵌写法
☞外链式写法
<link href=”1.css” rel=”stylesheet”>
万全实现了css与html结构的分离
☞行内式写法
Style属性
Html标签分类
按照显示模式进行分类
块级元素
☞元素自己独占一行显示（默认有宽度）
☞可以设置宽度和高度
☞子元素的宽度与父元素的宽度一样（嵌套关系）
行内元素
☞所有元素在一行上显示
☞不能直接设置宽度和高度
行内块元素
☞所有元素在一行上显示
☞可以直接设置宽度和高度
元素模式之间的相互转化
Display: block; 转化为块级元素
Display: inline-block; 转化为行内块元素
伪类介绍
a:link{} a{}
a:visited{} 访问过后的样式
a:hover{} 鼠标移动到超链接上的样式（用的最多）
a:active{} 超链接激活状态下的样式
:focus 获取焦点的样式
背景（background）
Background-color
Background-image:url(“”)
Background-repeat:
☞repeat
☞no-repeat
☞repeat-x
☞repeat-y
Background-position
☞具体的方位名称（left,right,top,bottom,center）
☞第一个值水平方向 第二个值垂直
Background-attachment
☞ scroll
☞ fixed（背景固定）
---------------------------------------------------------------------------------------------------------------------------------
新知识介绍
浏览器默认文字大小 16px
默认行高： 18px（inlne-height）
行高=文字大小+上间距+下间距
行高：
行高的作用
当行高值为父容器的高度时，可以让父容器中的文字垂直显示
行高单位问题
单独给一个元素设置行高
|
行高单位 |
赋值 |
文字大小 |
行高值 |
|
px |
20px |
20px |
20px |
|
em |
2em |
20px |
40px |
|
% |
120% |
20px |
24px |
|
不带单位 |
2 |
20px |
40px |
总结：
当给一个独立的元素设置行高值的时候，除了以px为单位的行高值与文字大小无关，其他都与文字大小有关（与文字大小的积）
盒子嵌套，给父元素设置行高值，子元素的行高问题
|
行高单位 |
设置行高 |
父文字 |
子文字 |
行高 |
|
Px |
20px |
20px |
30px |
20px |
|
em |
2em |
20px |
30px |
40px |
|
% |
120% |
20px |
30px |
24px |
|
不带单位 |
2 |
20px |
30px |
60px |
行高可以实现继承！！
总结：
当父元素设置的行高值除不带单位情况下，都是先与父元素的文字大小相乘最后的结果，被子元素继承
盒子模型（box）
作用
进行网页布局
网页中盒子的组成
☞border(边框)
☞内边距（padding）
☞外边距（margin）
１.1 Border（边框）
☞Border-width: 边框宽度
☞border-style: 边框样式
◆solid 边框为实线
◆dotted 点线
◆dashed 虚线
☞border-color: 边框颜色
border另外一种写法
单独设置边框样式
属性联写
注意：
属性联写的时候没有先后顺序限制，边框颜色可以不写，边框宽度可以不写
表单优化写法：
表格单元格合并：
Padding（内边距）
Padding-left: 左边距
Padding-right: 右边距
Padding-top: 上边距
Padding-bottom: 下边距
☞属性联写：
Padding: 10px; 上，右，下，左的距离为10px
Padding: 10px 20px; 上下10px 左右20px
Padding: 10px 20px 30px 上10px 左右20px 下30px
Padding: 10px 20px 30px 40px; 上， 右 ， 下， 左
内边距：设置内容距离盒子边框之间的距离
盒子大小计算
☞边框可以影响盒子大小
☞内边距影响盒子大小
宽度=内容宽度+左右边框+左右内边距
注意：
以后进行页面盒子布局的实现，如果给盒子设置了内边距，对应的要将内容宽度或者高度减去相应的值。
盒子大小影响特殊地方
继承的盒子再父盒子宽度范围内，padding值不会影响该盒子大小
外边距（margin）
设置盒子与盒子之间的距离
Margin-left：
Margin-right：
Margin-top：
Margin-bottom：
Margin: 10px 上 右 下 左 10px
Margin:10px 20px 上下10px 左右20px
Margin: 10px 20px 30px 上10px 左右20px 下30px
Margin: 10px 20px 30px 40px 上右下左
☞当两个盒子垂直显示的时候，外边距以设置的最大值为准（外边距合并的第一种情况）
☞外边距塌陷（有难问题）
◆给父盒子设置边框
◆给父盒子设置overflow:hidden;
给父元素设置了overflow：hiddenh会触发bfc
