5-13.背景background
- 特点
- 背景撑不开盒子
- 背景颜色 background-color:
- transparent 透明
- #cccc
- rgba(255,255,0)
- red
- 背景图片 background-image:url()
- 背景平铺 background-repeat
- no-repeat 不平铺
- repeat-x 水平平铺
- repeat-y 垂直平铺
- repeats 默认值 铺满盒子
- 背景定位 background-position
- 写方位值 left right center top bottom
- 写两个方位词 left和right top和bottom不能一块写
- 写一个方位词 另外一个值默认为center
- 写具体数值
- 写2个值。第一个值为距离左边的距离,第二个值距离顶边位置
- 写1个值。另外一个值默认center
- 方位值和数值混合使用
- 如果第一个是方位值,只能写水平方向 left right center
- 如果第二个方位值 只能写垂直方向 top bottom center
- 百分比:
- 百分比=容器宽度(高度)-图片宽度(高度)=剩余的的值的百分比
- 背景大小 background-size
- cover
- contain
- 具体数值
- 百分比
- 背景附着 background-attachment
- fixed 固定 背景不随着滚动条的滚动而滚动
- scroll 默认值 背景随着滚动条的滚动而滚动
- 当背景附着attchment为fixed,并且同时设置背景定位,其定位参考不是盒子的大小,参考的是浏览器的位置
- 背景属性连写
- background:color image repeat attachment position/size
- 多组背景用逗号隔开,最后一组分号结束,背景颜色写在最后一组
- 注意:大的背景图设置时候,设置定位的时候,想让它居中显示,可以设置top center
- 一般情况相爱,小图标额大的背景图片时使用背景图片,其余插入图片,看自己心情
5-14.标签的显示模式
- 块元素 block
- 典型代表 div p h1-h6 ul ol li dl form
- 特点:
- 独占一行
- 可以设置宽高
- 块元素不设置宽度的时候,默认父元素的宽度,不设置高度的时候,默认高度为0,内容会撑开高度
- 行内元素 inline
- 典型代表 a span strong b em ins u s i
- 特点
- 在一行上显示
- 行内元素不能设置宽和高
- 行内元素默认宽高为0,内容会撑开宽高
- 行内与元素代码换行生成缝隙
- 行内块元素 inline-block
- 典型代表 input img textarea td
- 特点
- 在一行显示
- 可以设置宽高
- 行内块元素换行生成缝隙
- 模式转换 display
- 块元素转行内元素
- display:inline
- 行内元素和行内块元素转换为块级元素
- display:block
- 块元素和行内元素转换成行内块元素
- display:inline-block
5-15.标签的嵌套规范
-
块元素可以嵌套块元素、行内元素、行内块元素
- div可以嵌套任意标签
- p元素不能嵌套其他块元素,可以嵌套行内元素、行内块元素
- 不推荐标题里边嵌套其他块元素,可以嵌套其他的行内元素、行内块元素
-
行内块元素不能嵌套块元素,可以嵌套行内元素,行内块元素
-
行内元素不能嵌套块元素,行内块元素,只能嵌套行内元素
-
a标签不能嵌套a标,但是可以嵌套其他的元素(有时候会嵌套块元素等,需要模式转换)
5-16.行高 line-height
- 属性设置
- normal 默认值 1.1-1.3倍文字大小
- 行高文字基线与基线之间的距离
- 一行文字,行高与标签高度一致的时候,文字垂直居中
- 一行文字,行高小于容器高度的时候,这行文字偏上显示
- 一行文字,行高大于容器高度的时候,这行文字偏下显示
5-17.css三大特性
-
层叠行
- 以color text- font- line-文字类开头的都是可以让子元素继承父元素的样式
- a标签不能继承父元素的文字的颜色
- 标题标签不会继承父元素的文字大小
- 另外,后面会介绍,对于给链接a标签设置文字,尽量采用继承的方式设置文字的大小,以免出现问题
-
优先级
-
优先级解决样式冲突的能力,权重高的优先级大,优先显示,权重低的,不执行
-
权重
- 继承与通配符 0000
- 标签选择器 0001
- 类选择器 0010
- id选择器 0100
- 行内样式 1000
- !important 无穷
- 权重会叠加,叠加演示,eg:0005+0005=00010(懂)
- 分清楚什么是继承 什么是后代
- 权重计算方式:行内样式>id选择器>类选择器>标签选择器>继承与通配符选择器
- 注意:继承性的选择器优先级最低,加!important权重无效