CSS

您所在的位置：网站首页 › 盒子的效果图片大全 › CSS

CSS

2024-07-08 03:10| 来源: 网络整理| 查看: 265

一. 盒子模型 1.1 盒模型概述

CSS 盒模型实质上是一个包围每个 HTML 元素的盒子。它包括：外边距、边框、内边距以及实际的内容。

对不同部分的说明：

内容 - 盒的内容，其中显示文本和图像。

内边距 - 清除内容周围的区域。内边距是透明的，可以呈现元素的背景。

边框 - 围绕内边距和内容的边框。

外边距 - 清除边界外的区域。外边距是透明的，不会遮挡其后的任何元素。

盒模型允许我们在元素周围添加边框，并定义元素之间的空间。

注：可以通过将元素的margin 和 padding 设置为零来覆盖这些浏览器样式。也可以使用通用选择器对所有元素进行设置：

* { margin: 0; padding: 0; } 在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，

但是会增加元素框的总尺寸。

内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。

外边距可以是负值，而且在很多情况下都要使用负值的外边距。

1.2 宽度和高度

height 和 width 属性用于设置元素的高度和宽度。

height 和 width 属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。

height 和 width 属性可设置如下值：

auto - 浏览器计算高度和宽度（默认）

length - 以 px、cm 等定义高度/宽度

% - 以包含块的百分比定义高度/宽度

.box{ /*高度固定，但宽度会随着窗口变化而变化*/ height: 200px; width: 50%; background-color: powderblue; } .box{ /*高度和宽度固定，不会随窗口变化而变化*/ height: 100px; width: 500px; background-color: powderblue; } 1.3 内边距

padding 属性用于在任何定义的边界内的元素内容周围生成空间。

CSS 拥有用于为元素的每一侧指定内边距的属性：

padding-top （上内边距）

padding-right （右内边距）

padding-bottom （下内边距）

padding-left （左内边距）

所有内边距属性都可以设置以下值：

length - 以 px、pt、cm 等单位指定内边距

% - 指定以包含元素宽度的百分比计的内边距

注：不允许负值

.box{ padding-top: 50px; padding-right: 30px; padding-bottom: 10px; padding-left: 80px; color: white; background-color: red; display: inline-block; }

为了缩减代码，可以在一个属性中指定多个内边距属性。

padding: 25px 50px 75px 100px; ：上内边距是 25px；右内边距是 50px；下内边距是75px；左内边距是100px。

padding: 25px 50px 75px; ：上内边距是 25px；右和左内边距是 50px；下内边距是75px。

padding: 25px 50px; ：上和下内边距是 25px；右和左内边距是 50px。

padding: 25px; ：四个内边距都是 25px。

.box{ /*上内边距是25px，右内边距是50px，下内边距是75px，左内边距是100px*/ padding: 25px 50px 75px 100px; display: inline-block; } .box{ /*上内边距是25px，左右内边距是50px，下内边距是75px*/ padding: 25px 50px 75px; display: inline-block; } .box{ /*上下内边距是25px，左右内边距是50px*/ padding: 25px 50px; display: inline-block; } .box{ /*四个内边距都是25px*/ padding: 25px; display: inline-block; }

如果元素拥有指定的宽度，则添加到该元素的内边距会添加到元素的总宽度中。

若要将宽度保持为设定值，无论填充量如何，那么你可以使用 box-sizing: border-box; 属性。

这将导致元素保持其宽度。如果增加内边距，则可用的内容空间会减少。

w3c盒子模型的范围包括margin、border、padding、content，并且content部分不包含其他部分

IE盒子模型的范围包括margin、border、padding、content,不同的是，IE盒子模型的content部分包含了padding和border.

.box{ width: 300px; height: 300px; padding: 30px; margin: 30px; box-sizing: border-box; color: aliceblue; background-color: red; display: inline-block; } 1.4 边框

border 属性允许你指定元素边框的样式、宽度和颜色。

