html和css基础知识总结（4）

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权重无效