复习点3

拉不动的猪
111 阅读6分钟

十号css问题

1. 元素的基本类型

  • 元素分为块级元素（div，p）独占一行【块级布局】，行内元素（button, input, label, select, textarea, a, img）在同一行【内联布局】

2.盒子居中问题

1. 使用Flex布局实现盒子居中

Flex布局是一种强大且灵活的布局方式，非常适合用于居中对齐元素。

cssCopy Code
.container {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 100vh; /* 设置容器高度，可以根据需要调整 */
}

.box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
}

HTML结构：

htmlCopy Code
<div class="container">
    <div class="box"></div>
</div>

2. 使用Grid布局实现盒子居中

CSS Grid也是一种非常强大的布局方式，同样可以方便地实现居中。

cssCopy Code
.container {
    display: grid;
    place-items: center; /* 同时实现水平和垂直居中 */
    height: 100vh; /* 设置容器高度，可以根据需要调整 */
}

.box {
    width: 100px;
    height: 100px;
    background-color: lightcoral;
}

HTML结构同上。

3. 使用绝对定位和transform属性实现盒子居中

如果不想使用Flexbox或Grid布局，也可以通过绝对定位和transform属性来实现居中。

cssCopy Code
.container {
    position: relative;
    height: 100vh; /* 设置容器高度，可以根据需要调整 */
}

.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 实现水平和垂直居中 */
    width: 100px;
    height: 100px;
    background-color: lightgreen;
}

3.BFC边距塌陷问题

CSS中出现边距塌陷（Margin Collapse）的原因主要有以下几种：

  1. ‌相邻块级元素的外边距重叠‌：

    • 当两个或多个块级元素在垂直方向上相邻，并且它们的外边距相遇时，它们之间的距离不是各自外边距的总和，而是取其中的最大值。这是最常见的边距塌陷现象。

  2. ‌父元素与子元素的外边距重叠‌：

    • 如果父元素和子元素都设置了外边距，并且它们之间没有内容或其他非空的元素分隔，那么父元素的外边距可能会与子元素的外边距重叠。这种情况下，最终的外边距将是两者中较大的值。

  3. ‌浮动布局导致的父元素高度塌陷‌：

    • 在使用浮动布局时，如果父元素没有包含其浮动的子元素，那么父元素的高度可能会塌陷，即父元素的高度不再包含其浮动的子元素的高度。这会导致布局结构出现问题。

  4. ‌空元素或高度为零的元素的外边距重叠‌：

    • 如果一个元素没有内容或高度为零，它的外边距可能会与相邻元素的外边距重叠，从而导致布局问题。

为了解决边距塌陷问题，可以采取以下几种方法：

  • ‌给父元素设置外边框（border） ‌：通过给父元素添加边框，可以阻止父元素与子元素的外边距重叠。
  • ‌给父元素设置内边距（padding） ‌：增加父元素的内边距也可以有效地防止外边距塌陷。
  • ‌触发BFC（Block Formatting Context）规则‌：通过将父元素变成一个封闭的盒子，可以阻止外边距的塌陷。例如，可以给父元素添加overflow: hidden属性，或者使用浮动、绝对定位、固定定位等方法来触发BFC规则。

4.左右固定中间只有伸缩

  • 1.inline-block+calc

左边定宽，右边通过calc计算值（100%-宽度left）

css
 代码解读
复制代码
.container {
  width: 100%;
}

.left {
  width: 120px;  /* 左边固定宽度，您可以根据实际需求修改此值 */
  display: inline-block;
}

.right {
  width: calc(100% - 120px);  /* 右边根据左边宽度自适应 */
  display: inline-block;
}

如果使用float替换inline-block 行内块级元素

换成float+calc

使用 float 使 2 个盒子处于同一行，左边固定宽度，右边根据计算来确定宽度实现自适应

css
 代码解读
复制代码
.container::after {
  display: block;
  clear: both;
  content: "";
}

