元素的类型和转换
块元素<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等
1、独占一行 2、可以控制宽、高、外边距、内边距 3、宽度默认值是容器(父级宽度)的100% 4、是一个容器及盒子，里面可以放行内元素或块级元素 注意： <h1>~<h6>、<p>、<dt>定义列表这些标签都是文字类块级标签，里面不能放块级元素
行内元素<strong>加粗、<em>斜体、<del>删除线、<ins>下划线、<a>、<span>等
不会独占一行 不能设置宽、高、对齐等属性，宽和高一般是文字的高度和长度
行内块元素<img />、<input />、<td>
可以设置宽、高、对齐属性
元素类型的转换 块级元素转行内元素：display:inline(div不能设置宽高等属性) 行内元素转块级元素：display：block(span可以设置宽高等属性) 块、行内元素转行内块级元素：display：inline-block
行高计算 行高=基线与基线的距离 垂直居中：竖直方向居中 单行文字在盒子中垂直居中对齐：文字的行高=盒子的高度
(文字的)行高与(盒子的)高度的三种关系 1、行高=高度 —>文字垂直居中 2、行高>高度—>文字偏下 3、行高<高度—>文字偏上
CSS的层叠性和继承性
层叠性 当选择器相同时，css对文本的修饰采取就近原则
继承性
color、text- 、font- 、line- 可以继承
CSS的优先级
权重计算 继承或*(通配符选择器)：0,0,0,0 标签选择器： 0,0,0,1 类选择器：0,0,1,0 id选择器：0,1,0,0 行内式style:" " :1,0,0,0 !important 无穷大
注意：
数位之间没有进制，0,0，0,5+0,0，0,5=0,0，0,10。它的权重不会超过类选择器 继承的权重是0 选择器相同，则执行层叠性，就近原则；选择器不同，就要考虑优先级的问题 修改样式，一定要看标签有没有被选中，如果选中了，那么用以上的公式来计算权重，谁大表现谁的样式；如果没选中，那么权重为0，因为继承的权重为0
看几道例题，更好的理解一下吧！！！ 1、
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ color:green; } div{ color:blue; } </style> </head> <body> <div > 猜猜是什么颜色？ </div> </body> </html>选择器相同，执行层叠性，就近原则
2、
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .color{ color:green; } div{ color:blue; } </style> </head> <body> <div class="color"> 猜猜是什么颜色？ </div> </body> </html>虽然两种样式作用在同一个标签上，但是第一个是类选择器，它比标签选择器的权重大，所以执行类选择器的样式
3、
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .color { color:green; } .color2 { color:blue; } </style> </head> <body> <div class="color"> <p>猜猜是什么颜色？</p> <div > <p>猜猜是什么颜色？</p> <div class="color2"> <p>猜猜是什么颜色？</p> <div > <p>猜猜是什么颜色？</p> </div> </div> </div> </div> </body> </html>因为都没有选中p标签，所以权重为0。但color的样式执行到color2的位置是被color2覆盖。就如运行结果所示。
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
