CSS选择器、样式、盒模型
一.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 { 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>
盒子总结
''' block: 默认宽高 1.没有设置宽, 宽自适应父级的宽(子级的border+padding+width = 父级的width) 2.没有设置高, 高由内容撑开 设置了宽高 一定采用设置的宽高 显示宽高 border+padding+content 自身布局 margin-top | margin-left 兄弟布局 margin-bottom | margin-right 父级水平居中 margin: 0 auto; 与inline相关的盒子 vertical-align '''