CSS自学Day5-盒子模型

最新推荐文章于 2023-01-27 22:03:33 发布

什么时候养猫猫

最新推荐文章于 2023-01-27 22:03:33 发布

阅读量422

点赞数 1

分类专栏： CSS 文章标签： css 前端 css3

本文链接：https://blog.csdn.net/m0_64005381/article/details/126807611

版权

CSS 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

1.1盒子模型的介绍

1.盒子的概念

1.页面中的每一个标签都可以看做一个“盒子”，通过盒子视角更方便布局

2.浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为“盒子”

2.盒子模型：

css中规定每个盒子由：内容区域（content）、内边距区域(padding)、边框区域（border）、外边界区域（margin）构成，这就是盒子模型

3.记忆：可以联想现实中的盒子

    <style>
        /* 纸箱子，填装泡沫 */
        div{
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 边框线 == 纸箱子 */
            border: 1px solid #000;
            /* 内边距 == 填充泡沫：出现在盒子和边缘之间 */
            padding: 20px;
            /* 外边距 出现在两个盒子之间或者出现在盒子的外面*/
            margin: 50px;
        }
    </style>
</head>
<body>
    <div>内容电脑</div>
    <div>内容电脑</div>
</body>

浏览器效果：

2.1内容区域的宽度和高度

作用：利用width和height属性默认是盒子区域的大小

属性：width/height

常见取值：数字+px

    <style>
        div{
            width: 200px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>

3.1边框（border）- 连写形式

属性名：border

属性值：单个取值的连写，取值之间以空格隔开

如： border：10px soild red；

快捷键：bd+tab

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* border： 粗细 线条样式 颜色 -- 不分先后顺序 */
            /* solid 实线 */
            /* border: 1px solid #000; */

            /* dashed 虚线 */
            /* border: 5px dashed #000; */

            /*dotted 点线  */
            /* border: 5px dotted #000; */


            border-right: 5px dotted #000;
            border-top: 5px dotted #000;

        }
    </style>
</head>
<body>
    <div>内容</div>
</body>

3.2边框（border）- 单方向设置

场景：只给盒子的某个方向设置

属性名：border-方向名词

属性值：连写的取值

3.3边框（border）- 单个属性

作用：给设置边框粗细、边框样式、边框颜色效果

    <style>
        div{
            /* 盒子尺寸 = width/height + 边框线 */
            /* 如果 400*400 尺寸 */
            width: 380px;
            height: 380px;
            background-color: green;
            border: 10px solid #000;
        }
    </style>
</head>
<body>
    <div>div</div>
</body>

备注：若要求盒子尺寸400*400，则宽高380，边框线10。

（案例）盒子边框的小案例

需求：根据设计图，通过Pxcook量取数据，通过代码在网页中完成一致的效果

  <style>
        div{
            width: 280px;
            height: 280px;
            background-color: #ffc0cb;
            border: 10px solid #00f;
            
        }
    </style>
</head>
<body>
    <div></div>
</body>

（案例）新浪导航

需求：根据

布局顺序：

1.从外往内，从上往下

每一个盒子的样式：

1.宽高

2.辅助的背景颜色

3.盒子模型的部分：border、padding、margin

4.其他样式：color、font-、text-、....

    <style>
        .box{
            border-top: 3px solid #ff8500;
            height: 40px;
            border-bottom: 1px solid #edeef0;
        }
        /* 后代box里的a */
        .box a{
            width: 80px;
            height: 40px;
            /* 推荐先加上：清楚看见文字在什么位置 */
            /* background-color: #edeef0; */
            display: inline-block;
            text-align: center;
            line-height: 40px;
            text-decoration: none;
            tab-size: 12px;
            color: #4c4c4c;
        }
       .box a:hover{
        color: #ff8500;
       }
       
    </style>
</head>
<body>
    <div class="box">
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
    </div>
</body>

备注：从外到内：先宽高背景色，后内容，调节内容位置；控制文字细节

4.1内边距

文字与边框之间的距离

属性名：padding

属性值：数学+px（可以连写，最多写四个，代表上右下左的内边距）

    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: pink;
            padding: 50px;

            /* padding 属性可以当复合属性写 表示单独设置某个方向的内边距 */
            /* padding 最多取4个值 */

            /* 四值： 上 右 下 左 */
            /* padding: 10px 20px 40px 80px; */

            /* 三值：上 左右 下 */
           /* padding: 10px 40px 80px; */

           /* 两值：上下 左右 */
           padding: 10px 80px;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>

盒子实际大小终极计算公式