边框类型

border-style 属性指定要显示的边框类型。

/*（点状边框） */ border-style: dotted; /* （虚线边框） */ border-style: dashed; /* （实线边框） */ border-style: solid; /* （双线边框） */ border-style: double; /* （无边框） */ border-style: none; /* （混合边框） */ border-style: dotted dashed solid double;

边框宽度

border-width 属性指定四个边框的宽度。

可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick 。

border-width 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）：

.box { border-style: solid; border-width: 5px 20px; /* 上边框和下边框为 5px，左右边框为 20px */ } .box { border-style: solid; border-width: 25px 10px 4px 35px; /* 上边框 25px，右边框 10px，下边框 4px，左边框 35px */ }

边框颜色

border-color 属性用于设置四个边框的颜色。

可以通过以下方式设置颜色：

name - 指定颜色名，比如 “red”

HEX - 指定十六进制值，比如 “#ff0000”

RGB - 指定 RGB 值，比如 “rgb(255,0,0)”

HSL - 指定 HSL 值，比如 “hsl(0, 100%, 50%)”

transparent（透明）

1.5 外边距

margin 属性用于在任何定义的边框之外，为元素周围创建空间。

CSS 拥有用于为元素的每一侧指定外边距的属性：

margin-top （上外边距）

margin-right （右外边距）

margin-bottom（下外边距）

margin-left （左外边距）

所有外边距属性都可以设置以下值：

auto - 浏览器来计算外边距

length - 以 px、pt、cm 等单位指定外边距

% - 指定以包含元素宽度的百分比计的外边距

注：允许负值

为了缩减代码，可以在一个属性中指定多个外边距属性。

margin: 25px 50px 75px 100px; ：上外边距是 25px；右外边距是 50px；下外边距是 75px；左外边距是 100px。

margin: 25px 50px 75px; ：上外边距是 25px；右和左外边距是 50px；下外边距是 75px。

margin: 25px 50px; ：上和下外边距是25px；右和左外边距是 50px。

margin: 25px; ：四个外边距都是 25px。

你可以将 margin 属性设置为 auto，以使元素在其容器中水平居中。该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配

1.6 外边距合并

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。

注：只有普通文档流中块元素的垂直外边距才会发生外边距合并。行内元素、浮动元素或绝对定位之间的外边距不会合并。

1.7 BFC—块级格式化上下文

将BFC看成是一种属性，当拥有该属性的元素就相当于一块独立的区域。

实现BFC属性的方法

浮动元素，float 除 none 以外的值

定位元素，position的值不是static或者relative。

display 为 inline-block 、table-cell、table-caption、table、table-row、table-row-group、 table-header-group、table-footer-group、inline-table、flow-root、flex或 inline-flex、grid或 inlinegrid

overflow 除了 visible 以外的值（hidden，auto，scroll）

根元素就是一个 BFC

BFC的作用

1、避免外边距重叠（防止margin塌陷）

margin塌陷的意思：给两个div设置相同的属性，那么两个div之间的间隙应该是margin-bottom+margin-top的外边距，但是没有设置BFC属性，块的上外边距和下外边距会合并为单个边距，取最大值，如果margin相等则仅为一个，这就是外边距重叠（margin塌陷）。

/* .box{ overflow: hidden; } */ .box1{ width: 300px; height: 300px; background-color: red; margin-bottom: 50px; /* (display: inline-block;) */ } .box2{ width: 200px; height: 200px; background-color: green; margin-top: 30px; }

2、用于清除浮动

当给一个父元素设置边框，内部元素会将父元素撑起来，但是如果内部元素设置了 float属性，则该父元素会失去支撑，从而没有高度。

设置了浮动属性的子元素，父元素失去支撑。通过给父元素设置BFC属性，来实现清除浮动

.parent{ border: 5px solid red; overflow: hidden; } .son{ width: 100px; height: 100px; background-color: greenyellow; float: left; }

