元素的类型和转换
块元素<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覆盖。就如运行结果所示。