CSS复杂选择器，权重计算问题，CSS基础属性,盒子模型，层模型

最新推荐文章于 2022-08-08 23:00:49 发布

Hermioneee_

最新推荐文章于 2022-08-08 23:00:49 发布

阅读量214

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/qq_36936831/article/details/107091182

版权

CSS复杂选择器，权重计算问题，CSS基础属性

①CSS复杂选择器
1.父子选择器/派生选择器
前面写父级后面写子级父级下所有的子级都会改变

HTML：

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>
	<link rel="stylesheet" type="text/css" href="new 1.css">	
</head>
<body>
	<div class="wapper">
		<span>123</span>
	</div>
	<span>234</span>
</body>		       
</html>

CSS:

div span{ 			 /*也可以标签的claas和id 如： .wapper span{}*/
    background-color: red!important;
}

在这里插入图片描述
2.直接子元素选择器
浏览器按照自右向左的顺序进行排查选择标签
HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>
	<link rel="stylesheet" type="text/css" href="new 1.css">	
</head>
<body>
	<div class="wapper">
		<em>123</em>
		<strong>
			<em>234</em>
		</strong>
	</div>
</body>		       
</html>

CSS:

div > em{  				/*只选择下一级的标签*/
    background-color: red!important;
}

3.并列选择器
多个用多个限制条件，选中一个条件并且不加空格写在一起

HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>
	<link rel="stylesheet" type="text/css" href="new 1.css">	
</head>
<body>
	<div>1</div>
	<div class="demo">2</div>
	<p class="demo">3</p>
	</section>
</body>		       
</html>

CSS:

div.demo{
    background-color: red;
}

在这里插入图片描述
各种选择器组合，标签选择器必须放在前面
4.分组选择器

HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>
	<link rel="stylesheet" type="text/css" href="new 1.css">	
</head>
<body>
	<em>1</em>
	<strong>2</strong>
	<span>3</span>

</body>		       
</html>

CSS:

em,strong,span{             /*一般竖着写*/
    background-color: red;
}

在这里插入图片描述

②权重的计算问题：
!important Infinity------- +∞
行间样式 ----------------1000
id --------------------------100
class|属性|伪类 ---------10
标签|伪元素 --------------1
通配符 ---------------------0
同一排选择器，权重相加，就是该行权重
后来先到，权重相同，后面的代码会覆盖前面的

③CSS基础属性
font-size: 60px 字体大小（设置的是字体的高）（浏览器默认字体大小是 16px 页面一般14px和12px）
font-weight: bold; 加粗 lighter细体，normal正常，bold加粗，bolder最粗 100----900最粗，能不能变粗根据字体包决定
font-style: italic; 斜体
font-family: arial;选择字体 arial乔布斯创作
color: red;选择字体颜色
1.纯英文单词
2.颜色代码例如：#ff4400 00-ff 16进制每两位代表红绿蓝
饱和度饱和度都为0是黑的满的都是白的两位数相同就省略一个 #f40
3.颜色函数 rgb（0-255，0-255，0-255）同颜色代码饱和度
border: 1px solid black; 加外边框 border的粗细 border的展示形式（solid实心 dotted点状虚线 dashed条状虚线）颜色(transparen透明色；
等价于border-width: 1px; border-style: solid; border-color: black;
border-left-width 调整左边框的属性
ext-align: center; 对齐方式
line-height: 100px; line-height=height 单行文本垂直居中
text-indent: 2em; 首行缩进几个字符（em） 1em=16px
text-decoration: line-through; 删除线 none去掉删除线 underline下划线 overline上划线
cursor: pointer; 鼠标移上去改变光标形态 pointer 小手 help 问号

HTML：

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>
	<link rel="stylesheet" type="text/css" href="new 1.css">	
</head>
<body>
	<div>举个例子举个例子举个例子举个例子举个例子举个例子举个例子举个例子举个例子</div>

</body>		       
</html>

CSS:

div{
    width: 100px;
    height: 100px;
    font-size: 12px;
    font-weight: bold;
    font-style: italic; 
    font-family: arial;
    color: red;
    border: 1px solid black;
    text-align: center;
    line-height: 20px;
    text-indent: 2em;
}

在这里插入图片描述

伪类选择器：
hover 移上去之后会根据定义的效果改变

企业开发：
1.行级元素内联元素 inline
<span> <strong> <em> <a> <del>
feature内容决定元素位置不可以通过CSS改变宽高
2.块级元素 block
<div> <p> <ul> <ol> <form> <address>
feature：独占一行，可以通过CSS改变宽高
3.行级块元素 inline-block
<img>
feature：内容决定大小，可以改宽高
凡是带有inline的元素，都有文字特性

margin-left: 4px; 距离左端元素的距离

可以用通配符选择器对所有初始化取消margin和padding

盒子模型：
盒子的组成部分

盒子壁 border

内边距padding

盒子内容 width + height

在这里插入图片描述
padding px；
四个值代表：上右下左
三个值代表：上左右下
两个值代表：上下左右
可以单独设置方向例如 padding-left: 100px

层模型：

position: ; 定位
position: absolute;
相对于最近的有定位的父级进行定位，如果没有对文档进行定位
每一个absolute都是一个新的层
left: 100px; 距离左边浏览器的位置
top: 100px; 距离上面浏览器的位置
left: 50%; + top: 50%; + margin-left: -二分之一自身宽度; + margin-top: -二分之一自身高度; 在屏幕中剧中
不加 position: absolute;
在这里插入图片描述

加 position: absolute;
在这里插入图片描述
HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>
	<link rel="stylesheet" type="text/css" href="new 1.css">	
</head>
<body>
	<div class="demo"></div>
	<div class="box"></div>
</body>		       
</html>

CSS:

*{
    margin: 0;
    padding: 0;
}
.demo{
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: red;
  opacity: 0.5; /*透明度 */
}
.box{
    width: 150px;
    height: 150px;
    background-color: green;
}

position: relative;保留原来位置进行定位
给子级加position: relative; 就相对于自己原来的位置进行定位，不受父级的控制
CSS:

*{
    margin: 0;
    padding: 0;
}
.demo{
  position: relative;
  left: 100px;
  top: 100px;
  width: 100px;
  height: 100px;
  background-color: red;
  opacity: 0.5; /*透明度 */
}
.box{
    width: 150px;
    height: 150px;
    background-color: green;
}