简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > CSS选择器的权重计算方式/盒模型与CSS常用单位
Blogger Information
Blog 27
fans 0
comment 0
visits 18802
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS选择器的权重计算方式/盒模型与CSS常用单位
茂林
Original
700 people have browsed it

CSS选择器的权重计算方式/盒模型与CSS常用单位

一、选择器的权重

1.1 选择器的概念
css 选择器：层叠样式表，由原子选择器（tag,class,id）构成

tag:标签选择器，相当于“个位”class:类选择器，相当于“十位”id:ID 选择器，相当于“百位”

1.2 选择器的权重
在 css 选择器上鼠标停留可以看权重
0,0,1：0 代表 id ,0 代表 class, 1 代表 tag

id > class > tag
!important 权重最大，不用于生产环境，常用于调试代码
id：用于表单，锚点，其它少用，会让代码失去弹性，尽量使用 class

当选择器“权重”相同时，最终样式与样式规则的位置相关，越靠后权重越大。

1.3 改变选择器的权重
1.3.1 改变标签(tag)数量，一个标签代表一个权重

h3 {  color: green;}/*只有一个h3 标签，权重表示为 0,0,1*/
body h3 {  color: blue;}/*有body,h3两个标签，权重表示为 0,0,2 意思是 id—>0 class—>0 tag—>2 (body h3)*/

1.3.2 增加 class

h3.cls {  color: red;}权重表示为 0,1,1 意思是 id—> 0 class—> 1 (cls) tag—> 1(h3)body h3.tls {  color: red;}权重表示为 0,1,2 意思是 id—>0 class—>1(tls) tag—>2(body h3)

1.3.3 增加 id

h3#title {  color: aqua;}/*权重表示为 1,0,1 意思是 id—>1(title) class—>0 tag—>1(h3)*/

1.3.4 id class tag 一起作用

h3.cls#title {  color: aqua;}/*权重表示为 1,1,1 意思是 id—>1(title) class—>1(cls) tag—>1(h3)*/

二、css盒模型

1.盒模型概念：
在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键，一切“皆盒子”。
1.1  盒子是页面中可见的”矩形区域”;
1.2  查看页面中的盒子:任意页面打开检查，查看在根元素<html>加入{outline:1px solid red}，代码可看。
check_box

2.盒模型五大属性

  1. width宽度

  2. height高度

  3. border边框

  4. padding内边距

  5. margin外边距
    box

3. border 边框

  • 可见属性

  • 可设置width,style,color.

  • 演示


    1. <h2>

    2.  CSS边框

    3. </h2>

  <style>    h2 {      width: 150px;      height: 100px;    }    /* 统一对h2标签设置边框的宽度(width),样式(solid),颜色(color)  */    h2 {      border: 1px solid blue;    }    /* 单独对h2标签的上边框设置宽度(width),样式(solid),颜色(color) */    h2 {      border-top-width: 2px;      border-top-style: dotted;      border-top-color: red;    }    H2 {      border-bottom: 2px solid green;      border-left: 3px solid blue;      border-right: 3px solid seagreen;    }  </style>

效果：border属性
4. padding 内边距 和  margin 外边距

  1. 不可见属性

  2. 仅可设置Width

  3. 大多数内置元素都有默认padding/margin

  4. 建议全部重置为 0,以方便自定义布局


    2. /* padding 内边距设置按顺时针的顺序设置  上  右  下  左 ， */

    3. /* 单值设置  上 下 左 右 的内边距一样 */

    4. h2 {

    5.   padding: 10px;

    6. }

    7. /* 双值设置 上 padding-top: 10px ===下 padding-bottom:10px  

    8.           左 padding-left: 20px ===右 padding-right: 20px */

    9. h2 {

    10.   padding: 10px 20px;

    11. }

    12. /* 三值设置 上 =5px  左 10px === 右 10px  下 =15px */

    13. h2 {

    14.   padding: 5px 10px 15px;

    15. }

    16. /*不论用三值/双值表示，第二个值 永远是代表左右*/

  6. 盒模型大小的计算方式

盒模型的计算方式

盒模型显示大小：206*124
宽度=150+30+20+3+3=206  高度=100+10+20+2+2=134
盒模型设置大小：150*100

6  box-sizing

  1. box-sizing: 设置盒模型计算边界

  2. content-box: 默认值,仅包括内容区

  3. border-box: 推荐值,宽高扩展到可视边框


    1. /* ----- box-sizing ------- */


    3. /* 默认盒大大小计算边界: 内容区 */

    4. box-sizing: content-box;


    6. /* 将盒大小计算边界扩展到:边框 */

    7. /* 源码中的大小 === 页面中显示大小 */

    8. /* 通过收缩内容区大小来实现的 */

    9. box-sizing: border-box;

7 通用初始化

* {  margin: 0;  padding: 0;  box-sizing: border-box;}

三、CSS常用单位

3.1 单位类型

  1. 绝对: 像素(px),不论元素用什么单位,浏览器统一转为 px

  2. 相对: 百分比(%),继承字号(em),根字号(rem),视口(vw/vh)

  3. 其它: 厘米(cm),毫米(mm),英寸(in=2.54cm=96px),磅(pt=1/72in)

  4. 移动端布局: rem + vw

3.2 字号单位(em/rem)

  1. 优点: font-size是可继承属性,可简化子元素单位设置

  2. 缺点: em与元素位置/层级相关,导致不统一,可用rem进行规范

  3. em: 自身或父级(变化)

  4. rem: 根元素(固定)

3.3 视口单位(vw/vh)

  1. 优点: 永远是当前可视窗口为参照物,动态调整元素大小,轻松实现响应式

  2. 缺点: 以窗口百分比为依据, 不够精细,通常与 rem 配合工作

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！