巧用box模型

2023-12-30 08:15:52

盒子模型（box模型）

在css当中，默认将每一个元素（不管是行内元素还是块级元素）都当作一个矩形盒子，将各个元素划分为了不同的部分。

组成部分	定义
margin	外边距
border	边框
padding	内边距
content	内容

注意：在一般情况下（box-sizing选择为content-box）时，我们定义的高和宽都是针对content而言的；但是当我们把box-sizing改为border-sizing时，我们定义的高和宽则是border+padding+content；所以我们要依据自己的情况选取不同的border-sizing。

margin

一个盒子的margin部分不会影响和盒子的大小，只会影响它与其他盒子的相对位置。margin有4个方向分为：

	方向
margin-top	上
margin-bottom	下
margin-left	左
margin-right	右

注意：每一个方向都可以设置距离，距离也可以是负值，这样就会向相反的方向移动元素在页面中是按照自左向右的顺序排列的，所以默认情况下如果我们设置的左和上外边距则会移动元素自身而设置下和右外边距会移动其他元素

        /* 上 右 下  左（顺时针） */
        margin: 10px 10px 20px 30px; 
        /* 上下  左右 */
        margin: 10px 20px;
        /* 所有方向 */
        margin: 10px;
        /* 各个方向 */
        margin-top: 10px;
        margin-bottom: 10px;
        margin-right: 10px;
        margin-bottom: 10px;

border

border是盒子的边框，border的大小会影响盒子的大小；

border的样式	定义
border-style	边框的样式
border-size	边框的大小
border-color	边框的颜色

注意·：border也分为四个方向——top bottom right left。想要border显示出来，这三个都要设置。

border-style
dotted	点状
solid	实线
double	双线
dashed	虚线

    /* 三个样式可以合并在一起写，部分先后顺序，但是都要有 */
    border: 1px  solid black;
    /*边框的弧度 */
    border-radious：4px；

padding

padding是调节内容与边框的距离的，它算在盒子的大小里面；具体用法和margin一样。当设置盒子的背景色时，padding也会显示背景颜色。

content

样式	定义
width	宽度
height	高度

注意：行内元素的宽和高都是由它的内容所决定的，所以，设置它们的宽和高是没用的；块级元素的宽是撑满整个父级元素，高是由内容决定的；

盒子的水平布局

盒子的水平宽度包括padding-right+border-right+content+border-left+padding-left，在布局时盒子的水平宽度要等与父级元素的宽度。如果不相等的话，就称为过度约束，则等式会自动调整如果这七个值中没有为 auto 的情况，则浏览器会自动调整margin-right值以使等式满足如果某个值为 auto ，则会自动调整为 auto 的值以使等式成立。
注意：当等式不成立时，就算margin-right有设置也无效，而是会调整margin-right使等式成立。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
       .a1{
           width: 600px;
           height: 200px;
           border:10px solid blue;
       }
       .a2{
           width: 200px;
           height: 200px;
           background-color:black;
           margin-left: 100px;   
           margin-right: 1000px;
       }
    </style>
</head>
<body>
    <div class="a1">
        <div class="a2"></div>
    </div>
</body>
</html

七个值中：width、margin-left、margin-right可设置auto
（1）当有某一个值为auto，则会自动调整为auto的那个值使得等式成立
（2）若width=auto和某一个外边距=auto，则宽度调整到最大，设置auto的外边距为0
（3）若width=auto和两个外边距都=auto，则宽度调整到最大，设置auto的两个外边距都为0
（4）若width=固定值且两个外边距都=auto，则，将两外边距设置为相同的值
（通常使用该方式使得某元素在其父元素中水平居中）

margin：auto；

盒子的垂直布局

默认情况下，父元素的高度被内容撑开子元素大小超过父元素高度时，子元素会从父元素中溢出使用overflow属性：

overflow属性	定义
visible	子元素溢出，超出部分仍显示
hidden	子元素被裁减，超出部分不会显示
auto	根据需要生成滚动条（横向或纵向）

码农公寓