【CSS 2】-CSDN博客

本文链接：https://blog.csdn.net/2301_80347441/article/details/136112819

本文详细介绍了CSS盒子模型的概念，包括边框的构成、样式和颜色，内边距与外边距的作用、计算盒子大小的方法，以及各种定位方式的区别，如静态、相对、绝对和固定定位。此外，还涉及到了响应式设计和BOM在网页开发中的应用。

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

盒子模型

CSS盒子模型本质是一个盒子，封装周围的HTML元素，包括:border（边框）、padding（内边距）、margin（外边距）、content（实际内容）

border边框

1. border可以设置元素边框，边框有三部分组成：边框宽度、边框样式、边框颜色

border-width

定义边框宽度，单位是px

border-style

边框的样式

实线：solid 虚线：dashed 点线：dotted

border-color

边框的颜色

  <style>
      div {
        width: 300px;
        height: 200px;
        border-width: 5px;
        border-style: dashed;
        border-color: pink;
      }
  </style>
</head>
<body>
    <div></div>
</body>

边框简写，没有顺序

div {
        width: 300px;
        height: 200px;
        border: 5px dashed pink; 
      }

border-top	上边框
border-bottom	下边框
border-left	左边框
border-right	右边框

利用层叠性，可以使用简写改变其中任意边框的颜色

border-collpase：collapse 表示相邻边框合并在一起，控制相邻单元格的边框

2.边框会影响盒子大小

解决方案：

测量盒子大小时不量边框
如果测量时包含了边框，则需用测量值减去边框宽度

padding内边距

1.用于设置边框与内容之间的距离

padding-top	上内边距
padding-bottom	下内边距
padding-left	左内边距
padding-right	右内边距

简写:

一个值上下左右
两个值上下左右
三个值上左右下
四个值上右下左

2.padding也会影响盒子的实际大小

如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子

解决方案：用width/height减去内边距（注意左右上下都有）

不会撑开盒子的情况：

如果盒子没有指定宽度（默认和浏览器一样宽），则不会撑大盒子

margin外边距

1.margin的使用方式与padding类似

 <style>
      div {
        height: 100px;
        width: 200px;
        background: pink;
      }
      .one {
        margin-bottom: 30px;
      }
  </style>
</head>
<body>
    <div class="one">1</div>
    <div>2</div>
</body>

2.外边距的应用（水平居中对齐）

外边距可以让块级盒子水平居中对齐

条件：

盒子为块级盒子且必须有宽度
margin：0 auto；（上下左右）

行内元素或行内块元素水平居中对齐：给父元素添加text-align:center

3.外边距合并

相邻块元素垂直外边距合并：取两者中的最大值

解决方案：只写一个

嵌套块元素垂直外边距的塌陷：

对于两个嵌套关系(父子关系)的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素

会塌陷较大的外边距值

解决方案：

为父元素定义上边框
为父元素定义上内边距
为父元素添加overflow.hidden

清除内外边距

  * {
        margin: 0;
        padding: 0;
     }

overflow

作用：

显示滚动条、隐藏溢出内容、调整元素尺寸、清除浮动、

hidden：所有超出元素边界的内容都会被隐藏，不会显示滚动条
scroll：无论内容是否超出，都会在元素内部显示滚动条
auto：这是默认值。如果内容超出元素边界，会自动显示滚动条以便查看超出部分；如果没有超出，则不显示滚动条
visible：这意味着内容会溢出元素边界，并显示在元素外部，不会显示滚动条

overflow-x和overflow-y分别控制水平和垂直方向上的溢出处理方式

z-index

是一个 CSS 属性，用于控制元素的堆叠顺序

定义：z-index 表示元素的层级，数值越大，层级越高，展示的位置越靠前。

同级关系：当两个元素处于同一层级（即没有父子关系）时，z-index 值较大的元素将叠加在 z-index 值较小的元素之上。如果 z-index 值相同，则按照它们在文档流中的顺序（即它们在 HTML 中的顺序）来决定哪个元素在上方。

父子关系：如果设置了父元素的 z-index，那么子元素无论是否设置 z-index，其堆叠顺序都会与父元素保持一致。也就是说，子元素会出现在父元素的上方。

同级元素下的子元素关系：如果同级元素的 z-index 生效，那么这些元素的子元素的覆盖关系由父元素的 z-index 决定。具体来说，父元素 z-index 值较大的会覆盖父元素 z-index 值较小的，而子元素则会在各自父元素的上方

响应式网站设计

核心理念是：页面的设计与开发应当根据用户行为以及设备环境（如系统平台、屏幕尺寸、屏幕定

向等）进行相应的响应和调整。这意味着，响应式网页设计可以智能地根据用户使用的设备环境来

展示最适合的布局和排版。

BOM允许开发者访问和操作浏览器的各种组件，例如窗口、标签页、导航栏、地址栏等。通过使

用BOM，开发者可以动态地改变网页的内容、样式和行为，以响应用户的交互和设备环境的变

化。

四种定位的区别

静态定位（static）：这是元素的默认值，即元素在文档流中的正常位置。静态定位的元素不会受

到任何定位属性的影响，它们总是按照常规的文档流进行排列

 选择器 {position:static}

相对定位（relative）：相对定位的元素相对于其在常规文档流中的位置进行定位。即使移动了

一个元素，它仍然保留在文档流中的原始空间，即它的位置会被保留

特点：

它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)
原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来位置）

 选择器 {position:relative}

绝对定位（absolute）：绝对定位的元素相对于最近的已定位父元素（即设置了position属性的元素）进行定位，如果没有已定位的父元素，那么它会相对于最初的包含块（通常是html元素）进行定位。绝对定位的元素会从文档流中完全移除，不再保留其原始位置。

特点：

如果没有祖先元素或者祖先元素没有定位，则以览器为准定位(Document文档)
如果祖先元素有定位(相对、绝对、圆定定位)，则以最近一级的有定位祖先元素为参考点移动位置
不再占有原来的位置，脱离标准流

 选择器 {position:absolute}

固定定位（fixed）：固定定位的元素相对于浏览器窗口进行定位，即使页面滚动，它仍然保持在同

一的位置。固定定位的元素会脱离文档流，不再保留其原始位置

特点：

以浏览器的可视窗口为参服点移动元素,，跟父元素没有任何关系。不随滚动条滚动，
固定定位不在占有原先的位置

固定定位也是脱标的，固定定位也可以看做是一种特殊的绝对定位,

 选择器 {position:fixed}