Home > List of blog posts > 实例演示盒模型常用属性、演示媒体查询、演示em和rem的用法

Blogger Information

Blog 6

fans 0

comment 0

visits 3061

Special Recommendation

More>

Related recommendations

一、实例演示盒模型常用属性注意box-sizing的用法

知识点

box-sizing的属性值：
content-box:任何增加的内边距和边框宽度都会增加到最终绘制出来的元素宽度中，如果设置的宽高为200px，那么只是内容区域为200px的范围；
border-box:告诉浏览器，任何增加的内边距和边框宽度都不会超出设置的元素宽高。
padding: 内边距；
设置格式上px，右px，下px，左px 按顺时针方向

三值写法：padding{10px 20px 5px}
实际解析为：padding{10px 20px 5px 20px}

二值写法：padding{10px 20px}
解析为：padding{10px 20px 10px 20px}
margin: 外边距
设置格式：margin{10px 20px 5px 30px}

实例演示代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>实例演示盒模型</title>
  <style>
    @import 'static/box.css';
  </style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>
</html>
<style>
*{
  margin: 0;
  padding: 0;
  outline: none;
}
.box1{
  width: 200px;
  height: 200px;
  background-color: blanchedalmond;
  box-sizing: content-box;
  border: 5px solid #000;
  margin: 20px 10px 10px 50px;
  padding: 20px 20px 20px 20px;
  /* 
  box-sizing的属性值：
  content-box:任何增加的内边距和边框宽度都会增加到最终绘制出来的元素宽度中，如果设置的宽高为200px，那么只是内容区域为200px的范围；
  border-box:告诉浏览器，任何增加的内边距和边框宽度都不会超出设置的元素宽高。  
  */
}
.box2{
  width: 200px;
  height: 200px;
  background-color: blueviolet;
  border:5px solid #254;
  box-sizing: border-box;
  padding: 10px 10px 20px 20px;
  margin: 20px;
  /*增加的内边距和边框不超过元素宽高*/
}
</style>

预览图：

二、实例演示媒体查询

语法：

<style>
  @media (max-width:500px){}
  /* max-width:视口小于多少时显示样式
  min-width:视口大于多少时显示样式
  (min-width:x) and (max-width:y)大于x小于Y */
</style>

案例源码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>实例演示媒体查询</title>
  <style>
    /* 当视口尺寸小于640px时 */
    @media (max-width:640px) {
      .box{
        background-color: green;
        width: 200px;
        height: 200px;
        font-size: 20px;
        color: #fff;
      }
    }
        /* 当视口尺寸大于641小于768时 */
    @media (min-width:641px) and (max-width:768px) {
      .box{
        background-color: blueviolet;
        width: 300px;
        height: 300px;
        font-size: 20px;
        color: #fff;
      }
    }
  </style>
</head>
<body>
<div class="box">
  媒体查询
</div>
</body>
</html>

当视口尺寸大于641小于768时的预览图片：
视口尺寸小于640px时的预览图片：

实例演示em rem用法并说出之间差别

em和rem解释：

em：当前默认元素的字号，默认是16px；em跟随其设置字号的父元素而变化；
rem：根元素的默认字号，默认是16px；rem不随其父元素设置的字号而变化，如若修改只能通过修改html根元素的字号来修改。

演示代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>单位em、rem理解</title>
  <style>
    .box1{
      font-size: 1em;
    }
    .box2{
      font-size: 1rem;
    }
  </style>
</head>
<body>
  <div>
    <h1 class="box1">Hello</h1>
    <h1 class="box2">World</h1>
  </div>
</body>
</html>

默认情况下查看box1文字大小为16px，box2的字号大小也是16px，如下图：
当把box1、box2的父元素设置字号为10px后发现，设置1em的box1字号已经改变，而设置1rem的box2字号没有改变如下图：
修改html根元素的字号为20px后，再次查看box2的字号已经变化，如下图：

Correcting teacher：

PHPz

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

markdown语法练习及html标签功能

2022-03-18 16:59:07

一、实例演示盒模型常用属性 注意box-sizing的用法

知识点

二、实例演示媒体查询

实例演示em rem用法 并说出之间差别

em和rem解释：

一、实例演示盒模型常用属性注意box-sizing的用法

实例演示em rem用法并说出之间差别