CSS笔记三-盒子模型、

最新推荐文章于 2024-07-20 15:40:46 发布

鬼R见愁

最新推荐文章于 2024-07-20 15:40:46 发布

阅读量132

点赞数

分类专栏： HTML 文章标签： css

本文链接：https://blog.csdn.net/weixin_44819178/article/details/119493991

版权

HTML 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

一、盒子模型

1、盒子模型的介绍

概念：

页面中的每一个标签都可以看作是一个盒子，通过盒子的视角可以更方便的进行布局；

浏览器在渲染页面时，会将网页中的元素看作一个个的矩形区域，我们也称之为盒子；

盒子模型：

css中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型。

联想：包装盒

2、内容区域的宽高

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

常见取值：数字 + px;

3、border属性

border-width 数字+px 边框粗细

border-color 颜色取值边框颜色

border-style 实线（solid）、虚线（dashed）、点线（dotted）边框样式

border的连写形式：border: 10px solid red;

快捷键：bd + tab键（默认值）

单方向设置：border + 方位名词

<style>
    div{
        width: 300px;
        height: 300px;
        background-color: cornflowerblue;
        /* 边框宽度 */
        border-width: 5px;
        /* 边框样式 */
        /* solid 实线 */
        border-style: solid;
        /* dashed 虚线 */
        /* border-style: dashed; */
        /* dotted 点划线 */
        /* border-style: dotted; */
        /* 边框颜色 */
        border-color: crimson;
        /* 边框连写形式 */
        border: 10px solid red;
        /* db + tab 默认值 */
        border: 1px solid #000;
        /* 上边框 */
        border-top: 10px solid red;
        /* 下边框 */
        border-bottom: 10px solid red;
    }
   
</style>
<body>
    <div></div>

</body>

盒子实际大小初级计算公式：

需求：盒子尺寸400*400，背景绿色，边框10px，实线、黑色

盒子的实际大小（宽度）= 左边框 + 内容宽度 + 右边框

盒子的实际大小（高度）= 上边框 + 内容高度 + 下边框

当盒子被border撑大后，计算多余大小，手动在内容中减去。

4、内边距（padding）

设置边框与内容之间的距离。

内边距单方向取值：padding + 方位名词

只给盒子某个方向单独设置内边框

padding-top / left / right / bottom

盒子实际大小的计算公式：

宽 = 左边框 + 左内边距 + 内容宽度 + 右边框 + 右内边距

高 = 上边框 + 上内边距 + 内容高度 + 下边框 + 下内边距

当盒子被撑大后，计算多余大小，手动在内容中减去。

不会撑大盒子的特殊情况：

如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度；

此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子；

<style>
    .father{
        width: 400px;
        height: 400px;
        background-color: pink;
    }

    .son{
        /* width: 200px; */
        height: 200px;
        padding:0px 5px;
        border: left 5px; ;
        background-color:blue;
    }

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

CSS3盒模型（自动内减）

需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，

解决方法一：手动内减

.father{
        width: 240px;
        height: 240px;
        background-color: pink;
        border: 10px solid black;
        padding: 20px;

    }

解决方法二：自动内减

只要设置一个属性，浏览器会自动计算多出了多少，自动在内容中减去；

css3盒模型：

属性名：box-sizing

属性值：border-box

如果设置了box-sizing：border-box属性，此时的width和height属性设置的就是盒子的实际大小；

.father{
        width: 300px;
        height: 300px;
        background-color: pink;
        border: 10px solid black;
        padding: 20px;
        box-sizing: border-box;

    }

5、外边距 margin

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

属性名：margin

外边距单方向取值：margin + 方位名词

只给盒子某个方向单独设置外边框

margin - top / left / right / bottom

margin单方向设置的应用：

清除默认内外边距：

浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的margin和padding，后续自己设置；

例如：body标签默认有margin：8px;

p标签默认有上下文的margin；

ul标签默认有上下的margin和padding-left;

.......

解决方法：

外边距正常情况：

场景：水平布局的盒子，左右的margin正常，互不影响；

结果：最终两者距离为左右margin的和；

外边距折叠现象——合并现象

场景：垂直布局的块级元素，上下的margin会合并；

结果：最终两者距离为margin的最大值；

解决方法：避免就行，只给其中一个盒子设置margin即可；

外边距折叠现象——塌陷现象

场景：互相嵌套的块级元素，子元素的margin-top会作用在父元素上；

结果：导致父元素一起往下移动；

解决方法：给父元素设置border-top或者padding-top(分割父子元素的margin-top);

给父元素设置overflow：hidden;

转换成行内块元素；设置浮动；

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

场景：给行内元素设置margin和padding 时

结果：水平方向的 margin 和 padding 布局中有效；

垂直方向的 margin 和 padding 布局中无效；

6、案例

    *{
        padding: 0;
        margin: 0;
    }
    body{
        /* 去除行高带来的默认边距，达到精准布局 */
        line-height: 1;
    }
    .box{
        width: 500px;
        height: 400px;
        /* background-color: pink; */
        border: 1px solid #ccc;
        padding: 41px 30px 0;
        box-sizing: border-box;
    }
    .box h2{
        height: 41px;
        /* background-color: pink; */
        border-bottom: 1px solid #ccc;
        box-sizing: border-box;
        font-size: 30px;

    }
    .box ul{
        list-style: none;
    }
    .box ul li{
        height: 50px;
        border-bottom: 1px dashed #ccc;
        line-height: 50px;
        padding-left:30px;
        
    }
    .box a{
        text-decoration: none;
        font-size: 18px;
        color: #666;
    }

</style>
<body>
    <div class="box">
        <h2>最新文章/New Articles</h2>
        <ul>
            <li><a href="#">北京招聘网页设计</a></li>
            <li><a href="#">体验javascript的魅力</a></li>
            <li><a href="#">jquery世界来临</a></li>
            <li><a href="#">网页设计师的梦想</a></li>
            <li><a href="#">jquery中的链式编程</a></li>
        </ul>
    </div>

</body>

    <style>
        /* 布局顺序：从外往内，从上往下
        每个盒子的样式：
        宽高
        辅助的背景颜色
        盒子模型的部分：border padding margin 
        其他样式；color font- text-
        ......
        */
        * {
            margin: 0;
            padding: 0;
        }

    .box{
        height:40px;
        /* background-color: skyblue; */
        border-top:3px solid #ff8500;
        border-bottom: 1px solid #edeef0;
    }
    .box a{
        display:inline-block;
        /* width:80px; */
        height:40px;
        padding: 0 10px;
        /* background-color: skyblue; */
        text-decoration: none;
        color:#4c4c4c;
        text-align: center;
        line-height: 40px;
        font-size: 12px;
    }
    .box a:hover{
        background-color: #edeef0;
        color:#ff8400;
    }
    
    </style>
</head>
<body>
    <div class="box">
        <a href="#" class="one">新浪导航</a><a href="#" class="one">新浪导航新浪导航新浪导航新浪导航</a><a href="#" class="one">新浪导航</a><a href="#" class="one">新浪导航</a>

    </div>
    
</body>

鬼R见愁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS笔记三-盒子模型、

一、盒子模型1、盒子模型的介绍概念：页面中的每一个标签都可以看作是一个盒子，通过盒子的视角可以更方便的进行布局；浏览器在渲染页面时，会将网页中的元素看作一个个的矩形区域，我们也称之为盒子；盒子模型：css中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型。联想：包装盒2、内容区域的宽高利用 width 和 height 属性默认设置盒子内容区域的大小；常见取..
复制链接

扫一扫