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

举例：篮球场有⼀个箱⼦

HTML基础第四课（冲浪笔记4）相关推荐

Linux基础第四课——文件操作
文件的创建 touch sudo touch 文件1 文件2 文件3 #支持批量创建文件 sudo rm -f 文件1 文件2 文件3 #支持批量创建也支持批量删除 echo '谁动谁输,对不起我输 ...
重学java基础第四课:关于教育和对大家的期望
JS基础第四课、JQ基础第一课（BOM、JQuery框架）
注意: 使用JQuery一定要记得引入,否则会$报错回忆: outline: none; //去掉输入框默认的边框 decodeURI(arr[1]) //解码中文 str.split('& ...
java基础第四课（封装，继承，接口）
面向对象,继承,抽象类,接口文章目录 1.封装 2.继承 3.抽象类和接口 4.方法的参数 5.装箱,拆箱 6.object 1.封装字段得封装 get:可读属性 set:可写属性其实get,s ...
潭州课堂25班：Ph201805201 WEB 之 JS 第四课 (课堂笔记)
JS 引入方式在 HTML 中写入写在的标签里 <script> </script>推荐放在 </body> 结束之前 <!DOCTYPE html& ...
【3DSmax】3DSmax9基础建模教程—读书笔记4（第四课）
第四课修改模型 1.[编辑网格]命令定义:利用此命令可以对挤出的模型(立方体)进行点.线.面等级别的编辑例1:五角星(塌陷五个角点)http://www.51zxw.net/show ...
Coursera公开课笔记: 斯坦福大学机器学习第四课“多变量线性回归(Linear Regression with Multiple Variables)”
Coursera公开课笔记: 斯坦福大学机器学习第四课"多变量线性回归(Linear Regression with Multiple Variables)" 斯坦福大学机器学习第 ...
《nodejs+gulp+webpack基础实战篇》课程笔记（四）-- 实战演练
一.用gulp 构建前端页面(1)---静态构建 npm install gulp-template --save-dev 通过这个插件,我们可以像写后台模板(譬如PHP)一样写前端页面.我们首先学习 ...
附笔记pdf下载，MIT中文线性代数课程精细笔记[第四课]
点击上方"MLNLP",选择"星标"公众号重磅干货,第一时间送达鉴于之前MIT的线代笔记没有跟新完和很多童鞋希望pdf版本下载学习,这里我把相关资源放到gi ...

HTML基础第四课（冲浪笔记4）

一、CSS继承（常用于：模块区域样式一样的时候，可以写个父级全部继承）

二、盒子模型

HTML基础第四课（冲浪笔记4）相关推荐

最新文章

热门文章