css--内外边距、盒子模型、位置、浮动

coding_ksy

已于 2022-11-02 20:09:40 修改

阅读量1k

点赞数 3

分类专栏： # javaweb 文章标签： css 前端

于 2022-11-02 20:08:50 首次发布

本文链接：https://blog.csdn.net/qq_60498436/article/details/127623277

版权

javaweb 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、内外边距

1.margin

1.1属性为给定元素设置所有四个（上下左右）方向的外边距属性。

上下左右具有四个方向:margin-top、margin-right、margin-bottom、margin-left
可取值：

length：固定值
percentage：相对于包含块的宽度，以百分比值为外边距(百分比相当于是取得父元素宽度的百分比)。
auto让浏览器自己选择一个合适的外边距。有时，在一些特殊情况下，该值可以使元素居中。

1.2如何设置外边距为零，代码如下：

在body进行设置，style=“margin:0;”

<body style="margin: 0;">
    <div>
    </div>
</body>

1.3设置水平居中，代码如下：

margin:0 auto;

注意点:外边距的重叠性问题:

1.设置子元素的magin时，带动父元素一起下拉，父元素与子元素并未分离：

原因分析:主要是因为父元素未设置外边框

父元素与后代元素：父元素时没有上边框和padding，后代元素的margin-top会溢出，溢出后父元素的margin-top会与后代元素取最大值。

解决方案：

方案一:设置padding或border -top

div-father{
    border-top:1px soild;
}

div-father{
    padding-top:1px;
}

方案二：设置overflow的属性(缺点:在想要单独使用overflow时，会比较不方便)

div-father{
    overflow:hidden;

}

方案三：在父元素上方加一个空元素----最优解法

.div-father::before{
    content:"";
    display:table;

}

2.两个div在上下margin边距设置时，如果上边元素的margin-bottom为x1，下边的元素的margin-top为x2,则两个div的竖直间隔将会为：x1和x2的最大值：

另外设置左右时，将不会出现这种情况

2.padding

可以接受1~4个值（上、右、下、左的顺序）

可以分别指明四个方向：padding-top、padding-right、padding-bottom、padding-left
可取值

length：固定值
percentage：相对于包含块的宽度，以百分比值为内边距(相当于是父级元素宽度的百分比)

3.每个元素的真实宽度

width=content+margin+padding（这是默认的情况，content-box盒子模型）

此外，还可以对box-sizing的属性设置为border-box，这样，盒子模型的宽度就不会受到margin和padding的影响了。

二、盒子模型（box-sizing）

CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。

（默认是都是内容的盒子）

content-box：是默认值，设置border和padding均会增加元素的宽高。
border-box：设置border和padding不会改变元素的宽高，而是挤占内容区域。

三、位置（position）

取值L:

static：该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
relative：该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。top, right, bottom, left等调整元素相对于初始位置的偏移量。
absolute：元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
fixed：元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。
sticky：元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。

四、浮动（float）

float
float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反）。

由于float意味着使用块布局，它在某些情况下修改display 值的计算值：

display为inline或inline-block时，使用float后会统一变成block。
取值：
left：表明元素必须浮动在其所在的块容器左侧的关键字。
right：表明元素必须浮动在其所在的块容器右侧的关键字。
clear
有时，你可能想要强制元素移至任何浮动元素下方。比如说，你可能希望某个段落与浮动元素保持相邻的位置，但又希望这个段落从头开始强制独占一行。此时可以使用clear。

取值：
left：清除左侧浮动。
right：清除右侧浮动。
both：清除左右两侧浮动