本文详细介绍了CSS的基础知识，包括层叠样式表（CSS）的工作原理，如CSS的优先级规则（渣男第一定律）、颜色、尺寸、字体和元素定位等概念。通过实例展示了CSS如何控制HTML元素的外观，如颜色、尺寸、字体样式和图文混排。同时，文章探讨了CSS中的伪类选择器和浮动元素，以及如何使用display属性来改变元素的显示方式。
嗨！宝儿萌，这里是阿木木，又见面了！虽然说上期web log点赞数惨不忍睹，但上次的帖子竟然有111（孤寡~孤寡~）次浏览量，还惊喜地涨了两个粉丝（虽然现在一共也就两个，非常感谢两位宝儿的支持，我会继续瞎白话的（bu shi）！），让我在CSDN的排行榜从∞进步到了前26万9千名（按照“成就一亿技术人”的说法，我已经成功超过了73.1%的人，我骄嗷啊！~~~）。
话说在那古老又神秘的东方，相传有一座“蓬荜生辉”的“京师大学堂师范馆”，在师范馆的烟波楼中，一位道行高深莫测的东方男性在207房间中悟出互联网前端的大道——“HTML5，就是一条河流，而我，是它的国王！”（不知道哪里传来了莫名其妙的“吸溜”一声~）
一、三亿鼠标的编程梦想——css
1.一些不得不说的废话！
CSS，一个让十年老兵流泪不止的名字！（背起了行囊，离开家的那一刻~）（✖） ，层叠样式表(英文全称：Cascading Style Sheets)（这都没讲都要考？？？）（✔），是一种用来表现HTML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。可以说HTML这条河流的外观基本需要CSS来进行控制。
在正式开始CSS之前，木木要跟大家提个醒，木木已经在这里栽了不晓得多少次（被渣“河”欺骗了感情www）,CSS的中文全名叫做层叠样式表，是覆盖样式表，如果宝儿萌在之前对某个元素的某个属性进行了设置，后面如果在对该属性进行设置，后面设置就会覆盖掉前面的设置（把前浪拍死在沙滩上了属于是）！宝儿萌看到这肯定就会说：“这nm就是废话，谁不知道呀！”但大家需要注意哈，CSS的一切优先级都不是完全固定的，都是跟属性设定的前后位置关系直接相关！简而言之，CSS就跟阿木木一样是个渣男，见一个爱一个，遇见新欢肯定就会跟旧爱分手，它的心里只有最新遇到的新设置的属性（渣男第一定律），之前对这个属性说的海誓山盟都就着山珍海味吃了！
好了，废话白话完了，那让我们正式进入这条河流吧~
2.CSS的定义与应用样式
（1）基本的小知识（包含继承的知识）
CSS样式由一条或多条已分好隔开的样式声明组成。每条声明包含着一个CSS属性和该属性的值，二者以冒号分隔。CSS入门很容易，语法真不太难，但是精通很难，属性是真滴多！！！下面木木先列出几个常见的CSS属性（当然咱们在之后的属性部分会专门讲到，这里先跟大家小小剧透一下下~）：
那么当元素要求索一个CSS属性值时，这里面就很有说法了，首先有五种定义样式的方式：
①元素内嵌样式（用元素的全局属性style定义的样式，也就是直接在开始标签之后加上style属性）
②文档内嵌样式（定义在style元素中的样式，也就是放在head中进行统一设定CSS样式的代码）
③外部样式（用link元素导入的样式）
④用户样式（用户定义样式）
/*大多数浏览器都会允许用户定义自己的样式表。这类样式表中包含的样式成为用户样式。虽然这个功能很小众，但是不代表其不存在。以Chrome为例，在用户的个人配置信息目录中生成一个名为Default\User StyleSheets\Custom.css的文件。添加这个文件中的任何样式都会被用于用户访问的所有网站（可以设置，但完全没必要）*/
（5）浏览器样式（浏览器应用的默认样式）
按理来说，样式的优先级也和我介绍他们的优先级保持一致（我就是这么重点突出~），BUT！这里大家需要格外注意一下下，（2）和（3）的优先级并不绝对，为什么呢？还记得我最开始和大家反复强调的吗？CSS是个喜新厌旧的渣男！下面直接上代码：
<!--CSS初步-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>1_base</title>
<link rel="stylesheet" type="text/css" href="./1_base_style.css">
<!--令独立CSS文件与html文件相互关联的语句-->
<style>
/*style元素:在head中设置的style语句 存放CSS代码的位置之一*/
/*p和h1都是选择器（selector），可以把选择器视为是函数名*/
p{ /*影响所有的p元素*/
color: blue;
font-size: 2em;
}
h1{ /*影响所有的h1元素*/
background-color: black;
color: white;
}
/*强调*/
a{
color: aqua !important;
}
/*这里要特别注意，如果你在属性值后面标上了!important，css就知道你很重视这门婚事，他就不敢再渣了
而是将标有!important的属性设为第一优先级，这是一个打破优先级的好方式*/
/*继承*/
h2{
color: yellow;
background-color: #ccc;
border: medium solid black;
}
.inherit_using{
border: inherit;
}
/*与元素外观（文字颜色、字体等）可以被继承，如果要继承页面布局相关的样式，需要在属性值中加入inherit*/
/*同级样式冲突优先级问题（书上具体值写错了，以这里为准！具体值可以把鼠标放在选择器上查看）*/
p{
color: green;
}/*选择器只有一个p,样式具体值为0-0-1（0个id值+0个其他属性+1个元素名）*/
/*注意这里把之前定义的p样式覆盖了，也就是“吃人”那段的颜色会变成绿色*/
p.class_p1{
color: red;
background-color: #aaa;
}/*选择器中含有class_p1，样式具体值为0-1-1（0个id值+1个其他属性+1个元素名）*/
/*只作用于含有class_p1的p元素*/
p.class_p2{
color: purple;
}/*选择器中含有class_p2，样式具体指为0-1-1（0个id值+1个其他属性+1个元素名）,由于其位置靠下，因此听他的*/
/*只作用于含有class_p2的p元素*/
</style>
<!--讨论一下style元素和独立CSS文件优先级的问题：
CSS，是个覆盖样式表，根据“渣男第一定律”：
①如果link元素放在style元素之前，那“旧爱”是link元素，“新欢”是style元素，所以css要听从style的
②如果link元素放在style元素之后，那“旧爱”是style元素，“新欢”是link元素，所以css要听从style的
这个里面是link在前，即第①种情况，如果想看第二种情况，可以将link与style换个位置，你就明白了
-->
</head>
<body>
<h1>狂人日“寄”</h1>
<!--元素属性：在开始标签中放置style属性，存放CSS代码位置之一-->
<!--由于元素属性是所有针对该元素CSS语句中最后出现的（或者说是最靠近元素的），根据渣男第一定率，它的优先级是最高的-->
<p style="color: brown;">
凡事总须研究，才会明白。古来时常吃人，我也还记得，可是不甚清楚。我翻开历史一查，这历史没有年代，歪歪斜斜的每页上都写着“仁义道德”几个字。我横竖睡不着，仔细看了半夜，才从字缝里看出字来，满本都写着两个字是“吃人”！
</p>
<p>
凡事总须研究，才会明白。古来时常吃人，我也还记得，可是不甚清楚。我翻开历史一查，这历史没有年代，歪歪斜斜的每页上都写着“仁义道德”几个字。我横竖睡不着，仔细看了半夜，才从字缝里看出字来，满本都写着两个字是“吃人”！
</p>
<!--强调-->
<a style="color: red;" href="https://www.bilibili.com/video/BV1zT4y1S7yU?p=3">Viper狂风接闪现，一路火花带闪电</a>
<!--继承-->
<h2>这喝汤，多是一件<span>美逝</span>呀~</h2>
<h2>这喝汤，多是一件<span class="inherit_using">美逝</span>呀~</h2>
<!--与元素外观（文字颜色、字体等）可以被继承，如果要继承页面布局相关的样式，需要在属性值中加入inherit-->
<!--同级样式冲突优先级问题-->
<p>曾经沧海难为水，除去巫山不是云</p>
<p class="class_p1 class_p2">取次花丛懒回顾，半缘修道半缘君</p>
</body>
<!--CSS初步
（1）CSS=Cascade Style Sheet 级联样式表 用于设定网页的外观
布局、色彩、字体、简单动画……
基本语法：
style元素中：
类名|标签|#id（选择器） {
属性1:属性1值;/*这是注释*/ （选择器相当于c语言函数，也就是说注释格式与c语言保持一致）
属性2:属性2值; （属性写在｛｝中，每一行放一个属性，每个属性都有名字和值）
}
一个元素可以设定多个选择器，每个选择器都可以设定多个属性
（2）CSS代码存放位置：（可以通过f12看优先级（Elements-Style），优先级低的部分会显示被划掉了，位置越靠上优先级越高）
元素属性 （在开始标签中放style语句）
style元素（在head中设置的style语句）
独立css文件 （在里面直接相当于在style中的语句，使用link元素相连接）
（3）补充知识点：继承
如果浏览器在直接相关的代码中找不到某个属性的值，就会使用继承机制，使用父元素的样式属性值
与元素外观（文字颜色、字体等）可以被继承，如果要继承页面布局相关的样式，需要在属性值中加入inherit
（4）补充知识点：同级样式冲突优先级问题
如果有两个同一层次的样式作用于同一元素怎么办呢？这时我们会比较一下两个样式的具体程度
样式的具体程度包括：
①样式选择器中id值的数量
②选择器中其他属性和伪类的数目
③选择器中元素名和伪元素的数目
！（注意以上都是选择器中的，就是｛｝前面的那个部分，括号里的东西不算）
比较顺序和列出顺序一致，也就是先比①，①相同后再比较②，依次类推
如果样式具体程度一样的话，就看谁最后出现，即“渣男第一定律”
-->
</html>（配套的css文件）
p{
/*独立css文件 存放CSS代码的位置之一*/
/*在独立css文件里面直接相当于在style中的语句，写法和语法规则完全一致
如果想与html文件挂购物，需要使用link元素相连接*/
color: cyan;
border: 6px solid purple;
/*如果想在该样式表中导入其他样式表，可以在该文档开头使用@import "***.css"*/
/*可以在@import "***.css"语句出现之前的语句只有一个，那就是@charset "***（一般为UTF-8）"，用来声明样式表使用的字符编码
如果样式表未设置编码，以与其关联的html编码为准*/
}
（2）样式的层叠与继承（继承的具体知识请看（1））
<!--选择器-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2_selector</title>
<!--选择器的分类部分的代码-->
<style>
/*使用标签做选择器*/
p{
color: blue;
}
a{
text-decoration: none; /*去掉下划线*/
color:blue;
}
/*使用id做选择器*/
#p2{
border-bottom: 1px dotted red ; /*下边框*/
}
/*使用类做选择器*/
.class1{
background-color: cyan;
}
/*使用属性做选择器*/
/*为外部引用网站设置样式，因为外部网站都是http（或者https）打头，设置形式如下（href后面的^表示以=后面的“”的内容为开始）*/
a[href^="https://"]{
color: green;
}
/*使用伪类做选择器*/
a:hover{
background-color: black;
color: white; /*鼠标悬停在网站上，会有颜色改变，在移动设备上无用*/
}
/*一个我还没整太明白的伪类，等我整明白了第一时间跟大家讲解
visited 作用于已访问的域名，可以保证颜色不变？？？
a:visited{
color:purple;
}
*/
a:active{ /*鼠标点击瞬间进行变色*/
color: red;
background-color: white;
}
h1:hover{ /*鼠标悬停后，会让字体瞬间放大到3em*/
font-size: 3em;
}
</style>
<!--选择器中的元素关系的代码-->
<style>
h3,p{ /*两种并列关系的元素一起设置*/
border:2px dashed blue;
}
h4 p{ /*对h4所有后代元素都起作用*/
color: deeppink;
text-decoration: underline; /*增加下划线*/
}
h5>p{ /*仅仅对h5的子元素起作用*/
color: saddlebrown;
}
</style>
</head>
<body>
<!--标签选择器-->
<p>
命运这种东西，生来就是要被踏于足下的，如果你还未有力量反抗它，只需怀着勇气等待。
</p>
<hr>
<!--id选择器-->
<p id="p2">
或许是不知梦的缘故，流离之人追逐幻影……
</p>
<hr>
<!--类选择器-->
<h1 class="class1">龙族里一些心心念念的话……</h1>
<p class="class1">
有些路你和某人一起走，就长得离谱，你和另外一些人走，就短得让人舍不得迈开脚步。
</p>
<hr>
<!--属性选择器-->
<a href="https://www.bilibili.com/video/BV1Ck4y1y72t?spm_id_from=333.337.search-card.all.click">以心为棺，以身为椁</a>
<!--指向外部网站-->
<a href="1_base.html">忘了的话要及时回去复习哦~</a>
<!--指向内部html文件-->
<hr>
<!--选择器与元素关系-->
<h3>因为不爱，所以都错</h3>
<h4>
<p>什么是死去？</p>
<p>是终点，是诀别，是不可挽留</p>
<div>
<p>是再也握不到的手，感觉不到的温度</p>
</div>
<p>再也说不出口的“对不起”</p>
</h4>
<h5>悲伤才是最大的魔鬼
<p>一个人可以逃避世间一切魔鬼，但唯有一个是他永远无法摆脱的，那就是懦弱的自己</p>
<p>活着的意义……是你在快死的瞬间划过你脑海的那些事</p>
<div>
<p>你已手握刀剑，那么就准备战斗！</p>
</div>
<p>汝必以痛，偿还僭越</p>
<p>汝必以眼，偿还狂妄</p>
<p>汝必以血，偿还背叛</p>
<p>让我们穿越最深的地域，然后直抵天堂</p>
</h5>
<!--选择器 selector
为什么要“选择”？CSS是附加到HTML上的，所定义的属性应用到哪些HTML元素？
选择器，就是查找HTML元素的条件。
当CSS放在style元素和独立css文件中要使用选择器
一、选择器的分类：
（1）标签： p h1
（2）id //#id <div id=""> （类似于变量名，id是不能重复的，一个id对应一个元素，注意语法）
（3）类 //.c1 <div class="c1" （可以应用多个元素之中，元素可以种类不同）
（4）属性 // a[href^="http://"] （根据元素所包含属性选择）（指向外部网站是以http开头的）
（5）伪类 可以实现简单的交互效果（可以应用在所有的元素上面，不仅仅是a,只是以a作为例子）
二、选择器中的元素关系：
（1）选择器 选择器 div span -- div元素包含的span元素：即div元素的后代元素中所有的span元素
（2）选择器>选择器 div>span -- div元素的直接子元素中的span元素
（3）选择器, 选择器 div,span -- div元素的并列元素中所有的span元素
</body>
</html>Plus：补充知识——常见伪类：
(7条消息) css中的伪类选择器有哪些_李青不吃螺蛳粉的博客-CSDN博客_伪类选择器有哪些
二、那些被CSS欺骗过的属性——“河”也罔极，二三其德！
1.颜色
1.1 使用颜色名称和十六进制数字表示颜色
<!--指定颜色-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3_color</title>
<style>
div{
display: inline-block;
width: 200px;
height: 200px;
border: 1px solid black;
}
</style>
</head>
<body>
<div style="background-color:#fff">大白白 </div>
<div style="background-color:#000">小黑黑</div>
<div style="background-color:#f00">亮红红</div>
<div style="background-color:#666">大灰灰</div>
<div style="background-color:#ccc">二灰灰</div>
<div style="background-color:#eee">小灰灰</div>
</body>
<!--指定颜色:
发光设备颜色模型：red green blue （0-255）
三种指定颜色的方式：
（1）十六进制指定RGB分量 #FFF
（一共六位十六进制数字，两位视为一个字符，1、2位为红色，3、4位为绿色，5、6位为蓝色）
（简写可写成三位，其中一位代表两位一样的）
#FF0000 红色 #F00 F=1111 0=0000 FF=byte
#FFFFFF 白色 #FFF
#000000 黑色 #000
#FF0 ==> #FFFF00 黄色
#666 ==> #666666 深灰色
（2）rgb函数指定颜色
rgb函数：rgb(255,255,255)/rgb(255,255,255)
rgb(0,0,255) #蓝色 很蓝的啦
（3）名称指定颜色
red white blue green yellow
-->
</html>附：CSS颜色选编，有兴趣的宝儿们可以去www.w3.org/TR/css3-color中去看看哦~
1.2 使用颜色函数表示颜色
颜色名称和简单的十六进制数并不是表示颜色的唯一方式。CSS中还可以用一些函数选择颜色，以下列出了相应的颜色函数：（一般RGB函数表示颜色更为多见）
2.尺寸
2.1 尺寸单位
许多CSS属性要求为其设置长度值。例如我们常常见到的width（设置元素的宽度）和font-size（设置元素内容的字号），但说到长度不得不详细说一下长度单位的问题。
（1）绝对长度
绝对单位就是咱们现实中的度量单位，CSS支持五种绝对单位，具体情况如下：
但u1s1，谁用绝对单位呀？所以大家看一下图个乐呵就是了。
（2）相对长度
大家对于相对单位就友好多了，由于它能随着浏览器界面的大小变化而“能屈能伸”，下面是一些比较主流的相对单位：（篇幅原因肥猪流木木就不讲了，也没啥用，大家感兴趣的自己去查个资料哈~）
<!--长度、距离、尺寸（空间）-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>4_size</title>
<style>
html{
font-size: 0.2in;
/*html是根元素，如果设置了0.2in（绝对单位），会让整个html文档的字号变成0.2in，
在视觉效果上，如果有这行代码会使整个文档字号变大，可以删去再添加回来看效果*/
}
.class_em{
text-indent: 2em;
}
.class_px{
text-indent: 20px;
}
.class_rem{
font-size: 2rem;
height: 2rem;
background-color: black;
color: white;
}
div{
width: 300px;
height: 300px;
border: 2px solid black;
}
div>div{ /*直接子元素*/
float: left; /*保证子元素div在父元素div上显示，如果没有这个的话，会导致蓝色块另起一段*/
margin-right: 6px; /*令子元素之间有空隙*/
}
</style>
</head>
<body>
<h1>以梦为马</h1>
<p>我要做远方的忠诚的儿子</p>
<p>和物质的短暂情人</p>
<p>和所有以梦为马的诗人一样</p>
<p>我不得不和烈士和小丑走在同一道路上</p>
<hr>
<!--首行缩进两字符-->
<p class="class_em">万人都要将火熄灭 我一人独将此火高高举起</p>
<p class="class_em">此火为大 开花落英于神圣的祖国</p>
<p class="class_em">和所有以梦为马的诗人一样</p>
<p class="class_em">我藉此火得度一生的茫茫黑夜</p>
<hr>
<!--首行缩进两字符，2倍行高-->
<p class="class_em" style="line-height: 2em;">此火为大 祖国的语言和乱石投筑的梁山城寨</p>
<p class="class_em" style="line-height: 2em;font-size: 2em;text-indent: 2em;">以梦为土的敦煌——那七月也会寒冷的骨骼</p>
<!--上面的是2倍字号首行缩进2字符的标准行-->
<p class="class_em" style="line-height: 2em;font-size: 2em" >如雪白的柴和坚硬的条条白雪 横放在众神之山</p>
<!--上面的是2倍字号首行缩进2em的效果行-->
<p class="class_em" style="line-height: 2em;font-size: 0.5em;text-indent: 2em;">和所有以梦为马的诗人一样</p>
<!--上面的是0.5倍字号首行缩进2字符的标准行-->
<p class="class_em" style="line-height: 2em;font-size: 0.5em">我投入此火 这三者是囚禁我的灯盏 吐出光辉</p>
<!--上面的是0.5倍字号首行缩进2em的效果行-->
<hr>
<!--我们会发现使用em会随着字号的改变而改变，使首行缩进永远都是相对于字体大小缩进两字符-->
<p class="class_px" style="line-height: 2em;font-size: 2em;text-indent: 2em;">万人都要从我刀口走过 去建筑祖国的语言</p>
<!--上面的是2倍字号首行缩进2字符的标准行-->
<p class="class_px" style="line-height: 2em;font-size: 2em;">我甘愿一切从头开始</p>
<!--上面的是2倍字号首行缩进2px的效果行-->
<p class="class_px" style="line-height: 2em;font-size: 0.5em;text-indent: 2em;">和所有以梦为马的诗人一样</p>
<!--上面的是0.5倍字号首行缩进2字符的标准行-->
<p class="class_px" style="line-height: 2em;font-size: 0.5em;">我也愿将牢底坐穿</p>
<!--上面的是0.5倍字号首行缩进2em的效果行-->
<hr>
<!--我们会发现使用px会随着字号的改变而改变，因为这个是绝对单位（两行效果行的缩进位置相同即可证明）-->
<p class="class_rem">众神创造物中只有我最易朽 带着不可抗拒的 死亡的速度</p>
<p class="class_rem">只有粮食是我珍爱</p>
<p class="class_rem">我将她紧紧抱住 抱住她 在故乡生儿育女</p>
<p class="class_rem">和所有以梦为马的诗人一样</p>
<p class="class_rem">我也愿将自己埋葬在四周高高的山上 守望平静家园</p>
<!--这里我们发现这一段的字号变成根元素设定字号的两倍，但如果你细心观察，会发现其实em那个也变成了根元素字号的两倍，
这是因为html根元素应用后，使整个文档的字号都变化了，em相对的父元素的字号随着根元素变化，因而产生了一样的变化效果
省流：直接用em就好，rem如果有需求再说-->
<!--海子的诗每读一次都是一种享受，虽然这部分没用上，但为了保证诗歌完整性，注释在这里，不喜可删
<p>面对大河我无限惭愧</p>
<p>我年华虚度 空有一身疲倦</p>
<p>和所有以梦为马的诗人一样</p>
<p>岁月易逝 一滴不剩 水滴中有一匹马儿 一命归天</p>
<p>千年后如若我再生于祖国的河岸</p>
<p>千年后我再次拥有中国的稻田 和周天子的雪山</p>
<p>天马踢踏</p>
<p>和所有以梦为马的诗人一样</p>
<p>我选择永恒的事业</p>
<p>我的事业 就是要成为太阳的一生</p>
<p>他从古至今——“日”——他无比辉煌无比光明</p>
<p>和所有以梦为马的诗人一样</p>
<p>最后我被黄昏的众神抬入不朽的太阳</p>
<p>太阳是我的名字</p>
<p>太阳是我的一生</p>
<p>太阳的山顶埋葬 诗歌的尸体——千年王国和我</p>
<p>骑着五千年凤凰和名字叫"马"的龙——我必将失败</p>
<p>但诗歌本身以太阳必将胜利 </p>
-->
<!--边框使用2px的div-->
<div ></div>
<hr>
<!--%相对单位的妙用-->
<div style="width: 900px;height: 900px;background-color: #aaa;">
<div style="width: 70%;height: 100%;background-color: yellow;"></div>
<div style="width: 25%;height: 100%;background-color: blue;"></div>
</div>
<!--div是块元素，每一个默认是一个新的段落，因而设置一个新的div相当于另起一段
如果想要将两个子元素div都放入父元素div之中，需要在style中设置div>div 设置float属性，另其漂浮在父元素之上-->
<!--
长度、距离、尺寸--空间
（1）相对单位（如果想随着字体的改变而变化，去head中统一设置，如果直接在p元素上既设置font-size，又设置line-height，后者会跟着默认值一起走）
①em=M字母宽度（相对单位：设字体相关的尽量用em），2em就是该元素在屏幕上显示出来的高度应该为字号的两倍。（根据父元素字号大小而设置）
②px=像素 (绝对单位，但很相对,需要精确控制尺寸时使用）
③%=百分比相对父元素的尺寸 （网页布局中常用），百分比单位并不是什么元素都可使用，后续博客会说明这一点
④rem单位根据html元素（文档的根元素）的字号而设定 //但更多用em，可以了解一下
⑤ex当前字体x的高度，也就是字母基线到中线之间的距离，1ex≈0.5em
（2）“正绝旗”的绝对单位：（屏幕上显示效果不统一，所以基本不使用）
pt=磅 (1 pt 等于 1/72 英寸)
cm=厘米
in=英寸
-->
</body>
</html>2.2 元素尺寸
<!--元素尺寸，BOX模型-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>5_BOX</title>
<style>
div{
width: 300px;
height: 300px;
/*宽度和高度不是在网页上占用的整个有多宽，而是显示内容所需的宽度与高度。*/
background-color: yellow;
/*内边距*/
padding: 10px;
/*边框*/
border: 10px solid blue;
border-width: 20px; /*覆盖掉上面语句中border：10px*/
/*外边距，margin不可见*/
margin: 15px;
/*分别指定上下左右的宽度*/
margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 25px;
/*简写版*/
margin:40px 45px 50px 55px; /*分别指定4个，按照顺时针排序，即四个数字分别确定的边是上-右-下-左*/
border-width: 20px 40px ; /*这里设置的是border，所以能看到效果，分开指定上下（第一个数字）和左右（第二个数字）*/
}
#content{/*网页布局，使div元素居中*/
width: 900px;
height: 900px;
background-color: #aaa;
margin: 1px auto; /*设置居中：第一个值是上下间距（距网页边缘），第二个值是左右间距（距网页边缘），如果第二个设为auto，则会显示居中*/
}
</style>
</head>
<body>
<div>©阿木木</div>
<div id="content">©阿木木</div>
<!--
间距与边框--元素在网页上占的空间
所谓的BOX模型，充分利用浏览器的“开发者工具”
宽度和高度不是在网页上占用的整个有多宽，而是显示内容所需的宽度与高度。
内间距 padding -top -right -bottom -left
边框 border
外间距 margin
边框、內间距、外间距都可分别指定上下左右的宽度
实际占用宽度和高度：边框+內间距+外间距+元素自身宽度和高度
-->
</body>
</html>3.时间与角度
在之后的学习中可能会用到时间单位和角度单位，木木在这给大家列出来哈~
4.字体
<!--字体-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>6_font</title>
<style>
p{
font-family: '楷体';
font-family: serif; /*有衬线，windows默认宋体*/
font-family: sans-serif; /*无衬线，Windows默认黑体*/
font-family: monospace; /*等宽，Windows默认宋体*/
/*覆盖样式表，以上四种字体相互覆盖，谁在下面谁是老大，可以调整顺序尝试*/
font-size: 2em;
font-weight: bold; /*粗体还是非粗体，默认值normal，加粗bold*/
text-transform: capitalize;/*使文本以大写字母开头*/
text-decoration: underline red; /*下划线*/
text-decoration: line-through blue; /*删除线*/
/*覆盖样式表，以上两种线相互覆盖，谁在下面谁是老大，可以调整顺序尝试*/
text-indent: 2em;
line-height: 1.5em;
color: darkblue;
background-color: #fee;
}
.kw1{
font-family:sans-serif;
color: black;
text-decoration: none;
/*该方法无法去除下划线和删除线*/
}
.kw2{
font-family:sans-serif;
color: black;
text-decoration-line: line-through;
text-decoration-color:#fee ;
/*这里说明如果想去除下滑线可以把线和背景色的颜色调成相同颜色，
但这里要注意，下划线可以这么做，删除线如果这样，中间会出现一条空白条~
本例中就以删除线为例*/
/*plus：设置装饰线颜色的语法格式
（1）上划线：text-decoration:overline #fee
（2）删除线：text-decoration:line-through #fee
（3）下划线：text-decoration:underline #fee
*/
}
</style>
</head>
<body>
<p>团结，勇气和<span class="kw1">绝不动摇的忠诚</span>，是人类最大的优点！</p>
<p>团结，勇气和<span class="kw2">绝不动摇的忠诚</span>，是人类最大的优点！</p>
<p>something for nothing</p>
<!--上面的p会发现到网页上s会变为大写-->
<!--
字体 font
字体是计算机文件。你的计算机上有的字体，其他用户的计算机上不一定有。
字体是有版权保护的，是社会历史文化的。
有关字体，特别注意：
等宽monospace vs 不等宽 （字母宽度是否相同（ Courier New VS Time New Roman））（汉字不考虑有无等宽）
有衬线serif vs 无衬线sans-serif （边角有没有小花纹（Time New Roman VS Arial））（汉字考虑有无衬线 宋体VS等线）
显示程序代码的字体：要使用等宽 1l 0oO
font-family: "Times New Roman", serif, sans-serif, monospace; （第一种是字体名字放双引号里，后三种是字体类型）
https://www.w3school.com.cn/cssref/css_websafe_fonts.asp（可以去参考字体）
font-family （指定字体名字或某种类型的名字）
font-size （字体大小）
text-decoration （字体下划线）
text-indent （首行缩进）
line-height （行高）
color
background-color
-->
</body>
</html>5.图文双排
<!--图文混排-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>7_Photo-text</title>
<style>
p{
text-indent: 2em; /*首行缩进两字符*/
line-height: 1.5em; /*行高*/
}
#div1{
float: right; /*脱离字节流，漂浮在right/left（水流之上的某指定位置，效果类似于紧密型图文关系）*/
}
.caption1{
background-color: aqua;
color: blue;
font-family: 楷体;
text-align: center; /*设定文本与图片对齐，水平方向居中居左居右*/
vertical-align: middle; /*垂直方向居中居上居下 */
/*但要注意，这里的middle是放在父元素div的中间位置，而不是在拥有caption属性的div元素中间，因此老师上课翻车了*/
/*这里有一个专门写vertical-align的blog可以看一下，很生动形象：https://blog.csdn.net/qq_22855325/article/details/72858677?ops_request_misc=&request_id=&biz_id=102&utm_term=html%E4%B8%ADvertical-align&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-0-72858677.pc_search_result_control_group&spm=1018.2226.3001.4187*/
padding: 1em 1px; /*所以以后设置文本垂直居中还是直接用padding属性吧*/
}
</style>
</head>
<body>
<div id="div1"><!--定义id-->
<img src="./img/star.jfif">
<!--正规网站图片都需要题注-->
<div class="caption1">
梵高——星空
<!--保证题注在图片正下方-->
</div>
</div>
<p style="clear: both;"></p>
<!--html文件相当于一条河流，网页左右边界就相当于河流两堤-->
<!--虽然这个段落本身没有任何内容，但是这条语句的存在使得这个空段落和图片保持在了同一水平上，下面的文字会被挤掉-->
<p>倘若有任何误谬之处，我向必然致歉。</p>
<p>但愿快乐不会因我视其为己有而生气。</p>
<p>但愿死者耐心包容我逐渐衰退的记忆。</p>
<p>我为自己分分秒秒疏漏万物向时间致歉。</p>
<p>我为将新欢视为初恋向旧爱致歉。</p>
<p>远方的战争啊，原谅我带花回家。</p>
<p>裂开的伤口啊，原谅我扎到手指</p>
<p>我为我的小步舞曲唱片向在深渊呐喊的人致歉</p>
<p>我为清晨五点仍熟睡向在火车站候车的人致歉</p>
<p>被追猎的希望啊，原谅我不时大笑。</p>
<p>沙漠啊，原谅我未及时送上一匙水。</p>
<p>而你，这些年来未曾改变，始终在同一笼中，</p>
<p>目不转睛盯望着空中同一定点的猎鹰啊，</p>
<p>原谅我，虽然你已成为标本。</p>
<p>我为桌子的四只脚向被砍下的树木致歉</p>
<!--
==V7：文本格式化、对齐与漂浮(图文混排)
text-indent 文本首行缩进
line-height 行高
text-align 设定文本与图片对齐，水平方向居中居左居右
vertical-align
float:left|right|center
clear:both
-->
</body>
</html>6.display属性
<!--display属性-->
<!--CSS属性之间存在相互作用！
元素的默认显示属性，CSS都可以改！通过display属性就可以修改固有默认显示属性
固有属性：hx p div（块元素：会换行，新起一行） span img（内嵌元素inline，不会换行）
但是加上display属性可能会有一些奇妙的事情发生……-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>8_display</title>
<style>
.ib{
display: inline-block;
background-color: chartreuse;
padding: 1em;
/*理论上div使用display:inline-block能取消换行功能（使用display:inline也可以实现）
但实际上div使用display:inline-block是否能取消换行功能，取决于div的父元素是什么
能实现取消换行功能的父元素：div hx(h1、h2……) ul中的li
不能实现取消换行的父元素：p
*/
}
span{
display: inline-block;
display:block;
color: red;
width: 7em;
height: 7em;
background-color: yellow;
/*span默认属性为inline，设宽度高度都没有起作用，但改为inline-black就会显示宽度和高度*/
/*加上display：block会产生分段效果*/
}
</style>
</head>
<body>
<!--display: inline-block/block 在块元素中的应用-->
<p>人间总有<div class="ib">一两风</div> 填我十万八千梦……</p>
<div>人间总有<div class="ib">一两风</div> 填我十万八千梦……</div>
<h1>人间总有<div class="ib">一两风</div> 填我十万八千梦……</h1>
<h2>人间总有<div class="ib">一两风</div> 填我十万八千梦……</h2>
<ul>
<li>人间总有<div class="ib">一两风</div> 填我十万八千梦……</li>
</ul>
<hr>
<!--display: inline-block/block 在内嵌元素中的应用-->
<p>强极则辱 <span>情深</span>不寿</p>
<p>强极则辱 <span style="display: inline;">情深</span>不寿</p>
<!--覆盖样式表，后面会将前面覆盖，长江后浪推前浪，把前浪拍死在沙滩上！-->
</body>
<!--plus:
有的网站会将ul-li变为导航结构，因为其内置有层级结构，与菜单的层级结构类似-->
</html>7.position属性
<!--position属性-->
<!--position属性的定位功能十分重要
position: relative（默认）|fixed（不滚动定位）|absolute（绝对定位）-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>9_position</title>
<style>
#abs1{
position: absolute;
/*position:absolute 绝对定位，将元素位置变为可以设置的形式。
从左往右，x轴的值逐渐增加，从上往下，y轴的值逐渐增加*/
left: 100px; /*离浏览器左边框距离100px*/
top: 300px; /*离浏览器上边框300px*/
width: 200px; /*宽度*/
height: 200px; /*高度*/
background-color: red;
}
#f1{
position: fixed;
/*position:fixed“特立独行不随波逐流的小贴纸”
当网页滚动时，拥有该属性的元素不随网页滚动，保持位置不变。要相对于浏览器下边缘设定位置
慎用，太多会很烦~
*/
bottom: 1em;
right: 1em;
}
</style>
</head>
<body>
<!--position: absolute-->
<div id="abs1"></div>
<hr>
<!--position: fixed-->
<img id="f1" src="./img/kong_que_dong_nan_fei.jfif">
<p>孔雀东南飞，五里一徘徊。</p>
<p>“十三能织素，十四学裁衣，十五弹箜篌，十六诵诗书。十七为君妇，心中常苦悲。君既为府吏，守节情不移，贱妾留空房，相见常日稀。鸡鸣入机织，夜夜不得息。三日断五匹，大人故嫌迟。非为织作迟，君家妇难为！妾不堪驱使，徒留无所施，便可白公姥，及时相遣归。”</p>
<p>府吏得闻之，堂上启阿母：“儿已薄禄相，幸复得此妇，结发同枕席，黄泉共为友。共事二三年，始尔未为久,女行无偏斜，何意致不厚？”</p>
<p>阿母谓府吏：“何乃太区区！此妇无礼节，举动自专由。吾意久怀忿，汝岂得自由！东家有贤女，自名秦罗敷，可怜体无比，阿母为汝求。便可速遣之，遣去慎莫留！”</p>
<p>府吏长跪告：“伏惟启阿母，今若遣此妇，终老不复取！”</p>
<p>阿母得闻之，槌床便大怒：“小子无所畏，何敢助妇语！吾已失恩义，会不相从许！”</p>
<p>府吏默无声，再拜还入户,举言谓新妇，哽咽不能语：“我自不驱卿，逼迫有阿母。卿但暂还家，吾今且报府。不久当归还，还必相迎取。以此下心意，慎勿违吾语。”</p>
<p>新妇谓府吏：“勿复重纷纭。往昔初阳岁，谢家来贵门。奉事循公姥，进止敢自专？昼夜勤作息，伶俜萦苦辛。谓言无罪过，供养卒大恩；仍更被驱遣，何言复来还！妾有绣腰襦，葳蕤自生光；红罗复斗帐，四角垂香囊；箱帘六七十，绿碧青丝绳，物物各自异，种种在其中。人贱物亦鄙，不足迎后人，留待作遗施，于今无会因。时时为安慰，久久莫相忘！”</p>
<p>鸡鸣外欲曙，新妇起严妆。著我绣夹裙，事事四五通。足下蹑丝履，头上玳瑁光。腰若流纨素，耳著明月珰。指如削葱根，口如含朱丹。纤纤作细步，精妙世无双。</p>
<p>上堂拜阿母，阿母怒不止。“昔作女儿时，生小出野里,本自无教训，兼愧贵家子。受母钱帛多，不堪母驱使。今日还家去，念母劳家里。”却与小姑别，泪落连珠子。“新妇初来时，小姑始扶床；今日被驱遣，小姑如我长。勤心养公姥，好自相扶将。初七及下九，嬉戏莫相忘。”出门登车去，涕落百余行。</p>
<p>府吏马在前，新妇车在后,隐隐何甸甸，俱会大道口。下马入车中，低头共耳语：“誓不相隔卿，且暂还家去；吾今且赴府，不久当还归，誓天不相负！”</p>
<p>新妇谓府吏：“感君区区怀！君既若见录，不久望君来。君当作磐石，妾当作蒲苇,蒲苇纫如丝，磐石无转移。我有亲父兄，性行暴如雷，恐不任我意，逆以煎我怀。”举手长劳劳，二情同依依。</p>
<p>入门上家堂，进退无颜仪。阿母大拊掌，不图子自归：“十三教汝织，十四能裁衣，十五弹箜篌，十六知礼仪，十七遣汝嫁，谓言无誓违。汝今何罪过，不迎而自归？”兰芝惭阿母：“儿实无罪过。”阿母大悲摧。</p>
<p>还家十余日，县令遣媒来。云有第三郎，窈窕世无双，年始十八九，便言多令才。</p>
<p>阿母谓阿女：“汝可去应之。”</p>
<p>阿女含泪答：“兰芝初还时，府吏见丁宁，结誓不别离。今日违情义，恐此事非奇。自可断来信，徐徐更谓之。”</p>
<p>阿母白媒人：“贫贱有此女，始适还家门。不堪吏人妇，岂合令郎君？幸可广问讯，不得便相许。”媒人去数日，寻遣丞请还，说有兰家女，承籍有宦官。云有第五郎，娇逸未有婚。遣丞为媒人，主簿通语言。直说太守家，有此令郎君，既欲结大义，故遣来贵门。</p>
<p>阿母谢媒人：“女子先有誓，老姥岂敢言！”</p>
<p>阿兄得闻之，怅然心中烦,举言谓阿妹：“作计何不量！先嫁得府吏，后嫁得郎君。否泰如天地，足以荣汝身。不嫁义郎体，其往欲何云？”</p>
<p>兰芝仰头答：“理实如兄言。谢家事夫婿，中道还兄门。处分适兄意，那得自任专！虽与府吏要，渠会永无缘。登即相许和，便可作婚姻。”</p>
<p>媒人下床去。诺诺复尔尔。还部白府君：“下官奉使命，言谈大有缘。”府君得闻之，心中大欢喜。视历复开书，便利此月内，六合正相应。良吉三十日，今已二十七，卿可去成婚。交语速装束，络绎如浮云。青雀白鹄舫，四角龙子幡。婀娜随风转。金车玉作轮。踯躅青骢马，流苏金镂鞍。赍钱三百万，皆用青丝穿。杂彩三百匹，交广市鲑珍。从人四五百，郁郁登郡门。</p>
<p>阿母谓阿女：“适得府君书，明日来迎汝。何不作衣裳？莫令事不举！”</p>
<p>阿女默无声，手巾掩口啼，泪落便如泻。移我琉璃榻，出置前窗下。左手持刀尺，右手执绫罗。朝成绣夹裙，晚成单罗衫。晻晻日欲暝，愁思出门啼。</p>
<p>府吏闻此变，因求假暂归。未至二三里，摧藏马悲哀。新妇识马声，蹑履相逢迎。怅然遥相望，知是故人来。举手拍马鞍，嗟叹使心伤：“自君别我后，人事不可量。果不如先愿，又非君所详。我有亲父母，逼迫兼弟兄，以我应他人，君还何所望！”</p>
<p>府吏谓新妇：“贺卿得高迁！磐石方且厚，可以卒千年；蒲苇一时纫，便作旦夕间。卿当日胜贵，吾独向黄泉！”</p>
<p>新妇谓府吏：“何意出此言！同是被逼迫，君尔妾亦然。黄泉下相见，勿违今日言！”执手分道去，各各还家门。生人作死别，恨恨那可论？念与世间辞，千万不复全！</p>
<p>府吏还家去，上堂拜阿母：“今日大风寒，寒风摧树木，严霜结庭兰。儿今日冥冥，令母在后单。故作不良计，勿复怨鬼神！命如南山石，四体康且直！”</p>
<p>阿母得闻之，零泪应声落：“汝是大家子，仕宦于台阁，慎勿为妇死，贵贱情何薄！东家有贤女，窈窕艳城郭，阿母为汝求，便复在旦夕。”</p>
<p>府吏再拜还，长叹空房中，作计乃尔立。转头向户里，渐见愁煎迫。</p>
<p>其日牛马嘶，新妇入青庐。奄奄黄昏后，寂寂人定初。我命绝今日，魂去尸长留！揽裙脱丝履，举身赴清池。</p>
<p>府吏闻此事，心知长别离。徘徊庭树下，自挂东南枝。</p>
<p>两家求合葬，合葬华山傍。东西植松柏，左右种梧桐。枝枝相覆盖，叶叶相交通。中有双飞鸟，自名为鸳鸯，仰头相向鸣，夜夜达五更。行人驻足听，寡妇起彷徨。多谢后世人，戒之慎勿忘！</p>
</body>
</html>好啦，宝儿萌这周的分享就到这里了，看在我这么尽心尽力的写log情况下，给个小小的赞好不好嘛~（顺手可以点点关注哈（痴心妄想）），点赞过5个火速更新js，这里是阿木木，预知后事如何，咱们下回分解~
（文章所包含所有代码和附属音乐、视频、图片文件会稍后一并上传）
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
