盒子模型

盒子模型的介绍

  1. 盒子的概念
  2. 页面中的每一个标签,都可看做是一个 “盒子”,通过盒子的视角更方便的进行布局
  3. 浏览器在渲染(显示)网页时,会将网页中的元素看做是一个个的矩形区域,我们也形象的称之为 盒子
  4. 盒子模型 CSS 中规定每个盒子分别由:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin )构成,这就是 盒子模型

盒子模型划分为:

  1. 内容区域:content
  2. 边框区域:border
  3. 内边距区域:padding
  4. 外边距区域:margin

内容区域的宽度和高度

作用:利用 width 和 height 属性默认设置是盒子 内容区域 的大小

属性:width / height 常见取值:数字+px

自动减掉边框方法

使用box-sizing: border-box;自动减掉

 <style>
        div{
            width: 300px;
            height: 300px;
            background-color: aqua;
            border: 10px solid red;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>
<p>盒子的概念
    页面中的每一个标签,都可看做是一个 “盒子”,通过盒子的视角更方便的进行布局
    浏览器在渲染(显示)网页时,会将网页中的元素看做是一个个的矩形区域,我们也形象的称之为 盒子
    盒子模型 CSS 中规定每个盒子分别由:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin )构成,这就是 盒子模型</p>
    </div>
</body>
盒子模型插图

边框(border)

边框(border)- 单个属性

作用:给设置边框粗细、边框样式、边框颜色效果

单个属性:

作用属性名属性值
边框粗细border-width数字+px
边框样式border-style实线solid、虚线dashed、点线dotted
边框颜色border-color颜色取值

边框(border)- 连写

    <style>
div{
    width: 300px;
    height: 300px;
    background-color: aquamarine;
    border-width: 15px;
    border-style: dashed;
    border-color: bisque;
}
    </style>
</head>
<body>
    <div>

    </div>
</body>
盒子模型插图1

边框(border)- 连写形式

属性名:border

属性值:单个取值的连写,取值之间以空格隔开

• 如:border : 10px solid red;

快捷键:bd + tab

 <style>
div{
    width: 300px;
    height: 300px;
    background-color: bisque;
    border: 15px rgb(127, 127, 214) dashed;
}
    </style>
</head>
<body>
    <div></div>
</body>
盒子模型插图2

边框(border)- 单方向设置

场景:只给盒子的某个方向单独设置边框
属性名:border – 方位名词
属性值:连写的取值

<style>
div{
    width: 300px;
    height: 300px;
    background-color: bisque;
border-top: 15px rgb(230, 140, 140) dashed;
}
    </style>
</head>
<body>
    <div></div>
</body>
盒子模型插图3

内边距( padding )- 取值

作用:设置 边框 与 内容区域 之间的距离
属性名: padding
常见取值

盒子模型插图4
<style>
    div{
        box-sizing: border-box;
        width: 400px;
        height: 80px;
        border-top: 3px solid orangered;
        border-bottom: papayawhip 1px solid;
        padding: 10px;
    }
    a{
        text-decoration: none;
        display: inline-block;
        height: 50px;
        width: 100px;
        text-align: center;
        background-color: powderblue;
        line-height: 45px;
    }
</style>
<div>
    <a href="#">1</a>
    <a href="#">1</a>
    <a href="#">1</a>
</div>
盒子模型插图5

外边距( margin )- 取值

作用:设置边框以外, 盒子与盒子之间 的距离
属性名: margin
常见取值:

取值示例含义
一个值margin:10px;上右下左都设置为10px
一个值margin:10px 20px;上下设置为10px,左右设置为20px
一个值margin:10px 20px 30px;上设置为10px,左右设置为20px、下设置为30px
一个值margin:10px 20px 30px 40px;上设置为10px、右设置为20px、下设置为30px、左设置为40px

清除默认内外边距

场景:浏览器会默认给部分标签设置默认的 margin 和padding ,但一般在项目开始前需要先清除这些标签默认的
margin 和padding ,后续自己设置
• 比如: body 标签默认有 margin :8px
• 比如: p标签默认有上下的 margin • 比如: ul 标签默认由上下的 margin 和padding-left

盒子模型插图6
盒子模型插图7

外边距折叠现象 – ① 合并现象

场景: 垂直布局 的 块级元素 ,上下的 margin 会合并
Ø 结果:最终两者距离为 margin 的最大值
Ø 解决方法:避免就好
• 只给其中一个盒子设置 margin 即可

外边距折叠现象 – ② 塌陷现象

场景: 互相嵌套 的 块级元素 ,子元素的 margin-top 会作用在父元素上
Ø 结果:导致父元素一起往下移动
Ø 解决方法:

  1. 给父元素设置 border-top 或者 padding-top (分隔父子元素的 margin-top )
  2. 给父元素设置 overflow :hidden
  3. 转换成行内块元素
  4. 设置浮动
<style>
    *{
        margin: 0;
        padding: 0;
    }
.box{
width: 50px;
height: 50px;
background-color: orange;
margin-top: 10px;
}
.box1{
width: 100px;
height: 100px;
background-color: orchid;
}
</style>
<div class="box1">
    <div class="box"></div>
</div>
盒子模型插图8
<style>
    *{
        margin: 0;
        padding: 0;
    }
    
.box{
width: 50px;
height: 50px;
background-color: orange;

}
.box1{
width: 100px;
height: 100px;
background-color: orchid;
overflow: hidden;
padding-top: 10px;
}
</style>
<div class="box1">
    <div class="box"></div>
</div>

盒子模型插图9

行内元素的 margin 和padding 无效情况

场景:给行内元素设置 margin 和padding 时
结果:

  1. 水平方向的 margin 和padding 布局中有效!
  2. 垂直方向的 margin 和padding 布局中无效!
© 版权声明
THE END
喜欢就支持一下吧
点赞14赞赏 分享
评论 抢沙发

请登录后发表评论