首页 前端知识 CSS3-盒子模型

CSS3-盒子模型

2024-03-24 23:03:17 前端知识 前端哥 948 396 我要收藏

    盒子模型的介绍

        盒子概念

        盒子组成

        盒子内减

        拓展

        1. 盒子的概念

            1 页面中的每一个标签,都可看做是一个 “盒子”,通过盒子的视角更方便的进行布局

            2 浏览器在渲染(显示)网页时,会将网页中的元素看做是一个个的矩形区域,我们也形象的称之为 盒子

        2 盒子模型

            CSS 中规定每个盒子分别由:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)构成,这就是 盒子模型

        3 记忆:可以联想现实中的包装盒

        盒子模型一共有几个部分组成?分别是什么?

            1 内容区域:content

            2 边框区域:border

            3 内边距区域:padding

            4 外边距区域:margin

        1 内容的宽度和高度

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

            属性:width / height

            取值:数字+px

        2 边框(border)

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

            单个属性:

                边框粗细(border-width)  数字+px

                边框样式(border-style)  实线(solid)、虚线(dashed)、点线(dotted)

                边框颜色(border-color)  颜色取值

            连写:border:width style color;

            单方向边框设置:border-方位名词:width style color;

        3 内边距(padding)

            作用:设置 边框 与 内容区域 之间的距离

            属性:padding

            常见取值:

                1 一个值(10px) 上右下左都为10px

                2 两个值(10px 20px) 上下10px 左右20px

                3 三个值(10px 20px 30px) 上10px ;左右20px 下30px

                4 四个值(10px 20px 30px 40px) 上10px 右20px 下30px 左40px

            单方向设置:padding-方位名词:数字+px

            记忆规则:从上开始,顺时针赋值

        4  外边距(margin)

            作用:设置边框以外,盒子与盒子之间的距离

            属性:margin

            常见取值:

                1 一个值(10px) 上右下左都为10px

                2 两个值(10px 20px) 上下10px 左右20px

                3 三个值(10px 20px 30px) 上10px ;左右20px 下30px

                4 四个值(10px 20px 30px 40px) 上10px 右20px 下30px 左40px

            单方向设置:margin-方位名词:数字+px

            记忆规则:从上开始,顺时针赋值

            盒子水平居中:margin:0 auto;

   

    盒子内减模式

        1 手动内减模式(了解)

            通过计算手动调整盒子大小

        2 自动内减模式(常用)

            box-sizing: border-box;

    (拓展)不会撑大盒子的特殊情况(块级元素)

        1. 如果子盒子没有设置宽度,此时宽度默认是父盒子的宽度

        2. 此时给子盒子设置左右的padding或者左右的border,此时不会撑大子盒子

代码:

<!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>
        div {
            /* 宽高是内容区域大小 */
            width: 300px;
            height: 300px;
            /* 背景色 */
            background-color: #ffc0cb;
            /* 盒子边框 */
            border: 10px solid #0000ff;
            /* 内边距 内容到边框的距离*/
            padding: 20px;
            /* 外边距 盒子到盒子的距离 */
            margin: 20px;
            /* 盒子自动内减 */
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div>盒子一</div>
    <div>盒子二</div>
</body>

</html>

效果图:

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4115.html
标签
评论
发布的文章

jQuery全屏滚动插件fullPage

2024-04-16 17:04:36

jQuery

2024-01-31 12:01:10

flex布局的对齐方式

2024-04-16 17:04:06

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!