移动web中的随笔

青春正美
156 阅读3分钟

比较散的知识点

  1. flex-wrap 实现弹性盒子多行排列, 这是因为设置了 flex 后,盒子会自动排列成一行, 不会换行. 所以要通过 flex-wrap: wrap;来实现换行.

  2. 关于文字省略; 如果多行文字, 最后面的一行文字的末尾出现省略号, 需要给这个装多行文字的标签设置固定的高度.

  3. 如果是单行文字的末尾出现省略号, 则需要给这个装单行文字的标签设置固定的宽度.

  4. 行内元素加了绝对/固定定位可以设置宽高; 块级元素加了绝对/固定定位,如果不给宽高,宽高由内容撑开;嵌套块级元素加了绝对/固定定位,不会有塌陷问题.

  5. 字体图标: 字体图标有个默认的字体大小, 他的权重大于继承, 所以给其父类设置字体大小样式的时候,并不会改变字体图标本身的大小。

  6. ele:nth-of-type(n)是指选中父元素下第n个ele元素，而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择失败。测试代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div p:nth-child(2) {
      color: skyblue;
    }

    div p:nth-of-type(2) {
      color: red;
    }
  </style>
</head>

<body>
  <div>
    <span>1</span>
    <p>2</p>
    <p>3</p>
  </div>
</body>

</html>

image.png

上面的例子，div p:nth-child(2)选择的是<p>2</p>节点，而div p:nth-of-type(2)则选择的是<p>3</p>节点。 要注意如果div的第二个子类不是p ，则div p:nth-child(2)就选不到。

  1. 盒子里面放图片的时候，盒子设置宽高后， 图片可以width:100%; height 看情况，如果盒子里只有图片，则盒子高度和宽度的设置可以和图片一样大，此时图片可以宽高都是盒子的100%；如果盒子里除了图片外还有别的内容，则图片只设置width:100%;
  2. 弹性盒子width:100%；默认是视口宽，只设置高；盒子里有亲儿子，则亲儿子可以只设个宽，高度默认拉伸成和父亲一样高，亲儿子里有图片，则图片设置width:100% , 高度自适应。

第一种情况： 父类盒子设为flex；里面包含2个a标签， 每个a 标签里放一个图片；此时父类width默认是视口宽度，只需设置个height即可。里面的a只设置个具体宽度width； 高度自动拉伸为和父类盒子一样高，这是flex的特性；a里面的图片设置为width: 100%即可。

image.png

第二种情况：

snipaste20220409_134547.jpg

分为左右两个大盒子，以左边为例，大盒子设置个宽度，高度由内容撑开。 img设置为width: 100%; 高度自适应；三个p标签都设置个高度撑开盒子。每个p标签也可以外面再套个div盒子。

第三种情况：

snipaste20220409_140121.jpg

最大的盒子为item, 并设置为flex属性和高度height; 其包含左右2个盒子，分别为div和content，这两个盒子都设置个具体的宽度, 其高度自动拉伸为父类(item)盒子的高度。

左边的div盒子里放个图片，图片设置width:100%; 高度自适应；

右边的content盒子里面的h3标签 还有几个p标签都设置高度。

h3和几个p标签的高度加起来有两种情况:

  1. h3标签和几个p标签的高度加起来大于content盒子的高度，但此时content盒子的高度不会变大，还是和父类高度一样，这是因为content盒子的父类盒子item设置了固定高度，即：h3和几个p标签种肯定会溢出content盒子，尽量h3标签和几个p标签的高度设置合理一点。

  2. h3标签和几个p标签的高度加起来小于content盒子的高度，则可以继续往content盒子里放标签。

avatar
文章
阅读
粉丝