一.CSS基础选择器
# 1.*（通配选择器）：html,body以及body下用于显示的标签
#html和body颜色会被改变，但是div标签不会发生改变，由于不同的选择器具有优先级
# 语法：* {样式块}
# 2.标签名（标签选择器）：该标签对应的所有该标签
# 在实际开发中，尽量少用或不用标签名来作为选择器，标签名如果作为选择器的话一般在该标签为最内层（语义|功能）标签
# 语法：标签名 {样式块}
# 3. .类名（class选择器）：对应该类名的所有标签
# 语法：. {样式块}
# 4. #id名（id选择器）：对应该id名的所有标签
# 语法：#id名 {样式块}
# 在一个html文件中,通常id唯一
选择器的优先级
# 控制范围越精确，优先级越高，所设置的样式就会覆盖优先级低的相同属性样式，不同的属性会叠加。
# 优先级顺序： 统配 < 标签 < class < id < 行间式 < !important
# 内联式和外联式，相同属性采用下者覆盖上者，不同属性叠加。
# 注：!important 书写在属性值后;前
二.长度与颜色样式
# 1.长度
单位：px mm cm em rem vw vh in
# 2.颜色
#三种设置方式：
# 1.颜色单词
# 2.#000000 ~ FFFFFF （#abc == #AABBCC）
# 3.rgb(0~255,0~255,0~255) | rgba(0~255,0~255,0~255,0~1)
三.显示方式display
# 三种方式：
# 1.display:inline;
# 同行显示，只支持部分css样式（不支持宽高），宽高有文本内容撑开
# 2.display:block;
#异行显示，支持所有css样式，设置了宽高就采用设置的值，宽高也有默认的特性
# 3.display:inline-block;
#同行显示，支持所有的css样式，设置了宽高就采用设置的值
#标签的显示方式就是用display属性控制
标签分类
# 1.单标签（主功能）
# br|hr|img|meta|link，功能具体，不需要内容，设置为单标签，单标签结束符在标签尾部，可以省略
# 2.双标签（主内容）
# h1|p|span|div，具有子标签，包含内容，设置为双标签，双标签首尾分离
嵌套关系
# 因为页面架构就是由标签一层层嵌套关系形成
#嵌套关系的规则：
#1.inline-block类型不建议嵌套任意标签，可以嵌套标签，但是inline-block布局会受内部的文本影响（文本底端对齐），所以如果嵌套其他类型标签时，一定要结合vertical-align属性操作，左右还有一个空格间距。因此系统的inline-block都设计成单标签
# vertical-align属性
# baseline:文本底端对齐（默认）
# top:标签顶端对齐
# middle:标签中线对齐
# bottom:标签底部对齐
#2.inline类型只嵌套inline类型的标签，inline嵌套block和inline-block,不起任何作用，只能嵌套inline
# 3.block类型可以嵌套任意类型标签
# 注：hn和p只建议嵌套inline类型标签
#问题：block如何同行显示？？
四.盒模型
# 盒模型组成部分：
#1.margin:外边距，控制盒子的位置（布局），通过左（margin-left）和上（margin-top）控制自身位置，通过右（margin-right）和下（margin-bottom）影响兄弟盒子位置（划区域）
#2.border:边框，样式/宽度/颜色 （solid实线 dashed虚线 dotted点状线）
#3.padding:内边距，从显示角度控制文本的显示区域
#4.content:内容区域，由宽*高组成
#注：
#1.margin和padding:起始为上，顺时针依次赋值，不足边取对边
#2.要做到文本内移，设置padding，如果又想显示区域不变，相应减少content
盒模型布局
#1.上下两个盒子的margin-bottom和margin-top功能相同，同时出现，取大值
#2.第一个有显示区域的子级会和父级联动（margin-top重叠），取大值，我们可以通过设置父级的border-top属性或padding-top属性，将其分开，就不会联动了
#3.block设置宽高，一定采用设置的宽高
#4.block默认宽高：
# 1.没有设置宽，宽自适应父级的宽（子级的border+padding+width=父级的width）
# 2.没有设置高，高由内容撑开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒模型布局</title>
<style>
div {
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 {
200px;
height: 200px;
background-color: orange;
/*margin-top: 40px;*/
/*border-top: 1px solid black;*/
padding-top: 10px;
}
.sub1 {
/*border: 1px solid red;*/
50px;
height: 50px;
background-color: red;
margin-top: 50px;
}
.sub2 {
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>
View Code 盒子总结
'''
block:
默认宽高
1.没有设置宽, 宽自适应父级的宽(子级的border+padding+width = 父级的width)
2.没有设置高, 高由内容撑开
设置了宽高
一定采用设置的宽高
显示宽高
border+padding+content
自身布局
margin-top | margin-left
兄弟布局
margin-bottom | margin-right
父级水平居中
margin: 0 auto;
与inline相关的盒子
vertical-align
'''