/* 
    p {
        color: red;
    }
    p 是选择器, {}及其中的内容是声明块, 内容就是声明, 声明由属性和值组成;
    字符串类型需要+"",其他类型只需要写值;

    格式要求仅为方便阅读、维护。自动格式化工具会自动调整格式。所以很多地方空不空格完全没有影响; 

    一般权重规律:!important > 行内CSS > 内部CSS = 外部CSS;
    id选择器 > 类选择器 = 伪类选择器 = 属性选择器 = :root根元素选择器 > 元素选择器 = 伪元素选择器 = html元素选择器 > *通配选择器 > 浏览器默认样式 > 从父元素继承的效果;
    css权重计算:权重相同的情况下,后写的声明块会覆盖前写的声明块;将鼠标放到选择器上,可以查看其权重;
    id选择器权重100,类选择器权重10,伪类选择器权重10,属性选择器权重10,根元素选择器权重1,元素选择器权重1,伪元素选择器权重1,通配选择器权重0;

    三大特性:层叠性、继承性、优先级;
    层叠性:多个选择器选中同一个元素,会根据权重和顺序,将多个样式合并到一起,形成最终的样式;
    继承性:子元素可以继承父元素的某些样式,例如字体、颜色、行高等;
    优先级:当多个选择器选中同一个元素,会根据权重和顺序,确定最终的样式;
    
    DOM:将HTML代码转化成树状图结构；
    例如:
    html
    ├── head
    │   └── title
    └── body
        └── p
            ├── (文字"这是一个")
            └── span
                └── (文字"例子")
    剩下的都是元素(标签)
    伪元素正如其名,并不是元素,而是伪装成装饰挂在DOM树上；

    文档内容是html文件的所有内容;html就是文档内容的根;
    浏览器在渲染时,会额外增加默认的渲染样式,这些不是html元素;
    * 通配选择器:权重很低,匹配所有DOM树上的真元素,正因如此伪元素不会被其默认作用;
    如果想要用通配选择器,可以这样写:
    *::before,*::after{color:red}
    相同样式要求的可以用并集选择器;

    html html元素选择器:权重就是元素选择器,只匹配html标签,剩下的样式靠继承;

    :root 根元素选择器:权重和伪类选择器一样,只匹配html文档根元素,即html标签;
    和html元素选择器继承的方式一样,不过其权重更高,而且是指定写css变量的地方;
*/

/* 字体 */
@font-face {
    font-family: 'zenkurenaido';/* 自定义字体名称 */
    /* ぜん-くれないど */
    src:/* 字体文件路径 */ 
        url('../../../fonts/japanese/ZenKurenaido-Regular/ZenKurenaido-Regular.woff2') format('woff2'),
        /* 优先使用woff2格式,因为woff2格式压缩率更高,加载速度更快 */
        url('../../../fonts/japanese/ZenKurenaido-Regular/ZenKurenaido-Regular.woff') format('woff');
        /* 然后使用woff格式,因为woff格式兼容所有浏览器 */
    font-weight: 400;/* 字体粗细,400表示正常粗细 */
    font-style: normal;/* 字体样式,normal表示正常字体 */
    font-display: swap;/* 字体加载方式,swap表示先显示默认字体,等自定义字体加载完成后再替换 */
    unicode-range: 
        /* 基本假名 */
        U+3040-U+309F,/* 平假名 */ 
        U+30A0-U+30FF,/* 片假名 */

        /* 日文标点和符号 */
        U+3000-U+303F,/* CJK标点和符号(句号、顿号、引号等) */

        /* 全角字符和特殊符号 */
        U+FF00-U+FFEF,/* 半角、全角形式 */

        /* 注音符号 */
        U+31F0-U+31FF,/* 假名扩展(小假名、注音等) */

        /* 汉字范围 */
        U+4E00-U+9FFF,/* CJK统一汉字(基本汉字) */
        U+3400-U+4DBF;/* CJK扩展A(更多汉字) */
}/* 日语字体ZenKurenaido-Regular,sans-serif字体 */
@font-face {
    font-family: 'kleeone-400';
    src:
        url('../../../fonts/japanese/KleeOne/KleeOne-Regular/KleeOne-Regular.woff2') format('woff2'),
        url('../../../fonts/japanese/KleeOne/KleeOne-Regular/KleeOne-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range:U+3040-U+309F,U+30A0-U+30FF,U+3000-U+303F,U+FF00-U+FFEF,U+31F0-U+31FF,U+4E00-U+9FFF,U+3400-U+4DBF;
}/* 日语字体KleeOne-Regular,serif字体 */
@font-face {
    font-family: 'kleeone-600';
    src:
        url('../../../fonts/japanese/KleeOne/KleeOne-SemiBold/KleeOne-SemiBold.woff2') format('woff2'),
        url('../../../fonts/japanese/KleeOne/KleeOne-SemiBold/KleeOne-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range:U+3040-U+309F,U+30A0-U+30FF,U+3000-U+303F,U+FF00-U+FFEF,U+31F0-U+31FF,U+4E00-U+9FFF,U+3400-U+4DBF;
}/* 日语字体KleeOne-SemiBold,serif字体 */
/* 字体 */

/* 页脚CSS */
#webpage-footer {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.9rem;
    color: #666;
    text-align: center;
    padding: 1.5rem 1rem;
    margin-top: 3rem;
    border-top: 1px solid #eee;
    line-height: 1.5;
}
#webpage-footer a {
    color: #4a6fa5;
    text-decoration: none;
    transition: color 0.2s ease;
}
#webpage-footer a:hover {
    color: #2c4a7a;
    text-decoration: underline;
}
#webpage-footer .footer-links {
    margin-top: 0.5rem;
}
#webpage-footer .footer-links span {    
    margin: 0 0.5rem;
    color: #ddd;
}
/* 页脚CSS */

/* 外部CSS示例 */
[title="外部CSS样式展示"] {
    color: red;/* 字体颜色 */
    background-color: azure;/* 背景颜色 */
    font: 40px sans-serif;/* 字体的特殊整合属性,此处表示:字体大小40像素、字体样式默认寻找非衬线字体 */
    width: 30%;/* 宽度30% */
}
/* 外部CSS示例 */

