简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 实例演示css选择器权重的计算方式 盒模型常用属性与盒大小计算方式 css常用单位(em,rem,vw/vh)
Blogger Information
Blog 16
fans 0
comment 1
visits 5756
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常用单位(em,rem,vw/vh)
P粉890456325
Original
259 people have browsed it

实例演示css选择器权重的计算方式 盒模型常用属性与盒大小计算方式 css常用单位(em,rem,vw/vh)

笔记1

css是层叠样式表
当选择器权重相同时，最终样式与样式规则的位置相关
500 5百位 050十位 005个位
百位权重100 十位权重10 个位权重1
500
5在个位 005 = 0100+010+51
5在十位 050 = 0100+510+01
5在百位 500 = 5100+010+0*1

css选择器 由原子选择器构成
number string bool 基本类型
tag 标签选择器 相当于个位
class 类选择器 相当于十位
id ID选择器 相当于百位

0，0，1 id=0 class=0 tag=1
增加数量 h2 001 < body h2 002 < h2.title
012 body h2.title 0id 1class 2tag
header 100权重极高

场景 渐进式UI设计
.table.hover 加tbody tr:hover或加:not(thead tr){
冗余规则 !important和ID 尽量调试环境中使用
id用于表单控件与锚点中使用
border是有边框及视觉效果真实占用页面的空间
outline框轮廓线及视觉效果之外不会占用空间
可以用于观察元素的外观

  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>Document</title>
  8.     <link rel="stylesheet" href="css/dome.css">
  9. </head>
  10. <body>
  11.     <h2>php中文网</h2>
  12.     <h2 class="title" id="header">php中文网</h2>
  13.     <table class="table title theadBgColor hover">
  14.         <caption>成绩表</caption>
  15.         <thead>
  16.         <tr>
  17.             <th>ID</th>
  18.             <th>姓名</th>
  19.             <th>课程</th>
  20.             <th>成绩</th>
  21.         </tr>
  22.         </thead>
  23.         <tbody>
  24.             <tr>
  25.                 <td>A001</td>
  26.                 <td>大朗</td>
  27.                 <td>HTML</td>
  28.                 <td>60</td>
  29.             </tr>
  30.             <tr>
  31.                 <td>A02</td>
  32.                 <td>二郎</td>
  33.                 <td>js</td>
  34.                 <td>70</td>
  35.             </tr>
  36.             <tr>
  37.                 <td>B01</td>
  38.                 <td>金华</td>
  39.                 <td>php</td>
  40.                 <td>88</td>
  41.             </tr>
  42.             <tr>
  43.                 <td>B02</td>
  44.                 <td>阿花</td>
  45.                 <td>CSS</td>
  46.                 <td>99</td>
  47.             </tr>
  48.         </tbody>
  49.     </table>
  50. </body>
  51. </html>

css样式

  1. h2{
  2.     color: green;
  3. }
  4. h2{
  5.     color: blue;
  6. }
  8. #header{
  9.     color:#4ff247;
  10. }
  11. h2.title{
  12.     color: #1d06f4;
  13. }
  14. body h2.title{
  15.     color: #f4c806;
  16. }
  17. body h2{
  18.     color: red;
  19. }
  20. h2{
  21.     color: green;
  22. }
  23. /* 表格的基本样式 */
  24. .table{
  25.     width: 80%;
  26.     border: 1px solid #000;
  27.     border-collapse: collapse;
  28.     text-align: center;
  29.     margin: auto;
  30. }
  31. .table th,
  32. .table td{
  33.     border: 1px solid #000;
  34.     padding: 3px 5px;
  35. }
  36. /* 表格标题 */
  37. .table.title caption{
  38.     margin-bottom:  10px;
  39.     font-size: large;
  40.     font-weight: bold;
  42. }
  43. .table.theadBgColor thead{
  44.     background-color: lightgreen;
  45.     /* background-color: violet; */
  46. }
  48. .table.hover tr:hover:not(thead tr){
  49.     background-color: #ddd;
  50.     cursor: pointer;
  51. }
  52. /* */
  53. .table.theadBgColor thead{
  54.     background-color: violet;
  55. }
  56. table.table.theadBgColor thead{
  57.     background-color: blue;
  58. }
  59. .table.theadBgColor thead{
  60.     background-color: lightcoral !important;
  61.     background-color: red !important;
  62. }

笔记2

