前端学习第六周

2.元素显示模式：更好的让我们布局页面。
2.1什么是元素显示模式：元素以什么方式进行显示。
2.2块元素
2.2.1特点：
（1）比较霸道，自己独占一行
（2）高度，宽度，外边距。内边距都可以控制。
（3）宽度默认是容器的100%
（4）是一个容器及盒子，里面可以放行内或块级元素。
2.2.2注意：（1）文字类的元素不能使用块级元素。
（2）<p>标签主要存放文字，所以p里面不能放块级元素。
（3）h1-h6都是文字类块级标签。
2.3行内元素
2.3.1特点（1）相邻行内元素在一行上，一行可以显示多个。
（2）高、宽直接设置是无效的。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或其他行内元素。
2.3.2注意（1）链接里面不能再放链接。
（2）<a>里面可以放块级元素，给<a>转换一下块级模式最安全。
2.4（特殊情况）行内块元素：同时具有块元素和行内元素的特点。
特点：和相邻行内元素之间存在空白缝隙。
总结：
2.5元素显示模式转换
转换为块元素：display：block；
转换成行内元素:display:inline;
转换为行内块：display:inline-block;
2.6snipaste：截图工具
1.F1可以截图，同时测量大小，设置箭头，书写文字等
2.F3在桌面置顶显示
3.点击图片，alt可以取色（按shift可以切换取色模式。
4.按esc取消图片显示
2.7单行文字垂直居中：让文字的行高等于盒子的高度
3.背景
3.1背景颜色：background-color：transparent|color
语法：background-color：颜色值
一般情况下背景颜色默认值是transparent(透明)
3.2背景图片：background-image
优点：便于控制位置
语法：background-image：none|url(ur1)
作用
3.3背景平铺：background-repeat
语法：background-repeat：repeat|no-repeat|repeat-x|repeat-y

作用：

3.4背景图片位置：background-position：x y;
x和y可以使用方位名词或者精确单位
1.方位名词
（1）xy都为方位名词，与顺序无关；
（2）如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。
2.精确单位
（1）x,y顺序是特定的。
（2）只指定一个数值，一定是x坐标，另一个默认垂直居中。
3.混合单位
x,y顺序特定
3.5背景图像固定（背景附着）：background-attachment
语法：background-attachment：scroll|fixed

3.6背景复合写法：
background：transparent url(image.jpg) repeat-y fixed top;
3.7背景色半透明：background：rgba(0,0,0,0.3);
（1）a:alpha,透明度；
（2）可以将0.3前的0去掉，直接写.3。
（3）背景色透明，背景内容不受影响。  

1.三大特性：层叠性、继承性、优先级
1.1层叠性：解决样式冲突
原则：（1）样式冲突，就近原则
（2）样式不冲突，不会层叠
1.2继承性
（1）子标签会继承父标签的某些样式，降低样式的复杂性。
（2）子元素可以继承的样式（text-，font-，line-，color）
1.2.1行高的继承性

语法：
（1）行高可以跟单位也可以不跟单位
（2）如果子元素没有设置行高，则会继承父元素的行高为1.5
（3）此时子元素的行高是，当前子元素文字大小*1.5
（4）body行高1.5，子元素可以根据自己的文字大小自动调整行高

1.3优先级
1.3.1当同一个元素指定多个选择器，就会有优先级的产生。
（1）选择器相同，则执行层叠性。
（2）选择器不同，则根据选择器权重执行
1.3.2选择器权重：
优先级注意点：
（1）权重是有四组数字组成。但是不会有进位。
（2）类>元素选择器，id>类。
（3）等级判断从左向右，若某一位数值相同，则判断下一位数值。
（4）继承的权重是0，如果元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。
1.3.3权重叠加：若是复合选择器，会有权重叠加，需要计算权重。