1- 案例1.html
<!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>
/* 02- 用通配符清除所有内外边距 */
* {
padding: 0;
margin: 0;
}
/* 03- 給外部最大的盒子,"big"宽width: 225px;
高height: 180px;
margin: 100px auto;是盒子在网页里左右居中并且离顶部100px
border: 1px solid #D0CED8;是这个盒子的边框为1px宽，solid意思是边框为实线，还有边框颜色
border-bottom: 3px solid #AEA4C1;是这个盒子的下边框为3px宽，solid意思是下边框为实线，还有下边框颜色 */
.big {
width: 225px;
height: 180px;
margin: 100px auto;
border: 1px solid #D0CED8;
border-bottom: 3px solid #AEA4C1;
}
/* 05- 給上面的小盒子的父盒子"top-father",高height: 65px;
border-bottom: 1px solid #EEEEEE;是这个小盒子的下边框1px宽，solid意思是实线，还有边框颜色
background-color: #FBFBFB;是这个小盒子的背景颜色
color: #78688F;是小盒子里面的字体颜色
overflow: hidden;是防止里面的小盒子外边距塌陷，上外边距向下过多*/
.top-father {
height: 65px;
border-bottom: 1px solid #EEEEEE;
background-color: #FBFBFB;
color: #78688F;
overflow: hidden;
}
/* 07- 用群组选择器給上面的小盒子内上下排列的两行字外边距，margin-top: 5px; 是上外边距5px
margin-left: 10px;是左外边距10px（简）*/
.top1,.top2 {
margin-top: 5px;
margin-left: 10px;
}
/* 08- 給上面小盒子里的上面的字top1，字体大小font-size: 20px; */
.top1 {
font-size: 20px;
}
/* 09- 給上面小盒子里的下面的字top2，字体大小font-size: 14px; */
.top2 {
font-size: 14px;
}
/* 013- 給下面小盒子里h4标签的字外边距,margin-top: 10px;是上外边距10px
margin-left: 10px;是左外边距10px */
h4 {
margin-top: 10px;
margin-left: 10px;
}
/* 014- 給下面小盒子里p标签的字两个class名分别为字符串"bottom1"和"bottom2"的两个字外边距,
margin-top: 10px;是上外边距10px
margin-left: 10px;是左外边距10px
再分别給它们字体大小"bottom1"字体大小：14px;
"bottom2"字体大小：16px; */
.bottom1,.bottom2 {
margin-top: 10px;
margin-left:10px;
}
.bottom1 {
font-size: 14px;
}
.bottom2 {
font-size: 13px;
}
/* 015- 給下面的小盒子里的span标签的字font-size: 16px;
字体大小16px
color: red;
字体颜色红色
font-weight: bold;
字体粗细: 粗体;*/
span {
font-size: 16px;
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<!-- 01- 写一个div,它的属性class的名字是字符串"big",这表示外部最大的盒子 -->
<div class="big">
<!-- 04- 在最大的盒子内嵌套一个上半部分的div,属性class的名字是字符串"top-father"它是父盒子,这表示内部上面的小盒子的父盒子 -->
<div class="top-father">
<!-- 06- 給上面的小盒子上下排列的两行p标签的属性class分别命名为字符串"top1"和字符串"top2"，内容分别是长江三峡航线和宜昌出港 -->
<p class="top1">长江三峡航线</p>
<p class="top2">宜昌出港</p>
</div>
<!-- 010- 在最大的盒子内嵌套一个下半部分的div,属性class的名字是字符串"bottom",这表示内部下面的小盒子 -->
<div class="bottom">
<!-- 011- 給下面的小盒子上下排列一行子用h4标签写的总统游轮-总统系列游轮-->
<h4>总统游轮-总统系列游轮</h4>
<!-- 012給下面的小盒子上下排列两行p标签的字属性名class分别是字符串"bottom1"和"bottom2"，内容分别是4月10日...4月29日多团期
和<span>¥2680</span>起/人 -->
<p class="bottom1">4月10日...4月29日多团期</p>
<p class="bottom2"><span>¥2680</span> 起/人</p>
</div>
</div>
</body>
</html>
2- 案例2.html
<!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>
/* 02- 来到内嵌式的css里 */
/* 03- 用通配符选择器清除内外边距和项目符号 */
* {
padding: 0;
margin: 0;
list-style: none;
}
/* 04- 給类选择器.wrap宽高和边框和在网页里居中 */
.wrap {
width: 260px;
height: 260px;
border: 3px solid purple;
margin: 100px auto;
}
/* 05- 給类选择器.title高度和边框，字体大小和行高 */
.title {
height: 50px;
border: 1px solid;
font-size: 20px;
line-height: 50px;
}
/* 06- 給标签选择器li里面内容的字体颜色和字体大小和字体之间的行高 */
li {
color: purple;
font-size: 14px;
line-height: 40px;
}
/* 07- 分别給每个li里的类名.text1——4的类选择器.text1——4边框宽度边框样式和边框颜色 */
.text1 {
border: 3px solid #87CEEB;
}
.text2 {
border: 3px dashed #9ACD32;
}
.text3 {
border: 3px dotted #FFA500;
}
.text4 {
border: 3px double pink;
}
/* 08- 給每个li里的span的标签选择器字体颜色外边距和字体大小 */
span {
color: #ccc;
padding: 20px;
font-size: 13px;
}
</style>
</head>
<body>
<!-- 01- 最大的外层的div盒子类名为"wrap"，
最大的外层的div盒子"wrap"内嵌套一个div小盒子类名为"title"并給出文字内容：音乐排行榜
最大的外层的div盒子"wrap"内再嵌套一个ul和里面带着四个li，并給每个li类名以及文字内容-->
<div class="wrap">
<div class="title">音乐排行榜</div>
<ul>
<li class="text1"><span>01</span> 这里就是乌鲁木齐</li>
<li class="text2"><span>02</span> 这里就是乌鲁木齐</li>
<li class="text3"><span>03</span> 这里就是乌鲁木齐</li>
<li class="text4"><span>04</span> 这里就是乌鲁木齐</li>
</ul>
</div>
</body>
</html>
3- 背景属性.html
<!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>
/* 02-来到内嵌css里 */
/* 03- 用通配符选择器里清除内外边距 */
* {
padding: 0;
margin: 0;
}
/* 04- 标签选择器div */
div {
width: 50%;
height: 500px;
/* 05- 标签选择器div里，设置div背景颜色 */
background-color: lightblue;
/* 06- 标签选择器div里，设置div背景图片 */
background-image: url(./img/小图.png);
/* 07- 标签选择器div里，设置背景图片background-repeat:图片是否平铺 */
/* 默认值 */
/* background-repeat: repeat; */
/* 08- 标签选择器div里，设置背景图片background-repeat: repeat-x背景图在x轴平铺 */
/* background-repeat: repeat-x; */
/* 09- 标签选择器div里，设置背景图片background-repeat: repeat-y背景图在y轴平铺 */
/* background-repeat: repeat-y; */
/* 010- 标签选择器div里，设置背景图片background-repeat: no-repeat不平铺 背景图只显示一次 */
background-repeat: no-repeat;
/* 011- 标签选择器div里，设置内边距 */
padding: 50px;
/* 012- 标签选择器div里，设置边框以及样式 */
border: 20px dashed pink;
/* 013- 标签选择器div里，设置背景图的位置 只设置一个值的时候，另一个值表示50%*/
/* center 居中 */
/* left top 左上 */
/* background-position:center ; */
/* background-position:50% 50%; */
/* background-position: 0 100%; */
/* background-position: 200px; */
/* 014- 标签选择器div里，设置背景图片的大小 只设置一个值的时候，另一个值等比例缩放*/
background-size: 50% 100%;
background-size: 50% ;
/* background-size: 400px 400px; */
/* background-size: 400px; */
/* 015- 标签选择器div里，设置让div在网页左右居中 */
margin:0 auto;
}
/* 016- 标签择器p标签里，设置宽高背景颜色 */
p {
width:20%;
height: 100px;
background-color: yellow;
}
/* 017- 标签择器img，里面设置图片宽高 */
img {
max-width:20%
}
/* 018- CSS 背景属性用于定义 HTML 元素的背景，
通过背景属性我们可以定义元素的背景颜色、背
景图片、背景图片的平铺方式和显示位置等。 */
/* 019- background-color
background-color 属性，设置元素的背景颜色。
常用的值：
color_name 规定颜色值为颜色名称的背景颜色（比如 red）
hex_number 规定颜色值为十六进制值的背景颜色（比如 #ff0000）。
rgb_number 规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。
transparent 默认。背景颜色为透明。
**注意：背景应用于由内容和内边距、边框组成的区域** */
/*
020- background -position
background-position 属性，设置背景图片（由 background-image 定义）的起始位置。
背景图像如果要重复，将从这一点开始。
**语法**：background-position: xpos ypos;
一般来说它有两个值：第一个值表示水平位置，第二个值表示垂直位置。如果仅规定
了一个值，另一个值将是 50%。
取值：
关键字：top、bottom、left、right 和 center ;
指定图像放置于元素内边距区域的位置，一个对应水平方向，另一个对应垂直方向。
左上角为：left top;
其它的：center 、right bottom等等灵活组合
百分比
指定百分数值将同时应用于元素和图像，左上角是 0% 0%；右下角是 100% 100%。
如果设置为 50% 50%，图像的中心点将与元素的中心点对齐显示。
长度值
指定图像相对于元素 内边距区左上角的偏移量。左上角是 0 0，如果设置值为 50px
100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上 */
</style>
</head>
<body>
<!-- 01- 給一个最大的div内容是123，内嵌一个p标签在内嵌一个img并且給出img相对路径 -->
<div >123
<p></p>
<img src="./img/小图.png" alt="" width="200">
</div>
</body>
</html>
4- 背景属性简写.html
<!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>
/* 02- 来到内嵌css里 */
/* 03- 用通配符选择器清除内外边距 */
* {
padding: 0;
margin: 0;
}
/* 04-标签选择器div */
div {
/* 05- 标签选择器div里，设置div宽高 */
width: 200px;
height: 200px;
color: green;
/* 06- 标签选择器div里，背景属性简写 (简)
background是背景复合属性，在一个声明中设置所有背景属性。
语法：background:bg-color bg-image bg-repeat bg-position;
如果不需要哪一个值可以不写，背景尺寸不要写在简写里面 (简)*/
background: palegreen url(./img/摩羯座.jpg) no-repeat center ;
/* 07- 标签选择器div里，背景尺寸(只写一个值的时候，第二个值自动缩放)*/
background-size: 100px ;
/* background-size: 100px 100px; */
}
/* 08- background -image
background-image 属性，为元素设置背景图像。
**语法**：background-image:url(" 图片相对路径 ");或者background-image:url( 图片相对路径 );
元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。
常用的值：
url(‘URL’) 指向图像的路径。
none 默认值。不显示背景图像。 */
/* 09- background -repeat
background-repeat属性，设置是否或如何重复背景图像。默认地，背景图像在水平
和垂直方向上重复。
常用的值：
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。 */
/*
010- 复合属性background(简)
background是背景复合属性，在一个声明中设置所有背景属性。
**语法**：background:bg-color bg-image bg-repeat bg-position;
**示例：**
background: red url("bgimage.jpg") no-repeat left top;
注意：如果某个属性不需要设置，可以省略。*/
</style>
</head>
<body>
<!-- 01- 給一个div，写入内容你好 -->
<div>你好</div>
</body>
</html>
5- 标签的嵌套规则.html
<!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>
/* 06- 来到内嵌css里 */
/* 07- 用通配符选择器里清除内外边距和项目符号*/
* {
padding: 0;
margin: 0;
list-style: none;
}
/* 08- 标签选择器h1和它的宽高背景颜色 */
h1 {
width: 400px;
height: 400px;
background-color: #909;
}
/* 09- 标签选择器h2和它的宽高背景颜色 */
h2 {
width: 200px;
height: 200px;
background-color: lime;
}
/* 010 标签选择器div和它的内宽高背景颜色 */
div {
width: 200px;
height: 200px;
background-color: #009;
}
/* 011- 标签选择器ul和它的宽高背景颜色 */
ul {
width: 400px;
height: 400px;
border: 1px solid red;
}
/* 012- 标签选择器li和它的宽高背景颜色 */
li {
width: 100px;
height: 100px;
background-color: pink;
}
/* 013- 标签选择器p和它的宽高背景颜色 */
p {
width: 200px;
height: 200px;
background-color: rgb(87, 61, 66);
}
/* 014- 标签选择器span和它的背景颜色和字体颜色 */
span {
background-color: yellow;
color: aqua;
}
tr{
color:green;
}
</style>
</head>
<body>
<!-- 01- 块级标签都可以嵌套行内标签和文字和符号,例如h1标签可以嵌套span标签嵌套删除文字span1-->
<!-- <h1>h1<span>我是span:h1这个块级标签标签可以嵌套span标签嵌套删除文字<del>span1</del></span></h1> -->
<!-- 02- 块级标签都可以嵌套行内标签和文字和符号,例如p标签可以嵌套span标签嵌套删除标签del,嵌套文字span2-->
<!-- <p>我是p标签,p标签可以嵌套span标签嵌套删除标签del,嵌套文字span2-<span><del>span2</del></span></p> -->
<!-- 03- 无序列表ul只能嵌套li,ul最好直接套li,虽然可以显示,但是不要这样写 -->
<!-- <ul>ul1
<div>div1</div>
<li>li1</li>
</ul> -->
<!-- 04- span标签内嵌套del删除标签i标签 和语义化的斜体em标签 里面給了同样的内容span3-->
<!-- <span> span标签内嵌套del删除标签i标签 和语义化的斜体em标签 里面給了同样的内容span3 <del>span3</del><i>span3</i><em>span3</em> </span> -->
<!-- 05- a标签属于行内标签,但是比较特殊,可以嵌套任何标签,除了a标签
a标签里嵌套比如说:ul li div span img -->
<!-- <a href="#">
<ul>ul2
<li>li2</li>
<div>div2</div>
<span>span4</span>
</ul>
</a> -->
<!-- <a href="#"><img src="./img/摩羯座.jpg" alt=""></a> -->
<!-- 015- h1-h6标签不能嵌套h1-h6标签 -->
<!-- <h1>我是h1标签,我不能嵌套h2标签<h2>h2</h2></h1> -->
<!-- 016- h1-h6标签不能嵌套其他块级标签,包括自己,有时候又会生效,但不能这样写 -->
<!-- <h1>我是h1标签,我不能嵌套div标签,包括我自己,有时候又会生效,但不能这样写<div>div</div></h1> -->
<!-- 017-行内标签不要嵌套比它大的块级标签,不会生效 -->
<!-- <span>行内span,我嵌套了div标签但是没有生效<div>div</div></span> -->
<!-- 018-块:h1-h6标签可以嵌套行内标签以及文字和符号,
p标签不能嵌套其他块级标签,包括它自己 ,但它可以嵌套行内标签和文字和符号,
都会生效 -->
<!-- <h1>我是h1标签,我嵌套了span标签和del标签都会生效<span>span</span><del>del</del></h1> -->
<!-- <p>我是p标签,我嵌套了span都会生效<span>span</span></p> -->
<!-- 019- 标签的嵌套规则 -->
<a href="https://blog.csdn.net/zbb202013030229/article/details/121967684?spm=1001.2101.3001.6650.5&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-5-121967684-blog-118005822.pc_relevant_3mothn_strategy_and_data_recovery&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-5-121967684-blog-118005822.pc_relevant_3mothn_strategy_and_data_recovery&utm_relevant_index=6">
标签的嵌套规则相---相关链接更多知识请点击查看
</a>
<table style="border-collapse: collapse; "
border="3px" width="100%" height="300" bordercolor="green";>
<caption style="color: green; font-size: 30px;"> 标签的嵌套规则 </caption>
<tr height="30" align="center" bgcolor="antiquewhite" >
<td>
块：特点:独处一行,宽度width属性不写的话默认为屏幕的100%或者父级标签的100%,高度为元素的高度,可设置宽高。
</td>
</tr>
<tr height="30" align="center" bgcolor="greenyellow" >
<td>
块：
常见的块级元素有:div、ul、li、dl dt dd、p、h1-h6、table、 form。
</td>
</tr>
<tr height="30" align="center" bgcolor="yellow" >
<td>块:可以嵌套行内标签和文字和符号。</td>
</tr>
<tr height="30" align="center" bgcolor="lightblue" >
<td>块:div是最大的块级标签,是装载内容的容器,也是唯一可以自己嵌套自己的块级标签,可以嵌套所有标签文字和符号。</td>
</tr>
<tr height="30" align="center" bgcolor="pink" >
<td>
块:无序列表ul只能嵌套li,有序列表ol也只能嵌套li, li是装载内容的容器可以嵌套div标签甚至于自己的父标签ul。
</td>
</tr>
<tr height="30" align="center" bgcolor="orange" >
<td>
块:文字类的块级元素例如p、h1-h6、dt不能嵌套块元素,包括它自己,
例如果你用p标签嵌套h1的话,在使用DOM的时候容易在思维上发生错误!
</td>
</tr>
<tr height="30" align="center" bgcolor="hotpink" >
<td>块:文字类的块级元素例如p、h1-h6、dt标签可以嵌套行内标签以及文字和符号。</td>
</tr>
<tr>
<tr height="30" align="center" bgcolor="orange" >
<td>
</td>
<tr height="30" align="center" bgcolor="yellow" >
<td>
行内:特点:和相邻行内元素在同一行,但是之间会有空白缝隙，
默认宽度是他本身内容的宽度，
宽度、高度、行高、外边距以及内边距都可以手动设置。
</td>
</tr>
<tr height="30" align="center" bgcolor="pink">
<td>
行内：常见的行内标签有:a、img、span、 b、strong、i、em、lebel、sub、sup、del、input、button。
常见的行内块级元素有:img、input、td。
</td>
</tr>
</tr>
<tr height="30" align="center" bgcolor="yellow" >
<td>
行内： 可以把行内块级元素当成文本来对待：
A:行内块级元素间会有字间距,可以采用父级font-size:0px;自己font-size:想要的字号。进行消除间距。
B:此时元素是不存在文档流中的,所以使用margin值并不能使其居中,而是应该在父级添加text-align:center ==》水平居中。line-height ==>竖直居中。
</td>
</tr>
<tr height="30" align="center" bgcolor="aquamarine" >
<td>
行内:除了a标签之外的行内标签都不可以嵌套块级标签,但行内标签可以嵌套行内标签或者文字或者符号。
</td>
</tr>
<tr height="30" align="center" bgcolor="greenyellow" >
<td>a标签:a标签属于行内标签,它可以嵌套所有标签但是不能嵌套它自己。</td>
</tr>
<tr height="30" align="center" bgcolor="aquamarine" >
<td>
</td>
</tr>
<tr height="30" align="center" bgcolor="yellow" >
<td>
拓展相關知識：
display:inline-block的布局方式和浮动的布局方式,究竟使用哪个,我觉得应该根据实际情况来决定的：
A:对于竖向排列盒子例如div来说,我更倾于使用div的css里设置display:inline-block来布局,因为这样清晰,也不用再像浮动那样清除浮动,害怕布局混乱等等，所以
甚至可以使用div去嵌套ul li 的內容來使用对li的标签选择器设置display:inline-block佈局。
B:对于浮动布局就用于需要文字环绕的时候,毕竟这才是浮动真正的用武之地,水平排列的是就交给display:inline-block了。
</td>
</tr>
</table>
</body>
</html>
6- 块级标签的显示模式.html
<!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>
/* 02- 来到内嵌css里 */
/* 03- 通配符选择器清理内外边距 */
*{
padding: 0;
margin: 0;
}
/* 04- 标签选择器給每个标签css样式，子标签的宽度取决于父标签的宽度 */
div{
width: 800px;
height: 200px;
background-color: goldenrod;
color: green;
}
p{
height: 100px;
background-color: yellow;
color: green;
}
</style>
</head>
<body>
<!-- 01- div嵌套p标签 -->
<div>我是div父标签<p>我是div子标签,我没有设置宽度,我的标签的宽度取决于父标签的宽度</p></div>
<!-- 05- 标签显示模式转换 display
- 块级标签
- - div h1-h6 p ul li ol li dl dt dd
- 独立成行
- 高度、行高、外边距以及内边距都可以控制
- 宽度默认是容器的100%
- 可以容纳内联标签和其他块级标签
- 行内标签
- - strong b em i del span
- 在一行排列，超出才会折行
- 高、宽无效，但水平方向的margin可以设置，垂直方向的margin无效
- 默认宽度就是它本身内容的宽度
- 行内标签只能容纳文本或者其他行内标签
- 行内块标签
- - img input td
- 和相邻的行内块标签在一行，但之间会有白色缝隙
- 默认宽度就是它本身内容的宽度
- 高度、行高、外边距以及内边距都可以控制
- 转换 display
- - 块转行内：display : inline;
- 行内转块 ： display : block;
- 块、行内转行内块 ： display : inline-block; -->
</body>
</html>
7- 行内标签span的显示模式.html
<!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>
/* 02- 通配符选择器清除内外边距 */
*{
padding: 0;
margin: 0;
}
/* 03- 标签选择器div */
/* div{
width: 100px;
height: 100px;
background-color: yellow;
} */
/* 04- 标签选择器span,
行内标签span标签里,无论它里面有无内容,宽高都是无效的,
行内标签span标签的宽度默认就是内容的宽度 */
span{
width:100px;
height:100px;
background-color: pink;
color: green;
/* 05- 水平左右的外边距生效*/
margin-left: 100px;
/* 06- 垂直上下的外边距不生效 */
margin-top:200px ;
/* 07- 字体行高生效 */
line-height: 50px;
/* 08- padding内边距生效,这个内边距是以文本为中心向四周去散发 */
padding: 30px;
}
/*
行内标签span标签里,无论它里面有无内容,宽高都是无效的,
行内标签span标签的宽度默认就是内容的宽度,
水平左右的外边距 margin-left: 100px;生效,
垂直上下的外边距 margin-top:200px;不生效,
字体行高line-height: 50px;生效,
内边距padding: 30px;生效,这个内边距是以文本为中心向四周去散发。
*/
</style>
</head>
<body>
<!-- 01- 給个div -->
<div></div>
<!-- 10- 总结 -->
<span>
我是span标签
</span>
<span>
我是span标签
</span>
<span></span>
<table style="border-collapse: collapse; "
border="3px" width="100%" height="300" bordercolor="green" ;>
<caption style="color: green; font-size: 30px; margin-top: 50px;"> span标签的显示模式 </caption>
<tr height="30" align="center" bgcolor="antiquewhite" style="color:green">
<td>
行内:行内标签span标签里,无论它里面有无内容,宽高都是无效的,
</td>
</tr>
<tr height="30" align="center" bgcolor="greenyellow" style="color:green">
<td>
行内:行内标签span标签的宽高默认就是内容的宽高,
</td>
<tr height="30" align="center" bgcolor="antiquewhite" style="color:green">
<td>
行内:水平左右的外边距 margin-left: 100px;生效,
</td>
</tr>
<tr height="30" align="center" bgcolor="yellow" style="color: green">
<td>
行内:
垂直上下的外边距 margin-top:200px;不生效,
</td>
</tr>
<tr height="30" align="center" bgcolor="antiquewhite" style="color:green">
<td>
行内:字体行高line-height: 50px;生效,
</td>
</tr>
<tr height="30" align="center" bgcolor="greenyellow" style="color:green">
<td>
行内:内边距padding: 30px;生效,这个内边距是以文本为中心向四周去散发。
</tr>
</body>
</html>
8- 行内标签span的特点.html
<!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>
/* 02- 来到内嵌css里 */
/* 03- 用通配符选择器清除内外边距 */
* {
padding: 0;
margin: 0;
}
/* 04- 标签选择器span */
span {
/* 05- 标签选择器span内，设置行内标签span的宽高无效，默认宽度是内容的宽高 */
width: 500px;
height: 500px;
background-color: pink;
/* 06- 标签选择器span内，设置水平外边距margin-left有效 */
margin-left: 100px;
/* 07- 标签选择器span内，设置垂直外边距margin-top无效，*/
margin-top: 50px;
/* 08- 标签选择器span内，行高line-height有效 */
line-height: 50px;
/* 09- 标签选择器span内，内边距padding有效 */
padding: 30px;
color: green;
}
</style>
</head>
<body>
<!-- 01- 給一个div 再給两个span并且分别命名-->
<span>我是span1标签</span>
<span>我是span2标签</span>
<table style="border-collapse: collapse; "
border="3px" width="100%" height="300" bordercolor="green" ;>
<caption style="color: green; font-size: 30px; margin-top: 50px;"> span标签的特点</caption>
<tr height="30" align="center" bgcolor="antiquewhite" style="color:green">
<td>
行内:行内标签span标签里,无论它里面有无内容,宽高都是无效的,
</td>
</tr>
<tr height="30" align="center" bgcolor="greenyellow" style="color:green">
<td>
行内:行内标签span标签的宽高默认就是内容的宽高,
</td>
<tr height="30" align="center" bgcolor="antiquewhite" style="color:green">
<td>
行内:水平左右的外边距 margin-left: 100px;生效,
</td>
</tr>
<tr height="30" align="center" bgcolor="yellow" style="color: green">
<td>
行内:垂直上下的外边距 margin-top:50px;不生效,
</td>
</tr>
<tr height="30" align="center" bgcolor="antiquewhite" style="color:green">
<td>
行内:字体行高line-height: 50px;生效,
</td>
</tr>
<tr height="30" align="center" bgcolor="greenyellow" style="color:green">
<td>
行内:内边距padding: 30px;生效,这个内边距是以文本为中心向四周去散发。
</tr>
</body>
</html>
9- 行内块img和input标签.html
<!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>
/* 02- 来到内嵌css里 */
/* 03- 用通配符选择器清除内外边距 */
* {
padding: 0;
margin: 0;
}
/* 04- 类选择器.father */
.father{
width: 1200px;
height: 630px;
border: 10px solid black;
}
/* 05- 行内块：img标签选择器：可以设置宽高，外边距，内边距 */
img {
width: 200px;
height: 200px;
margin-left: 30px;
margin-top: 50px;
padding: 3px;
}
/* 06- 行内块:input可以设置行高来让自己变高 */
input {
line-height: 40px;
}
/* 07- 行内块：动了一个img1行内块标签，其它的img行内块标签都会跟着受影响 */
.img1 {
margin-top: 100px;
}
</style>
</head>
<body>
<!-- 01- 行内块:写一个div里面嵌套img标签和input标签,
行内块标签与行内块标签之间有间隙是行内块标签自带的特点,
-->
<div class="father">
<img src="./img/摩羯座.jpg" alt="" class="img1">
<img src="./img/摩羯座.jpg" alt="">
<img src="./img/摩羯座.jpg" alt="">
<img src="./img/摩羯座.jpg" alt="">
<img src="./img/摩羯座.jpg" alt="">
<br>
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<table style="border-collapse: collapse; "
border="3px" width="100%" height="200" bordercolor="green" ;>
<caption style="color: green; font-size: 30px; margin-top: 50px;"> 行内块标签 </caption>
<tr height="10" align="center" bgcolor="antiquewhite" style="color:green">
<td>
行内块:行内块标签与行内块标签之间有间隙是行内块标签自带的特点
</td>
</tr>
<tr height="10" align="center" bgcolor="antiquewhite" style="color:green">
<td>
行内块:img行内块标签可以设置宽width: 200px;高height: 200px;,外边距margin-left: 30px;margin-top: 50px;
,内边距:padding: 3px;
</td>
</tr>
<tr height="10" align="center" bgcolor="antiquewhite" style="color:green">
<td>
行内块:input行内块标签可以设置行高来让自己变高
</td>
</tr>
<tr height="10" align="center" bgcolor="greenyellow" style="color:green">
<td>
行内块:动了一个img1行内块标签,其它的img行内块标签margin-top: 100px;都会跟着受影响同时向下
</td>
</tr>
</div>
</body>
</html>
10- 标签的模式转换.html
<!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>
/* 02- 来到内嵌css里 */
/* 03- 用通配符选择器清除内外边距 */
* {
padding: 0;
margin: 0;
}
/* 04- 标签选择器div */
div {
width: 100px;
height: 100px;
background-color: pink;
/* 05- display: inline转行内标签,竖变横,依然小,没有显示出宽高 */
/* display: inline; */
/* 06- display: inline-block 块级标签转行内标签，竖变横，变大，显示出宽高（简）
*/
/* display: inline-block; */
}
/* 07- 标签选择器span */
span {
width: 100px;
height: 100px;
background-color: lime;
/* 08- display: block行内标签转块级标签，横变竖，小变大 */
/* display: block; */
/* 09- display: inline-block 行内标签转块级后又转行内标签，竖变横，变大，显示出宽高（简） */
/* display: inline-block; */
}
/* 010- 标签选择器img */
img {
width: 100px;
height: 100px;
/* 011- display: block；横变竖 */
/* display: block; */
/* 012- display: block；竖变横，横变横 */
display: inline-block;
}
</style>
</head>
<body>
<!-- 01- 給出三个div 两个span 两个img -->
<!-- <div>div1</div>
<div>div2</div>
<div>div3</div>
<span>span1</span>
<span>span2</span> -->
<img src="./img/摩羯座.jpg" alt="">
<img src="./img/摩羯座.jpg" alt="">
<table style="border-collapse: collapse; "
border="3px" width="100%" height="200" bordercolor="green" ;>
<caption style="color: green; font-size: 30px; margin-top: 50px;"> 标签的转换模式 </caption>
<!-- <tr height="10" align="center" bgcolor="greenyellow" style="color:green">
<td>
原始状态
</td>
</tr> -->
<!-- <tr height="10" align="center" bgcolor="greenyellow" style="color:green">
<td>
div1、div2、div3:块级标签在有宽高的情况下用display: inline转行内标签,竖变横,依然小,没有显示出宽高
</td>
</tr> -->
<!-- <tr height="10" align="center" bgcolor="greenyellow" style="color:green">
<td>
div1、div2、div3:块级标签在有宽高的情况下用display: inline-block 转行内标签，竖变横，变大，显示出宽高（简）
</td>
</tr> -->
<!-- <tr height="10" align="center" bgcolor="antiquewhite" style="color:green">
<td>
span1、span2:行内标签在有宽高的情况下用display: block转块级标签,横变竖,小变大
</td>
</tr> -->
<!-- <tr height="10" align="center" bgcolor="greenyellow" style="color:green">
<td>
span1、span2:行内标签在有宽高的情况下用display:display: inline-block 竖变横，变大，显示出宽高（简）
</td>
</tr> -->
<!-- <tr height="10" align="center" bgcolor="greenyellow" style="color:green">
<td>
span1、span2:行内标签在有宽高的情况下用display:display: inline-block 竖变横，变大，显示出宽高（简）
</td>
</tr> -->
<!--
<tr height="10" align="center" bgcolor="greenyellow" style="color:green">
<td>
img:行内块标签在有宽高的情况下用display:block 横变竖
</td>
</tr> -->
<tr height="10" align="center" bgcolor="greenyellow" style="color:green">
<td>
img:行内块标签在有宽高的情况下用display: block:竖变横
</td>
</tr>
<!--
013- 标签显示模式转换 display
- 块级标签
- div h1-h6 p ul li ol li dl dt dd
- 独立成行
- 高度、行高、外边距以及内边距都可以控制
- 宽度默认是容器的100%
- 可以容纳内联标签和其他块级标签
- 行内标签
- - strong b em i del s span
- 在一行排列，超出才会折行
- 高、宽无效，但水平方向的margin可以设置，垂直方向的margin无效
- 默认宽度就是它本身内容的宽度
- 行内标签只能容纳文本或者其他行内标签
- 行内块标签
- - img input td
- 和相邻的行内块标签在一行，但之间会有白色缝隙
- 默认宽度就是它本身内容的宽度
- 高度、行高、外边距以及内边距都可以控制
- 转换 display
- - 块转行内：display : inline;
- 行内转块 ： display : block;
- 块、行内转行内块 ： display : inline-block; -->
</body>
</html>
11- 隐藏 .html
<!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>
/* 02- 来到内嵌css里 */
/* 03- 用通配符选择器清除内外边距 */
* {
padding: 0;
margin: 0;
}
/* 04- 类选择器.father */
.father {
width: 300px;
height: 300px;
border: 10px dashed lime;
}
/* 05- 类选择器.son */
.son {
width: 100px;
height: 100px;
background-color: #909;
}
/* 06- 标签选择器p */
p {
width: 100px;
height: 100px;
background-color: #009;
}
/* 07- 鼠标移入父盒子，隐藏子盒子 */
.father:hover .son{
/* 08- 隐藏 不占位 */
/* display: none; */
/* 09- 隐藏 占位 */
visibility: hidden;
}
/* 010-显示和隐藏
display:none; 隐藏,不占位
display:block/inline/inline-block; 显示 */
</style>
</head>
<body>
<!-- 01- div嵌套div和p标签 -->
<div class="father">我是父盒子
<div class="son">我是子盒子</div>
<p></p>
</div>
<table style="border-collapse: collapse; "
border="3px" width="100%" height="200" bordercolor="green" ;>
<caption style="color: green; font-size: 30px; margin-top: 50px;"> 隐藏</caption>
<!-- <tr height="10" align="center" bgcolor="greenyellow" style="color:green">
<td>
原始状态
</td>
</tr> -->
<!-- <tr height="10" align="center" bgcolor="greenyellow" style="color:green">
<td>
鼠标移入父盒子，隐藏子盒子，不占位
.father:hover .son
{
display: none;
}
</td>
</tr> -->
<tr height="10" align="center" bgcolor="greenyellow" style="color:green">
<td>
鼠标移入父盒子，隐藏子盒子，占位
.father:hover .son
{
visibility: hidden;
}
</td>
</tr>
</body>
</html>
12- 显示.html
<!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>
/* 02- 来到内嵌css里 */
/* 03- 用通配符选择器清除内外边距 */
* {
padding: 0;
margin: 0;
}
/* 04- 类选择器.father */
.father {
width: 300px;
height: 300px;
border: 10px dashed lime;
/* 05- 类选择器.son */
}
.son {
width: 100px;
height: 100px;
background-color: #909;
/*06- display: none隐藏 不占位，隐藏紫色盒子，下面盒子会跑上来 */
/* 显示: 无; */
/* display: none; */
/*07- 能见度: 隐蔽;隐藏自己，下面盒子不动， */
visibility: hidden;
}
/* 08- 标签选择器p */
p {
width: 100px;
height: 100px;
background-color: #009;
}
/* 09- 鼠标移入.father绿色盒子让.son紫色盒子做变化.father:hover .son */
.father:hover .son {
/* 10- 显示紫色盒子
display: block，要配合上面的display：none才会有效果 */
/* 显示: 块; */
/* display: block; */
/* 11- 显示紫色盒子
鼠标移入时，紫色盒子子盒子转行内块，但会变小
显示: 内联; */
/* display: inline; */
/* 12- 显示紫色盒子
display:inline-block;鼠标移入绿色盒子时紫色盒子显示，蓝色盒子有间隙地向紫色盒子下方移动，字体变大至30px */
/* display: inline-block;
font-size: 30px; */
/*013- 显示紫色盒子
需要在上面注释掉display: none;
再打开 visibility: hidden; 它俩是一对儿
能见度: 可见;*/
visibility: visible;
}
/* 014- 隐藏和显示组合
display:none; 隐藏,不占位
display:block/inline/inline-block; 显示
/* 013- 隐藏和显示组合
visibility:hidden; 不可见，占位
visibility:visible; 显示可见
*/
</style>
</head>
<body>
<!-- 01- div嵌套div--> <!-- p标签 -->
<div class="father">我是父盒子
<div class="son">我是子盒子</div>
<p></p>
</div>
<table style="border-collapse: collapse; "
border="3px" width="100%" height="200" bordercolor="green" ;>
<caption style="color: green; font-size: 30px; margin-top: 50px;">隐藏和显示组合A、B</caption>
<!-- <tr height="10" align="center" bgcolor="greenyellow" style="color:green">
<td>
初始状态：
display: none/* 显示: 无; */隐藏 不占位，隐藏紫色盒子，下面盒子会跑上来
visibility: hidden;/* 能见度: 隐蔽; */隐藏自己，下面盒子不动
</td>
</tr> -->
<!-- <tr height="10" align="center" bgcolor="greenyellow" style="color:green">
<td>
鼠标移入父盒子，显示子盒子
.father:hover .son
{
display: block; /* 显示: 块; */
}
</td>
</tr> -->
<!--
<tr height="10" align="center" bgcolor="greenyellow" style="color:green">
<td>
鼠标移入父盒子，显示子盒子
.father:hover .son
{
鼠标移入时，紫色盒子转行内块，但会变小
display: inline;/*显示: 内联; */
}
</td> -->
<!--
<tr height="10" align="center" bgcolor="greenyellow" style="color:green">
<td>
鼠标移入父盒子，显示子盒子
.father:hover .son
{
display:inline-block;鼠标移入绿色盒子时紫色盒子显示,蓝色盒子有间隙地向紫色盒子下方移动,字体变大至30px
display: inline-block;
font-size: 30px;
}
</td> -->
<!-- <tr height="10" align="center" bgcolor="greenyellow" style="color:green">
<td>
.father:hover .son {
visibility: visible; 能见度: 可见;鼠标移入绿色盒子时紫色子盒子显示
}
</td> -->
<tr height="10" align="center" bgcolor="greenyellow" style="color:green">
<td>
隐藏和显示组合A:
display:none; 隐藏,不占位
display:block/inline/inline-block; 显示
隐藏和显示组合B:
visibility:hidden; 不可见，占位
visibility:visible; 显示可见
</td>
</body>
</html>
13- 垂直对齐方式.html
<!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>
/* 02- 来到内嵌css里 */
/* 03- 标签选择器img （简）*/
/* img{ */
/* 04- 基线对齐 默认值 */
/* vertical-align: baseline; */
/* 05- 底部对齐 */
/* vertical-align: bottom; */
/* 06- 中线对齐 */
/* vertical-align: middle; */
/* 07- 顶部对齐 */
/* vertical-align: top; */
/* } */
/* 08- 类选择器.img1 */
.img1{
/* 09- 基线对齐 默认值 */
vertical-align: baseline;
/* 010- 底部对齐 */
/* vertical-align: bottom; */
/* 011- 中线对齐 */
/* vertical-align: middle; */
/* 012- 顶部对齐 */
/* vertical-align: top; */
}
/* 09- 垂直对齐方式，用于解决行内块的下间隙问题
vertical-align:baseline; 基线对齐
middle; 中间对齐
top; 顶部对齐
bottom; 底部对齐 */
</style>
</head>
<body>
<!-- 01- 文字和图片是基线对齐，图片就是行内块标签 -->
今天是周四yes<img src="./img/摩羯座.jpg" alt="" class="img1"width="50">
<!-- <img src="./img/摩羯座.jpg" alt="" width="100"> -->
<table style="border-collapse: collapse; "
border="3px" width="100%" height="200" bordercolor="green" ;>
<caption style="color: green; font-size: 30px; margin-top: 50px;">基线对齐</caption>
<tr height="10" align="center" bgcolor="greenyellow" style="color:green">
<td>
(也可以用到类选择器.img1{}来输入以下内容)
<br>
/* 基线对齐 默认值 */
vertical-align: baseline;
</td>
</tr>
<!-- <tr height="10" align="center" bgcolor="greenyellow" style="color:green">
<td>
/* 底部对齐 */
vertical-align: bottom;
</td> -->
<!-- </tr>
<tr height="10" align="center" bgcolor="greenyellow" style="color:green">
<td>
/* 中线对齐 */
vertical-align: middle;
</td>
</tr> -->
<!-- </tr>
<tr height="10" align="center" bgcolor="greenyellow" style="color:green">
<td>
/* 顶部对齐 */
vertical-align: top;
</td>
</tr> -->
</body>
</html>
14- 行内块的间隙.html
<!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>
/* 02- 来到内嵌css里 */
/* 03- 标签选择器img */
img {
width: 100px;
height: 100px;
}
/* 04- 行内块的间隙解收拢的解决方式一：给父元素添加font-size:0;
需要給间隙30px的话就給font-size: 30px;以此类推 */
body {
font-size: 0px;
}
</style>
</head>
<body>
<!-- 01- 給上下排列的img标签 ，标签之间的换行会默认解析成行内块的间隙。
給左侧img标签 ，默认没有间隙。
-->
<img src="./img/摩羯座.jpg" alt=""> <img src="./img/摩羯座.jpg" alt="">
<img src="./img/摩羯座.jpg" alt="">
<img src="./img/摩羯座.jpg" alt="">
<img src="./img/摩羯座.jpg" alt="">
<img src="./img/摩羯座.jpg" alt="">
<img src="./img/摩羯座.jpg" alt="">
<img src="./img/摩羯座.jpg" alt="">
<img src="./img/摩羯座.jpg" alt="">
</body>
</html>
15- 行内块标签的居中.html
<!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>
/* 02- 类选择器.wrap */
.wrap{
width: 300px;
height: 300px;
border: 1px solid;
/* 05- text-align: center行内块标签居中生效（简） */
text-align: center;
}
/* 03- 标签选择器img */
/* img { */
/* 04- 行内块标签居中无效 */
/* margin: 0 auto; */
/* } */
/* 06- 行内块居中需要给父元素添加text-align:center; 给自身添加margin:0 auto无效 */
</style>
</head>
<body>
<!-- 01- div盒子 -->
<div class="wrap">
<img src="./img/摩羯座.jpg" alt="" width="100">
</div>
</body>
</html>
16- 行内块的上下间隙问题.html
16- 行内块的下间隙问题
17- 盒子居中技巧.html
<!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>
/* 02- 来到内嵌css里 */
/* 03- 通配符选择器清理内外边距 */
*{
padding: 0;
margin: 0;
}
/* 04- 标签选择器div */
div {
width: 300px;
height: 300px;
background-color: #909;
/* 05- 父盒子水平居中在网页页面里，并且离上面有100px的距离（简） */
margin: 0 auto;
/* 07- 解决父盒子外边距塌陷的问题所以在父盒子里加上overflow: hidden; （简） */
overflow: hidden;
}
/* 04- 标签选择器p */
p {
width: 100px;
height: 100px;
background-color: yellow;
/* 06- 子盒子在父盒子里水平居中，并且离父盒子的上边缘有100px的高度，但是出现了父盒子外边距塌陷的问题
导致看起来像是子盒子水平居中但是父盒子没有上下居中 */
/* margin: 0 auto; */
margin: 100px auto;
}
/* 08- 总结盒子居中的技巧是margin:0 auto */
</style>
</head>
<body>
<!-- 01- div盒子里面嵌套p标签 -->
<div>
<p></p>
</div>
</body>
</html>
18- css三大特性之优先级.html
<!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>
/* 02- 来到内嵌css里 */
/* 03- 通配符选择器清理内外边距和项目符号 */
* {
padding: 0;
margin: 0;
list-style: none;
}
/* 04- 类选择器.father */
.father {
width: 500px;
height: 500px;
background-color: pink;
}
/* 05-类+子标签选择器.father p */
/* 10+1=11权重 */
.father p {
width: 200px;
height: 200px;
background-color: lime;
}
/* 06- 更大权重的类选择器加标签选择器就会覆盖原来标签的属性值.father ul li p */
/* 10+1+1+1=13 */
.father ul li p {
background-color: blue;
background-color: yellow !important;
}
/* 07- 没有样式冲突的就不涉及到优先级，正常显示 */
p {
/*09.属性值后面空格加!important 无限权重优先级，后者优先 */
/* background-color: blue !important; */
border: 3px solid yellow;
}
</style>
<!-- 010- css三大特性
- 层叠性
- - 样式冲突就近原则，也就是后引入生效
- 样式不冲突的代码不会受影响
- 继承性
- - 子标签继承父标签的样式
- - 文本字体属性都会继承，text-, line- ,font-, color
- 优先级 -->
</head>
<body>
<!-- 01- 給出一个父盒子div内嵌一组无序列表ul li，li里再嵌套p标签 -->
<div class="father">父
<ul>
<li>
<!-- 08- 行内的样式比上面所有的优先级都高，也高于11也高于13 但不高于无限权重(简)-->
<p style="background-color: red;">子p1</p>
</li>
</ul>
</div>
<p>p2</p>
<table style="border-collapse: collapse; "
border="3px" width="100%" height="200" bordercolor="green" ;>
<caption style="color: green; font-size: 30px; margin-top: 50px;"> css三大特性之优先级 </caption>
<tr height="30" align="center" bgcolor="greenyellow" >
<td style="color:green;">
css属性值后面加 !important无限权重 > 行内css style=" " > 内嵌或者外链css的/* 10+1+1+1=13权重 */.father ul li p { } > 内嵌或者外链css的/* 10+1=11权重 */.father p
</td>
</tr>
</body>
</html>
19- css三大特性之层叠性.html
<!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>
/* 02- 来到内嵌css里 */
/* 03- 标签选择器div */
div {
width: 200px;
height: 200px;
background-color: pink;
/* 04- 层叠性意思就是：代码冲突的时候虽然代码是从上往下解析的但是后引入的生效，
代码不冲突就正常显示 */
width: 400px;
border: 20px solid peachpuff;
background-color: lime;
}
</style>
</head>
<body>
<!-- 01- 給一个div -->
<div></div>
<table style="border-collapse: collapse; "
border="3px" width="100%" height="200" bordercolor="green" ;>
<caption style="color: green; font-size: 30px; margin-top: 50px;"> css三大特性之层叠性 </caption>
<tr height="30" align="center" bgcolor="greenyellow" >
<td style="color:green;">
层叠性意思就是：代码冲突的时候虽然代码是从上往下解析的但是后引入的生效，
代码不冲突就正常显示
</td>
</tr>
</body>
</html>
20- css三大特性之继承性.html
<!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>
/* 02- 来到内嵌css里 */
/* 03- 通配符选择器清理内外边距 */
*{
padding: 0;
margin: 0;
}
/* 04- 类选择器 .father */
.father {
width: 400px;
height: 300px;
background-color: lightblue;
/* 07- 继承性的意思是父盒子里的内容，子盒子如果没有的话会继承到子盒子里去 */
/* 08- text开头的都有继承性 */
text-align: center;
/* 09- 行高也是有继承性 */
line-height: 40px;
/* 010- font开头的也是有继承性 */
font-size: 30px;
font-family: '宋体';
font-weight: bold;
font-style: italic;
/* 011- 字体颜色也是有继承性 */
color: red;
}
/* 05- 类选择器.son 会继承 */
.son {
width: 200px;
height: 200px;
background-color: lightpink;
}
/* 06- 标签选择器p 会继承*/
p {
width: 100px;
height: 100px;
border: 1px solid;
}
</style>
</head>
<body>
<!-- 01- 給一个父盒子div，再嵌套子盒子，子盒子div再嵌套p标签盒子 -->
<div class="father">
父
<div class="son">子
<p>p标签</p>
</div>
</div>
<table style="border-collapse: collapse; "
border="3px" width="100%" height="200" bordercolor="green" ;>
<caption style="color: green; font-size: 30px; margin-top: 50px;"> css三大特性之继承性 </caption>
<tr height="30" align="center" bgcolor="greenyellow" >
<td style="color:green;">
01- 继承性的意思是父盒子里的内容，子盒子如果没有的话会继承到子盒子里去;
<br>
02- text开头的都有继承性,例如text-align: center;
<br>
03- 行高也是有继承性,例如line-height: 40px;
<br>
04- font开头的也是有继承性,例如font-size: 30px;font-family: '宋体'; font-weight: bold;font-style: italic;
<br>
05- 字体颜色也是有继承性,例如color: red;
}
</td>
</tr>
</body>
</html>
21- overflow属性.html
22- 浮动的宽度完善.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 02- 来到内嵌css里 */
/* 03- 用通配符选择器清理内外边距 */
*{
padding: 0px;
margin:0px;
}
/* 04- 标签选择器div */
div{
background-color: violet;
float: left;
/* 05- 标签选择器span */
}
span{
width:100px;
height:100px;
background-color: green;
/* 06- span标签 float: left左浮动后撑开了自己打不开的的宽高（简） */
/* 浮动：左侧； */
float: left;
margin-top: 10px;
margin-left: 20px;
}
</style>
</head>
<body>
<!-- 01- 給两个div，再给两个span -->
<div>今天是周一</div>
<div>今天是周一</div>
<span>我是span1</span>
<span>我是span2</span>
</body>
</html>
1452
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
