CSS的三大特性

最新推荐文章于 2024-07-16 17:08:50 发布

陌家宸少

最新推荐文章于 2024-07-16 17:08:50 发布

阅读量1.5k

点赞数

分类专栏： HTML5+CSS3 文章标签： 1024程序员节

本文链接：https://blog.csdn.net/weixin_56665165/article/details/120776391

版权

HTML5+CSS3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML中的块级元素、行内元素和行内块级元素的特性和用途，包括它们的显示方式、尺寸控制及转换方法。此外，还探讨了CSS的层叠性和继承性，以及如何通过权重计算确定样式优先级。通过实例解析了样式冲突的解决策略。

摘要由CSDN通过智能技术生成

元素的类型和转换

块元素<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>