基础选择器
*(统配选择器):html,body,body下用于显示的标签
div(标签选择器):该标签名对应的所有该标签
.(class选择器)(class="div"):;类名为div的所有标签
#(id选择器)(id="div"):id名为div的唯一标签
实际开发中,尽量少用或不用标签名来作为选择器
标签名作为选择器一般在该标签最内层
内联和外联,相同属性采用下者覆盖上者,不同属性叠加
行间式属于逻辑最下方,相同的属性一定会覆盖内联和外联
选择器的优先级
理解:控制范围越精确,优先级越高,所设置的样式就会覆盖优先级低的相同属性样式
结论:优先级顺序 通配<标签<class<id<行间式<!important
!important书写在属性值后;前
!important优先级要强于行间式,在属性值与;之间设定
行间式优先级要高于内外连所有选择器的优先级,但是不能高于!important
长度和颜色:
长度单位: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)
background-color:rgba(255,0,0,0.5);
显示方式display:
display:inline;
1.同行显示
2.只支持部分css样式(不支持宽高)
3.宽高由文本内容决定
display:block;
1.异行显示
2.支持所有css样式
3.设置了宽高就采用设置的值,拥有默认值
display:inline-block;
1.同行显示
2.支持所有css样式
3.设置了宽高就采用设置的值
标签的显示方式就是用display属性控制
有些标签支持宽高,有些标签不支持
有些标签同行显示,有些标签异行显示(独占一行)
有些标签有结束标志,有些标签没有结束标签
单标签:br|hr|img|meta|link,功能具体,不需要内容,设置为单标签,单标签结束符在标签尾部,可以省略(主功能)
双标签:h1|p|span|div,具有子标签,包含内容,设置为双标签,双标签首尾分离(主内容)
嵌套关系:
页面就是由标签一层层嵌套关系形成
嵌套关系由一定的规则display: block;
1.inline-block类型不建议嵌套任意标签,所以系统的inline-block都设计成了单标签
2.inline类型之嵌套inline类型的标签
3.block类型可以嵌套任意类型标签
inline嵌套block和inline-block,不起任何作用,所以只能嵌套inline
inline-block可以嵌套其他任何类型标签,但一定要结合vertical-align属性操作,左右还有一空格间距
vetical-align: middle;
baseline:文本底端对齐(默认值)
top:标签顶端对齐
middle:标签中线对齐
bottom:标签底端对齐
inline-block布局会受内部的文本影响(文本底端对齐)
盒模型:
盒模型由四部分组成:margin+border+padding+content
1.margin外边距,控制盒子的位置(布局),通过左和上控制自身位置,通过下右影响兄弟盒子位置(占区域)
2.border:边框,样式/宽度/颜色(solid实线 dashed虚线 dotted点状线)
3.padding:内边距,从显示角度控制文本的显示区域
4.content:内容区域,由宽 x 高组成
padding: 10px 10px 10px 10px;
/*border-style: solid;*/
/*border-width: 10px;*/
/*border-color: red;*/
/*transparent透明色*/
border: blue dashed 20px;
padding: 10px 0 0 10px;
width: 190px;
height: 190px;
/*margin-left: -80px;*/
/*margin-top: -80px;*/
margin-bottom: 100px;
1.margin,padding:起始为上,顺时针依次赋值,不足边取对边
2.要做到文本内移,设置padding,如果又想显示区域不变,相应减少content
盒模型布局:
1.上下两个盒子的margin-bottom和margin-top功能相同,同时出现,取大值
2.第一个显示区域的子级会和父级联动(margin-top重叠),取大值
解决方法:
1.父级设置border-top
2.父级设置padding-top