css的结构与布局

1.自适应内部元素

在css中,不给元素一个height值时,元素会自适应其内部的元素高度,有时我们想让元素的宽度也达到此效果,应用场景如下。

如下当前的这种布局,想要改成最外层的div的宽度由当前的图片撑开的效果,这时就要用到min-content这个属性值。

css代码如下:

div {
    /*只需要给最层的div的宽度值设置成min-content即可 */
    width: min-content;
}

最终效果:

min-content将解析这个容器内部最大的不可断行元素的宽度(即最宽的单词,图片或具有固定宽度的盒元素)

张鑫旭有一篇文章对这个属性做了详细的讲解,地址如下:
http://www.zhangxinxu.com/wor...

2.精确的控制表格的列宽

在使用表格布局时,当表格的内容不确定时,布局很难预测,因为表格的列宽是根据它的内容进行计算的,即使显示的设置了width,也不会生效,还是会根据它的内容生成宽度。会根据加载的内容不停的重绘,直到加载完。
平时生成的表格如下:

为了让设置的宽度生效,并且能让过多的文字省略号显示,解决办法就是使用table-layout: fixed这个样式
代码如下:

table {
    table-layout: fixed;
    width: 100%; /*必须指定一个width,否则不生效*/
}

最终的效果如下:

3.根据兄弟元素的数量设置样式

在一些应用场景中,我们可能需要根据元素的数量来设置样式,比如说列表越来越长的时候,我们可能需要调整间隔或者大小,来减少长度,提升用户的体验
例如当列表项中共有4项的时候,选中所有列表,可以通过使用scss这种预处理器,编写mixin
代码如下:

/*定义mixin*/
@mixin n-items($n) {
  &:first-child:nth-last-child(#{$n}),
  &:first-child:nth-last-child(#{$n}) ~ & {
    @content;
  }
}

/*调用方法*/
li {
/*当列表正好包含四项时 命中所有列表项*/
/*定义样式*/
  @include n-items(4) {
    width: 40px;
    height: 100px;
    background: red;
    float: left;
    margin: 10px;
  }
}

效果如下:

4.根据兄弟元素的数量范围匹配元素

应该场景同上,解决办法也是编写mixin
例如,当列表的总数是4或者更多时,选中所有列表项
代码如下:

/*定义mixin*/
@mixin n-items($n) {
  /*当列表的总数是4或者更多时,选中所有列表项*/
  &:first-child:nth-last-child(#{$n + 4}),
  &:first-child:nth-last-child(#{$n + 4}) ~ & {
    @content;
  }
}

// 改写成 -n + 4 表示列表中有4个或者小于4时,选中所有

// 同理,如2 ~ 6时,设置 n + 2 ~ -n + 6
@mixin n-items($n) {
  &:first-child:nth-last-child(#{$n + 2}):nth-last-child(#{$ -n + 6}),
  &:first-child:nth-last-child(#{$n + 2}):nth-last-child(#{$ -n + 6}) ~ & {
    @content;
  }
}

5.满幅的背景,定宽的内容

页面上有很多布局是那种内容是固定宽的,背景是占满整个视口的宽的,比如下面这种布局:


实现方式有很多种,一般我们实现的代码结构都是这种的:

<footer>
    <div class="wrapper">
    </div>
</footer>

/* css样式*/
footer {
    background: "#333";
}
.wrapper {
    max-width: 900px;
    margin: 1em auto;
}

其中margin: 1em auto;就是为了让内容div居中,我们有一种更好的方式,只用一层DOM结构实现上面的布局,就是使用calc这个属性。
实现代码如下:

<footer>
  /* 内容 */
</footer>

/* css样式*/
footer {
    background: "#333";
    /* 当浏览器不支持calc的时候回退一下*/
    padding: 1em;
    padding: 1em calc(50% - 450px);
}

原理:百分比是按照视口的宽度来解析的,所以即使里面的内容不设置宽,也会给里面的内容留出 450*2的空间,达到了之前设置 max-width: 900px;的效果。

6.垂直居中

在css中水平居中比较简单,对于行级元素,对它的父元素使用text-align: center;对于块级元素,就对它自身使用margin: auto;对于垂直居中比较难处理,目前的解决方法有:

1.基于绝对定位的方法

(1) 当元素是定宽高的时候:

div {
    width: 200px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -100px;
}

通过calc代码可以简化成下面这样:

div {
    width: 200px;
    height: 100px;
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 100px);
}

(2) 对于那些宽高不定的元素,实现方法如下:

div {
    position: absolute;
    top: 50%;
    left: 50%;
    transfrom: translate(-50%, -50%);
}

以上方案也有一个弊端就是必须是绝对定位的元素。

2.基于视口单位的方法

css3中定义了一些视口相关的单位:

  • vw 是与视口宽度相关的。1vw 实际上表示视口宽度的1%,而不是100%。
    „

  • 同样,1vh表示视口高度的 1%

  • 当视口宽度小于高度时,1vmin等于 1vw,否则等于 1vh。

  • 当视口宽度大于高度时,1vmax等于 1vw,否则等于 1vh。
    所以我们的垂直居中可以这样实现:

div {
    width: 200px;
    padding: 2px 4px;
    margin: 50vh auto 0;
    transform: translateY(-50%);
}
**注:这里不使用50%,而是视口单位的原因是,margin的百分比是以父元素的宽度作为解析基准的,不论是margin-top or margin-left**

这种的方法是有局限性的,只能用在视口中居中的场景。

3.基于flex的方法

这种应该算是最佳的解决办法:
实现方法:

body {
    display: flex;
}

div {
    margin: auto;
}

当使用flex布局时,使用margin: auto; 在水平和垂直方向都会居中。在不指定width的情况下,width: max-content;

flexbox还有一个公共就是可以将匿名的容器(就是那些没有被标签包住的文本节点)垂直居中:

<div>text</div>

div {
    width: 100px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center; 
}

7.紧贴底部的页脚

具有块级样式的页脚,当页面内容足够长的时候,页脚会紧贴视口的底部;但是当页面内容的长度 < 视口height - 页脚height的时候,页脚就会紧贴在内容的下面。一般的设计是给页脚一个固定的height,这种显然不健壮,在css3中有更好的解决方案。

(1) 最原始的固定高度的解决方案

html结构如下:

<header>
    <h1>hello</h1>
</header>
<main>
    <p>this is ...</p>
</main>
<footer>
    <p>Made in ...</p>
    <p>Made in ...</p>
</footer>

header {
    height: 10px
}
footer p {
    line-height: 1.5px;
    padding: 1px;
    margin: 1px;
}

假设当前的页脚文字永远不会折行,可以计算当前的页脚的高度是:2 * 行高 + 3 * 段落垂直外边距 + 页脚垂直内边距 = 2 * 1.5px + 3 * 1px + 1px = 7px;

main {
    min-height: calc(100vh - 7px - 10px);
    /* 避免内边距或外边距对高度记得算影响 */
    border-sizing: border-box;
}

当header和main放在一个div里时,css样式可以直接写成 div{min-height: calc(100vh - 7px)};
这种方法的局限性是不允许文字折行,并且布局是这种简单的布局,并且每当页脚的尺寸变化时,都需要跟着调整min-height的值。

(2)基于flex的解决方案

body {
    display: flex;
    flex-flow: columm;
    min-height: 100vh; /* 至少会占据整个视口的高度 */
}

main {
    flex: 1;
}

1 条评论
nant · 4月28日

很实用的技术点,赞

回复

载入中...
mary_xi mary_xi

15 声望