/* CSS代码风格 */
[title="CSS代码风格"] {
    font: 40px '娃娃体-简', sans-serif;/* ''或者""里面可以引入字体样式,详见后面 */
}
#css-0-1 {
    color: #9b30ff;
}
#css-0-2{color:#ff4500}
/* CSS代码风格 */

/* 选择器 */
[title="选择器"] {
    background-color: #799;
    color: #ff0;
    font: 32.5px '娃娃体-简', sans-serif;
}
/* 
    属性选择器:
    [title]表示选择所有有title属性的元素,
    [title="xxx"]表示选择所有title属性值为xxx的元素,
    [title^="xxx"]表示选择所有title属性值以xxx开头的元素,
    [title$="xxx"]表示选择所有title属性值以xxx结尾的元素,
    [title*="xxx"]表示选择所有title属性值包含xxx的元素;
    [title~="xxx"]表示选择所有title属性值包含完整xxx的元素,且不同单词之间用空格隔开,可以实现多个class值一样的效果;
    属性里面是字符串,所以可以写中文等文本;
    一个元素只能有一个属性值,毕竟是字符串的描述
*/
[title="选择器"]>span {
    background-color: #7b68ee;
    color: #fff;
}
/* span 就是元素选择器,选中指定的元素(标签) */
div>span.css-00-1 {
    background-color: #0a0a2a;
    color: #ccf2ff;
}
/* 
    .css-00-1 就是类选择器,在类的值前+".";
    一个元素可以有多个类,用空格隔开;
    类的命名只能用字母、数字、-、_,不能用数字或者下划线_、短杠-开头;
    可以和属性选择器"~="一样使用
*/
#css-00-2 {
    background-color: #ff6b6b;
    color: #8b0000;
}
/* 
    #css-00-4 就是id选择器,在id的值前+"#";
    id的命名也只能用字母、数字、-、_,不能用数字或者下划线_、短杠-开头;
    一个标签只能有一个id,所以id选择器的权重最高
*/
.css-00-3#css-00-4 {
    background-color: #228b22;
    color: #fffdd0;
}
/* 交集选择器,紧紧贴一起就行,选中同时符合两个选择器的元素 */
#css-00-5,
#css-00-6 {
    background-color: #ff69b4;
    color: #8b0058;
}
#css-00-6 {
    color: #fff0f5;
}
/* 并集选择器,用","隔开就行,选中所有符合其中一个选择器的元素 */
#css-00-7>q {
    background-color: #ffd700;
    color: #333;
}
/* 子代选择器,用">"隔开父元素和子元素,只选择直接子元素 */
#css-00-8 q {
    background-color: #4b0082;
    color: #e6e6fa;
}
/* 后代选择器,用空格隔开父元素和子元素,选择所有后代元素 */
#css-00-9>q:first-child+q {
    font-size: 70px;
    /* 
        因为q往下数第一个兄弟不是q,所以效果不生效;
        但是如果写成: #css-00-9>q:first-child+span+q 就可以生效
    */
}
#css-00-9>q:first-child~q {
    background-color: #00ff7f;
    color: #006400;
    /* 因为q往下数无数个,有兄弟是q,所以效果生效 */
}
/* 兄弟选择器,"+"表示往下数一个,"~"表示往下数无数个,都不往上照 */
/* : 是伪类选择器, :: 是伪元素选择器 */
[title^="超链接"]:link {
    background-color: #0a0a2a;
    color: #ccf2ff;
    /* 超链接未点击时的样式 */
}
[title^="超链接"]:visited {
    background-color: #ff6b6b;
    color: #8b0000;
    /* 超链接已点击时的样式 */
}
[title^="超链接"]:hover {
    background-color: #228b22;
    color: #fffdd0;
    /* 超链接鼠标悬停时的样式 */
}
[title^="超链接"]:active {
    background-color: #ff69b4;
    color: #8b0058;
    /* 超链接点击时的样式 */
}
/* 顺序乱了容易丢失效果,所以对于超链接a,建议按link、visited、hover、active的顺序写 */
#css-00-10:focus {
    background-color: #ffd700;
    color: #333;
    /* 输入框获得焦点时的样式 */
}
#label-00-15:checked,
#label-00-16:checked {
    width: 20px;/* 选中后宽度 */
    height: 20px;/* 选中后高度 */
}
/* 
    checked是持久状态,而focus是临时状态;
    checked一般用在单选框和复选框和开关按钮上,focus通用 
*/
#label-00-17:enabled {
    width: 20px;
    height: 20px;
}
#label-00-18:disabled {
    width: 20px;
    height: 20px;
}
/* enabled表示启用状态的元素,disabled表示禁用状态的元素 */
#Gladiia:target {
    background-color: aqua;
    /* 目标元素被选中时的样式 */
}
#css-00-11>q:lang(en-US) {
    font-size: 40px;
    color: red;
    /* 语言伪类,选中语言为en-US的元素 */
}
#css-00-12 p:first-child {
    font-size: 60px;
    /* 在所有元素中,第一个后代元素p会产生效果 */
    /* 
        类似的还有:
        :first-of-type 表示在所有元素中,第一个类型为p的元素会产生效果 
        :nth-child(n) 表示在所有元素中,第n个后代元素p会产生效果
        :nth-of-type(n) 表示在所有元素中,第n个类型为p的元素会产生效果
    */
}
#css-00-12 p:last-child {
    color: red;
    /* 在所有元素中,最后一个后代元素p会产生效果 */
    /* 
        类似的还有:
        :last-of-type 表示在所有元素中,最后一个类型为p的元素会产生效果
        :nth-last-child(n) 表示在所有元素中,倒数第n个后代元素p会产生效果
        :nth-last-of-type(n) 表示在所有元素中,倒数第n个类型为p的元素会产生效果
    */
}
#css-00-12 p:only-child {
    font-family: "宋体", serif;
    /* 在所有元素中,只有一个后代元素p会产生效果 */
    /* 
        类似的还有:
        :only-of-type 表示在所有元素中,只有一个类型为p的元素会产生效果
    */
}
#css-00-13:empty {
    width: 100px;
    height: 100px;
    background-color: #7b68ee;
    /* 表示选中空元素,没有子元素或内容为空的元素 */
}
#css-00-14:not([title]) {
    width: 200px;
    height: 200px;
    background-color: #ff6b6b;
    /* 否定伪类选择器,表示选中没有title属性的元素,()里面可以写任意选择器 */
}
#css-00-15::first-letter {
    font-size: 60px;
    color: red;
    /* 伪元素选择器,表示选中第一个字母 */
}
#css-00-15::first-line {
    background-color: rgb(156, 205, 205);
    /* 伪元素选择器,表示选中第一行 */
}
#css-00-15::selection {
    background-color: #ff69b4;
    color: #8b0058;
    /* 伪元素选择器,表示选中被用户选中的元素 */
}
#css-00-16::placeholder {
    background-color: #ffd700;
    color: #333;
    /* 伪元素选择器,表示选中输入框中的占位符 */
}
#css-00-17::before {
    content: "dps:";
    /* 伪元素选择器,表示选中元素之前的内容 */
}
#css-00-17::after {
    content: "差不多是saki酱的十分之一";
    content: "(呼呼呼の)" !important;
    /* 伪元素选择器,表示选中元素之后的内容 */
    /* !important,表示优先级最高,会覆盖其他声明,写在;之前 */
}
/* 选择器 */

