HTML&CSS拓展（2）

发布日期: 2022-10-16

更新日期: 2023-03-03

文章字数: 284

阅读时长: 1 分

阅读次数:

每日一记

盒子模型

1.外边距
    <style>
        div{
            padding:30px;               /* 一个值4个方向一样，两个值上下和左右，三个值上和左右和下，四个值上右下左 */
            padding-left:0px;           /* 对单一方向更改 */
        }
    </style>
</head>
<body>
    <div>
        111111111111111111
    </div>
</body>
注意:
1.上下两个box时外边距取大值
2.左右两个box加和
3.有父子两个box时，子盒子加外边距会整体移动
解决:1.加浮动  2.overflow:hidden.

2.边框
<style>
    .box1{
        border-top:10px dotted red;             #solid实线double双实线dashed虚线dotted点状线，可以选择单一方向更改
        margin:10px auto;                       #用法同上，左边是纵向，右边是横向，auto是居中
    }
</style>

注意:实际上的编写会有3px的误差，来源于图片标签的图片和文字间类型不同，需要转换:
img{
    display:block;
}