需求：盒子尺寸300*300，背景粉色，边框线10px实现黑体，上下左右20px的内边距

    <style>
        div{
            
            /* 盒子尺寸=width/height+border+padding */
            width: 240px;
            height: 240px;
            background-color: pink;
            border: 10px solid #000;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>

（案例）优化新浪导航

需求：增加导航的字数

    <style>
        .box{
            border-top: 3px solid #ff8500;
            height: 40px;
            border-bottom: 1px solid #edeef0;
        }
        /* 后代box里的a */
        .box a{
            /* width: 80px; */
            height: 40px;
            /* 推荐先加上：清楚看见文字在什么位置 */
            /* background-color: #edeef0; */
            display: inline-block;
            text-align: center;
            line-height: 40px;
            text-decoration: none;
            tab-size: 12px;
            color: #4c4c4c;
            padding: 0 16px;
        }
       .box a:hover{
        color: #ff8500;
       }
       
    </style>
    <!-- 从外到内：先宽高背景色，后内容，调节内容位置；控制文字细节 -->
</head>
<body>
    <div class="box">
        <a href="#">新浪导航</a>
        <a href="#">新浪导航新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
    </div>
</body>

注：里面文字＋内边距撑开盒子就能起到盒子里的a标签字数不同。

4.5CSS盒子模型（自动内减）

需求：盒子尺寸300*300，背景粉色，边框线10px实线黑色，上下左右20px的内边距

给盒子设置border或padding时，盒子会被撑大，若不想被撑大

解决方法：1.手动内减

操作：自己计算多余大小，手动在内容中减去

缺点:项目中计算量太大，很麻烦

2.自动内减

操作：给盒子设置属性 box-sizing：border-box；即可

优点：浏览器会自动计算多余大小，自动在内容中减去

    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            border: 10px solid #000;
            padding: 20px;

            /* 变成CSS3的盒子模型，好处:加了border不需要手动减法 */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>

5.1内边距

盒子外部的外边距

属性名：margin

属性值：数学+px（可以连写，最多写四个，代表上右下左的外边距）

    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 可以添加四个值，方法与padding一致 */
            margin: 50px;
        }
    </style>
</head>
<body>
    <div>div</div>
</body>

5.4清楚默认的内外边距

场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在1项目开始需要先清楚掉这些默认margin和padding，后续自己设置

比如：body默认标签有margin：8px

比如: p标签默认有上下的margin

比如：u标签有默认由上下的margin和padding-left

。。。

解决方法：

一个使用并集选择器；一个用通配符选择器设置margin和padding为0

    <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <p>ppp</p>
    <p>pppp</p>
    <h1>h1</h1>
    <ul>
        <li>lili</li>
    </ul>
</body>

版心居中

盒子在网页的中心位置

写法：margin:0 auto;

    <style>
        div{
            width: 1000px;
            height: 300px;
            background-color: pink;
            /* 上下根据设计稿调节 左右居中 */
            margin:0 auto;
        }
    </style>
</head>
<body>
    <!-- 版心：网页的有效内容 -->
    <!-- 版心居中 -->
    <div>版心</div>
</body>

综合案例-新闻列表

从外到内：先宽高背景色，后内容，调节内容位置；控制文字细节

    <style>
        *{
            margin: 0;
            padding: 0;
            /* 所有的标签都可能添加内边距 */
            box-sizing: border-box;
        }
        .news{
            width: 500px;
            height: 400px;
            border: 1px solid #ccc;
            padding: 42px 30px 0;
            margin: 50px auto;
        }
        .news h2{
              border-bottom: 1px solid #ccc;
              font-size: 30px;

              /* 行高是一倍，就是字号的大小 */
              line-height: 1;
              padding-bottom: 9px ;
        }
        ul{
            list-style: none;
        }
        /* li {}*/
        .news li{
            height: 50px;
            border-bottom: 1px dashed #ccc;
            padding-left: 28px;
            line-height: 50px;
        }
        .news a{
            text-decoration: none;
            color: #666;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <!-- 从外到内 -->
    <div class="news">
        <h2>最新文章/New Article</h2>
        <ul>
            <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
            <li><a href="#">体验javascript的魅力</a></li>
            <li><a href="#">jquery世界来临</a></li>
            <li><a href="#">网页设计师的梦想</a></li>
            <li><a href="#">jquery中链式编程是什么</a></li>
        </ul>
    </div>
</body>

注： list-style: none; 可以删除列表的小圆点。

5.7外边距折叠现象-合并现象

场景：垂直布局的块级元素，上下margin会合并

结果：最终两者距离为margin的最大值

解决方法：避免

只给期中一个盒子设置margin即可

    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .one{
            margin-bottom: 50px;
        }
        .two{
            margin-bottom: 60px;
        }
    </style>
</head>
<body>
    <div class="one">11</div>
    <div class="two">22</div>
</body>

5.8外边距折叠现象-塌陷现象

场景：互相嵌套的块级元素，子元素的margin-top会作用在父元素上

结果:导致父元素一起往下移动

解决方法：

1.给父元素设置border-top或者padding-top（分割父子元素的margin-top）

2.给父元素设置overflow：hidden

3.转换成行内块元素（不推荐）

4.设置浮动

    <style>
        .father{
            width: 300px;
            height: 300px;
            background-color: pink;
            /* padding-top: 50px; */

            /*如果设计稿 没有border，不能使用这个方法 */
            /* border: 1px solid #000; */

            /* 推荐，没有额外添加条件 */
            /* overflow: hidden; */
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: skyblue;

            margin-top: 50px;
            /* 转成行内块，场景发生了改变，不推荐 */
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">son</div>
    </div> 
</body>

5.9行内元素的内外边距问题

行内元素代表标签：

a、span、b、u、i、strong、ins、em、del...

如果想要通过margin或者padding改变行内标签的位子，无法生效

行内标签的margin-top和botton 不生效

行内标签的padding-top或bottom 不生效

    <style>
        span{
            /* margin: 100px; */
            padding: 100px;
        }
    </style>
</head>
<body>
    <!-- 行内块元素 内外边距：margin padding -->

    <!-- 如果想要通过margin或者padding改变行内标签的位子，无法生效 -->
    <!-- 行内标签的margin-top和botton 不生效 -->
    <!-- 行内 标签的padding-top或bottom 不生效-->
    <span>span</span>
    <span>span</span>
</body>