/* 像素和颜色 */
[title="像素和颜色"] {
    width: 5cm;
    height: 50mm;
    /* cm和mm可以表示长度,1cm=10mm,不准确;或者用px像素表示,更准确 */
    background-color: aquamarine;
    /* 颜色名表示颜色 */
    background-color: rgba(255, 105, 180, 0.5) !important;
    /* 
        rgba()表示红色、绿色、蓝色、透明度;可以去掉透明度写成rgb()
        每个值的范围是0-255,透明度的范围是0-1;
        也可以用%表示;"0.5"可以简写成".5" 
    */
    background-color: hsla(200, 50%, 50%, 0.5);
    /* 
        hsla()表示色相、饱和度、亮度、透明度;可以写成hsl()
        每个值的范围依次是0-360、0-100%、0-100%、0-1
    */
    background-color: #7b68ee11;
    /* 
        hexa()表示十六进制颜色值,透明度;可以写hex()
        一般不写hexa(),直接写#7b68ee11;
        每个值的范围是00-FF,表示0-255;
        当两两重复时,比如#FFCCDDAA,可以简写为#FCDA
    */
}
/* 像素和颜色 */

/* 字体 */
[title="字体"] {
    background-color: #c7c3ae;
    font-size: 60px;
    /* 字体大小,一般用px像素表示,等比例变化字体大小 */
}
#css-00-18 {
    font-family: "zenkurenaido", sans-serif;
    /*
        字体族(字体样式),值是字符串类型,需要用引号括起来;
        多个字体样式之间用逗号隔开,先写覆盖后写,前一个实效才启用后面;
        最后一个备胎推荐写serif或者sans-serif,届时会使用用户系统默认字体;
        sans-serif是非衬线字体,serif是衬线字体;棱角分明是衬线字体,否则反之;
        在此处设置的字体需要用户安装在系统中,否则会使用默认字体;
        可以在css中引入字体文件,或者在html中引入字体文件
    */
}
#css-00-19 {
    font-family: "kleeone-400", serif;
}
#css-00-20 {
    font-family: "kleeone-600", serif;
}
#css-00-21>q:nth-of-type(1) {
    background-color: #c7c3ae;
    font-size: 60px;
    font-family: "zenkurenaido", sans-serif;
    font-style: italic;
    /* 
        字体样式:normal是正常字体,italic是斜体,oblique是倾斜体; 
        italic是先找字体设计好的倾斜样式,如果没有,才会使用oblique强制倾斜
    */
    font-weight: 400;
    /*
        字体粗细:可以用单词表示,也可以用数字表示(100~900);
        thin(极细)100, extra-light(特细)200, light(细)300, 
        normal、regular(常规)400, medium(中等)500,
        semi-bold、demibold(半粗)600,bold(粗)700,
        extra-bold、ultra-bold(特粗)800,
        black、heavy(极粗)900
    */
}
#css-00-21>q:nth-of-type(2) {
    background-color: #c7c3ae;
    font-size: 60px;
    font-family: "kleeone-400", serif;
    font-style: oblique;
    font-weight: 400;
}
#css-00-21>q:nth-of-type(3) {
    background-color: #c7c3ae;
    font: normal normal normal 60px "kleeone-600", serif;
    /* 
        字体复合属性:
        font: [font-style] [font-variant] [font-weight] [font-size] [font-family];
        font-variant是字体变体,可以用small-caps表示小型大写字母,不写就是normal正常字体
    */
}
/* 字体 */

/* 文本 */
[title="文本"] {
    font: italic normal 600 50px "翩翩体-简", sans-serif;
    background-color: rgb(199, 83, 141);/* 背景颜色 */
    color: #fff0f5;/* 文字颜色 */
    letter-spacing: normal;/* 字母(汉字)间距 */
    word-spacing: 10px;/* 单词间距 */
    text-indent: 50px;/* 段落首行缩进 */
    height: 100%;/* 高度 */
    width: 100%;/* 宽度 */
    text-align: justify;
    /* 
        文本对齐:left左对齐, center居中对齐, right右对齐, justify两端对齐
    */
}
[title="文本"]>p:nth-child(1) {
    text-decoration: underline dashed rgb(69, 193, 12);
    /* 
        文本装饰:underline下划线, overline上划线, line-through删除线, 
        dashed虚线, dotted点线, wavy波浪线, none无装饰; 
        还可以加颜色 
    */
    line-height: 75px;
    /* 
        行高:行高是指文本行与文本行之间的垂直间距,可以用px表示,也可以用数值表示;
        例如数值:2,表示行高是字体大小的2倍;
        最好用数值表示,因为当行高大于字体大小时,会导致文字超出容器,造成遮挡等;
    */
}
[title="文本"]>p:nth-child(2) {
    text-decoration: overline dotted rgb(69, 193, 12);
    line-height: 1.5;/* 用的最多 */
}
[title="文本"]>p:nth-child(3)>span {
    font-size: 20px;
    vertical-align: middle;
    background-color: rgb(94, 197, 163);
    /* 
        父元素中的子元素的垂直对齐,且不能控制块级元素:
        top上对齐, bottom下对齐, baseline基线对齐(默认)
        middle居中对齐(元素中部与父元素基线加上父元素x-height的一半对齐)
        即span和x中间对齐
        还可控制表格的单元格的垂直对齐valign属性
    */
}
[title="文本"]>p:nth-child(4) {
    font-size: 100px;
    line-height: 1.5;
}
[title="文本"]>p:nth-child(4)>img {
    height: 200px;
    background-color: rgb(94, 197, 163);
    vertical-align: bottom;
    /* 在这一行中,最高的元素是img,所以p会相对于img对齐 */
}
/* 文本 */

