一：基础选择器
* （统配选择器）：HTML，body，body下用于显示的标签div （标签选择器）：该标签名对应的所有该标签. ??(class选择器)（eg: .div => class="div"）：类名为div的所有标签# ?（id 选择器）（eg：#div => id="div"）：id 名为div的唯一标签
<!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
<!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>三：长度和颜色
长度单位：px ?mm ?cm ??em ??rem ??vm ?vh ??in ?“”“颜色设置方式：1.颜色单词2.#000000~#FFFFFF（#abc == #AABBCC）如果是AABBCC的话可以缩写成ABC3.rgb（0~255,0~255,0~255） | rgba（0~255,0~255,0~255,0~255,0~1）最后的a(0~1)表示的是透明度，rgb表示的是颜色”“”
<!DOCTYPE html><html><head> ???<meta charset="UTF-8"> ???<title>长度与颜色</title> ???<style> ???????.div { ???????????/*px mm cm em rem vw vh in*/ ???????????width: 10in; ???????????height: 100px; ???????????background-color: rgba(255, 0, 0, 0.5); ???????} ???</style></head><body> ???<div class="div"></div></body></html>四：显示方式display
display：
what：控制标签在页面中的显示方式的属性
why：通过设置该属性的不同属性值，使其在页面中的显示方式达到设定的效果，且对于CSS的样式支持程度也不一样
display： inline ;1.同行显示2.只支持部分CSS样式（不支持宽高）3.宽高由文本内容撑开display：block ;1.异行显示2.支持所有CSS样式3.设置了宽高就采用设置的值，宽高也就有默认的特性display：inline-block;1.同行显示2.支持所有的CSS样式3.设置了宽高就采用设置的值总结：标签的显示方式就是用display属性控制
1.带有inline的就会同行显示，带有block的就会支持所有CSS样式
2.带有inline的都是与内容相关的标签，带有block的主要用来搭建架构的
嵌套关系：
页面架构就是由标签一层层嵌套关系形成的
嵌套关系有一定的规则：
1.inline-block类型不建议嵌套任意标签，所以系统的inline-block都设计成了单标签
2.inline类型只嵌套inline类型的标签
3.block类型可以嵌套任意类型标签（注：hn和p只建议嵌套inline类型标签）
结论：
1.inline嵌套block和inline-block，不起任何作用，所以只能嵌套inline
2.inline-block可以嵌套其他类型标签，但一定要结合vertical-align属性操作，左右还有一空格间距
<!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=""><hr><!--通过display属性值进行划分--><style> ???Grace { ???????color: blueviolet; ???????width: 200px; ???????height: 50px; ???????background-color: red; ???} ???.o1 { ???????display: inline; ????} ???.o2 { ???????display: block; ???} ???.o3 { ???????display: inline-block; ???}</style><Grace class="o1">123</Grace><Grace class="o1">123</Grace><hr><Grace class="o2">123</Grace><Grace class="o2">123</Grace><hr><Grace class="o3">123</Grace><Grace class="o3">123</Grace><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>五：盒模型
盒模型由四部分组成：margin + border + padding + content1.margin：外边距，控制盒子的位置（布局），通过左和上控制自身位置，通过右和下影响兄弟盒子的位置（划区域）2.border：边框，样式/宽度/颜色（solid表示实线，dashed表示虚线，dotted表示点状线）3.padding：内边距，从显示角度控制文本的显示区域4.content：内容区域，由宽 X 高组成注意：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-width: 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; ???????} ???????????</style></head><body> ???<div class="box">123</div> ???<div>456</div></body></html>六：盒模型布局
1.上下两个盒子的margin-bottom和margin-top功能相同，同时出现，取大值2.第一个有显示区域的子级会和父级联动（margin-top重叠），取大值解决方案：1.父级设置border-top2.父级设置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>前端之CSS盒模型
原文地址：https://www.cnblogs.com/liuxiaolu/p/10278922.html