HTML基础第四课（冲浪笔记4）
一、CSS继承（常用于：模块区域样式一样的时候，可以写个父级全部继承）
1、文本样式会继承
①代码例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
color: aqua;
font-size: 24px;
}
</style>
</head>
<body>
<div class="father">
父级
<div class="son">
子级
</div>
</div>
</body>
</html> ②效果图：父级的样式继承给了子级
2、布局样式默认不会继承
①代码例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
color: aqua;
font-size: 24px;
height: 100px;
width: 100px;
background-color: rgb(79, 79, 238);
}
.son{
background-color: rgb(202, 72, 72);
}
</style>
</head>
<body>
<div class="father">
父级
<div class="son">
子级
</div>
</div>
</body>
</html> ②效果图：父级的大小没有继承给子级
3、height: inherit;强制继承
①代码例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
color: aqua;
font-size: 24px;
height: 100px;
width: 100px;
background-color: rgb(79, 79, 238);
}
.son{
background-color: rgb(202, 72, 72);
height: inherit;
}
</style>
</head>
<body>
<div class="father">
父级
<div class="son">
子级
</div>
</div>
</body>
</html> ②效果图：父级所有样式都继承给了子级
二、盒子模型
概念：CSS假定每⼀个标签都是⼀个矩阵，围绕着这个矩阵，从内到外展开⼀系列的属性来描述它，这⼀系列就被称为【盒⼦模型】组成：content、padding、border、margin
举例：篮球场有⼀个箱⼦📦，箱⼦⾥有⼀颗篮球🏀
篮球场⼜有⼀个箱⼦📦，箱⼦⾥也有⼀颗篮球🏀
1、content：内容，由width、height组成
2、padding：内边距，内容到边框的距离
①上下左右四个方向padding-left/right/top/bottom
a.一个值
b.两个值：1上下，2左右
c.三个值：1上，2左右，3下
d.四个值：顺时针，上右下左
②注意：系统在设置 padding时 ，默认撑⼤宽⾼，拿出对应的间距作为内间距
如果希望 padding 从宽⾼本身去减⼩的话，设置 box-sizing：border-box 属性
①上下左右四个方向padding-left/right/top/bottom
a.一个值
b.两个值：1上下，2左右
c.三个值：1上，2左右，3下
d.四个值：顺时针，上右下左
②注意：系统在设置 padding时 ，默认撑⼤宽⾼，拿出对应的间距作为内间距
如果希望 padding 从宽⾼本身去减⼩的话，设置 box-sizing：border-box 属性
3、border：边框border-top/bottom/left/right
①三部分
a.边框样式：border-style
b.边框颜***order-color
c.边框粗细：border-width
②可单独设置
border-⽅向-style/color/width
③注意：系统在设置border-width的时候，默认先撑⼤宽⾼，再拿出对应的间距作为边框粗细如果我们希望边框粗细从宽⾼本身去减⼩的话，设置box-sizing：border-box属性
④圆角：border-radius
a.正方形圆角=边长一半时，是圆形
b.可以单独设置某角：border-top/bottom-left/right-radius
4、margin：外间距，边框到边框的距离
同padding一样，四个方向：margin-left/right/top/bottom
补充1：
①背景颜色会自动填充到margin以内的区域
②内容一直在content区域
③属性box-sizing：content-box（默认，宽高只控制content区域，使用boder，padding时会改变整体大小）、border-box（宽高控制整个盒子，在设定的宽高中改变）
④盒子居中 margin: auto （使标签处于所占据⽂档流的正中央）
⑤内容居中text-align： center （使得内容处于他所占据位置的正中央）
⑥height：容器高度、line-height：行高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 500px;
height: 500px;
background-color: rgb(25, 144, 223);
padding: 3px;/* 内间距 */
box-sizing: border-box;
border: 5px solid red;/* 边框 */
border-radius: 50px;
margin: auto;/* 居中 */
text-align: center;/* 文本内容居中 */
line-height: 500px;/* 文本高度居中 */
}
</style>
</head>
<body>
<div class="box">内容</div>
</body>
</html> 
补充2：盒子模型存在的问题
1、两两标签为父子关系：
（1）子级设置的margin-top等等会传递给父级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
background-color: aqua;
}
.son{
width: 100px;
height: 100px;
background-color: black;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html> 
（2）解决措施：在父级写属性padding-top: 100px;box-sizing: boder-box;
2、两两标签为兄弟关系：同样的属性会被叠加，取其中的最大值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
background-color: aqua;
}
.son1{
width: 100px;
height: 100px;
background-color: black;
margin-bottom: 50px;
}
.son2{
width: 200px;
height: 100px;
background-color: rgb(215, 37, 37);
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son1"></div>
<div class="son2"></div>
</div>
</body>
</html> 
四、转换元素特性：display
1、属性：（1）none：隐藏（不会显示出来，检查时可找到）
（2）block：转成块级元素（会自动换行h1,div,p）
（3）inline：转成内联元素（不会自动换行span,a）
（4）inline-block：行内块（转换成具有自己大小的且横向排列的元素，块与块之间会有间隙，会占位置）
2、与float的区别：
（1）float浮动：会脱离文档流，不占位置，针对块级元素（left/right）
（2）style="display: none;"占位置
3、float浮动代码举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1,.box2,.box3{
width: 100px;
height: 100px;
}
.box1{
background-color: rgb(25, 144, 223);
float: left;
}
.box2{
background-color: rgb(223, 25, 187);
float: left;
}
.box3{
background-color: rgb(84, 223, 25);
float: right;
}
.box4{
width: 300px;
height: 300px;
background-color: black;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html> 
五、定位position
1、相对定位：相对于当前的正常位置position: relative（通常占位置）
2、绝对定位：
①position: absolute（通常不占位置）
父子关系（子元素进行定位，相对于其父级【设置了定位/没有定位而是找到浏览器边缘】的绝对定位）
②fiexd：窗口定位（任何浏览器放大缩小任意窗口时，数值不变）
3、定位的区别
（1）margin-top的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 200px;
height: 200px;
background-color: aqua;
margin-top: 50px;
}
.son1 {
width: 100px;
height: 100px;
background-color: black;
}
.son2 {
width: 100px;
height: 100px;
background-color: rgb(212, 134, 24);
}
</style>
</head>
<body>
<div class="father">
<div class="son1"></div>
</div>
<div class="son2"></div>
</body>
</html> 
（2）相对定位position: relative的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 200px;
height: 200px;
background-color: aqua;
/* margin-top: 50px; */
position: relative;
top: 50px;
}
.son1 {
width: 100px;
height: 100px;
background-color: black;
}
.son2 {
width: 100px;
height: 100px;
background-color: rgb(212, 134, 24);
}
</style>
</head>
<body>
<div class="father">
<div class="son1"></div>
</div>
<div class="son2"></div>
</body>
</html> 
（3）绝对定位position: absolute的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 200px;
height: 200px;
background-color: aqua;
/* margin-top: 50px; */
position: absolute;
top: 50px;
}
.son1 {
width: 100px;
height: 100px;
background-color: black;
}
.son2 {
width: 100px;
height: 100px;
background-color: rgb(212, 134, 24);
}
</style>
</head>
<body>
<div class="father">
<div class="son1"></div>
</div>
<div class="son2"></div>
</body>
</html> 
六、溢出隐藏overflow-x/overflow-y
1、overflow: hidden; 溢出隐藏
代码例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">
<img src="https://img0.baidu.com/it/u=4002835238,1224729013&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="">
</div>
</body>
</html> 代码效果图
实际全图
2、overflow: scroll; 滚动条（不管有无溢出）
3、auto：自动识别需不需要滚动条
前端HTML、CSS基础知识 文章被收录于专栏
带小伙伴们一起从零认识HTML，学习常用标签，表单，样式，属性，选择器，基本定位，通过学习方法巧记盒子模型，学习基础简单的动画效果
美团公司福利 1971人发布
投递美团等公司10个岗位 >
