CSS基础二

最新推荐文章于 2022-09-01 23:01:58 发布

m0_64100645

最新推荐文章于 2022-09-01 23:01:58 发布

阅读量254

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_64100645/article/details/126033119

版权

一.CSS盒子模型

1.组成：content（物品）-->padding（填充物）-->border（包装盒）-->margin（盒子与盒子之间的间距）

2.content：内容区域由width，height

3.padding：内边距（内填充）

1）只写一个值：30px（上下左右）写两个值：30px 40px（上下、左右）

2）单一样式只能写一个值 padding-left

3）padding-top

4）padding-right

5）padding-bottom

4.margin：外边距（外填充）

单一样式只能写一个值 margin-left margin-top margin-right margin-bottom

注：

1.背景颜色会填充到margin以内的区域（不包括margin区域）

2.文字会在content区域

3.padding不能出现负值，margin是可以出现负值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DSN</title>
    <style>
    #box{
        width: 200px;height: 200px;background: red;border: 10px blue solid;
        padding: 30px 50px;
        margin:10px;
    }
    #box2{width: 200px;height: 200px;background: black;color: white;}
    </style>
</head>
<body>
<div id="box">这是一个盒子</div>
<div id="box2">又是一个盒子</div>
</body>
</html>

1.1 box-sizing

1.box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素取值为content-box（默认值）| border-box

2.可以改变盒子模型的展示形态

默认值：content-box：width、height--->content

border-box：width、height--->content padding border

适用场景：

1.不用再去计算一些值

2.解决一些100%的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DSN</title>
    <style>
    /*#box{
        width: 200px;height: 200px;background: red;border: 10px blue solid;
        padding: 30px 50px;
        margin:10px;
    }
    #box2{width: 200px;height: 200px;background: black;color: white;}*/
    #box{
        width: 200px;height: 200px;background: red;border: 10px blue solid;
        padding: 30px 50px;
        box-sizing: content-box;
    }
    input{width: 100%;padding: 30px;}

    </style>
</head>
<body>
<!--<div id="box">这是一个盒子</div>
<div id="box2">又是一个盒子</div>-->
<div id="box">这是一个盒子</div>
<input type="text">
</body>
</html>

1.2 margin叠加

1.出现在上下margin同时存在的时候，会取上下中值较大的作为叠加的值

解决方案：

1.BFC规范

2.想办法只给一个元素添加间距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DSN</title>
    <style>
        #box1{width: 200px;height: 200px;background: red;margin-bottom: 0px;}
        #box2{width: 200px;height: 200px;background: blue;margin-top: 70px;}
    </style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>

1.3 margin传递

1.出现在嵌套的结构中，只是针对margin-top的问题

解决方案：

1.BFC规范

2.给父容器加边框

3.margin换成padding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DSN</title>
    <style>
       /* #box1{width: 200px;height: 200px;background: red;margin-bottom: 0px;}
        #box2{width: 200px;height: 200px;background: blue;margin-top: 70px;}*/
        /*#box1{width: 200px;height: 200px;background: red;border: 20px black solid;}
        #box2{width: 100px;height: 100px;background: blue;margin-top: 100px;}*/
        /*#box1{width: 200px;height: 100px;background: red;padding-top: 100px;}
        #box2{width: 100px;height: 100px;background: blue;}*/
        #box{width: 200px;height: 200px;backg

最低0.47元/天解锁文章

m0_64100645

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS基础二

1.组成content（物品）-->padding（填充物）-->border（包装盒）-->margin（盒子与盒子之间的间距）2.content内容区域由width，height3.padding内边距（内填充）1）只写一个值30px（上下左右）写两个值30px40px（上下、左右）2）单一样式只能写一个值padding-left4.margin外边距（外填充）...
复制链接

扫一扫