前端基础 - 盒子模型

最新推荐文章于 2024-07-08 16:01:05 发布

vinoMamba0908

最新推荐文章于 2024-07-08 16:01:05 发布

阅读量272

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_38091402/article/details/105828112

版权

盒子模型

盒子模型的概念

盒子模型用来放网页中的各种元素
网页设计中的内容，如文字，图片等元素，都可以是盒子

盒子模型

宽度属性

width：px / % / auto
max-width：最大宽度
min-width：最小宽度

高度属性

height：px / % / auto
max-height：最大高度
min-height：最小高度

哪些元素可以设置高度和宽度

块级元素和替换元素才可以设置高度和宽度，如果需要将行内元素设置高度和宽度，是不会生效的，除非将其display设置成块级元(block)素或者行内块元素（inline-block）

tips

width和height设置的是内容的高度和宽度
width和height只对块级元素或者替换元素起作用
最大/最小高/宽度有兼容性问题，IE不支持

盒子模型

边框[border]

border-width：边框宽度
border-color：边框颜色（可设置成透明：transparent）
border-style：边框样式（solid，dashed,inherit）
简写样式：border:[宽度] [样式] [颜色]

可分别设置边框四个方向的属性

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

tips

设置的高宽度是内容的高宽度
设置了border宽度是在内容的宽高度基础上增加宽度

内边距[padding]

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

值不能是负数
简写遵循上、右、下、左方向进行书写，即顺时针
padding值会改变内容的显示位置

外边距[margin]

设置元素与元素之间的距离

值不能是负数
简写遵循上、右、下、左方向进行书写，即顺时针

外边距属性

margin为auto，实现水平居中的效果
垂直方向，两个相邻元素都设置了外边距，外边距会发生合并
合并后的高度=发生合并的外边距的最大值

盒子的display属性

block：块级元素
inline：行内元素
inline-block：行内块元素（元素呈现为inline，并且包含block相应的属性，比如可设置宽高度）
inline-block：行内块元素（元素呈现为inline，并且包含block相应的属性，比如可设置宽高度）

盒子模型demo

<!DOCTYPE html>
<html lang="ch-ZN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* reset标签的样式 */
        * {
            margin: 0;
            padding: 0;
            font-family: "微软雅黑";
        }
        /* 父盒子定义宽度，并使其居中显示 */
        .box {
            width: 220px;
            margin: 0 auto;
            background-color: #f2f4f6;
            border: 1px solid #d9dde1;
        }
        .list1 {
            width: 100%;
            height: 90px;
            line-height: 90px;
            font-size: 18px;
            color: #ffffff;
            text-align: center;
            background-color: #040a10;
            
        }
        .list2 {
            width: 200px;
            margin: 0 10px;
            background-color: #f2f4f6;
            border-bottom: 1px solid #d9dde1;
            /* background-color: chartreuse; */
        }
        .list2 p {
            /* background-color: chocolate; */
            padding: 10px 0;
            font-size: 16px;
        }
        .list2 span {
            display: block;
            /* background-color: cornflowerblue; */
            padding-bottom: 10px;
            color: #93999f;
            font-size: 14px;
        }
        .clear {
            border-bottom: 1px solid transparent;
        }
    </style>
</head>
<body>
   <div class="box">
       <div class="list1">
           <p>前端课程排列</p>
       </div>
       <div class="list2">
           <p>HTML+CSS基础课程</p>
           <span>64324人在学</span>
       </div>
       <div class="list2">
        <p>HTML+CSS基础课程</p>
        <span>64324人在学</span>
    </div>
    <div class="list2 clear">
        <p>HTML+CSS基础课程</p>
        <span>64324人在学</span>
    </div>
   </div>
</body>
</html>

demo

vinoMamba0908

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础 - 盒子模型

盒子模型盒子模型的概念盒子模型用来放网页中的各种元素网页设计中的内容，如文字，图片等元素，都可以是盒子宽度属性width：px / % / automax-width：最大宽度min-width：最小宽度高度属性height：px / % / automax-height：最大高度min-height：最小高度哪些元素可以设置高度和宽度块级元素和替换元素才可...
复制链接

扫一扫