html,css整体复习记录20220910

块级元素特性

　代表div, p, ul,ol,dl,li,dd,h1,h2.....

　　1. 独占一行显示

　　2. 可以设置宽高

　　3. 没有设置宽高，高度由内容撑开，宽度等于父元素的宽度（块级元素独有特性）

行内元素

　代表span, a, font,strong,em,i....

　　1. 一行显示

　　2. 不能设置宽和高（行内元素特有的特点）

　　3. 宽度和高度由内容撑开

行内块元素

　代表img,input 

　　1. 一行显示

　　2. 可以设置宽和高

CSS特性【理解】

　层叠性

　　1. 必须使用同一个选择器选中一个标签
　　2. 最后定义的样式会将前面定义的样式(重复的部分)覆盖

　继承性

　　继承性必须在嵌套结构的标签中才有发生

　　　　1. 给父元素设置样式
　　　　2. 子元素默认没有样式
　　　　3. 子元素按照父元素的样式去设置

　　可以被继承的属性

　　　　1. color属性可以被继承
　　　　2. font中的所有属性都可以被继承

　　不可以被继承的属性

　　　　width, height

　优先级　

　　标签选择器 < 类选择器 < ID选择器 < 行内样式 < !important
　　10 100 1000 10000 10000+
　　☞ 特点:
　　　　1. 继承的权重为0
　　　　2. 权重可以叠加(如果使用了不通的选择器,都选中的是同一个标签,考虑使用权重叠加计算解决)

css复合写法

　　background: red  url("2.png") no-repeat  20px 50px;   

　　解开分别为

　　　　☞ 背景颜色
　　　　　　background-color：red

　　　　☞ 背景图

　　　　　　background-image: url("2.png");

　　　　☞设置背景是否平铺

　　　　　　background-repeat: repeat(默认平铺)  | no-repeat (不平铺)  |  repeat-x |  repeat-y

　　　　☞ 改变背景图片位置

　　　　　　background-position:　　　　　　

　　　　　　1. 可以直接设置具体的方位名称(left | right | top | bottom | center)
　　　　　　　　background-position: center center;
　　　　　　2. 可以自定义改变背景图片位置,设置具体值
　　　　　　　　background-position: 20px 80px;　

　　　　　　总结:
　　　　　　　　1. 如果background-position中设置了具体值,第一个值代表水平方向
　　　　　　　　2. 如果background-position只设置一个值,第二个值默认代表center

行高实现单行文字垂直居中

　　  文字垂直居中:   行高=容器的高度  line-height: height