/* 列表 */
#css-00-22 {
    list-style-type: square;
    /* 
        列表样式类型:square方点, disc圆点, circle空心圆, none无 
        decimal表示十进制数字(类似ol的效果),
        lower-roman表示小写罗马数字, upper-roman表示大写罗马数字,
        lower-alpha表示小写字母, upper-alpha表示大写字母
        一般用none,然后引入设计师设计好的列表样式图片
    */
    list-style-position: inside;
    /* 列表样式位置:inside表示列表样式在文字内部,outside表示列表样式在文字外部 */
    list-style-image: url("../../../images/gif/star-solid.gif");
    /* 列表样式图片:引入设计师设计好的列表样式图片 */
    list-style: square inside url("../../../images/gif/star-solid.gif");
    /* list复合属性,顺序:list-style-type list-style-position list-style-image,image失效就用list-style-type */
}
#css-00-22>li {
    background-color: rgb(94, 197, 163);
}
/* 列表 */

/* 表格 */
#css-00-23 {
    border-width: 2px;/* 边框宽度 */
    border-style: solid;
    /* 
        边框样式:solid实线, dashed虚线, dotted点线, wavy波浪线, double双线, none无边框
    */
    border-color: rgb(69, 193, 12);/* 边框颜色 */
    border: 2px solid rgb(69, 193, 12);
    /* 边框复合属性,顺序:border-width border-style border-color */

    width: 800px;
    table-layout: fixed;
    /* 控制表格布局:fixed固定布局,auto自动布局(默认,字多就更宽) */
    
    border-collapse: separate;/* 颜色听内部单元格的,且设置完cellspacing失效 */
    /* 控制表格边框合并:collapse合并,separate不合并(默认) */
    
    /* 以下属性只对separate生效,不能合并边框 */
    border-spacing: 10px;/* cellspacing单元格间距,默认值是2px */
    
    empty-cells: hide;/* 控制空单元格是否显示:show显示(默认),hide隐藏 */
    /* 单元格已经消失了,但是会因为周围的单元格边框合并,所以会有边框 */

    caption-side: top;/* 表格标题位置:top顶部(默认),bottom底部 */
}
#css-00-23 th,
#css-00-23 td {
    border: 2px solid rgb(12, 142, 193);
    /* 边框复合属性,顺序:border-width border-style border-color */
}
[title="表格"]>h2 {
    border: 2px double rgb(148, 12, 193);
}
#css-00-23-01 {
    width: 100px;
    /* 剩余部分保持fixed布局,强行干预 */
}
/* 表格 */

/* 背景 */
[title="背景"] {
    border: 5px solid olive;
    height: 400px;
    width: 400px;
    font: italic normal 400 40px "Kleeone-400", sans-serif;
    background-color: transparent;
    /* 背景颜色:transparent透明(默认),或者其它颜色值 */
    background-color: skyblue;
    background-image: url("../../../images/gif/star-solid.gif");
    background-repeat: no-repeat;
    /* 背景重复:repeat重复(默认),repeat-x水平重复,repeat-y垂直重复,no-repeat不重复 */
    background-position: left center;/* 只写left也是一样的效果 */
    /* 背景位置:先水平后垂直,中间都是用center,其它都是left right top bottom,不写全剩下那个值默认center */
    background-position: 100px 250px;/* 第二种写法,先水平后垂直,右,下,图片左上角的坐标 */
    background: skyblue url("../../../images/gif/star-solid.gif") no-repeat left center;
    /* background: [color] [image] [repeat] [attachment] [position] / [size] [origin] [clip]; */
    /* 复合属性会覆盖单独写的属性,那怕复合属性没写那个属性,比如假如background没写color,skyblue就不会生效 */
}
/* 背景 */

/* 鼠标 */
[title="鼠标"] {
    height: 400px;
    width: 400px;
    background-color: rgb(196, 144, 125);
    cursor: url("移动.ani"), move;/* 可以自定义 */
    /* 鼠标样式:pointer指针,default默认,move移动,text文本,help帮助,wait等待,progress进行中,none无 */
}
/* 鼠标 */

