Community Learn Tools Library Leisure
search
English
Home > List of blog posts > HTML 学习
Blogger Information
Blog 12
fans 0
comment 0
visits 5455
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
HTML 学习
。。。
Original
427 people have browsed it

HTML 学习

1.盒模型

1.1 盒模型属性介绍

  • ‘width’:内容的宽度

  • ‘height’:内容的高度

  • ‘padding’:内边距，边框到内容的距离

  • ‘border’:边框，就是指的盒子的宽度

  • ‘margin’:外边距，盒子边框到附近最近盒子的距离

  • ‘box-sizing:border-box’: padding 和 border 的值就不会在影响元素的宽高，相当于把 padding 和 border 的值都算在 content 里

1.2 盒模型属性演示

  • 例子

    效果演示1

  • 语法

  1.   <style>
  2.       .box1 {
  3.         width: 200px;
  4.         height: 200px;
  5.         background-color: chartreuse;
  6.         border: 2px dotted red;
  7.         padding: 10px;
  8.         text-align: center;
  9.         margin: 50px 20px 50px 20px;
  10.         box-sizing: border-box;
  11.       }
  12.       .box2 {
  13.         width: 100px;
  14.         height: 100px;
  15.         background-color: goldenrod;
  16.         border: 3px solid red;
  17.         padding: 20px;
  18.         text-align: center;
  19.         margin: 20px 20px;
  20.         background-clip: content-box;
  21.       }
  22.     </style>
  23.   </head>
  24.   <body>
  25.     <div class="box1">盒子 box1</div>
  26.     <div class="box2">盒子 box2</div>
  27.   </body>

2.媒体查询

2.1 媒体查询介绍

@media 查询，你可以针对不同的媒体类型定义不同的样式。

2.2 媒体查询演示

  • 例子
    窗口的宽度 D 大于 300
    效果演示3
    窗口的宽度小于 300
    效果演示2

  • 语法

  1. <style>
  2. body {
  3.     background-color:lightgreen;
  4. }
  6. @media screen and (max-width: 300px) {
  7.     body {
  8.         background-color:lightblue;
  9.     }
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <p>浏览器窗口的宽度小于 300 像素时，背景颜色会变成淡蓝，否则是淡绿色。</p>
  16. </body>

3. rem 和 em

3.1 rem 和 em 介绍

  • rem 和 em 都是元素的字体大小来转化成 px 值
  • rem 是根据 根元素的字体大小转化 px 值;根元素的字体大小默认为 16px
  • em 是根据 父元素的字体大小转化 px 值;

3.2 rem 和 em 演示

  • 例子
    窗口的宽度 D 大于 300
    效果演示4

  • 语法

  1. <style>
  3.       .box1 {
  4.         font-size: 2rem;
  5.       }
  6.       .box2 {
  7.         font-size: 16px;
  8.       }
  10.       .box4 {
  11.         font-size: 32px;
  12.       }
  13.       .span1 {
  14.         font-size: 1em;
  15.       }
  16.       .span2 {
  17.         font-size: 2em;
  18.       }
  19.       .span3 {
  20.         font-size: 64px;
  21.       }
  22.     </style>
  23.   </head>
  24.   <body>
  25.     <div class="box1">2rem = 32px</div>
  26.     <div class="box2">1rem = 16px</div>
  27.     <div class="box3">16px</div>
  29.     <div class="box4">
  30.       <span class="span1"> 1em = 32px </span>
  31.     </div>
  33.     <div class="box4">
  34.       <span class="span2"> 2em = 64px </span>
  35.     </div>
  37.     <div class="box4">
  38.       <span class="span3"> 64px </span>
  39.     </div>
  40.   </body>
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