前端DAY4

最新推荐文章于 2024-09-13 23:32:49 发布

记录学习jblog

最新推荐文章于 2024-09-13 23:32:49 发布

阅读量992

点赞数 19

文章标签：前端

本文链接：https://blog.csdn.net/weixin_45982587/article/details/135731411

版权

本文详细介绍了CSS中的盒子模型，包括元素的显示模式（块级、行内、行内块级）、盒模型的组成部分（内容、内边距、边框和外边距），以及如何设置元素的宽度、高度、内边距、边框和外边距。此外，还涵盖了默认宽度、空白问题和行内块的幽灵空白解决方案。

摘要由CSDN通过智能技术生成

学习CSS的盒子模型。

一些背景知识

CSS长度单位

px：像素；em：相对元素font-size的倍数；rem：相对根(即html)字体大小；%：相对父元素来进行计算。

注：CSS中设置长度必须加单位，否则样式无效。

元素的显示模式

1.块元素

特点

1.在页面中独占一行

2.默认宽度：撑满父元素。默认高度：由内容撑开

3.可以通过CSS设置宽高

常见块元素：

2.行内元素

1.在页面中不占满一行

2.默认宽度：由内容撑开。默认高度：由内容撑开

3.无法通过CSS设置宽高

常见行内元素：

3.行内块元素

1.在页面中不占满一行

2.默认宽度：由内容撑开。默认高度：由内容撑开

3.可以通过CSS设置宽高

常见行内元素：

4.修改元素的显示模式

/* 元素作为块级元素出现 */
display:block;
/* 元素作为行内元素出现 */
display: inline;
/* 元素作为行内块元素出现 */
display: inline-block;
/* 元素会被隐藏 */
display: none;

盒子模型

盒子模型的组成部分

CSS会把所有的HTML元素看成一个盒子。

margin外边框：盒子与外界的距离。（若盒子给了具体宽度不会影响盒子大小但会影响盒子位置）

border边框：盒子的边框。

padding内边距：紧贴内容的补白区域。

content内容：元素中的文本或后代元素都是他的内容。

盒子大小=content+两边padding+两边border

关于默认宽度：

所谓默认宽度，就是不设置width属性时元素所呈现的宽度。

总宽度=父的content-自身的左右margin

内容区的宽度=父的content-自身的左右margin-自身左右border-自身左右padding

写完后可以在开发者工具中检查效果。

例如编写了下面的代码：

<body>
     <div>hh</div>
</body>

    <style>
        div{ 
            background-color: gray;
            width: 300px;
            height: 300px;


            padding: 100px;
        }
    </style>

鼠标右键——检查，既可看到盒子的数据

注意：要查看div盒子的数据，一定要点击div后，显示才是div盒子的数据。

由图可以看出，div盒子的content区是300*300，padding是100。

盒子的内容区content

设置内容区的高度和宽度。

/* 设置内容区域的宽度 */
/* 可以设置一个精准值 */
width: 300px;
/* 也可以设置一个范围值 */
min-width: 100px;
max-width: 500px;

/* 设置内容区域的高度 */
height: 300px;
min-height: 100px;
max-height: 500px;

盒子的内边距padding

/* padding单独设置 则四个方向上都是这个100px */
            padding: 100px;

            /* padding复合去设置 每个方向上可以设置不同的值 */
            padding-top: 50px;
            padding-right: 20px;
            padding-bottom: 100px;
            padding-left: 70px;

注意：

padding值不能为负数。

行内元素设置padding时，左右padding有效果，但上下padding可能会有问题。

块级元素、行内块元素，四个方向的padding都可以有效果。

盒子的边框border

            /* 设置样式 可以合起来一起写也可以分开写 */
            /* border-style: solid; */
            border-left-style: solid;
            border-right-style: solid;
            border-top-style: solid;
            border-bottom-style: solid;

            /* 设置宽度 可以合起来一起写也可以分开写 */
            /* border-width: 10px; */
            border-left-width: 10px;
            border-right-width: 10px;
            border-top-width: 10px;
            border-bottom-width: 10px;

            /* 设置颜色 可以合起来一起写也可以分开写 */
            /* border-color: aqua; */
            border-left-color: aqua;
            border-right-color: aqua;
            border-top-color: aqua;
            border-bottom-color: aqua;

            /* 设置边框圆角 */
            border-radius: 10px;

盒子的外边距margin

概念

写法和之前的一样。可以单独写margin，也可以对其上下左右分别设置不同的margin。

注意：

1.子元素的margin是参考父元素的content计算的。

2.上margin、左margin会影响自身的位置；下margin、右margin会影响兄弟元素的位置。

3.对应行内元素，左右的margin是可以完美设置的，上下的margin设置后是无效的。

4.margin的值可以设置为auto，对一个块级元素左右margin设置auto可以实现该元素在其父元素内水平居中。

5.margin可以为负值。

margin塌陷问题

第一个子元素的上margin会作用在父元素上，最后一个子元素的下margin也会作用在父元素上。

解决问题：

方法1：给父元素设置不为0的padding

方法2：给父元素设置不为0的border

方法3：给父元素设置CSS样式overflow:hidden（推荐）

margin合并问题

上面元素的下外边距和下面元素的上外边距会合并，两个元素的边距取两个边距的最大值而不是相加。（左右元素的外边距不会合并）

解决问题：无需解决，布局时只要设置一个外边距就可以了。

处理内容溢出

使用overflow:hidden使得溢出的内容隐藏。

隐藏元素的方式

方式一：visibility:hidden（元素看不见了但是还会占有原来的位置）

方式二：display:none(元素看不见了且不占任何位置，没有大小宽高）

元素默认样式

元素一般都有些默认样式，例如<a>、<h1>~<h6>、<p>、<ul>、ol、<body>

（body有一个8px的margin。很重要）

元素的默认样式优先级>继承的样式。所以如果要重置默认样式，选择器一定要直接选择到该元素

布局小技巧

需要实现子元素在父元素居中效果。

1.若子元素是块元素。

/* 使得子div水平居中父div */

margin-left: auto;（父元素）

margin-right: auto;（父元素）

/* 使得子div垂直居中父div */

margin-top: 150px;（子元素设置，值为父content-子元素盒子总高）

/* 解决margin塌陷问题 */

overflow: hidden;(父元素中）

<style>
        .outer{
            width: 400px;
            height: 400px;
            background-color: gray;

/* 解决margin塌陷问题 */
            overflow: hidden;
        }
        .inner{
            width: 200px;
            height: 100px;
            background-color: orange;

            /* 使得子div水平居中父div */
            margin-left: auto;
            margin-right: auto;
            
            /* 使得子div垂直居中父div */
            margin-top: 150px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">inner</div>
    </div>
</body>

2.若子元素是行内元素或行内块元素，则将其看成文本去调整居中。

/* 行内元素可以看成文本来去调整其位置 */

/* 使得子span水平居中父div */

text-align: center;（父元素）

/* 使得子span竖直居中父div */

line-height: 400px;（父元素的line-height=height）

vertical-align: middle;（每个子元素）

<style>
        .outer{
            width: 400px;
            height: 400px;
            background-color: gray;

            /* 行内元素可以看成文本来去调整其位置 */
            text-align: center;
            line-height: 400px;
        }

        .inner{
            background-color: yellow;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="outer">
        <span class="inner">出来玩啊</span>
    </div>
</body>

ps：若想要绝对居中，则设置父元素font-size:0;

原因：因为字体设置的原因，若在父元素中显示font-size，会偏向下不能居中，所以设置父元素font-size:0;要显示出其文字，再在文字的标签中设置新的font-size值。