/* 盒子模型 */
[title="长度"] {
    background-color: rgb(144, 196, 125);
    font-size: 40px;/* 像素 */
    height: 20rem;/* 相对长度单位,1rem等于根元素的字体大小,默认是16px */
    width: 10em;/* 相对长度单位,1em等于当前字体大小 */
    /* 继承发挥了大作用,会一直往上找,最后才是浏览器设置的默认字体大小 */
}
[title="长度"]>p {
    background-color: #4a6fa5;
    width: 50%;
    height: 26%;
    /* 百分比是相对于父元素的(后面就不一定了,有的参考自身,甚至连自身也不参考),珍爱生命,少写多层嵌套 */
    font-size: calc(40px * 10%);
    /* calc()计算函数,可以在css中进行简单的计算,单位可以省略 */
}
/*
    块级元素:独占一行,可以通过css设置宽高,默认宽度占满父元素,默认高度由内容撑开
    行内元素:不独占一行,不能通过css设置宽高,默认宽度由内容撑开,默认高度由内容撑开
    行内块元素:不独占一行,可以通过css设置宽高,默认宽度由内容撑开,默认高度由内容撑开

    视频教程的草率分类(方便css设置)
    块元素:html body h1~h6 hr p pre div ul ol dl dt dd table tbody tfoot tr caption form option
    行内元素:br em strong sup sub del ins a label
    行内块元素:img td th input textarea select button iframe
*/
[title="元素显示模式"]>div:first-child,
[title="元素显示模式"]>div:last-child {
    height: 200px;
    width: 200px;
    background-color: rgb(196, 144, 125);
    display: inline-block;/* 块元素没有独占一行且可以设置宽高(行内块元素) */
    /* display,修改元素的显示模式:inline行内元素,block块级元素,inline-block行内块元素,none隐藏 */
}
[title="元素显示模式"]>div:last-child {
    background-color: rgb(144, 196, 125);
}
/*
    盒子模型从内到外:
    内容(content)
    内边距(padding)
    边框(border)
    外边距(margin)
*/
[title="盒子模型组成部分"]>div:first-child {
    /* 内容 */
    font-size: 40px;
    height: 10em;
    width: 10em;
    background-color: gray;/* 还可以填充内边距和边框区域 */
    
    /* 内边距 */
    padding: 20px;

    /* 边框 */
    border: 20px dashed rgb(12, 142, 193);

    /* 外边距 */
    margin: 20px;/* 只能影响盒子的位置,不能影响盒子的大小 */
}
[title="盒子模型组成部分"]>div:nth-of-type(2) {
    background-color: rgb(144, 196, 125);
    font-size: 40px;

    /* 以下一般不与height和width同时使用 */
    min-width: 10em;
    /* min-width最小宽度,不会因为缩小视口致使元素宽度小于这个值,底线 */
    max-width: 40em;
    /* max-width最大宽度,不会因为放大视口致使元素宽度大于这个值,上限 */
    min-height: 80px;
    /* min-height最小高度,不会受文字缺少致使元素高度小于这个值,底线 */
    max-height: 40em;
    /* max-height最大高度,不会受文字撑开致使元素高度大于这个值,上限 */

    /* padding */
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    /* padding:单独设置 上 右 下 左 内边距 */
    padding: 20px 40px 60px 80px;/* 复合属性 */
    /* 
        padding: [上] [右] [下] [左];顺时针,四个值 

        padding: 上 左右 下;三个值
        padding: 10px 20px 30px;等价于:上=10px, 右=20px, 下=30px, 左=20px

        padding: 上下 左右;两个值
        padding: 10px 20px;等价于:上=10px, 右=20px, 下=10px, 左=20px

        一个值略
    */
}     
[title="盒子模型组成部分"]>span {
    font-size: 20px;
    background-color: violet;
    padding: 20px;/* 设计缺陷 */
    /* 
        行内元素不能设置内边距的高,只能根据内容撑开,否则就会超出盒子的范围 
        margin也不能设置高,只能根据内容撑开
    */
}          
[title="盒子模型组成部分"]>p {
    border-left-width: 20px;
    border-left-style: dashed;
    border-left-color: rgb(12, 142, 193);
    border-left: 20px dashed rgb(12, 142, 193);
    
    border-right-width: 20px;
    border-right-style: dotted;
    border-right-color: rgb(12, 193, 81);
    border-right: 20px dotted rgb(12, 193, 81);

    border-top-width: 20px;
    border-top-style: solid;
    border-top-color: rgb(255, 128, 0);
    border-top: 20px solid rgb(255, 128, 0);

    border-bottom-width: 20px;
    border-bottom-style: double;
    border-bottom-color: rgb(255, 0, 0);
    border-bottom: 20px double rgb(255, 0, 0);
    /* 算上之前的四个一共十二个,自行理解 */

    margin: 20px 40px;
    margin-top: 20px;
    margin-right: 40px;
    margin-bottom: 20px;
    margin-left: 40px;
    /* 和padding一样的套路 */
}
[title="盒子模型组成部分"]>div:nth-of-type(3) {
    background-color: gray;
    height: 400px;
    width: 400px;
    padding: 50px;
    margin: 100px;
}
[title="盒子模型组成部分"]>div:nth-of-type(3)>div {
    background-color: rgb(255, 128, 0);
    height: 100px;
    width: 100px;
    margin: 20px;
    padding: 20px;
    border: 20px solid rgb(255, 0, 0);
    /* 在父元素的内容区开始计算margin、padding、border */
}
[title="盒子模型组成部分"]>div:nth-of-type(4) {
    background-color: rgb(255, 0, 0);
    height: 100px;
    width: 100px;
    margin-left: auto;/* 自动margin,将元素推到父元素的右侧 */
    margin-right: auto;/* 自动margin,将元素推到父元素的左侧 */
    /* 左右都出现表示居中;上下auto不生效 */
    margin: 0 auto;
    /* 水平auto是块级独有,垂直auto不存在 */

    /* margin可以是负值,以此实现层叠效果,后写的元素在上面 */
}
[title="盒子模型组成部分"]>div:nth-of-type(5) {
    background-color: rgb(0, 255, 128);
    height: 800px;
    width: 800px;
    overflow: hidden;/* 解决塌陷问题较优解,复习时可以先注掉 */
    /* 
        overflow: hidden;
        可以在一些情况下部分地解决塌陷问题,但这并不是一个通用的解决方案,
        而且它可能会隐藏掉一些溢出的内容,可能不符合你的设计意图
    */
}
[title="盒子模型组成部分"]>div:nth-of-type(5)>div:first-child {
    font-size: 100px;
    background-color: rgb(255, 255, 0);
    height: 200px;
    width: 200px;
    margin-top: 100px;
    /* 其它值一般都没问题,是在父元素的内容区里变化外间距,同时变化比如上面margin-bottom,下面margin-top.会重叠 */
    /* 但这里失效,margin属性被父元素劫走,称之为margin塌陷,css的历史遗留设计理念问题,技术债 */
    margin-bottom: 100px;
}
[title="盒子模型组成部分"]>div:nth-of-type(5)>div:last-child {
    font-size: 100px;
    background-color: rgb(255, 128, 0);
    height: 200px;
    width: 200px;
    margin-bottom: 100px;
    /* 假如父元素没有设置高度,此处仍然被父元素劫走,再次塌陷 */
    margin-top: 110px;
    /* 
        会发现和上面设置的外边距重合了,借助浏览器查看工具发现间距是最大的那个110px 
        只存在上下之间,左右不会出现问题,也是遗留问题,不过这个不要紧,一般不刻意解决
    */

    /* 解决方法:
        1.给父元素设置内边距padding
        2.给父元素设置边框border
            两种方法都不优秀,会改变盒子的大小
        3.给父元素添加overflow:hidden属性
            较优解,基本不会影响盒子大小
    */
}
/* 盒子模型 */

