精华内容
下载资源
问答
我要提问
  • CSS盒子模型(示例代码)
    2021-06-13 11:23:05

    1-1 课程介绍

    1.盒子模型概念

    2.高和宽设置

    3.边框设置

    4.内边框设置

    5.外边框设置

    6.盒子的计算

    7.元素显示方式

    3-1 width属性

    宽度width：长度值、百分比、auto

    最大宽度max-width：长度值、百分比、auto

    最小宽度min-width：长度值、百分比、auto

    3-4 height属性

    高度height：长度值|百分比|auto

    最大高度max-height：长度值|百分比|auto

    最小高度min-height：长度值|百分比|auto

    说明：设置块级元素和替换元素的内容高度

    3-7 哪些元素可设置width和height属性

    1.块级元素 p div h1~h6 ul li ol dl dt dd 等

    2.替换元素 浏览器根据其标签的元素与属性来判断显示的具体内容

    img input textarea等

    1.width和height属性设置是内容的高和宽

    2.width和height属性设置对块级元素和替换元素有效

    3.max-height(width)/min-height(width)有兼容性问题，IE不支持。

    3-10 border 边框属性

    边框宽度border-width  · thin ·medium ·thick ·长度值

    边框颜色border-color

    边框样式border-style

    更多相关内容

  • css盒子模型

     2016-08-22 15:40:08
    通过这个css盒子模型的实战，更好的理解css盒子模型
    收起

  • Web实现：CSS盒模型实例代码

     2022-01-16 09:58:49
    盒模型给矩形设置边框线： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>案例</title> <style> .box{ /*设置矩形的宽*/ width:300px; ...

    盒模型给矩形设置边框线：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
<style>
  .box{
    /*设置矩形的宽*/
    width:300px;
    /*设置矩形的高*/
    height:150px;
    /*设置矩形的背景颜色*/
    background-color:white;
    /*设置矩形的边框*/
    border-width:2px;
    border-color:black;
    border-style:dashed;/*dashed表示虚线，solid表示实线*/
  }
</style>
</head>

<body>
  <!-- 定义一个div标签 -->
  <div class="box"></div>
</body>

</html>

    盒模型给矩形分别设置边框线：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
<style>
  .box{
    /*设置矩形的宽*/
    width:300px;
    /*设置矩形的高*/
    height:300px;
    /*设置矩形的背景颜色*/
    background-color:white;
    /*设置矩形的边框*/
    /*设置顶部边框*/
    border-top:2px solid black;
    /*设置右侧边框*/
    border-right:5px solid orange;
    /*设置底部边框*/
    border-bottom:10px dashed pink;
    /*设置左侧边框*/
    border-left:8px dashed red;
  }
</style>
</head>

<body>
  <!-- 定义一个div标签 -->
  <div class="box"></div>
</body>

</html>

    盒模型利用层叠性给矩形设置边框线：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
<style>
  .box{
    /*设置矩形的宽*/
    width:300px;
    /*设置矩形的高*/
    height:300px;
    /*设置矩形的背景颜色*/
    background-color:white;
    /*设置矩形的边框*/
    /*统一设置矩形的所有边框样式*/
    border:2px solid black;
    /*重新设置一个下边框的样式来层叠掉统一设置的边框的样式*/
    border-bottom:5px solid orange;
    /*下边框不显示，设置下边框的属性为none*/
    /*
    border-bottom:none;*/
  }
</style>
</head>

<body>
  <!-- 定义一个div标签 -->
  <div class="box"></div>
</body>

</html>

    盒模型给矩形设置圆角：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
<style>
  div {
    width: 200px;
    height: 200px;
    border-radius: 18px;
    border: 8px black solid ;
    background-color: violet;
  }
  /*
  圆角分开设置*/
  .box{
    width: 200px;
    height: 200px;
    background-color: violet;
    border-top-left-radius: 5px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 15px;
}
</style>
</head>

<body>
  <!-- 定义一个div标签 -->
  <div class="box"></div>
</body>

</html>

    盒模型给矩形设置阴影：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
<style>
  .box{
    width: 200px;
    height: 200px;
    border:1px solid #c4c4c4;
    /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    /*
    x偏移量:在x轴上移动，向右为正
    y偏移量:在y轴上移动，向下为正
    阴影模糊半径:就是边线的清晰度
    阴影扩散半径:就是向外伸展
    阴影颜色:就是矩形下面那个矩形的背景色。
    */
}

</style>
</head>

<body>
  <!-- 定义一个div标签 -->
  <div class="box"></div>
</body>

</html>

    盒模型无序列表行内块元素：

    //html部分：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <ul>
        <li class="current">首页</li>
        <li>优课达学院</li>
        <li>App下载</li>
    </ul>
</body>

</html>

    //css部分：
ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
  color: #333333;
  font-size: 16px;
  border: 1px solid #a4a4a4;
  display: inline-block;
}

ul li {
  /* 
        display:inline-block可以让一个块元素和行内元素在同一行显示
        具有想同属性的块元素也可以并排显示
    */
  display: inline-block;
  padding-left: 15px;
  padding-right: 15px;
  line-height: 60px;
}

ul li.current {
  color: #ffffff;
  background-color: #0091ff;
}

    盒模型阴影圆角元素：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="box">
        <h3 class="title">教学目标</h3>
        <p>统地学习数据体系：MySQL、Redis、Mongodb 并深入全栈能力包括 Vue 框架和 SSM
            框架（Spring、SpringMVC、MyBatis），掌握处理大数据的能力，可以独立完成复杂而真实的项目，比如美团外卖。</p>
    </div>
</body>

</html>

    h3,
p {
  margin: 0;
  padding: 0;
}/*p、h、ul、li等标签有自己默认的margin和padding，将默认值设为0后再布局，div不需要*/

.box {
  box-sizing: border-box;
  width: 280px;
  box-shadow: 0 1px 17px 0 rgba(0, 0, 0, 0.1);
  padding: 15px;
  border-radius: 7px;
}

.box .title {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
  text-align: center;
}

.box p {
  font-size: 12px;
  color: #2c2c2c;
  padding-top: 15px;
}

    盒模型外边距：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
        div {
            width: 300px;
            height: 100px;
            background-color: #D5E8D4;
            border: 1px solid #82B366;
        }
        .box{
          background-color: #F5F5F5;
          border: 1px solid #FF0818;
          margin-top: 20px;
          margin-bottom: 20px;/*两个盒子水平距离等于左边盒子的margin-right加上右边盒子的margin-left*/
        }           /*两个盒子垂直距离等于上边盒子的margin-bottom和下边盒子的margin-top两者的较大值，因此我们通常设置上边盒子的margin-bottom*/
    </style>
</head>

<body>
    <div></div>
    <div class="box"></div>
    <div></div>
</body>

