元素的类型和转换
块元素<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.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |