盒子属性

最新推荐文章于 2024-05-22 17:55:52 发布

网名394

最新推荐文章于 2024-05-22 17:55:52 发布

阅读量40

点赞数

分类专栏：个人文章标签：前端 html css

本文链接：https://blog.csdn.net/weixin_69205227/article/details/129379957

版权

个人专栏收录该内容

1 篇文章 0 订阅

订阅专栏

盒子属性的常用css有边框，外边距，内边距与内容

1 边框 border

边框主要由三部分构成，边框宽度(粗细)(border-width)，边框样式(border-style)与边框颜色(border-color)

none 无边框，默认就是无边框，与宽度无关，有没有宽度都是无边框

hidden 隐藏边框

dotted 点

dashed 虚线

solid 实线

double 双实线

groove 3D凹槽

ridge 3D凸槽

inset 3D凹边

outset 3D凸边

four_kind 给四个不同的值

border-radius 圆形

  <style>
        /* 边框主要由三部分构成，
        边框宽度(粗细)(border-width)，边框样式(border-style)与边框颜色(border-color)，我们先感受一下 */
        div{
            border-color: pink;
            border-width: 20px;
            /* border-style: solid; */
            width: 200px;
            height: 200px;
        }
        #none {border-style: none;}
        #hidden {border-style: hidden;}
        #dotted {border-style: dotted;}
        #dashed {border-style: dashed;}
        #solid {border-style: solid;}
        #double {border-style: double;}
        #groove {border-style: groove;}
        #ridge {border-style: ridge;}
        #inset {border-style: inset;}
        #outset {border-style: outset;}
        #four_kind {
            border-top: 1px solid pink;
            border-bottom: 5px solid palegoldenrod;
            border-left: 15px solid palegreen;
            border-right: 20px solid palevioletred;
        }
        #radius {border-radius: 80px;}

        /* border-style常用值如下所示

    none 无边框，默认就是无边框，与宽度无关，有没有宽度都是无边框
    hidden 隐藏边框
    dotted 点
    dashed 虚线
    solid 实线
    double 双实线
    groove 3D凹槽
    ridge 3D凸槽
    inset 3D凹边
    outset 3D凸边 
    four_kind 给四个 不同的值
    border-radius  圆形    */
    
    </style>
</head>
<body>
    <div>这是盒子</div>
    <div id="none">这是盒子</div>
    <div id="hidden">这是盒子</div>
    <div id="dotted">这是盒子</div>
    <div id="dashed">这是盒子</div>
    <div id="solid">这是盒子</div>
    <div id="double">这是盒子</div>
    <div id="groove">这是盒子</div>
    <div id="ridge">这是盒子</div>
    <div id="inset">这是盒子</div>
    <div id="outset">这是盒子</div>
    <div id="four_kind">这是盒子</div>
    <div id="radius">这是盒子</div>
</body>

内边距 padding

padding-left 左内边距

padding-right 右内边距

padding-top 上内边距

padding-bottom 下内边距

<style>
        /*     padding-left 左内边距
               padding-right 右内边距
               padding-top 上内边距
               padding-bottom 下内边距 */
        div {
            border: 20px solid pink;
            padding-left: 50px;
            padding-top: 20px;
            padding-right: 80px;
            padding-bottom: 50px;
        }
    </style>
</head>
<body>
    <div>这是盒子</div>

外边距 margin

margin-left 左内边距

margin-right 右内边距

margin-top 上内边距

margin-bottom 下内边距

 <style>
        div div{
            width: 200px;
            height: 200px;
            background-color: aliceblue;
            border: 1px solid rebeccapurple;
            display: inline-block;
        }
        #pp{
            margin-top: 20px;
            margin-left: 50px;
            margin-right: 60px;
            margin-bottom: 50px;
        }
    </style>
</head>
<body>
    <div> 
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <div>
        <div>4</div>
        <div id="pp">5</div>
        <div>6</div>
    </div>
    <div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>

盒子内元素水平居中

如果想让盒子内的元素在盒子内水平居中，我们需要给盒子添加text-align:center

<style>
        /*     居中对齐
        margin-left:auto;
        margin-right:auto;
    margin:auto; */

    /* 如果想让盒子内的元素在盒子内水平居中，我们需要给盒子添加text-align:center */
        div{
            width: 200px;
            height: 200px;
            border: 2px solid palevioletred;
            margin: 0 auto;
            background-color: antiquewhite;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>这是盒子</div>
</body>

盒子阴影 box-shadow

h-shadow 水平阴影中止位置，允许负值

v-shadow 垂直阴影中止位置，允许负值

blur 模糊距离

spread 阴影尺寸

color 阴影颜色，可以使用十六进制值，rgb值等

inset 将外部阴影改为内部阴影

  <style>
        /*     h-shadow 水平阴影中止位置，允许负值
    v-shadow 垂直阴影中止位置，允许负值
    blur 模糊距离
    spread 阴影尺寸
    color 阴影颜色，可以使用十六进制值，rgb值等
    inset 将外部阴影改为内部阴影 */
        div{
            width: 200px;
            height: 200px;
          
            background-color: bisque;
            box-sizing: -20px -20px -20px 10px black;
        }
    </style>
</head>
<body>
    <div>盒子阴影</div>
</body>

盒子尺寸类型 box-sizing

box-sizing有两个可选值，分别为content-box与border-box，默认为content-box

content-box 盒子尺寸为盒子本身宽度 + padding + border
border-box 盒子尺寸仅为盒子本身宽度，就是设置了多少整个盒子就是多大，它会去自动改变内容区域的尺寸

  <style>
        /* box-sizing有两个可选值，分别为content-box与border-box，默认为content-box

    content-box 盒子尺寸为 盒子本身宽度 + padding + border
    border-box 盒子尺寸仅为 盒子本身宽度，就是设置了多少整个盒子就是多大，它会去自动改变内容区域的尺寸
*/
        div {
            width: 200px;
            height: 200px;
            background-color: rgb(18, 89, 151);
            border: 50px solid palegreen;
            margin: 0 auto;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>