</html>

    盒模型盒子左右居中：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
        .father{
          width:400px;
          height:200px;
          border: 1px solid #ccc;
        }

        .son{
          width:200px;
          height:100px;
          margin:0 auto;
          border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="father"> 
      <div class="son"></div>
    </div>
</body>

</html>

    盒模型外边距实例：

    <!DOCTYPE html>
<html lang="en">

<head>
<!--系统内置 start-->
<script type="text/javascript" src="//qgt-style.oss-cn-hangzhou.aliyuncs.com/commonJSCSS/console.js"></script>
<!--系统内置 end-->
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <!-- 图片链接地址为：https://gw.alicdn.com/bao/uploaded/i1/749716436/O1CN01OSPWqa1xPjeErSSzf_!!749716436-0-pixelsss.jpg -->
    
    
    <div class="first">
      <div class="second">
        <img src="https://gw.alicdn.com/bao/uploaded/i1/749716436/O1CN01OSPWqa1xPjeErSSzf_!!749716436-0-pixelsss.jpg">

      </div>
      <div class="third">
        人本春季红色帆布鞋男网红休闲布鞋潮鞋百搭运动小白鞋子男运动鞋
      </div>
      <div class="fourth">¥78.3</div>
    </div>
</body>

</html>

    .first{
  width: 232px;
  border: 1px solid #c4c4c4;
  
}
.second{
  width:185px;
  height:185px;  
  text-align: center;
  margin:0 auto;
  margin-top: 20px;
  margin-bottom: 8px;

}
.third{
  font-size: 14px;
  color:#333333;
  line-height: 20px;
  text-align: center;
  overflow: hidden;
  height: 40px;
  width:135px;
  margin: 0 auto;

}
.fourth{
  width: 100%;
  font-size: 18px;
  color: #ff0036;
  line-height: 18px;
  text-align: center;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 20px;
  
}
img{
  width:185px;
  height:185px;
}

    盒模型外边距实例2：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="box">
        <img src="https://gw.alicdn.com/bao/uploaded/i1/749716436/O1CN01OSPWqa1xPjeErSSzf_!!749716436-0-pixelsss.jpg">
        <div class="introduce">人本春季红色帆布鞋男网红休闲布鞋潮鞋百搭运动小白鞋子男运动鞋</div>
        <div class="price">¥78.3</div>
    </div>
</body>

</html>

    .box {
    width: 234px;
    border: 1px solid #c4c4c4;
    box-sizing: border-box;
    text-align: center;
    padding: 20px 0px;
}

img {
    width: 185px;
    height: 185px;
}

.introduce {
    width: 135px;
    height: 40px;
    font-size: 14px;
    color: #333;
    line-height: 20px;
    overflow: hidden;
    margin: 8px auto;
}

.price {
    font-size: 18px;
    color: #FF0036;
    line-height: 18px;
    margin: 10px auto 0px;
}

    盒模型行内元素块元素设置背景色：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
    .demo{
      width:300px;
      height:100px;
      background-color:#FFF2CC;
    }
    </style>
</head>

<body>
    <span class="demo">    
      这是一个span标签
    </span>
    <br><br>
    <div class="demo">
      这是一个div标签
    </div>
</body>

</html>

    盒模型行内元素转块元素：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
    .demo{
      /*将span标签转换成块*/
      display: block;
      width:300px;
      height:100px;
      background-color:#FFF2CC;
    }
    </style>
</head>

<body>
    <span class="demo">
      这是一个span标签
    </span>
</body>

</html>

    盒模型块元素转行内元素：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
    .demo{
      /*将div标签转换成行内元素*/
      display: inline;
      width:300px;
      height:100px;
      background-color:#FFF2CC;
    }
    </style>
</head>

<body>
    <div class="demo">
      这是一个div标签
    </div>
</body>

</html>

    盒模型控制元素显示和隐藏：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
        div {
            width: 300px;
            height: 100px;
            /* 使用margin属性让文字左右居中 */
            text-align: center;
            margin-bottom: 10px;
            background-color: #D5E8D4;
            /* 使用行高让文字上下居中 */
            line-height: 100px;
        }
        .box2{
          display: none;
        }
    </style>
</head>

<body>
    <div>盒子1</div>
    <div class="box2">盒子2</div>
    <div>盒子3</div>
</body>

</html>

    盒模型行内元素设置内边距：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
      a{
        background-color: #FFF2CC;
        padding: 20px;
      }
    </style>
</head>

<body>
    <a href="#">超链接</a>
</body>

</html>

    盒模型行内元素设置内边距实例：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
        a {
            background-color: #FFF2CC;
            padding: 20px;
        }
        div{
          width: 300px;
          height: 50px;
          background-color: #B0E3E6;
        }
    </style>
</head>

<body>
    <a href="#">超链接</a>
    <div></div>
</body>

</html>

    盒模型行内元素设置外边距：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
        div {
            width: 300px;
            height: 50px;
            background-color: #B0E3E6;
        }
        a{
          margin-left: 40px;
          margin-right: 30px;
          margin-top: 400px;
          margin-bottom: 400px;
        }
        span{
          margin-left: 20px;
        }
    </style>
</head>

<body>
    <a href="#">点击跳转到</a>
    <span>优课达</span>
    <div></div>
</body>

</html>

    盒模型空白折叠：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
        .box1 {
            width: 200px;
            height: 50px;
            display: inline-block;
            background-color: #FFF2CC;      /*两个行内块状元素即使不设置margin两个盒子之间也有空白，叫作空白折叠*/
        }                                   /*解决方法一：由于两个div标签写的时候有回车，去掉回车即可*/

        .box2 {
            width: 200px;
            height: 50px;
            display: inline-block;
            background-color: #B0E3E6;
        }
        .father{
          word-spacing: -50px;          /*方法二：给父元素添加word-spacing属性，表示单词和单词之间的距离，设为负数，一般小于-20px*/
            /*方法三：由于回车可以当作一个文字，就将文字大小设为0px，空隙可以消失*/        
          font-size: 0px; 
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>

</html>

    盒模型行内块元素：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <ul>
        <li>手机</li>
        <li>电视</li>
        <li>电脑</li>
        <li>路由器</li>
    </ul>
</body>

</html>

    li {
    list-style: none;
    width: 70px;
    line-height: 30px;
    color: #ffffff;
    font-size: 12px;
    display: inline-block;
    background-color: #783a3e;
    text-align: center;
}

ul {
    font-size: 0px;
    margin: 0px;
    padding: 0px;
}

    盒模型行内块元素实例：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <ul class="head">
        <li class="head-first">商品分类</li>
        <li class="head-second">天猫双十一</li>
    </ul>
    <ul class="list">
        <li><a href="#">大牌女装</a></li>
        <li><a href="#">运动户外</a></li>
        <li><a href="#">潮流男装</a></li>
        <li><a href="#">美妆洗护</a></li>
        <li><a href="#">母婴好货</a></li>
        <li><a href="#">数码家电</a></li>
        <li><a href="#">家具建材</a></li>
        <li><a href="#">全球尖货</a></li>
        <li><a href="#">苏宁易购</a></li>
        <li><a href="#">汽车用品</a></li>
    </ul>
</body>

</html>

    ul,
li {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.head {
    width: 200px;
    color: #ffffff;
    font-size: 0px;
}

.head li {
    display: inline-block;
    font-size: 12px;
    line-height: 36px;
    width: 100px;
    text-align: center;
}

.head .head-first {
    background-color: #C60A0A;
}

.head .head-second {
    background-color: #464444;
}

.list {
    width: 200px;
    box-sizing: border-box;
    padding-top: 29px;
    padding-bottom: 14px;
    background-color: #413F3F;
}

.list li {
    margin-bottom: 14px;
    padding-left: 24px;
    padding-right: 24px;
}

.list li a {
    display: block;
    border: 1px solid #cb0c10;
    border-radius: 10px;
    text-align: center;
    line-height: 29px;
    color: #ffffff;
    text-decoration: none;
}
    收起
    展开全文
    前端

  • CSS学习中|CSS盒子模型（重点学习！代码+样例）

     千次阅读 2020-07-15 18:00:40
    1.盒子模型（Box Model） 理解盒子模型： 可以把html页面中的布局元素看作一个矩形的盒子，她就是一个盛装内容的容器 如图，把content（内容）想象成一个网购的新手机，有宽（width）和高（height） 手机距...

    1.盒子模型（Box Model）

    理解盒子模型：

                           可以把html页面中的布局元素看作一个矩形的盒子，她就是一个盛装内容的容器

                           如图，把content（内容）想象成一个网购的新手机，有宽（width）和高（height）

                           手机距包装盒的距离为内边距（padding）

                           包装盒本身的宽度为边框（border）

                           如果有两个新手机（两个盒子），两个盒子之间的距离为外边距（margin）

                                      

                                 （图片摘自网络，侵删）

    2.盒子边框（border）

    属性：

             border-width   定义边框粗细、单位是px

             border-style    定义边框的样式

             border-color    定义边框的颜色

    其中边框的样式包括：

             none：默认没有边框 

             solid：实线边框

             举例：20px的实线边框（width和height200px）

            

             dashed：虚线边框

             举例：20px的虚线边框（width和height200px）

            

             dotted：点线边框

             举例：20px的点线边框（width和height200px）

            

    其中边框的颜色代码：

    <!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">
  <title>border</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      border-width: 20px;
      border-style: dotted;
      border-color: red;
    }
  </style>
</head>
<body>
  <div>盒子</div>
</body>
</html>

    样例：

           

    • 边框综合写法（简写）

    举例：（没有顺序，常见写法如下）

             boder：1px solid red；

    • 表格的细线边框

    通过表格的cellspacing=“0”,将单元格和单元格之间的距离设置为0

    举例:

           通过下方代码和样例，单元格和单元格直接有距离，这个距离就是因为边框1px和1px之间造成的距离

          现在我们想让这个距离变为0，也就是使cellspacing=“0”

          使用属性border-collapse: collapse;

    举例:（未使用border-collapse: collapse;）

    <!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">
  <title>边框粗细</title>
  <style>
  table,th,td {
    border: 1px solid blueviolet;
  }
  </style>
</head>
<body>
  <table>
    <caption>个人情况介绍</caption>
    <tr>
      <th>a</th>
      <th>19岁</th>
      <th>男</th>
      <th>大一</th>
    </tr>
    <tr>
        <td>b</td>
        <td>16岁</td>
        <td>男</td>
        <td>高中生</td>
      </tr>
      <tr>
          <td>b</td>
          <td>24岁</td>
          <td>女</td>
          <td>白领</td>
        </tr>
  </table>
</body>
</html>

    样例：

    举例:（使用border-collapse: collapse;）

    <!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">
  <title>边框粗细</title>
  <style>
  table,th,td {
    border: 1px solid blueviolet;
    border-collapse: collapse;
  }
  </style>
</head>
<body>
  <table>
    <caption>个人情况介绍</caption>
    <tr>
      <th>a</th>
      <th>19岁</th>
      <th>男</th>
      <th>大一</th>
    </tr>
    <tr>
        <td>b</td>
        <td>16岁</td>
        <td>男</td>
        <td>高中生</td>
      </tr>
      <tr>
          <td>b</td>
          <td>24岁</td>
          <td>女</td>
          <td>白领</td>
        </tr>
  </table>
</body>
</html>

    样例：

    3.内边距（padding）

    概念：

             指的是边框和内容之间的距离

    设置：

    padding-left       左内边距

    padding-right     右内边距

    padding-top       上内边距

    padding-bottom 下内边距

    注意：

             内边距会撑大盒子

    举例：

    <!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">
  <title>071502</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      padding-left: 10px;
      padding-top: 30px;
    }
  </style>
</head>
<body>
  <div>我爱吃烤鸡头</div>
</body>
</html>

    样例：（盒子被撑大了，这里用了FSCapture屏幕标尺工具）

    内边距简写

    1.给1个值

       padding：30px

      即上下左右全是30px内边距

    <!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">
  <title>071502</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      /* padding-left: 10px;
      padding-top: 30px; */
      /* 简写 */
      padding: 30px;
    }
  </style>
