盒子模型设置

最新推荐文章于 2024-04-03 18:12:14 发布

沐沐185

最新推荐文章于 2024-04-03 18:12:14 发布

阅读量590

点赞数

分类专栏： CSS 文章标签： css3 css html

本文链接：https://blog.csdn.net/weixin_67642008/article/details/125096000

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一，border 边框属性设置

1.border 三要素 color width style

2.border 属性设置的顺序为 top right bottom left (上右下左)

3.border 四周属性可以单独设置：如 border-top-width:1px;

border-top-color: pink;

border-top-style : solid;

4.border 属性设置遵循就近原则：下面的属性设置会覆盖上面的设置

5.可以设置单个复合属性：border-style : solid double dashed dotted ;

border-width : 1px 2px 3px 4px ;

border-color : pink black green red ;

<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>边框属性</title>
    <style>
        .box {
            /* 设置盒子大小 */
            width: 100px;
            height: 100px;
            /* 边框三要素 颜色 宽度 样式 */
            border: 5px solid red;
            /* 单独设置上右下左的属性 */
            border-top-color: pink;
            border-top-width: 1px;
            border-top-style: dashed;

            /* 单独设置四周边框属性 */
            border-width: 1px 2px 3px 4px;

            /* 就近原则 下面的属性会覆盖上面的属性 */
            border-color: pink black green blue;
            border-width: 3px 6px 9px 12px;
            border-style: solid dashed dotted double;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>

1.7 外边距 margin

外边距的应用：

外边距可以让 块级盒子水平居中，但是必须满足两个条件

1.块级盒子必须指定宽度widht

2.盒子左右外边距设置auto。

<style>
        div {
            width: 900px;
            height: 200px;
            background: pink;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <div>
        我是块级盒子
    </div>
</body>

注意：行内元素或者行内块元素想要在父盒子中居中对齐

直接给父元素添加 text-align:center;

<style>

div {

width: 900px;

height: 200px;

background: pink;

margin: 100px auto;

/* 行内元素或者行内块元素想要在父盒子中居中对齐

直接给父元素添加 text-align:center;

<style>
        div {
            width: 900px;
            height: 200px;
            background: pink;
            margin: 100px auto;
            /* 行内元素或者行内块元素想要在父盒子中居中对齐
            直接给父元素添加 text-align:center; */
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="">
        <!-- 行内元素 -->
        <span>我是块级盒子中的行内元素</span>
    </div>
</body>

1.8 外边距合并（设置子元素相对父元素的位置的外边距）

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

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

解决方案：

可以为父元素定义边框；（外面加个外墙，那就能给子盒子一个参考边来设置子元素的外边距）
可以为父元素定义内边距;
可以为父元素添加overflow:hidden.

<style>
        .father {
            margin: 5px;
            background-color: pink;
            width: 900px;
            height: 200px;
            border: 1px solid transparent;
            padding: 1px;
            overflow: hidden;
        }


        .son {
            background-color: red;
            width: 200px;
            height: 100px;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
            son
        </div>
    </div>
</body>

1.9 清除内外边距

正常我们在布局前，首先去除网页元素的内外边距。

<style>
        * {
            margin: 0;
            padding: 0;
        }
        span {
            background: pink;
            margin: 20px;
        }
    </style>
</head>
<body>
    123
    <ul>
        <li>
            456
        </li>
    </ul>
    <span>789</span>
</body>

注意：