16.边框

<head>
    <meta charset="UTF-8">
    <title>边框</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
        }
        .box2{
            width:100px;
            height: 100px;
        }
        .b1{
            border-style: solid;
            border-color: indianred;
            border-width: 1px;
        }
        .b2{
            border: solid red 2px;
            border-radius: 0px;
            /*background-repeat: no-repeat;*/
            /*background-image: url("images/123.jpeg");*/
            margin: 100px auto;
            padding-top: 10px;
            padding-bottom: 20px;
            padding-left: 30px;
            padding-right: 40px;
        }

        .box3{
            width: 100px;
            height: 100px;
            border: solid;
        }
    </style>
</head>
<body>

        <div class="box1 b1"></div>
        <hr>
        <div class="box1 b2"></div>
        <hr>
        <div class="box2 b2">
            <div class="box3"></div>
        </div>











<!--
1.盒子模型

1) 边框: 用于划分盒子内外的东西
属性:
[1] 总属性: border, 统一设置4个边框的所有边框效果
[2] 单一边框效果属性:
i.  border-style: 边框样式.
值:
a. solid, 实线, 常用.
b. none, 通常状况下的默认值. 无边框.
c. dashed, 虚线
d. double, 双实线
e. dotted, 点线
注: 边框样式为none时, 边框粗细和颜色都无效

ii. border-width: 边框粗细. 常用单位px. 默认值3px(谷歌)
iii.border-color: 边框颜色. 默认#000000. 常用: transparent

[3] 单一方向的边框属性:
i.  border-top: 设置上边框的所有效果
ii. border-bottom: 设置下边框的所有效果
iii.border-left: 设置左边框的所有效果
iv. border-right: 设置右边框的所有效果
[4] 单一方向的单一效果: 4组共12个
border-top-style
border-top-width
border-top-color
...

[5] 圆角边框: border-radius
常用单位: px, %
值由1~4个参数组成:
i.   4参数:  左上角弧度  右上角弧度  右下角弧度  左下角弧度
ii.  3参数:  左上角弧度  右上/左下角弧度  右下角弧度
iii. 2参数:  左上/右下角弧度  右上/左下角弧度
iv.  1参数:  所有角的弧度

2) 外边距: 2个盒子边框之间的距离
属性:
[1] 外边距总属性: margin
属性值由1~4个参数组成:
i.   4参数:  上  右  下  左
ii.  3参数:  上  右/左  下
iii. 2参数:  上/下  右/左
iv.  1参数:  上/下/右/左

[2] 单一方向的外边距:
margin-top
margin-bottom
margin-left
margin-right
注1: 2个盒子的外边距相遇时, 取较大的外边距显示

外边距的常用场景: 块元素页面居中 或 块元素在父元素中居中
设置页面居中的注意事项:
i.  必须为块元素设置明确的宽度
ii. 将块元素的左外边距和右外边距同时设置为auto

3) 内边距: 盒子边框与盒子内容之间的填充距离
属性:
[1] 内边距总属性: padding
属性值由1~4个参数组成: 具体可参照外边距参数要求

[2] 单一方向的内边距:
padding-top
padding-bottom
padding-left
padding-right

4) 盒子的实际大小:
盒子的实际宽度: 左外边距 + 左边框 + 左内边距 + 内容宽度 + 右内边距 + 右边框 + 右外边距
盒子的实际高度: 上外边距 + 上边框 + 上内边距 + 内容高度 + 下内边距 + 下边框 + 下外边距

注: 在进行页面布局时, 通常考虑的盒子大小不包括外边距

5) 盒子阴影: box-shadow
值由一组参数组成:
i.  阴影的水平平移距离, 必填
ii. 阴影的垂直平移距离, 必填
iii.阴影的扩散(模糊)半径, 可选
iv. 阴影颜色, 可选
v.  阴影类型, 不常用
-->

</body>
posted on 2022-04-07 15:33 小小程序猿level1 阅读(51) 评论(0) 收藏举报