# *(统配选择器): 控制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); #蓝,全透明 '''
''' 1.单双标签的分类 单标签: br|hr|img|meta|link, 功能具体, 不需要内容, 设置为单标签, 单标签结束符在标签尾部, 可以省略 eg: <img /> | <br /> #其中/可以省略 结论: 主功能 双标签: h1|p|span|div, 具有子标签, 包含内容, 设置为双标签, 双标签首尾分离 eg: <h1>内容</h1> | <div>子标签</div> 结论: 主内容 display: inline; /* 1.同行显示 2.只支持部分css样式(不支持宽高) 3.宽高由文本内容撑开,与文本内容的宽高相同 */ display: block; /* 1.异行显示 2.支持所有css样式 3.设置了宽高就采用设置的值, 宽高也就有默认的特性(后面讲) */ display: inline-block; /* 1.同行显示 2.支持所有css样式 3.设置了宽高就采用设置的值 */ ''' # 总结: 1.标签的显示方式就是用display属性控制 # 2.带有inline的就会同行显示, 带有block的就会支持所有css样式 # 3.带有inline的都是与内容相关的标签, 带有block的主要用来搭建架构的
''' 嵌套关系 why: 页面架构就是由标签一层层嵌套关系形成 嵌套关系由一定的规则 1. inline-block类型不建议嵌套任意标签, 所以系统的inline-block都设计成了单标签 2. inline类型只嵌套inline类型的标签 3. block类型可以嵌套任意类型标签(注: hn和p只建议嵌套inline类型标签) ''' ''' 结果: 1.inline嵌套block和inline-block,不起任何作用, 所以只能嵌套inline #<sapn></span>是inline类型,如果嵌套<div></div>,div是block类型,block类型起作用,inline类型不起任何作用 2.inline-block可以嵌套其他类型标签,但是不建议使用,如果使用,一定要结合vertical-align属性操作, 但结果左右还是有一空格间距,产生空格间距的原因:body会有一个默认的边框宽度为8px /*总结: vertical-align(垂直对齐) 设置与display设置在同一个作用域中 baseline: 文本底端对齐(默认值) top: 标签顶端对齐 middle: 标签中线对齐 bottom: 标签底端对齐 */ 3.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) 1.margin: 外边距, 控制盒子的位置(布局), 通过左和上控制自身位置, 通过右和下影响兄弟盒子位置(划区域) 2.border: 边框, 样式/宽度/颜色 (solid实线 dashed虚线 dotted点状线) 3.padding: 内边距,从显示角度控制文本的显示区域(注意显示的角度) 4.content: 内容区域,显示内容, 由宽 x 高组成 注意: 1.margin,padding: 起始为上, 顺时针依次赋值, 不足边取对边 2.要做到文本内移,设置padding, 如果又想显示区域不变, 相应减少content 3.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,提升效率虽然浪费内存空间,但是可忽略不计