简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > CSS入门：选择器权重计算与初识盒模型
Blogger Information
Blog 7
fans 0
comment 0
visits 2768
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入门：选择器权重计算与初识盒模型
风残念北的博客
Original
474 people have browsed it

1.选择器权重计算

代码演示

  1. /* 1.标签选择器，权重为（0,0,1），当有新的标签增加时会在个位递增，变为（0,0,2） */
  2. p {
  3.     color: red;
  4. }
  5. /* 2.class选择器，权重为（0,1，0），当有新的类选择器增加时会在十位递增，变为（0,2,0） */
  6. .title {
  7.     color: purple;
  8. }
  9. /* 3.id选择器，权重为（1,0，0），当有新的类选择器增加时会在百位递增，变为（2,0,0） */
  10. #title {
  11.     color: blue;
  12. }
  13. /* 4.增加权重，此时权重变为（0,1,1） */
  14. .box p{
  15.     color: lightcoral;
  16. }

效果演示

选择器权重计算

2.盒模型常用属性

代码演示

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>盒模型常用属性</title>
  8.     <style>
  9.         .box {
  10.             width: 150px;
  11.             height: 100px;
  12.             /* 1.padding:内边距 */
  13.             /* padding属性值由上顺时针赋予，分别为上，右，下，左。左=右，上!=下 */
  14.             /* 一值写法，上下左右全相等 */
  15.             /* padding: 30px; */
  16.             /* 二值写法 */
  17.             /* padding: 50px 30px; */
  18.             /* 三值写法,分别是上，左右，下 */
  19.             /* padding: 20px 30px 40px; */
  20.             /* 四值写法：上，右，下，左 */
  21.             padding: 10px 20px 15px 10px;
  23.             /* 2.border：边框 */
  24.             /* border属性由三个值决定，分别是：边框大小，颜色，边框种类，其中边框颜色可以不写默认为黑色 */
  25.             border: 3px solid black;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <div class="box">PHP中文网</div>
  31. </body>
  32. </html>

效果演示

盒模型常用属性

3.盒大小计算方式

盒大小计算方式：宽度计算是：内容宽度+左右padding+左右border 高度计算是：内容高度+上下padding+上下border

例如
盒大小计算方式

4.css常用单位

em

1em=16px,从内到外，根据相邻的元素决定

rem

1rem=1em=16px，根据根元素的自号决定

vw和vh

代码演示

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  14.         html {
  15.             width: 100vw;
  16.             height: 100vh;
  17.         }
  18.         body > * {
  19.             background-color: pink;
  20.             outline: 1px solid;
  21.         }
  22.         header,footer {
  23.             width: 100vw;
  24.             height: 5vh;
  25.         }
  26.         main {
  27.             background-color: aqua;
  28.             width: 100vw;
  29.             min-height: calc(100vh - 5vh - 5vh - 3px - 3px);
  30.             margin: 3px 0;
  31.         }
  33.     </style>
  34. </head>
  35. <body>
  36.     <header>header</header>
  37.     <main>main</main>
  38.     <footer>footer</footer>
  39. </body>
  40. </html>

效果演示

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：总体没什么问题，完成的不错，继续加油
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！