css基础选择器
*(统配选择器): 控制html, body,以及body下所有用于显示的标签
div(标签选择器): 该标签名对应的所有该标签
.(class选择器)(eg: .div => class="div"): 类名为div的所有标签
#(id选择器)(eg: #div => id="div"): id名为div的唯一标签
选择器的优先级
理解: 控制范围约精确,优先级越高,所设置的样式就会覆盖优先级低的相同属性样式
结论: 优先级顺序 统配 < 标签 < class < id < 行间式 < !important
注意: !important书写在属性值后;前
background-color: red!important;
长度与颜色
长度单位: px mm cm em rem vw vh in
px:像素
mm:毫米
cm:厘米
vw:视图的宽,100vw整个屏幕的宽
vh:视图的高,100vh整个屏幕的高
in:英寸
'''颜色设置方式:
1.颜色英语单词
2.#000000 ~ #FFFFFF 黑-白(#abc == #AABBCC #F00红 #0F0绿 #00F蓝)
3.rgb(0~255, 0~255, 0~255)|rgba(0~255, 0~255, 0~255, 0~1)
# background-color: rgba(255, 0, 0, 0.5);#红色,半透明
# background-color:rgba(0,255,0,1); #绿,不透明
# background-color:rgba(0,0,255,0); #蓝,全透明
'''
标签的分类
.有些标签支持宽高,有些标签不支持宽高 span不支持宽高(宽高由内容宽高撑起),p支持宽高
.有些标签同行显示,有些标签异行显示(独占标签) span同行显示,p异行显示
.有些标签有结束标识,有些标签没有结束标签(省略了) img没有结束标签
.单双标签的分类
单标签: br|hr|img|meta|link, 功能具体, 不需要内容, 设置为单标签, 单标签结束符在标签尾部, 可以省略
eg: <img /> | <br /> #其中/可以省略
结论: 主功能
双标签: h1|p|span|div, 具有子标签, 包含内容, 设置为双标签, 双标签首尾分离
eg: <h1>内容</h1> | <div>子标签</div>
结论: 主内容
.通过display属性进行划分
<style>
henry{
width: 200px;
height: 100px;
background-color: #00bbee;
}
.h1{
display: inline;
}
.h2{
display: block;
}
.h3{
display: inline-block;
}
</style>
<henry class="h1"></henry>
<henry class="h2"></henry>
<henry class="h3"></henry>
display: inline;
/*
1.同行显示
2.只支持部分css样式(不支持宽高)
3.宽高由文本内容撑开,与文本内容的宽高相同
*/
display: block;
/*
1.异行显示
2.支持所有css样式
3.设置了宽高就采用设置的值, 宽高也就有默认的特性(后面讲)
*/
display: inline-block;
/*
1.同行显示
2.支持所有css样式
3.设置了宽高就采用设置的值
*/
'''
# 总结: .标签的显示方式就是用display属性控制
# .带有inline的就会同行显示, 带有block的就会支持所有css样式
# .带有inline的都是与内容相关的标签, 带有block的主要用来搭建架构的
嵌套关系
why: 页面架构就是由标签一层层嵌套关系形成
嵌套关系由一定的规则
. inline-block类型不建议嵌套任意标签, 所以系统的inline-block都设计成了单标签
. inline类型只嵌套inline类型的标签
. block类型可以嵌套任意类型标签(注: hn和p只建议嵌套inline类型标签)
结果:
.inline嵌套block和inline-block,不起任何作用, 所以只能嵌套inline
#<sapn></span>是inline类型,如果嵌套<div></div>,div是block类型,block类型起作用,inline类型不起任何作用
.inline-block可以嵌套其他类型标签,但是不建议使用,如果使用,一定要结合vertical-align属性操作, 但结果左右还是有一空格间距,产生空格间距的原因:body会有一个默认的边框宽度为8px
.list{
display: inline-block;
vertical-align: middle;
}
/*总结: vertical-align(垂直对齐) 设置与display设置在同一个作用域中
baseline: 文本底端对齐(默认值)
top: 标签顶端对齐
middle: 标签中线对齐
bottom: 标签底端对齐 */
.block如何同行显示,就是下面的盒模型解决
盒模型
四个区域都是独立存在的区域
padding:内边距,加内边距,整个盒子可以看到的宽度增加 padding: 10px 10px 10px 10px;四个值一样的话我们可以简写为一个10px /*起始为上, 顺时针依次赋值, 不足边取对边*/
border:边框 有三个参数:样式border-style(solid实线 dashed虚线 dotted点状线),颜色border-color,宽度border-width (默认宽度是3px,颜色是黑色) border: dotted green 30px;
margin:外边距 margin:100px 50px /*起始为上, 顺时针依次赋值, 不足边取对边*/
总结:
盒模型由四部分组成: margin + border + padding + content(width*height)
.margin: 外边距, 控制盒子的位置(布局), 通过左和上控制自身位置, 通过右和下影响兄弟盒子位置(划区域)
.border: 边框, 样式/宽度/颜色 (solid实线 dashed虚线 dotted点状线)
.padding: 内边距,从显示角度控制文本的显示区域(注意显示的角度)
.content: 内容区域,显示内容, 由宽 x 高组成
注意:
.margin,padding: 起始为上, 顺时针依次赋值, 不足边取对边
.要做到文本内移,设置padding, 如果又想显示区域不变, 相应减少content
.margin为0,但是上下还是有一定的间距,这个间距是body产生的,他会产生一个默认宽度为8px的边框
盒模型布局
#其实就是设置margin来改变布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒模型布局</title>
<style>
div{
width: 78px;
height: 33px;
background-color: orange;
border: 1px black solid;
}
.s1{}
.s2{
margin-left: 80px;
margin-top: -35px;
}
.s3{
margin-left: calc(80px*2);
margin-top: -35px;
}
.s4{
margin-left: calc(80px*3);
margin-top: -35px;
}
.s5{
margin-left: calc(80px*4);
margin-top: -35px;
}
.s6{
margin-left: calc(80px*5);
margin-top: -35px;
}
.s7{
margin-left: calc(80px*6);
margin-top: -35px;
}
</style>
</head>
<body>
<div class="s1">1</div>
<div class="s2">2</div>
<div class="s3">3</div>
<div class="s4">4</div>
<div class="s5">5</div>
<div class="s6">6</div>
<div class="s7">7</div>
<hr>
<!-- 实现b1与b2间距为50px-->
<style>
.b1{
margin-bottom: 50px;
}
.b2{
margin-top: 50px;
}
</style>
<div class="b1"></div>
<div class="b2"></div>
</body>
</html>
'''
1.上下两个盒子的margin-bottom和margin-top功能相同, 同时出现, 取大值
2.第一个有显示区域的子级会和父级联动(margin-top重叠), 取大值,当第一个子级margin-top大于父级,第一个子级下移父级也下移,当父级margin-top大于第一个子级,父级下移第一个子级也下移,父级只与第一个子级联动,当第一个子级不显示,则第二个子级就成为第一个子级.
3.实际开发中不考虑父级盒子大小,父级只给子级提供布局的开始,它的宽高不会控制到子级
解决2:
1.父级设置border-top 相当于往父级上钉了一排钉子,子级扯不动
2.父级设置padding-top 相当于把子级往下挤开了,这样子级也不能和父级联动
一般解决是使用padding-top
'''
#精灵图 减少io,提升效率虽然浪费内存空间,但是可忽略不计