简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

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

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

P粉890456325
P粉890456325原创
2023年02月11日 10:16:44254浏览

实例演示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>
上一条：css的权重计算大小tag>class>id下一条：iframe元素应用/样式来源及优先级
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多