冰冻果冻-CSDN博客

原创父盒高度的塌陷和解决方法＋两列布局

这种现象通常发生在父盒内部的元素使用了浮动或绝对定位，而没有清除浮动或设置适当的高度。在这种情况下，父盒将不会根据其内部元素的高度自动调整自身的高度。总之，通过清除浮动或设置适当的高度可以解决父盒高度塌陷的问题，确保父盒的高度能够根据内部元素的高度自动调整。父盒高度的塌陷是指父级容器（父盒）内部元素的高度小于父盒的实际高度，导致父盒的高度被塌陷或压缩的现象。：可以通过在父盒的样式中设置固定的高度或最小高度来解决高度塌陷问题。：可以在父盒的样式中添加。利用设置高度解决父盒塌陷。：在父盒的样式中添加。

2024-10-16 00:02:32 488

原创 CSS--盒模型浮动与清除浮动

CSS浮动（float）是一种CSS属性，用于定位元素。设置浮动后，元素会在父元素中横向浮动，并且会影响其他元素的布局。特点浮动定位语法：浮动元素可以向左或向右浮动，取决于float属性的值。在浮动元素之后的元素会紧跟着浮动元素的位置，形成流动布局。浮动元素会尽可能地占据父元素的宽度，直到碰到其他浮动元素或者父元素的边界。

2024-10-15 22:46:31 423

原创盒模型--绝对位置

使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素，就以浏览器窗口为基准进行定位。原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后，生成一个块级框，与原来它在正常流中生成的框无关。绝对定位的盒子从标准流中脱离，对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。比如：一群人排队，前面的人突然离开，后面的人自动补位，使队伍和之前一样。“已经定位”是指定义了除 static 之外的position。

2024-10-12 16:39:39 298

原创重生之我学--盒模型--相对定位

absolute生成绝对定位的元素，元素的位置通过left、top、right和 bottom 属性进行规定。fixed生成绝对定位的元素，相对于浏览器窗口进行定位，元素的位置通过left、top、right以及bottom属性进行规定。collapse主要用来因篡改表格的行和列，隐藏的行和列能够被其它内容使用，对于表格外的其他对象，其作用等同于 hidden。说明：用于设置对象的最小高度，即为对象的高度设置一个最低限制。使用相对定位的盒子会相对于自身原本的位置，通过偏移指定的距离，到达新的位置。

2024-10-12 14:25:12 629

原创什么是文档流？文档的流的概念与缺陷

文档流对于网页布局的控制和调整非常重要，可以通过设置CSS属性来改变元素在文档流中的位置和布局方式，例如使用浮动、定位、flex布局等。同时，文档流也是响应式布局和流体布局的基础，可以根据浏览器窗口大小的变化自动调整元素的排列方式和布局。是网页布局中的一个重要概念，描述了元素在页面上按照从上到下、从左到右的顺序依次排列的方式。文档流是网页中元素默认的排列方式，也是浏览器渲染引擎根据HTML文档的结构和CSS规则来确定元素位置的基础。

2024-10-11 21:40:39 356

原创盒模型--盒模型的属性

盒模型是指在网页设计中，将元素看作是一个矩形盒子的模型。每个元素都包含内容区域（content）、内边距区域（padding）、边框区域（border）和外边距区域（margin）四个部分。这些部分一起决定了元素在页面中的位置、大小和样式。内容区域指的是元素中实际显示内容的区域，可以设置元素的宽度、高度、背景颜色等属性。内边距区域是内容区域与边框之间的区域，可以设置元素的内边距（padding），用来控制内容与边框之间的距离。边框区域。

2024-10-11 12:55:12 811