CSS-Box Model

最新推荐文章于 2024-11-11 23:45:17 发布

MSL7141

最新推荐文章于 2024-11-11 23:45:17 发布

阅读量113

点赞数

分类专栏：前端基础文章标签： css html html5

本文链接：https://blog.csdn.net/MSL7141/article/details/120414023

版权

前端基础专栏收录该内容

17 篇文章 0 订阅

订阅专栏

盒子模型：把页面布局元素看作是一个矩形的盒子，盛装内容的容器。

css盒子模型封装HTML元素，包括：边框、外边距、内边距、和实际内容

边框border

边框的组成部分：边框粗细，边框样式，边框颜色

基本语法

border:border-width||border-style||border-color
简写如下
border:1px solid red;(没有顺序)

常见的边框样式：solid实线边框，dashed虚线边框 dotted点线边框

border-top:1px  dotted red;/*只设定上边框*/

border-top
border-bottom
border-right
border-left

表格的细线边框

border-collapse属于控制浏览器绘制表格边框的方式，它控制相邻单元格的边框

语法

border-collapse:collapse;/*表示相邻边框合并在一起*/

内边距padding

padding属性设置边框与内容之间的距离，单位px

padding的复合性

示例

<!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>Document</title>
    <style>
        .nav {
            height: 40px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;
            line-height: 40px;


        }

        .nav a {
            height: 40px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
            display: inline-block;
            padding: 0 20px;

        }

        .nav a:hover {
            background-color: #eee;
            color: #ff8500;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">新浪导航</a>
        <a href="#">手机客户端</a>
        <a href="#">PC端</a>
        <a href="#">微博</a>
    </div>
</body>

</html>

当盒子没有指定宽度width或者height属性时，padding不会撑开盒子的宽度

外边距（margin）

margin的复合属性与padding完全一致

外边距的典型应用：

外边距可以让块级盒子水平居中的条件：盒子必须指定宽度，盒子左右的外边距都设置auto

.header{width:900px;margin:0 auto;}

块级元素水平居中：

margin-eft:auto;margin-right:auto;

margin:auto;

margin:0 auto;

行内块元素或者行元素水平居中

text-align:center

外边距合并：使用margin定义块元素的垂直边距时，可能会出现外边距的合并。

嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素是外边同时子元素也有上外边距，此时父元素会塌陷于较大的外边距值。

解决方法：可以为父元素定义边框/内边框/overflow：hidden；

清除内外边距

清除网页元素的内外边距语法

*{
padding：0；
margin：0；
}

<!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>Document</title>
    <style>
        .nav {
            height: 40px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;
            line-height: 40px;


        }

        .box {
            width:298px;
            height: 415px;
            background-color:pink;
            margin: 100px auto;
        }
       .box img{
           width: 100%;
       }
       .box .review{
           padding:0 28px;
           height: 70px;
           font-size:15px;
           margin-top:30px;

       }
       .box .appraise{
           font-size:12px;
           color: #bbb obobo;
           margin-top: 20px;
           padding: 0 28px;
       }
       .info{
           font-size:14px;
           margin-top: 15px;
           padding: 0 28;

       }
       .info h4{
           display:inline-block;
           font-weight:400;
           color: rgb(10, 9, 9);
           padding: 28px 28px;
       }
       .info span{
           color: red;
       }
       info em{
           font-style:normal;
           color:#ebe4e0;
           margin:0 20px 0 15px;
       }
    </style>
</head>

<body>
    
    </div>
    <div class="box">
        <img src="image/pictrue4.jpg" alt="中秋">
        <p class="review">今天吃了两个月饼，分别是紫薯馅的和板栗馅的，好撑啊</p>
        <div class="appraise">来自2021年9月22日的记录</div>
        <div class="info">
            <h4>美心月饼大促销</h4>
            <em>|</em>
            <span>14元</span>
        </div>

    </div>

</body>

综合案例运行结果