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

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 | bottombaseline: 文本底端对齐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

block1.子集没有设置宽，宽自适应父级的宽 （子集的 border + padding + content = content）2.父级没有设置高，高适应子集的高3.没有设置高，高由内容撑开

子集自适应父级的宽度:margin-left:auto; 水平居右margin:0 auto;水平居中margin:auto; 上下居中，水平居中

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