这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
一、本堂课重点内容：
本节课主要讲解了CSS的继承,CSS的布局
二、详细知识点介绍
(1)继承
CSS的继承和其他面向对象语言所指的继承不同，比如Java继承是继承的属性和方法，而CSS继承只有属性，没有方法,CSS的继承就是父级设定了属性，其它的子级也具有这个属性。
举个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS继承</title>
<style>
.father{
font-size: 30px;
color: red;
}
</style>
</head>
<div class="father">
<div class="son">我是儿子</div>
</div>
<body>
</body>
</html>
我们看这一段代码，当我们给父盒子.father设置字体大小为30px和颜色为红色时,其子盒子.son的字体大小和颜色也会跟着改变。
效果图：
简单的可以理解为：CSS的继承就是给父级设定了属性，这个父级和它的子级都具有这个属性。
(2)CSS的布局
首先介绍布局的相关技术:常规流 浮动 绝对定位,常规流里又分为了:行级 块级 FlexBox布局 Grid布局 表格布局
首先介绍布局之前我们先介绍一下CSS布局时会用到的一些属性
外边距 margin
是指用标签设置的内容外部的边距。可以很好地将元素和旁边的其他元素隔开。
举个例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 50px;
height: 50px;
background-color: chartreuse;
}
.two{
margin-top: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
上述代码给two的盒子设置了外边距-上的距离为50px,意味着他将会与one盒子隔开50px
内边距 padding
内边距与外边距正好相反，内边距是指用标签设置的内容内部的边距。通过内边距，可以很好的规定元素在标签设置的内部的显示位置
举个例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 150px;
height: 150px;
border: 1px solid red;
padding-top: 20px;
}
</style>
</head>
<body>
<div><p>我是内容我是内容我是内容我是内容我是内容我是内容</p></div>
</body>
</html>
图中箭头所指方向即为div盒子内边距-上距离为20px
边框 border
border可以用于同时设置边框的颜色 形状 粗细等等
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
border:1px solid red 代码的意思是设置一个1px像素的实线红色边框
值得一提的是:我们可以利用border属性画一个三角形!
上代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 0;
height: 0;
border: 60px solid transparent;
border-top-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
给border三角形四个边框的颜色设置transparent，然后改变其中一个方向边框的颜色即可分别实现任一方向的三角形。
