您的位置: 首页  >  IT文章  >  CSS基础选择器(选择器的优先级)，CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成，盒模型-block，盒模型布局

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

分类: IT文章 • 2022-05-26 21:50:36

CSS基础选择器

（1）id选择器:   #       =》  标签拥有   属性

<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- 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
    1.子集没有设置宽，宽自适应父级的宽 （子集的 border + padding + content = content）
    2.父级没有设置高，高适应子集的高
    3.没有设置高，高由内容撑开
子集自适应父级的宽度:
    margin-left:auto;   水平居右
    margin:0 auto;      水平居中
    margin:auto;        上下居中，水平居中


 








															

																					

								

									相关推荐