/* 内容溢出 */
[title="内容溢出"]>div:first-child {
    font-size: 20px;
    height: 200px;
    width: 500px;
    background-color: #ccf2ff;
    /* 属于纵向溢出,没有横向溢出 */
    
    overflow: hidden;/* 复习注掉 */
    /* 
    overflow处理内容溢出,hidden表示隐藏,visible表示可见,
    scroll表示不管有没有溢出显示滚动条,auto表示根据需要自动添加或者隐藏滚动条,
    一般不写滚动条,真的很丑
    */
    overflow-x: scroll;
    overflow-y: hidden;
    /* 纵向横向单独设置,一个是scroll,一个是hidden时,不会有预期的效果,没有直接显示而是使用滚动条 */
}
[title="内容溢出"]>div:first-child>div {
    font-size: 20px;
    height: 80px;
    width: 1200px;
    background-color: #f2ccff;
    /* 强行在原有盒子里弄一个新盒子并设置宽来溢出 */
}
/* 内容溢出 */

/* 隐藏元素 */
[title="隐藏元素"]>div {
    font-size: 20px;
    height: 400px;
    width: 400px;
    background-color: #f2ccff;
}
[title="隐藏元素"]>div:nth-of-type(2) {
    background-color: #ccf2ff;
    /* display: none; */
    /* 第一种隐藏元素的方法,display:none,不会占位置,较生硬,死亡 */
    visibility: hidden;
    /* 第二种隐藏元素的方法,visibility:hidden,会占位置,较柔和,隐藏 */
}
/* 隐藏元素 */

/* 继承 */
/* 
    字体属性、文本属性(除vertical-align)、文字颜色等,可以继承
    边框、背景、内边距、外边距、宽高、溢出方式等,不能继承

    一个规律:能继承的属性都是不影响布局的,基本上都是和盒子模型无关的
*/
/* 继承 */

/* 布局技巧 */
[title="布局技巧"]>div:first-child {
    font-size: 20px;/* 继承给子元素,此处没有额外影响 */
    height: 400px;
    width: 400px;
    background-color: #ccf2ff;
    overflow: hidden;/* 塌陷解决 */
    text-align: center;/* 内部文字水平居中,继承给子元素 */
}
[title="布局技巧"]>div:first-child>div {
    height: 100px;
    width: 200px;
    background-color: #f2ccff;
    margin: 150px auto;/* 手动计算垂直居中距离,并用块元素独有的左右自动居中 */
    /* 因为设置了垂直margin出现了塌陷 */
    line-height: 100px;/* 用行高改变内部文字的水平居中形式 */
}
/* 
    对于块级,text-align写在父元素里继承给子元素,不能通过约束其内部文本倒逼其水平对齐,但行内行内块元素可以 
    通过控制行高等于父元素的高,可以实现文本垂直居中
    对于块级,可以设置margin来实现居中,可以计算具体值,也可将左右设置为auto,再加上算好的上下值
    塌陷问题可以通过overflow:hidden来暂时解决
*/
[title="布局技巧"]>div:nth-of-type(2) {
    margin-top: 40px;/* 懒得用br隔开不同的例子 */
    height: 400px;
    width: 400px;
    background-color: #f2ccff;
    font-size: 20px;/* 继承给子元素,此处没有额外影响 */
    text-align: center;/* 继承给子元素,倒逼行内行内块元素实现水平居中 */
    line-height: 400px;/* 一样的思路 */
}
[title="布局技巧"]>div:nth-of-type(2)>span {
    background-color: #ccf2ff;
}
[title="布局技巧"]>div:nth-of-type(3) {
    margin-top: 40px;
    height: 400px;
    width: 400px;
    background-color: #f2ccff;
    line-height: 400px;/* 配合子元素中的vertical-align:middle,实现相对垂直居中,如想绝对居中就消除父元素字体大小的影响 */
    text-align: center;/* 倒逼 */
    font-size: 0;/* 1 */
}
[title="布局技巧"]>div:nth-of-type(3)>span {
    background-color: #ccf2ff;
    font-size: 30px;/* 3 */
    vertical-align: middle;/* 4 */  
}
[title="布局技巧"]>div:nth-of-type(3)>img {
    height: 80px;/* 原始图片过大 */
    vertical-align: middle;/* 2 */
}
/*
    1:vertical-align:middle 的设置实际上受父元素字体大小的影响,字体越大误差越大,先设置为0,会继承但不要担心
    2:字体大小影响已经解决,此时middle可以实现绝对居中
    3:设置字体大小消除继承的影响
    4:此时只有图片实现了垂直居中,对文本部分加上vertical-align:middle,就可以实现文本的垂直居中,因为父元素的字体大小是0,所以也是绝对居中
*/

/* 
    小技巧总结:
    行内元素、行内块元素,可以被父元素当做文本处理:即可以像处理文本对齐一样,去处理行内行内块元素在父元素里的对齐
        text-align,line-height,text-indent
    如何让子元素在父元素中水平居中:
        块元素:给子元素设置margin:0 auto;
        行内行内块元素:给父元素或者子元素设置text-align:center;
    如何让子元素在父元素中垂直居中:
        块元素:给子元素加上margin-top(或者margin-bottom): 值;值自己算,使: 值 * 2 + 整个子元素的高(content、padding、border) = 父元素内容区的高
        行内行内块元素:给父元素设置line-height等于父元素的高,再给子元素设置vertical-align:middle;可以实现相对垂直居中
            如果想要绝对垂直居中,就需要将父元素的字体大小设置为0,消除父元素字体大小的影响
*/
/* 布局技巧 */