</head>
<body>
  <div>我爱吃烤鸡头</div>
</body>
</html>

    样例：F12模式下

    2.给2个值

        padding: 10px 30px;

       即上下10px，左右是30px，内边距

    3.给3个值

        padding: 10px 30px 80px;

       即上10px，左右30px，下80px，内边距

    4.给4个值

       padding：10px 20px 30px 80px；

      即上右下左依次的内边距（顺时针考虑即可）

    4.内盒尺寸的计算（元素实际大小）

                                      盒子实际的大小=内部宽度和高度+内边距+边框

    举例：

    看到一个div，量出他的尺寸是200px × 200px

    那么你可能会想到，给一个width 200px 再给一个height 200px 

    但这时候需要给内边距padding，比如给一个10px

    盒子被撑开了显示为220px，显然不满足我们200px的需求了

    所以这时候应该

    用width（200px）-多出的内边距（20px）=180px 

    height同理

    代码：

    <!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">
  <title>盒子大小</title>
  <style>
   div {
     width: 180px;
     height: 180px;
     padding: 10px;
     background-color: aquamarine;
   }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

    样例：

    特殊情况：如果盒子没有宽度，则padding不会撑开盒子（高度同理）

    举例：

    div中放入一个p标签，给p标签一个高度，不给宽度

    所以这时 p 的宽度就是父标签的宽度

    这时我们再给p一个padding值

    padding并没有被撑开盒子，只是盒子内容（文字部分）向右移动了30px

    那么再来看看给p标签一个width之后，盒子会不会被撑开呢

    样例：

    果然盒子被撑开了 

    4.外边距（Margin）

    基本同理于padding

    margin就是盒子于盒子之间的距离，或者是盒子距离四周的距离

    简写方式完全同于padding

    代码：

    <!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">
  <title>Margin</title>
  <style>
   div {
    width: 200px;
    height: 200px;
    margin-left: 300px;
    background-color: blue;
  }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

    样例：

    左侧300px的外边距

     

    块级盒子居中水平对齐（用Margin）

    代码：

    块级盒子居中必须要有宽度

    除了上图中的写法一

    还有两种写法

    第二种：

                margin ： auto；

    第三种：

                 margin ： 0 auto；

    清除元素的默认内外边距（重点）

    当我们简单写一句话时，会发现距离浏览器上侧和左侧都有一定距离，但我们实际上并没有设置

    我们发现原来默认给了一个margin：8px 因此留有空白

    那么如果我们不需要这个空白，就要清除元素默认的内外边距值

    代码：

    以后写css时需要先写这句话

    样例：

    现在就没有空白了

    另：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距（其实设置了也没用，所以干脆不设置）

    代码：

    <!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">
  <title>清除内外边距</title>
  <style>
  * {
    padding: 0;
    margin: 0;
  }
  span {
    background-color: aquamarine;
    margin: 20px;
  }
  </style>
