CSS基础选择器(选择器的优先级),CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成,盒模型-block,盒模型布局

CSS基础选择器

(1)id选择器:   #       =》  标签拥有 id="user"  属性

<style>
#user {
width: 200px;
}
</style> <div id="user"></div>

(2)( class ) 类选择器 :  .        =》 标签拥有 class="user" 属性

<style>
.user {
width: 200px;
height: 50px;
}
</style> <div class="user"></div>

(3) 标签选择器  ( 通过标签名来控制 )

<style>
div {
width: 200px;
height: 50px;
}
</style> <div></div>

(4)通配选择器   *

<style>
* {
background-color: red;
}
</style>

选择器的优先级

控制范围越精确,优先级越高
通配 < 标签 < class < id < 行间式 < !important
行间式优先级高于内联,外联所有选择器的优先级,但是低于 !important
<style>
  .name {
    background-color: red!important;
  }
</style> <div class="name"></div>

样式块

1.长度: 单位( px像素   mm毫米   cm厘米   em一个字宽,跟父级字体大小相关   rem跟跟标签html相关   vw视图宽   vh视图宽 i  n英寸)
<style>
.name {
width: 100px;
}
</style>
2.颜色:#00 00 00 - #FF FF FF
rgb(0-255,0-255,0-255)
rgba(0-255,0-255,0-255,透明度(0-1))
<style>
.name {
background-color: #FF0000;
}
</style> <div class="name"></div>

3.控制标签的显示方式   display

display: none 不显示
display: inline 同行显示,只支持部分css样式(不支持宽高)
display: block 块级显示,支持所有css样式,宽高也有默认的特性
display: inline-block 同行显示,支持所有css样式
嵌套关系
inline-block 类型不建议嵌套任意标签,
inline 类型只嵌套inline类型的标签
block类型可以嵌套任意类型的标签
4.文本样式  
vertical-align: baseline | top | middle | bottom
baseline: 文本底端对齐
top: 标签顶端对齐
middle:中线对齐
bottom: 标签底端对齐
<style>
.name {
    vertical-align: baseline;
  }
</style>

盒模型

组成:    margin + border + padding + content

1.margin:外边距,控制盒子的位置(布局),跟边框一样 
  左右移动正常叠加,上下重叠取大值   父级的第一个子集会重叠边距,怎样解决此问题?
    利用父级的padding来解决
margin: 上,右,下,左  (四值)
margin: 上,左右,下 (三值)
margin: 上下,左右 (二值)
margin:20px 上右下左都是20px (一值)
margin-top:-80px;
margin-left:-80px;
margin-left:calc( 80px * 2 ) 利用算法来算距离
2.边框    border: 边框样式 ,边框大小,边框颜色
border-style: solid实线 | dashed虚线 | dotted点状线
border-width: 20px 边框宽度
border-color:transparent; 边框颜色
border: solid 20px red;
transparent 透明色
3.内边距 padding     控制文本内移,想保持显示区域不变,相应减少content的区域
padding:20px  上右下左都是20px (一值)
padding: 上,右,下,左 (四值)
padding: 上,左右,下 (三值)
padding: 上下,左右 (二值)
4.content 内容

盒模型布局

1.上下两个盒子的margin-bottom和margin-top功能相同, 同时出现, 取大值
2.第一个有显示区域的子级会和父级联动(margin-top重叠), 取大值
解决方法:
  1.父级设置border-top
  2.父级设置padding-top

盒模型-block

block
.子集没有设置宽,宽自适应父级的宽 (子集的 border + padding + content = content)
.父级没有设置高,高适应子集的高
.没有设置高,高由内容撑开
子集自适应父级的宽度:
margin-left:auto; 水平居右
margin:0 auto; 水平居中
margin:auto; 上下居中,水平居中

 

上一篇:swt小知识点


下一篇:后缀数组---Musical Theme