/* 缝隙问题 */
[title="缝隙问题"]>img {
    height: 200px;
}
[title="缝隙问题"]>div:first-of-type {
    font-size: 0;
}
[title="缝隙问题"]>div:first-of-type>span {
    font-size: 20px;
}
/* 不太好的解决方法,由于空格也属于文本,所以在父元素设置字体大小为0,再单独设置子元素的字体大小来解决 */
[title="缝隙问题"]>div:nth-of-type(2) {
    width: 1000px;
    background-color: #ccf2ff;
    font-size: 0;
    /* 也可以将父元素的字体大小设置为0,解决缝隙问题,但是不能再设置子元素的字体大小,否则会前功尽弃 */
}
[title="缝隙问题"]>div:nth-of-type(2)>img {
    height: 200px;/* 幽灵空白,img底部和x基线对齐,在下面留下空白 */
    
    /* vertical-align: bottom; */
    /* 加上除baseline以外的属性值即可解决 */
    
    /* display: block; */
    /* 也可以将img设置为块元素,局限性很大,不能有同行的其它元素 */
}
[title="缝隙问题"]>div:nth-of-type(2)>span {
    background-color: #b4eeb4;
    /* font-size: 20px; */
    /* 假如这里设置了字体大小,幽灵空白会复现 */
}
/* 缝隙问题 */

/* 浮动 */
[title="浮动"]>div:first-child {
    height: 400px;
    width: 600px;
    background-color: #f2ccff;
    font-size: 20px;
}
[title="浮动"]>div:first-child>img {
    height: 200px;
    width: 200px;
    margin: 0 1.5em;
    float: right;
    /* 最初浮动使用来实现文字环绕效果的,现在是主流的页面布局方式之一 */
}
[title="浮动"]>div:nth-of-type(2) {
    height: 500px;
    width: 500px;
    background-color: #e6e6fa;
    font-size: 30px;
}
[title="浮动"]>div:nth-of-type(2)::first-letter {
    font-size: 80px;
    color: red;
    float: left;
}
[title="浮动"]>div:nth-of-type(3) {
    width: 800px;
    height: 400px;
    background-color: grey;
    font-size: 20px;
    padding: 20px;
}
[title="浮动"]>div:nth-of-type(3)>div:first-child {
    background-color: skyblue;
    padding: 10px;
}
[title="浮动"]>div:nth-of-type(3)>div:nth-child(2) {
    background-color: orange;
    padding: 10px;
    float: left;
    height: 70px;/* 宽高强行设置仍然生效,而且没有塌陷问题 */
}
[title="浮动"]>div:nth-of-type(3)>div:last-child {
    background-color: teal;
    padding: 10px;
    float: left;
}
/* 
    文档流: 普通流,也叫文档流,是指元素在没有浮动的情况下,按照默认的方式排列起来的流 
    浮动流: 浮动元素会脱离文档流,按照浮动的方向排列起来的流

    不管浮动前是什么元素,浮动后宽高默认是由内容撑开的,而且可以设置宽高
    不独占一行,会和其它元素共用一行
    没有margin遗留的历史问题,可以完美设置四个方向的margin和padding
    不会像行内块一样被当做文本处理,没有行内块的空白问题
*/
[title="浮动"]>div:nth-of-type(4) {
    width: 600px;
    height: 400px;
    background-color: bisque;
    padding: 40px;/* 加了padding或者border,不会出现塌陷 */
    border: 15px dashed orange;
    font-size: 30px;
}
[title="浮动"]>div:nth-of-type(4)>div:first-child {
    height: 150px;
    width: 150px;
    background-color: #f2ccff;
    margin: 10px;
    float: right;/* 脱离文档流 */
}
[title="浮动"]>div:nth-of-type(4)>div:nth-child(2) {
    height: 150px;
    width: 150px;
    background-color: #e6e6fa;
    margin: 10px;
}
[title="浮动"]>div:nth-of-type(4)>div:last-child {
    height: 150px;
    width: 150px;
    background-color: #94e04d;
    margin: 10px;
}
[title="浮动"]>div:nth-of-type(5) {
    width: 600px;
    height: 400px;
    background-color: bisque;
    padding: 40px;
    border: 15px dashed orange;
    font-size: 30px;
}
[title="浮动"]>div:nth-of-type(5)>div:first-child  {
    height: 150px;
    width: 150px;
    background-color: #f2ccff;
    margin: 10px;
    float: left;/* 1下面就是2,1脱离了文档流且完全遮盖住了2的css效果,文本2为了实现文字环绕和文本3重合 */
}
[title="浮动"]>div:nth-of-type(5)>div:nth-child(2) {
    height: 150px;
    width: 150px;
    background-color: #94e04d;
    margin: 10px;
} 
[title="浮动"]>div:nth-of-type(5)>div:last-child  {
    height: 150px;
    width: 150px;
    background-color: #94e04d;
    margin: 10px;
}
/* 
    三个小盒子都浮动,并非父元素完全无法控制
    此时假如父元素宽度不够撑三个小盒子,但是高度够撑两个,且都设置float:left,那么第三个小盒子就会被挤到下一行 
    其它情况类似,没地方会自己找地方
    浮动的元素不能撑起父元素,假如父元素没有设置高,那么不管来多少浮动的小盒子,父元素都是近似一条线
    浮动的元素不会影响之前的元素,会影响后面的元素,比如吞掉后面的元素造成其文本错位
*/
[title="浮动"]>div:nth-of-type(6) {
    width: 800px;
    background-color: bisque;
    border: 1px solid black;
    font-size: 30px;
}
.css-00-24 {
    height: 150px;
    width: 150px;
    background-color: #f2ccff;
    margin: 10px;
    float: left;
}
.css-00-24-04 {
    float: none;/* 取消浮动,恢复文档流,方便展示 */
    /* 此时虽然父元素被撑开,但是文本4错位 */

    /* display: inline-block; */
    /* 直接让小盒子4成为行内块元素,即撑开了父元素,又确保文本不错位,本身没有被浮动盒子覆盖 */

    clear: left;
    /* 
        清除这个元素之前所有左侧浮动带来的影响,恢复文档流,方便展示 
        right同理,清除小盒子4前所有右侧浮动带来的影响
        both清除所有之前浮动带来的影响,小孩子才做选择,大人选择都要

        相当于换行重新开始,假如小盒子4也是float:left,那么小盒子4就会在新的一行浮动,并影响下面的元素
        通过下移元素来解决浮动带来的bug,且只能用于块元素,虽然行内行内块元素本就不会被遮挡
    */

    /* 
        解决父元素塌陷和小盒子4不能正常展示的问题:
        1. 给父元素设置高度,治标不治本
        2. 给父元素设置overflow:hidden,如果小盒子4没有设置成行内块元素,那么就会被隐藏起来
        3. 让父元素也"飞"起来,float:left,届时父元素下面的元素会受其影响,而且小盒子4会彻底消失
        4. 给小盒子4设置clear:left,清除左侧浮动带来的影响,最优解
    */
    /* 
        如果想让四个盒子都浮动,而且还要撑开父元素,可以写一个空的块级元素,并设置clear:both 
        更优雅的版本:
            父元素选择器::after {
                content: "";
                display: block;
                clear: both;
            }

        但是,假如还有一个不浮动的块级小盒子5,那么伪元素就会被小盒子5挤到下一行
        此时父元素被小盒子5和伪元素同时撑开,而且小盒子5会被小盒子1遮盖,且文本5会错位
        这个伪元素写法和空的块级元素本质一样,都无法解决小盒子5是非浮动块元素情况下的问题

        引出一个浮动原则:一行要么都浮动,要么都不浮动
    */
}
/* 浮动 */

