博客列表 >HTML与CSS基础知识点总结(HTML盒模型)—2019年1月14日

HTML与CSS基础知识点总结(HTML盒模型)—2019年1月14日

笑颜常开的博客
笑颜常开的博客原创
2019年02月14日 18:01:50603浏览

盒模型的组成,由里向外content,padding,border,margin.

捕获.PNG

 从上面两图不难看出在标准模型中,盒模型的宽高只是内容(content)的宽高。

实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- <link rel="stylesheet" href="static/css/style03.css"> -->
  <style media="screen">
  .box1 {
    width: 200px;
    height: 200px;
    background-color: lightblue;
    /* 上右下左 */
    /* padding-top:20px;
    padding-right:30px;
    padding-bottom:40px;
    padding-left:50px; */
    /* 上右下左,简写 */
    padding: 20px 30px 40px 50px;
    /* 左右相等30,上下不相等20、40,可以这样简写 */
    padding: 20px 30px 40px;
    /* 上下也相等40px */
    padding: 40px 30px;
    /* 上边框 */
    /* border-top-width: 10px;
    border-top-style: solid;
    border-top-color: red; */
    /* 右边框 */
    /* border-right-width: 10px;
    border-right-style: dashed;
    border-right-color: green; */
    /* 下边框 */
    /* border-bottom-width: 10px;
    border-bottom-style: dotted;
    border-bottom-color: blue; */
    /* 左边框 */
    /* border-left-width: 10px;
    border-left-style: double;
    border-left-color: black; */
    /* 简写 */
    /* border-top: 10px solid red;
    border-right: 10px solid green;
    border-bottom:10px dotted blue;
    border-left:10px dotted blue; */
    border: 10px solid red;
  }

  .box2 {
    height: inherit;
    background-color: wheat;
  }
  </style>
  <title>一切皆盒子</title>
</head>
<body>
  <div class="box1">
    <div class="box2"></div>
  </div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

    运行结果图片

捕获.PNG

    手写代码

捕获.PNG

    总结

HTML盒子模型分为三个层级:

  1、内容级
  (1)width
  (2)height
  (3)background-color(默认透明)
  2、元素级
  (1)包括内容级(width+height+background)
  (2)内边距:padding
  (3)边框:border
  3、位置级margin,决定当前盒子与其它盒子之间的位置与关系 



声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议