网页当中一切都是盒子
盒子是页面中可见的矩形区域
php.cn <html> {outline: 1px solid red;}
五大属性
1width宽
2height高
3padding内边距
4border边框
5margin外边距
border可见属性 可见设置 width style color
padding/margin
不可见属性 仅可设置width 大多数内置元素都有默认的padding/margin
建议全部重置为0以便自定义布局
border top上 bottom下 left左 right右 3px边框宽度 solid实线 color颜色
边框默认的就是内部文本的颜色
padding看不见边框所以需要先设置背景色裁切
background-clip: content-box;
padding是上右下左顺时针方向
1 左10=右10 上5！=下15 用三值表示
2 左10=右10 上15=下15 用双值表示
不论是三值还是双值第二个位置上永远都是左右
页面中显示盒子大小 174134
源码中是150100
标准计算 150+20+4=174
显示大小不等于源码中的大小
box-sizing 重新计算盒模型的边界
默认盒大小计算边界 内容区
将盒大小计算边界扩展到边框
源码中的大小===页面中显示大小
通过收缩内容区大小类实现的

通用初始化

不管css中使用了什么单位 浏览器统统转为px像素
1em===16px 2em===32px 20/16=1.25em ===2px
font-size 可继承属性
1em===16px 2em===32px =40 不是32px
因为em是一个变量 根据位置变化 优先级由内向外逐级降低
em静态化解决方案 让em与位置无关 只和一个固定的元素字号相关
rem只和根元素字号相关 r是root 让rem来代替em
默认 1rem==1em==1px
但是rem永远与根子号保持一致
究竟用哪个单位呢? em文本大小 rem元素大小
如果元素使用了rem,那它是相对于个固定的”根字号”来计算大小,绝对路径
如果元素使用em,那它相对于”自身或父级元素的字号”来计算大小,相对路径
1vw==1/100% =vw==视口宽度===可视窗口==viewport width
1vh==1/100% =vh==视口高度可视窗口==viewport height
min-height:calc(100vh - 5vh -5vh -1vh -1vh);
要减去页眉页脚的5vh和上下1vh的margin
calc（）运算符两边需要加空格 /和*不需要加空格+和-需要加空格

  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>Document</title>
  8.     <link rel="stylesheet" href="css/dome.css">
  9. </head>
  10. <body>
  11.     <div class="box">box</div>
  12.     <div style="font-size: 16px;">hello</div>
  13.     <div  style="font-size: 1em;">world</div>
  14.     <hr />
  15.     <div style="font-size: 2em;">
  16.         <div>hello</div>
  17.         <div>world</div>
  18.     </div>
  19.     <hr />
  20.     <div style="font-size: 1.25em;">
  21.         <div style="font-size: 2em;">hello</div>
  22.         <div>world</div>
  23.     </div>
  24.     <hr />
  25.     <div style="font-size: 1.25rem;">
  26.         <div style="font-size: 2rem;">hello</div>
  27.         <div>world</div>
  28.     </div>
  29.     <div class="box1">box</div>
  30. </body>
  31. </html>

css样式

  2. .box{
  3.     width:150px ;
  4.     height: 100px;
  5.     /* border: #000 solid 3px; */
  6.     border: 3px solid;
  7.     /* padding: 5px 10px 15px 20px; */
  8.     background-color: red;
  9.     background-clip: content-box;
  10.     padding: 15px 10px;
  11.     box-sizing: content-box;
  12.     box-sizing: border-box;
  13. }
  14. *{
  15.     margin: 0;
  16.     padding: 0;
  17.     box-sizing: border-box;
  18. }
  20. html{
  21.     font-size: 16px;
  22.     font-size: 1rem;
  23.     font-size: 1em;
  24.     width: 100vw;
  25.     height: 100vh;
  26. }
  28. .box1{
  29.     width: 50vw;
  30.     height: 10vh;
  31.     background-color: yellow;
  32. }

  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>Document</title>
  8.     <!-- <link rel="stylesheet" href="css/dome.css"> -->
  9.     <style>
  10.         *{
  11.             margin: 0;
  12.             padding: 0;
  13.             box-sizing: border-box;
  14. }
  15.         body > *{
  16.             outline:1px solid ;
  17.             background-color: lightcyan;
  18.         }
  19.         header,footer{
  20.             width: 100vw;
  21.             height: 5vh;
  22.         }
  23.         main{
  24.             background-color: violet;
  25.             width: 100vw;
  26.             margin: 1vh 0;
  27.             min-height: 100vh;
  28.             min-height:calc(100vh - 5vh - 5vh - 1vh - 1vh);
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34.     <header>header</header>
  35.     <main>main</main>
  36.     <footer>footer</footer>
  37. </body>
  38. </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！