/* 定位 */
.css-00-25,
.css-00-26 {
    width: 600px;
    background-color: grey;
    font-size: 30px;
    padding: 20px;
    border: 10px solid red;
}
.c25 {
    height: 150px;
    width: 150px;
    margin: 0;/* 消除浏览器默认的外边距 */
}
.c25-1 {
    background-color: #f2ccff;
}
.c25-2 {
    background-color: #e6e6fa;
    position: relative;
    top: -100px;
    left: 100px;
    /* 
        相对定位,不脱离文档流,且不影响其他元素,视觉效果,微调 
        position: relative;表示开启相对定位
        top: 100px;表示元素顶部距离父元素(原来的位置、定位元素)顶部100px
        left: 100px;表示元素左侧距离父元素左侧100px
        bottom和right同理   

        left和right不能同时使用,都写left生效,无视顺序
        top和bottom不能同时使用,都写top生效,无视顺序
    */
}
.c25-3 {
    background-color: #94e04d;
    position: relative;
    top: -200px;
    /* 谁后定位移动谁在上面,不推荐再同时用margin,计算很麻烦 */
}
.css-00-26 {
    position: relative;
    /* 和下面的绝对定位,作用 */
}
.c26 {
    height: 150px;
    width: 150px;
    margin: 0;
}
.c26-1 {
    background-color: #f2ccff;
}
.c26-2 {
    background-color: #e6e6fa;
    position: absolute;
    /* 盒子3被盒子2吞掉,盒子2脱离文档流,但很彻底,盒子3的文本不会错位到下面 */
    top: 0;
    left: 0;
    /* 
        包含块:没有脱离文档流的元素,父元素就是其包含块;
        脱离文档流的元素,第一个开启相对定位的祖先元素就是其包含块;
        
        假如.css-00-26没有开启相对定位,而且往上找没有祖先元素开启,就会从视口开始计算
        此处距离.c26-2最近的父元素.css-00-26开启了相对定位,所以从.css-00-26开始计算
        直接从内边距开始计算,而不是从内容区开始计算,而且紧挨着边框

        margin不推荐使用,这里只能写margin-top和margin-left,写其它定位里没用到的方向会失效,且不推荐使用margin,因为不同浏览器的解析不同

        一样的效果,后定位的会遮住前定位的元素

        绝对定位和浮动不能同时使用,都设置只有绝对定位会生效,实际上设置完绝对定位(相对定位不算、定位元素也变成定位元素)会变成定位元素
        行内元素定位后变成定位元素,竟然可以设置宽高
    */
}
.c26-3 {
    background-color: #94e04d;
}
.css-00-26:hover .c26-2 {
    top: 200px;
    left: 200px;
    /* 只能写定位时写的方向,然后重新从包含块的内边距开始计算 */
    transition: 0.5s all linear;/* css3 */
}
.css-00-27 {
    width: 600px;
    background-color: grey;
    font-size: 30px;
    padding: 20px;
    border: 10px solid red;
}
.c27 {
    height: 150px;
    width: 150px;
    margin: 0;
}
.c27-1 {
    background-color: #f2ccff;
}
.c27-2 {
    background-color: #e6e6fa;
    height: 40px;
    width: 100%;
    text-align: center;
}
.css-00-27:hover .c27-2 {
    position: fixed;
    top: 0;
    left: 0;
    /* 固定定位,固定在视口,小广告或者导航栏 */
}
.c27-3 {
    background-color: #94e04d;
}
.css-00-28 {
    padding: 30px;
}
.c28-1 {
    height: 60px;
    font-size: 30px;
    line-height: 60px;
    text-align: center;
    background-color: skyblue;
}
.c28-2>h2 {
    height: 40px;
    font-size: 20px;
    line-height: 40px;
    background-color: #f3b2d8;
}
.c28-2-1 {
    height: 60px;
    font-size: 40px;
    background-color: #4c4cb3;
    line-height: 60px;

    position: sticky;
    top: 0;
    /* 
        粘性定位,粘在最近的可滚动祖先元素上,最远是body,然后作用于该元素的父元素的内容区
        top: 0; 表示粘在距离最近的可滚动父元素顶部0的位置
    */
}
.c28-1,
.c28-3,
.c28-2-1,
.c28-2>h2 {
    margin: 0;
}
.css-00-28 {
    padding: 0;
    height: 200px;
    overflow: scroll;
    /* 强行溢出造成可滚动区域 */
}
/* 定位 */