继承
继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
font-size: 30px;
}
p{
/*
为一个元素设置样式同样会应用到他的后代元素
继承是发生在祖先元素和后代元素中的
方便我们开发，利用继承可以将一些通用样式统一设置到同一个祖先元素中
并不是所有样式都会继承，比如背景相关和样式相关的
*/
color: red;
background-color: aqua;
}
</style>
</head>
<body>
<p>
<!--P元素中不能放任何块元素 -->
我是一个p元素
<span>我是p元素中的span</span>
</p>
<span>我是p元素外面的p元素</span>
</body>
</html>选择器的权重
样式的权重
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{
color: blue;
}
div{
color: red;
}
.red{
color: aqua !important;
}
/*
样式冲突，取决于选择器的权重/优先级决定
选择器的权重
内联样式 1000 div里面的style="color:"
id选择器 100
类和为类选择器 10
元素选择器 1
通配选择器 0
继承样式 无优先级
比较优先级时，需要将所有的选择器优先级进行相加计算，最后优先级越高，越先显示
选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器
如果优先级相等则优先显示最下方的样式
在开发中!important慎用 能不用就不用
*/
div#box1{
color: brown;
}
div{
font-size: 20px;
}
*{
font-size: 50px;
}
</style>
</head>
<body>
<div id="box1" class="red" >我是一个div
<span>我是div中的span</span>
</div>
</body>
</html>像素与百分比以及长度单位em rem
查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{
font-size: 50px;
}
.box1{
/*
长度单位
像素
屏幕实际是由一个一个小方块构成的
不同屏幕的像素大小不一样
像素越小显示的越清晰
同样的300像素在不同的设备下显示效果不一样
百分比
百分比可以设置属性相对父元素属性的百分比
设置百分比可以使子元素跟随父元素的改变而改变
em
em是相对自身元素的字体大小计算的
1em=1font-size
em会根据字体大小改变而改变
rem
rem是相对于根元素的字体大小
*/
width: 200px;
height: 200px;
background-color: orange;
}
.box2{
width: 50%;
height: 50%;
background-color: aqua;
}
.box3{
font-size: 20px;
width: 10rem;
height: 10rem;
background-color: greenyellow;
}
</style>
</head>
<body>
<!-- 快捷 div.box1或者直接.box1-->
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>RGB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 100px;
height: 100px;
/*
颜色单位
CSS中直接使用颜色名字来设置颜色
不方便，所以不常用
主要用的方式为RGB值
RGB值
通过三种颜色的不同浓度来调配颜色
0-255
语法：RGB(红色，绿色，蓝色)
RGBA值
A透明效果
1表示完全不透明
0.5表示半透明
0表示全透明
十六进制RGB
#红绿蓝
00-ff
如果颜色两位两位重复可以进行简写
*/
background-color: red;
background-color: rgb(255, 0, 0);
background-color: rgba(255, 0, 0,0.5);
background-color: #ff0000;
background-color: #f00;
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>文档流
文档流
创建的元素默认都是在文档流中进行排列
元素主要有两个状态
在文档流里和不在
元素在文档流的特点
块元素
在页面中独占一行，垂直排列
默认宽度是父元素的全部
默认高度是文字的高度
行内元素
行内元素不会独占一行，是自左向右水平排列
如果一行中满了，则会换到第二行
默认宽度和高度都是文字的宽高