.left,
.right {
  float: left;
  box-sizing: border-box;
}

.right {
  width: calc(100% - 120px);
}
  • 2.float+BFC

使用 float 和 overflow:auto 将元素在同一行，左边设置固定宽度，右边由于 BFC 会自适应

css
 代码解读
复制代码
.container::after {
  display: block; 
  clear: both; /*父级清除浮动*/
  content: ""; /*插入空内容*/
}

.left {
  float: left;
}

.right {
  margin-left: 0;
  overflow: auto;
}
  • 3.grid布局

子元素不需要设置宽度，父元素设置即可

css
 代码解读
复制代码
.grid {
  display: grid;
  grid-template-columns: 120px 100%; 
  height: 200px;
}
  • 4.子元素设置宽高，右边使用margin-left
css
 代码解读
复制代码
.left {
  position: absolute;
  box-sizing: border-box;
}

.right {
  margin-left: 120px;
}
  • 5.float+margin

使用 float 将 2 个元素在同一行，左边设置宽度，右边通过 margin-left 实现隔离 2 者重叠

css
 代码解读
复制代码
.container::after {
  display: block;
  clear: both;
  content: "";
}

.left {
  float: left;
  box-sizing: border-box;
}

.right {
  margin-left: 120px;
}

5.1px问题

  1. ‌使用background-image实现‌：

    • 准备一张符合要求的图片，模拟边框。
    • 使用CSS的background属性将图片设置为背景，并通过background-size调整图片大小。
    cssCopy Code
.background-image-1px {
    background: url(../img/line.png) repeat-x left bottom;
    -webkit-background-size: 100% 1px;
    background-size: 100% 1px;
}

  2. ‌伪类+ transform实现‌：

    • 利用:before或:after伪类创建边框。
    • 通过transform属性缩放伪类元素，实现1px边框效果。
    cssCopy Code
.scale-1px {
    position: relative;
    border: none;
}
.scale-1px:after {
    content: '';
    position: absolute;
    bottom: 0;
    background: #000;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

  3. ‌**viewport + rem实现**‌：

    • 通过设置viewport的meta标签，动态调整页面的缩放比例。
    • 使用rem单位设置边框宽度，根据设备像素比调整html元素的字体大小。
    htmlCopy Code
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
<style>
    html {
        font-size: 10px; /* 基础字体大小根据设备宽度动态调整 */
    }
    .border-1px {
        border-bottom: 0.1rem solid #000; /* 使用rem单位设置边框宽度 */
    }
</style>

  4. ‌使用box-shadow模拟边框‌：

    • 利用CSS的box-shadow属性模拟边框效果。
    cssCopy Code
.box-shadow-1px {
    box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}

  5. ‌多背景渐变实现‌：

    • 使用CSS的渐变背景模拟边框。
    cssCopy Code
.border {
    background-image: linear-gradient(180deg, red, red 50%, transparent 50%),
                      linear-gradient(270deg, red, red 50%, transparent 50%),
                      linear-gradient(0deg, red, red 50%, transparent 50%),
                      linear-gradient(90deg, red, red 50%, transparent 50%);
    background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
    background-repeat: no-repeat;
    background-position: top, right top, bottom, left top;
}

  6. ‌媒体查询处理不同设备像素比‌：

    • 针对Retina屏幕，使用媒体查询适配不同的设备像素比，调整边框样式。
    cssCopy Code
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border {
        border: 0.5px solid #999;
    }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border {
        border: 0.333333px solid #999;
    }
}

6. 省略显示

1. 使用 text-overflow 属性

text-overflow 属性用于设置当文本溢出包含元素时显示的内容。通常与 white-space 和 overflow 属性一起使用。

cssCopy Code
.text-ellipsis {
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden;    /* 隐藏超出内容 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
    width: 100%;          /* 设置宽度，可以是具体值或百分比 */
}
avatar
文章
阅读
粉丝