一、基础选择器
*(统配选择器): html, body, body下用于显示的标签
<style>
*
{
width: 20px;
height: 20px;
background-color: #FF0000;
}
</style>
<div>123</div>
div(标签选择器): 该标签名对应的所有该标签
div
{
50px;
height: 20px;
background-color: #FF0000;
}
.(class选择器)(eg: .div => class="div"): 类名为div的所有标签
.div2 {
background-color: brown;
}
#(id选择器)(eg: #div => id="div"): id名为div的唯一标签
#did1 {
background-color: tan;
}
二、选择器的优先级
# 理解: 控制范围约精确,优先级越高,所设置的样式就会覆盖优先级低的相同属性样式
# 结论: 优先级顺序 统配 < 标签 < class < id < 行间式 < !important
# 注意: !important书写在属性值后;前
# 行间式后面加上！important可获得最高优先级
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器优先级</title>
<style>
#div {
}
.div {
}
div {
}
* {
width: 100px;
height: 100px;
}
/*!important 优先级要强于行间式, 在属性值与;之间设定*/
</style>
</head>
<body>
<div class="div" id="div" style="</div>
<!--总结: 行间式优先级要高于内连外连所有选择器的优先级, 但是不能高于!important-->
</body>
</html>
View Code三、长度与颜色
# 长度单位: px mm cm em rem vw vh in
'''颜色设置方式:
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、标签特性
a、有些标签支持宽高, 有些标签不支持宽高，如span不支持宽高，p，img支持宽高；
b、有些标签同行显示span img, 有些标签异行显示(独占一行)p；
c、有些标签有结束标识span、p, 有些标签没有结束标签(省略了)img link。
<!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="">
View Code
2、标签的分类： a、 单标签: br|hr|img|meta|link, 功能具体, 不需要内容, 设置为单标签, 单标签结束符在标签尾部, 可以省略 结论: 主功能
b、双标签: h1|p|span|div, 具有子标签, 包含内容, 设置为双标签, 双标签首尾分离 结论: 主内容
3、display
what: 适用于控制标签在页面中的显示方式的属性
why: 通过设置该属性的不同属性值, 使其在页面中的显示方式达到设定的效果,且对于css的样式支持程度也不一样
'''
display: inline;
1.同行显示
2.只支持部分css样式(不支持宽高)
3.宽高由文本内容撑开
display: block;
1.异行显示
2.支持所有css样式
3.设置了宽高就采用设置的值, 宽高也就有默认的特性(后面讲)
display: inline-block;
1.同行显示
2.支持所有css样式
3.设置了宽高就采用设置的值
'''
# 总结: 标签的显示方式就是用display属性控制
五、嵌套关系
'''
嵌套关系
why: 页面架构就是由标签一层层嵌套关系形成
嵌套关系由一定的规则
1. inline-block类型不建议嵌套任意标签, 所以系统的inline-block都设计成了单标签
2. inline类型只嵌套inline类型的标签
3. block类型可以嵌套任意类型标签(注: hn和p只建议嵌套inline类型标签)
'''
'''
结果:
1.inline嵌套block和inline-block,不起任何作用, 所以只能嵌套inline
2.inline-block可以嵌套其他类型标签, 但一定要结合vertical-align属性操作, 左右还有一空格间距
*总结: vertical-align:值 # 此处的值有四种可选类型，分别对应不同的对齐方式。
baseline: 文本底端对齐(默认值)
top: 标签顶端对齐
middle: 标签中线对齐
bottom: 标签底端对齐
3.block任何同行显示
'''
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嵌套关系</title>
<style>
.list {
display: inline-block;
vertical-align: middle; <!--四种可选对齐方式-->
}
.box {
width: 80px;
height: 35px;
background-color: #333;
}
</style>
</head>
<body>
<div class="list">
<div class="box">呵呵呵呵呵呵呵呵呵呵呵呵</div>
</div>
<div class="list">
<div class="box" style="height: 60px">呵呵</div>
</div>
</body>
</html>
View Code
六、盒模型
'''
总结:
盒模型由四部分组成: margin + border + padding + content
1.margin: 外边距, 控制盒子的位置(布局), 通过左和上控制自身位置, 通过右和下影响兄弟盒子位置(划区域)
margin-left: -80px;
margin-top: -80px;
margin-bottom: 100px;
margin: 100px 50px;
起始为上, 顺时针依次赋值, 不足边取对边
2.border: 边框, 样式/宽度/颜色 (solid实线 dashed虚线 dotted点状线)
border-style: solid;
border- 10px;
border-color: red;
transparent 透明色
border: blue dashed 20px;
3.padding: 内边距, 从显示角度控制文本的显示区域
padding: 10px 0 0 10px;
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- 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>
View Code
七、盒模型布局
'''
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>
View Code