3、阻止元素被浮动元素覆盖

当前一个兄弟元素设置了浮动属性时，后一个兄弟元素会跑到前一个兄弟元素的位置去，从而后一个兄弟元素被覆盖。

通过给被影响的兄弟元素设置BFC属性，来解决被覆盖的情况

.box1 { width: 300px; height: 300px; background-color: red; float: left; } .box2 { width: 400px; height: 400px; background-color: green; overflow: hidden; } 1.8 解决外边距塌陷

满足以下条件就会产生外边距塌陷现象：

子元素在父元素里面子元素中有margin-top或者margin-bottom值

解决方案：

第一种：给父元素增加内边距padding值

第二种方式：父元素增加边框border值

第三种方式：父元素增加overflow：hidden

第四种方式：给父元素或者子元素增加浮动，让其脱离标准流都可以

第五种：将父元素转变为行内块元素，display：inline-block

第六种：给父元素或者子元素定位都可以，原理同样是使其脱离标准流，不过只能用绝对定位和固定定位

第七种：给父盒子增加flex或者inline-flex

二. 定位 2.1 position属性

position 属性规定应用于元素的定位方法的类型。

有五个不同的位置值：

static

relative

fixed

absolute

sticky

元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。

2.2 position：static；

HTML 元素默认情况下的定位方式为 static（静态）。

静态定位的元素不受 top、bottom、left 和 right 属性的影响。

position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位。

.box1{ position: sticky; top: 100px; （不起作用） left: 100px;（不起作用） background-color: red; border: 1px solid red; } 2.3 position：relative；

position: relative; 的元素相对于其正常位置进行定位。

设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。

不会对其余内容进行调整来适应元素留下的任何空间。

.box1 { position: relative; left: 300px; top：300px border: 1px solid red; background-color: red; width: 300px; height: 300px; } 2.4 position：absolute；

position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位）。

如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。

.father{ position: relative; left: 300px; top：300px border: 1px solid red; background-color: red; width: 300px; height: 300px; } .son{ /*相对于父元素的位置而移动*/ border: 1px solid orange; position: absolute; left: 100px; top: 100px; background-color: orange; width: 100px; height: 100px; } 2.5 position：fixed；

position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。

top、right、bottom 和left 属性用于定位此元素。

固定定位的元素不会在页面中通常应放置的位置上留出空隙。

.box1{ /*位置不会随着页面滚动而发生改变*/ position: fixed; top: 100px; left: 100px; background-color: red; border: 1px solid red; } 2.6 position：sticky；

position: sticky; 的元素根据用户的滚动位置进行定位。

粘性元素根据滚动位置在相对和固定之间切换。起先它会被相对定位，

直到在视口中遇到给定的偏移位置为止，然后将其“粘贴”在适当的位置。

.box1{ position: sticky; top: 0; background-color: red; border: 1px solid red; } 2.7 重叠元素

在对元素进行定位时，它们可以与其他元素重叠。

z-index 属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）。

元素可以设置正或负的堆叠顺序。

/* 重叠元素 */ .box1{ position: absolute; border: 1px solid red; background-color: red; width: 300px; height: 300px; z-index: 1; } .box2{ position: absolute; border: 1px solid orange; background-color: orange; width: 100px; height: 100px; z-index: 0; }

重叠元素案例

Document /* *{ margin: 0; padding: 0; } */ .box{ position: relative; width: 640px; height: 274px; } .box p{ position: absolute; box-sizing: border-box; bottom: 0; left: 0; width: 100%; background-color: rgb(0, 0, 0,0.3); color: white; padding: 5px 10px; margin: 0; }

斗破苍穹第三季官宣：新版纳兰嫣然被点赞

![重叠元素案例](https://img-blog.csdnimg.cn/000c65f8e9754586abe7157a1ce4c44c.jpeg#pic_center)

【本文地址】

公司简介

联系我们