资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/css的结构与布局

css的结构与布局

GeekQiaQia / 2866人阅读

摘要：实际上表示视口宽度的，而不是。同样，表示视口高度的当视口宽度小于高度时，等于，否则等于。基于的方法这种应该算是最佳的解决办法实现方法当使用布局时，使用在水平和垂直方向都会居中。

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.满幅的背景，定宽的内容

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


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


    

    




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

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


  /* 内容 */



/* 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还有一个公共就是可以将匿名的容器（就是那些没有被标签包住的文本节点）垂直居中：

text


div {
    width: 100px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center; 
}
7.紧贴底部的页脚

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

（1） 最原始的固定高度的解决方案

html结构如下：


    
hello





    
this is ...





    
Made in ...

    
Made in ...




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;
}
GPU云服务器 云服务器 css布局 css与html的区别 html与css的区别 css布局教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111888.html

相关文章

  • CSS Grid布局：什么是网格布局

    摘要：网格单元格网格单元格是指四条网格线之间的空间。所以它是最小的单位，就像表格中的单元格。图中突出显示的网格区域是行线和列线之间的区域，其主要包括了四个网格单元格。 CSS Grid现在已经被W3C纳入到CSS3的一个布局模块当中，被称为CSS Grid Layout Module。而我们较为熟悉的还是将其想像成网格或者栅格，也就是早期的960gs。不管是网格还是栅格或者现在的CSS Gr...

    xiaoqibTn 评论0 收藏0

  • 浏览器渲染页面过程与页面优化

    摘要：由一道面试题引发的思考从用户输入浏览器输入到页面最后呈现有哪些过程一道很常规的题目，考的是基本网络原理，和浏览器加载，过程。所以抽出时间研究下浏览器渲染页面的过程。 由一道面试题引发的思考： 从用户输入浏览器输入url到页面最后呈现 有哪些过程？一道很常规的题目，考的是基本网络原理，和浏览器加载css，js过程。 答案大致如下： 用户输入URL地址 浏览器解析URL解析出主机名 浏览...

    djfml 评论0 收藏0

  • CSS结构与布局

    摘要：当列表中至少包含四项时，命中包括该项之后的所有列表项当然，不止于此，的玩法完全取决于你的脑洞。而且绝对定位对整个布局的影响也太过强烈。如此，对于响应布局也可以不用担心了，虽然有点点，但也算完美的解决了， title: 结构与布局date: 2016-12-11tags: CSS Secrets 0x00 min-content 宽度自适应 CSS3 新增宽度属性值 width:mi...

    figofuture 评论0 收藏0

  • CSS结构与布局

    摘要：当列表中至少包含四项时，命中包括该项之后的所有列表项当然，不止于此，的玩法完全取决于你的脑洞。而且绝对定位对整个布局的影响也太过强烈。如此，对于响应布局也可以不用担心了，虽然有点点，但也算完美的解决了， title: 结构与布局date: 2016-12-11tags: CSS Secrets 0x00 min-content 宽度自适应 CSS3 新增宽度属性值 width:mi...

    BearyChat 评论0 收藏0

  • CSS结构与布局

    摘要：当列表中至少包含四项时，命中包括该项之后的所有列表项当然，不止于此，的玩法完全取决于你的脑洞。而且绝对定位对整个布局的影响也太过强烈。如此，对于响应布局也可以不用担心了，虽然有点点，但也算完美的解决了， title: 结构与布局date: 2016-12-11tags: CSS Secrets 0x00 min-content 宽度自适应 CSS3 新增宽度属性值 width:mi...

    renweihub 评论0 收藏0

  • 如何使用Flexbox和CSS Grid，实现高效布局

    摘要：代码如下页面内容样式接下来，将侧边栏和主内容区域使用一个包含起来。列和行布局部分横跨所有的列。也可以使用简写，起始值和结束值位于同一行上，并用斜杠分隔。设计方法总结以上的布局设计中，使用了来进行整体布局以及设计中的非线性部分。 CSS 浮动属性一直是网站上排列元素的主要方法之一，但是当实现复杂布局时，这种方法不总是那么理想。幸运的是，在现代网页设计时代，使用 Flexbox 和 CSS...

    eternalshallow 评论0 收藏0

发表评论

登陆后可评论

0条评论

GeekQiaQia

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<