</head>
<body>
  hello我爱吃烤鸡头<br />
  <span>hello我爱吃烤大肠</span>
</body>
</html>

    样例：

    虽然给span了一个上下左右的外边距值，但是只有左右显示了

    外边距的合并

    当上下相邻的两个块元素相遇时，取两个值中较大者，这种现象被成为相邻块元素垂直外边距的合并

                               （图片源于网络，侵删）

    举例：

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>外边距合并</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .top,
    .bottom {
      width: 200px;
      height: 200px;
      background-color: aquamarine;
    }
    .top {
      margin-bottom: 20px;
    }
    .bottom {
      background-color: blueviolet;
      margin-top: 100px;
    }
  </style>
</head>
<body>
  <div class="top"></div>
  <div class="bottom"></div>
</body>
</html>

    样例：看标尺得出 最后保留100px 因为100>20，保留100

    嵌套块元素垂直外边距的合并（塌陷）

    代码：

    在div中嵌套一个div

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>塌陷</title>
  <style>
    .father {
      width: 200px;
      height: 200px;
      background-color: chartreuse;
    }
    .son {
      width: 30px;
      height: 30px;
      background-color: chocolate;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>
</html>

    样例：

    这时我们想让里面的div向下移动50px

    这时考虑，给里面的div一个margin-top值就可以啦，让我们试一试

    代码:

    看下效果：

    效果不理想，整体下移了50px，我们想要移动的只是里面的div

    解决方案：(1)

    给父亲定义一个上边框

    代码：

    样例：

    解决方案：(2)

    给父元素一个padding-top值

    代码：

    样例：

    解决方案：(3)最优方案，上面两种会影响盒子大小

    给父元素添加overflow：hidden

    代码：

    样例：

     

    收起
    展开全文

  • css盒子模型图解

     2020-09-25 03:37:55
    主要介绍了css盒子模型的使用方法,需要的朋友可以参考下
    收起

  • css盒子模型详解加示例

     2020-09-25 04:18:21
    主要介绍了css盒子模型详解加示例,W3C组织建议把所有的网页上的对象都放在一个盒子中,在定义盒子宽高的时候，要考虑到内填充，边框，边界的存在,这里讲了一个盒子的构成、CSS盒子模型的属性，还有一些示例,需要的...
    收起

  • 【css】盒子模型(示例代码)

     2021-08-05 03:36:41
    1)盒子模型盒子构成·盒子中装载的内容--content·盒子内边距--padding·盒子边框--border·盒子外边距--margin2)盒子属性一般情况下，在使用盒子的时候，属性分为复合属性(顺序为上右下左)和单一属性在使用盒子的...

    1)盒子模型盒子构成

    ·盒子中装载的内容--content

    ·盒子内边距--padding

    ·盒子边框--border

    ·盒子外边距--margin

    e2b25a3dcb0bd9517c6c63d3792ac30b.png

    2)盒子属性

    一般情况下，在使用盒子的时候，属性分为复合属性(顺序为上右下左)和单一属性

    在使用盒子的时候：width、style、color缺一不可2.1)尺寸

    属性：

    ·width min-width max-width

    ·height min-height max-height

    参数：

    ：用长度值来定义高度。不允许负值

    ：用百分比来定义高度。不允许负值

    2.2)内边距

    属性：

    ·padding padding-top padding-right padding-bottom padding-left

    参数：

    ：用长度值来定义高度。不允许负值

    ：用百分比来定义高度。不允许负值

    2.3)外边距

    属性：

    margin margin-top margin-right margin-bottom margin-left

    参数:

    ：用长度值来定义高度。可以为负值

    ：用百分比来定义高度。可以为负值

    2.4)边框

    属性：

    border border-width border-style border-color

    border-top border-top-width border-top-style border-top-color

    border-right border-right-width border-right-style border-right-color

    border-left border-left-width border-left-style border-left-color

    边框的style一般使用2种：

    dotted：点状轮廓

    dashed：虚线轮廓

    solid：实线轮廓

    double：双线轮廓。两条单线与其间隔的和等于指定的border-width值

    本文出自 “孔小发爱吃鱼” 博客，谢绝转载！

    收起
    展开全文

  • CSS之盒子模型与背景属性————每天一遍小知识

     2021-01-08 09:00:38
    盒子模型与背景属性一.盒子模型1.介绍2. 元素的总宽度和总高度二.自定义边框——border1.基本设置2.边框宽度——Border Width3.边框颜色——Border Color4.边框样式——Border style5.CSS的边宽和高度——width ...
    收起

  • CSS 理解盒子模型

     2020-09-25 13:11:27
    盒子模型，是XHTML+CSS布局页面中的核心！要想学会用CSS布局页面，就首先要理解盒子模型！
    收起

  • HTML/CSS编写盒子模型

     2021-06-08 09:52:20
    源代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=...
    收起

  • CSS盒子模型

     2022-02-24 19:20:51
    CSS盒子模型1. 盒子模型的介绍1.1 盒子模型的介绍2. 内容区域的宽度和高度2.1 内容的宽度和高度3. 边框（ border ）3.1 边框（border） - 单个属性3.2 边框（border） - 连写形式3.3 边框（border） - 单方向设置3.4...
    收起
    html

  • CSS网页设计标准教程第4章CSS盒子模型 (2)_网页设计css盒子模型代码

     2020-05-11 20:20:23
    ? 设置2个属性值时前者为上下padding的值后者为左右padding的值 ? 设置3个属性值时第1个为上padding的值第2个为左右padding的值第3个为下padding的值 ? 设置4个属性值时按照顺时针方向依次为上右下左padding的值 ...
    收起

  • 简单css盒子模型代码

     千次阅读 2018-11-29 18:15:17
    Document header(.logo+nav)> mian article section section section aside ul>li ul>li ul>li ...代码有点冗杂，多多指。
    收起

  • CSS盒子模型总结

     万次阅读 多人点赞 2018-09-27 20:34:58
    在使用CSS进行网页布局时，我们一定离不开的一个东西————盒子模型。盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是HTML元素的内容。或者说，每一个可见的 HTML 元素都是一个盒子，下面所说的盒子都...
    收起
    圆角

  • CSS盒子模型本教学课件_css盒子模型并列

     2020-08-15 21:51:52
    CSS盒子模型;10.1 盒子BOX的基本概念;CSS盒子模型;在HTML文档中每个元素都有盒子模型所以说在Web世界里特别是页面布局盒子模型无处不在这个盒子就是一个矩形的块可以对其进行幅面边框和边距的设置;10.1.1 盒子的基本...
    收起

  • 网页设计基础 CSS盒子模型 第4章 CSS盒子模型_补充案例.doc

     2021-08-04 05:16:30
    需求分析制作网页时，经常需要给盒子设置边框，以修饰和美化元素的显示样式，常用方法如下：对盒子的四条边定义不同宽度、颜色、样式的边框盒子背景颜色和边框的合理搭配案例分析效果如图4-1所示。顶部导...
    收起

  • CSS部分-CSS盒子模型练习

     2022-02-07 22:02:11
    CSS盒子模型练习 案例一： 效果： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>产品评价</title> <style> * { margin: 0; ...
    收起
    html

  • CSS盒子模型知识总结

     2020-12-29 00:15:32
    本章内容：知识点一：盒子模型：Box Model，由有内容(element content)、填充(padding)、边框(border)、边界(margin)这四个组成部分，这四个部分都包含有top/right/bottom/left四个组成部分。从w3school上下载的图片...
    收起

  • CSS盒子模型详解

     万次阅读 多人点赞 2019-06-19 00:54:59
    CSS盒子模型 一、什么是盒子模型 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒...
    收起

  • CSS--盒子模型小练习示例代码

     千次阅读 2020-03-06 17:59:01
    完成下面的盒子 示例代码如下： <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &...
    收起

  • CSS盒子模型/页面布局

     2022-03-20 22:38:01
    CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距、和实际内容 1.3边款（border） border可以设置元素的边款。边款有三部分组成：边款宽度（粗细）、边款样式、边框颜色 语法： ...
    收起
    前端

  • CSS3盒子模型-盒子模型的布局

     2021-11-27 17:31:38
    盒子模型布局稳定性 开始学习盒子模型，我们初学者最大的困惑就是， 分不清内外边距的使用，什么情况下使用内边距，什么情况下使用外边距？答案是： 其实他们大部分情况下是可以混用的。 就是说，你用内边距也可以...
    收起

  • web前端之CSS盒子模型

     2021-05-06 18:41:20
    盒子模型 前言 盒子模型，英文即box model。无论是div、span、还是a都是盒子。 但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。 盒子...
    收起

  • CSS盒子模型理解以及使用

     千次阅读 2019-10-17 21:56:50
    盒子模型对于css的作用可以用下面两个图来比喻 二、理解以及使用 盒子模型的类型分为两类①：W3C标准的盒子模型（标准盒子模型），表示方法box-sizing：content-box，②另一种是IE盒子模型（怪异盒子模型）,...
    收起

  • CSS盒子模型与自适应

     2021-06-03 11:28:12
    在使用CSS布局时，我们一定要用的就是盒子模型，这个盒子就是用来装我们要使用到的元素的。盒子模式的示意图如下：
    收起
    html

  • CSS总结-盒子模型

     2020-12-29 00:15:33
    本章内容：知识点一：盒子模型：Box Model，由有内容(element content)、填充(padding)、边框(border)、边界(margin)这四个组成部分，这四个部分都包含有top/right/bottom/left四个组成部分。从w3school上下载的图片...
    收起

  • css使两个盒子并列_css盒子模型（框模型）

     千次阅读 2020-11-20 09:07:45
    简介：css处理网页时，它认为每个...盒子模型一个盒子我们会分成下面几个部分：内容区（content）内边距（padding）边框（border）外边距（margin）边框1.通过width和height实现一个100*100px的盒子2.为盒子设置边框...
    收起

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 31,597
精华内容 12,638
热门标签
关键字：

css盒子模型完整代码