一 CSS基础选择器
1.统配选择器
统配选择器是指在html、body下使用，用于显示的标签。
<!--语法--> * { 样式块 }
2.标签选择器
标签选择器选择的是html文件中标签名与选择器标签名一致的标签。
/*语法（以div标签为例）*/ div{ 样式块 }
3.class选择器
class选择器选择的是html文件中类名与选择器类名一致的标签。
/*语法（div为自定义的类名）*/ .div{ 样式块 }
4.id选择器
id选择器选择的是html文件中id与选择器id一致的标签。
/*语法（top为自定义的id）*/ #top{ 样式块 }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基础选择器</title> <style> /*在实际开发中, 尽量少用或不用标签名来作为选择器*/ /*标签名作为选择器一般在该标签为最内层(语义|功能)标签*/ div { width: 100px; height: 100px; background-color: red; } </style> <link rel="stylesheet" href="css/1.css"> <!--总结: 内联和外联, 相同属性采用下者覆盖上者, 不同属性叠加--> <style> /*在css语法中如何来表示class名 => .就代表class*/ .div1 { background-color: cyan; } .div2 { background-color: brown; } /*问题:css中用什么标识id => #*/ #did1 { background-color: tan; } </style> <style> * { background-color: yellow; } /*html和body颜色被改变了, 但所有的div颜色并没有改变 原因: 不同的名字(选择器)具有优先级*/ </style> </head> <body> <div>1</div> <div style="background-color: pink">2</div> <!--总结: 行间式属于逻辑最下方, 相同的属性一定会覆盖内联和外联--> <div class="div1">3</div> <!--问题: 不使用行间式单独操作(可读性差), 那又如何来单独改变其颜色 => 其别名--> <div class="div2"></div> <!--总结: 用class起名, 分类别, 可以重名 => 用什么方式唯一标识一个标签--> <div id="did1"></div> <!--给该标签设置唯一标识符 id--> <!--了解: 统配选择器 => css符合 => * --> <!--控制着: html body 及 body下所有用来显示的标签--> </body> </html>
选择器的优先级
控制范围越精确，优先级越高，所设置的样式就会覆盖优先级低的相同属性样式。
优先级顺序：统配选择器 < 标签选择器 < class选择器 < id选择器 < 行间式 < !important
注意：!import书写在属性值后;前。！import会提高样式的优先级。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选择器优先级</title> <style> #div { background-color: yellow; } .div { background-color: yellowgreen; } div { background-color: green!important; } * { width: 100px; height: 100px; background-color: darkgreen; } /*!important 优先级要强于行间式, 在属性值与;之间设定*/ </style> </head> <body> <div class="div" id="div" style="background-color: red"></div> <!--总结: 行间式优先级要高于内连外连所有选择器的优先级, 但是不能高于!important--> </body> </html>
二 显示方式display
display的三种方式 inline、block、inline-block
1.inline
/* 1.同行显示 2.只支持部分css样式（不支持宽高） 3.宽高由文本内容撑开 */
2.block
/* 1.异行显示 2.支持所有css样式 3.设置了宽高就采用设置的值，宽高也就有默认的特性 */
3.inline-block
/* 1.同行显示 2.支持所有css样式 3.设置了宽高就采用设置的值 */
总结：标签的显示方式就是用dispaly属性控制的。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>display</title> <style> span { width: 200px; height: 50px; background-color: yellow; } p { width: 200px; height: 50px; background-color: red; } img { width: 200px; /*height: 50px;*/ } </style> </head> <body> <span>123<i>456</i><b>789</b></span> <span>123<i>456</i><b>789</b></span> <p>123<i>456</i><b>789</b></p> <p>123<i>456</i><b>789</b></p> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=538916491,4234853604&fm=200&gp=0.jpg" alt=""> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=538916491,4234853604&fm=200&gp=0.jpg" alt=""> <!--结论: 1. 有些标签支持宽高, 有些标签不支持宽高 2. 有些标签同行显示, 有些标签异行显示(独占一行) 3. 有些标签有结束标识, 有些标签没有结束标签(省略了) --> <!-- 不同的标签, 在页面中书写的方式不一样, 显示效果也不一样, 支持的css样式程度也不一样 --> <!--分类--> <!--1.单双标签的分类--> <!-- 单标签: br|hr|img|meta|link, 功能具体, 不需要内容, 设置为单标签, 单标签结束符在标签尾部, 可以省略 eg: <img /> | <br /> 结论: 主功能 双标签: h1|p|span|div, 具有子标签, 包含内容, 设置为双标签, 双标签首尾分离 eg: <h1>内容</h1> | <div>子标签</div> 结论: 主内容 --> <hr> <!-- 2.通过display属性值进行划分 --> <style> /* dispaly what: 控制标签在页面中的显示方式的属性 why: 通过设置该属性的不同属性值, 使其在页面中的显示方式达到设定的效果, 且对于css的样式支持程度也不一样 */ owen { color: blueviolet; width: 200px; height: 50px; background-color: red; } .o1 { display: inline; /* 1.同行显示 2.只支持部分css样式(不支持宽高) 3.宽高由文本内容撑开 */ } .o2 { display: block; /* 1.异行显示 2.支持所有css样式 3.设置了宽高就采用设置的值, 宽高也就有默认的特性(后面讲) */ } .o3 { display: inline-block; /* 1.同行显示 2.支持所有css样式 3.设置了宽高就采用设置的值 */ } /*结论: 1.带有inline的就会同行显示, 带有block的就会支持所有css样式 2.带有inline的都是与内容相关的标签, 带有block的主要用来搭建架构的 */ /*嵌套关系 why: 页面架构就是由标签一层层嵌套关系形成 嵌套关系由一定的规则 1. inline-block类型不建议嵌套任意标签, 所以系统的inline-block都设计成了单标签 2. inline类型只嵌套inline类型的标签 3. block类型可以嵌套任意类型标签(注: hn和p只建议嵌套inline类型标签) */ </style> <owen class="o1">123</owen> <owen class="o1">123</owen> <hr> <owen class="o2">123</owen> <owen class="o2">123</owen> <hr> <owen class="o3">123</owen> <owen class="o3">123</owen> <hr> <!--复习--> <style> .div { width: 100px; height: 100px; background-color: orange; display: inline-block; } /*标签的显示方式就是用display属性控制*/ </style> <div class="div">000</div> <div class="div">111</div> </body> </html>
三 嵌套关系
在一个页面中，页面的架构就是由标签一层层嵌套关系形成的。
嵌套关系的规则
1.inline-block类型不建议嵌套任意标签，所以系统的inline-block都设计成了单标签。
2.inline类型只嵌套inline类型额标签。
3.block类型可以嵌套任意类型标签（注：h标签和p标签只建议嵌套inline类型标签）
注意
1.inline嵌套block和inline-block，不起任何作用，所以只能嵌套Inline。
2.inline-block可以嵌套其他类型的标签，但一定要结合vertical-align属性操作，左右还有一空格间距。（如果不与vertical-align属性一起结合使用的话，由于inline-block布局会受内部文本的影响，即在布局时文本底端会对其其他盒模型的底端，会对我们的页面布局产生影响，达不到想要的效果）。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>嵌套关系</title> <style> .list { display: inline-block; vertical-align: middle; } /*总结: vertical-align baseline: 文本底端对齐(默认值) top: 标签顶端对齐 middle: 标签中线对齐 bottom: 标签底端对齐 */ .box { width: 80px; height: 35px; background-color: #333; } </style> </head> <body> <!-- 嵌套关系 why: 页面架构就是由标签一层层嵌套关系形成 嵌套关系由一定的规则 1. inline-block类型不建议嵌套任意标签, 所以系统的inline-block都设计成了单标签 2. inline类型只嵌套inline类型的标签 3. block类型可以嵌套任意类型标签(注: hn和p只建议嵌套inline类型标签) --> <div class="list"> <div class="box">呵呵呵呵呵呵呵呵呵呵呵呵</div> </div> <div class="list"> <div class="box" style="height: 60px">呵呵</div> </div> <!--问题: inline-block布局会受内部的文本影响(文本底端对其)--> <!--解决: 什么属性可以控制文本垂直方向的对齐关系 => vertical-align --> <!-- 结果: 1.inline嵌套block和inline-block,不起任何作用, 所以只能嵌套inline 2.inline-block可以嵌套其他类型标签, 但一定要结合vertical-align属性操作, 左右还有一空格间距 3.block任何同行显示 ??? --> </body> </html>
四 盒模型
盒模型由四部分组成 margin + border + padding + content
1.margin：外边距，控制盒子的位置（布局），通过控制top和left控制自身位置，通过控制right和bottom控制兄弟盒子的位置（划区域）。
2.border：给盒子加上边框，参数为样式+宽度+颜色（样式有：solid实线、dashed虚线、dotted点状线）
3.padding：内边距。从现实角度控制文本的显示区域。
4.content：内容区域，由宽 * 高 组成
注意
1.margin,padding参数起始位上，顺时针一次赋值,没有参数的边取对边的值。
2.要做到文本内移，设置padding，如果又想现实区域不变，相应减少content。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>盒模型</title> <style> body { margin: 0; } /*margin | border | padding | content(width x height)*/ .box { width: 200px; height: 200px; background-color: orange; /*padding: 10px 10px 10px 10px;*/ /*padding: 20px 30px;*/ /*起始为上, 顺时针依次赋值, 不足边取对边*/ /*border-style: solid;*/ /*border- 10px;*/ /*border-color: red;*/ /*transparent透明色*/ border: blue dashed 20px; /*margin: 100px 50px;*/ /*起始为上, 顺时针依次赋值, 不足边取对边*/ } .box { padding: 10px 0 0 10px; width: 190px; height: 190px; /*margin-left: -80px;*/ /*margin-top: -80px;*/ margin-bottom: 100px; } /*总结: 盒模型由四部分组成: margin + border + padding + content 1.margin: 外边距, 控制盒子的位置(布局), 通过左和上控制自身位置, 通过右和下影响兄弟盒子位置(划区域) 2.border: 边框, 样式/宽度/颜色 3.padding: 内边距, 从显示角度控制文本的显示区域 4.content: 内容区域, 由宽 x 高组成 注意: 1.margin,padding: 起始为上, 顺时针依次赋值, 不足边取对边 2.要做到文本内移,设置padding, 如果又想显示区域不变, 相应减少content */ </style> </head> <body> <div class="box">123</div> <div>456</div> </body> </html>
五 盒模型布局
'''
1.上下两个盒子的margin-bottom和margin-top功能相同, 同时出现, 取大值
2.第一个有显示区域的子级会和父级联动(margin-top重叠), 取大值
解决2:
1.父级设置border-top
2.父级设置padding-top
'''
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>盒模型布局</title> <style> div { width: 78px; height: 33px; background-color: orange; border: 1px solid black; } /*前提: 盒子显示区域 80 x 35*/ .d1 {} .d2 { margin-left: 80px; margin-top: -35px; /*margin-bottom: 35px;*/ } .d3 { margin-left: calc(80px * 2); margin-top: -35px; } .d4 { margin-left: calc(80px * 3); margin-top: -35px; } .d5 { margin-left: calc(80px * 4); margin-top: -35px; } .d6 { margin-left: calc(80px * 5); margin-top: -35px; } .d7 { margin-left: calc(80px * 6); margin-top: -35px; } </style> </head> <body> <!--.d${$}*7--> <div class="d1">1</div> <div class="d2">2</div> <div class="d3">3</div> <div class="d4">4</div> <div class="d5">5</div> <div class="d6">6</div> <div class="d7">7</div> <hr> <!--需求: b1 与 b2 上下间接50px--> <style> .b1 { margin-bottom: 50px; } .b2 { margin-top: 50px; } /*总结: 上下两个盒子的margin-bottom和margin-top功能相同, 同时出现, 取大值*/ </style> <div class="b1"></div> <div class="b2"></div> <!--了解: 左右正常叠加--> <style> .s1 { margin-right: 10px; } .s2 { margin-left: 10px; } </style> <span class="s1">1</span><span class="s2">2</span> <hr> <style> .sup { width: 200px; height: 200px; background-color: orange; /*margin-top: 40px;*/ /*border-top: 1px solid black;*/ padding-top: 10px; } .sub1 { /*border: 1px solid red;*/ width: 50px; height: 50px; background-color: red; margin-top: 50px; } .sub2 { width: 50px; height: 50px; background-color: pink; margin-top: 50px; } /*总结: 第一个有显示区域的子级会和父级联动(margin-top重叠), 取大值*/ /*解决方案: 1.父级设置border-top | 2.父级设置padding-top*/ </style> <section class="sup"> <section class="sub1"></section> <section class="sub2"></section> </section> </body> </html>