简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > display初探讨和实现列间隙与等高列中的应用
Blogger Information
Blog 54
fans 6
comment 31
visits 106649
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
display初探讨和实现列间隙与等高列中的应用
吾逍遥
Original
696 people have browsed it

一、学习的新知识

今天主要学习了盒模型的box-sizing对宽度影响，以及列间隙和用表格模式实现等高列。可以说又认识了几个新知识点：

  • calc() 此CSS函数允许在声明CSS属性值时执行一些计算，可用运算符是+、-、*、/。要注意是操作符前后要有空格 ，否则无效。
  • display:table 表格布局，这个实在是让我又重新认识display，后来查了mdn发现布局中display还真是少不了，有N多值，如常见的flex和grid。

二、CSS中函数

为什么单独来说，因为后面用的越来越多，尤其是自适应流式布局中经常要用到。这里主要学习CSS中两个重要的CSS函数。

1. var()

var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。

语法 var(\<自定义属性名> , \<后备值>? )

  • 自定义属性名 以两个破折号开始的任何有效标识符，自定义属性仅供作者和用户使用。
  • 后备值 在自定义属性值无效的情况下保证函数有值,可以是多个，此时从左到右，检测到有效值时停止继续查找。
  1. /* 基本使用 */
  2. :root {--main-bg-color: pink;}
  3. body { background-color: var(--main-bg-color); }
  1. /* 后备值 */
  2. /* 在父元素样式中 */
  3. .component { --text-color: #080; /* header-color 并没有被设定 */ }
  4. /* 在 component 的样式中： */
  5. .component .header { color: var(--header-color, blue); /* 此处 color 被回退到 blue */ }
  6. .component .text { color: var(--text-color, black); }

2. calc()

calc() 此CSS函数允许在声明CSS属性值时执行一些计算 。它可以用在如下场合：长度length、百分比percentage、数值number、角度angle、时间time和重复frequency。

语法 calc(表达式expression)

  • 运算符 只能是：加法+、减法-、乘法*和除法/四种， 运算符前后必须有空格 ，否则无效。
  • 运算对象 可以使用任意length值。可以在一个表达式中混用这类值的 不同单位 。在需要时，你还可以使用 小括号来建立计算顺序 。
  • 嵌套 calc()函数支持嵌套，但支持的方式是:把被嵌套的calc()函数全当成 普通的括号 。

应用一:左右外边距固定，内容居中

以前margin实现居中就是auto，让浏览器来计算左右外边距。现在有了calc(),我们也可以实现居中,并且更灵活，如实现 左右外边距固定，内容居中显示 。

  1. <div class="banner">This is a banner!</div>
  2. <style>
  3. .banner {
  4.   box-sizing: border-box;
  5.   margin:auto 40px;
  6.   width: calc(100% - 80px);
  7.   border: 1px solid;
  8.   box-shadow: 1px 2px;
  9.   background-color: yellow;
  10.   text-align: center;
  11. }
  12. </style>

应用二:自适应容器

容器中子元素可以按一定比例适应容器的变化

  1. .container {
  2. width: 80%;
  3. background-color: lightgray;
  4. font-size: 0;/* 解决inline-block水平间隙,此时子元素要重新设置字号 */
  5. }
  6. .item {
  7. display: inline-block;
  8. color: white;
  9. font-size: 1rem;
  10. background-color: #0072b0;
  11. width: calc(100% / 4 - 6px);
  12. margin:auto 3px;
  13. text-align: center;
  14. }
  15. <div class="container">
  16.     <div class="item"><p>11</p></div>
  17.     <div class="item"><p>12</p></div>
  18.     <div class="item"><p>23</p></div>
  19.     <div class="item"><p>34</p></div>
  20. </div>

效果

3. calc()和var()结合使用

CSS中经常要calc()和var()配合使用，此时var()看成一个普通运算对象。

  1. .foo {
  2.   --widthA: 100px;
  3.   --widthB: calc(var(--widthA) / 2);
  4.   --widthC: calc(var(--widthB) / 2);
  5.   width: var(--widthC);
  6. }

在所有的变量都被展开后，widthC 的值就会变成 calc( calc( 100px / 2) / 2)，然后，当它被赋值给 .foo 的 width 属性时，所有内部的这些 calc()（无论嵌套的有多深）都将会直接被扁平化为一个括号，所以这个 width 属性的值就直接相当于 calc( ( 100px / 2) / 2) 了，或者说就变成 25px 了。 简而言之：一个 calc() 里面的 calc() 就仅仅相当于是一个括号。

4. 其它几个常用CSS函数简介

  • min() 从逗号分隔符表达式中选择一个最小值,如width: min(1vw, 4em, 80px);
  • max() 从逗号分隔符表达式中选择一个最大值,如width: max(1vw, 4em, 80px);
  • clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。如font-size: clamp(1rem, 2.5vw, 2rem);
    • 当 首选值比最小值要小时，则使用最小值 。
    • 当 首选值介于最小值和最大值之间时，用首选值 。
    • 当 首选值比最大值要大时，则使用最大值 。

三、display初探讨

学布局就离不开display的学习，老师在讲块元素和行内元素时就已经和display有关了，我也是查mdn后才发现的.

普通文档流: 是网页元素默认的布局/排列方式,元素按它们在html文档中的书写顺序进行排列

display属性可以设置元素的内部和外部显示类型

  • 外部显示类型Outside: 决定该元素在流式布局中的表现 。主要就是块级元素block和行内元素inline。
    • 块级元素: 总是完整占据一个整行,元素前后会自动添加”换行符” br
    • 行内元素: 总是随文字方向从左到右排列,并在到达了容器的边缘时自动换行显示
    • 行内块元素: 按行内元素规则排列，又可以按块级元素设置宽度和高度。
  • 内部显示类型Inside: 控制其子元素的布局 ，如table、flex和grid等。
    • 表格table: 按表格布局，这个有点意思，老师说表格布局，我还以为table标签呢。可以快速解决等高列问题
    • 弹性flex: 弹性布局，不用说了，小程序和APP端推荐布局。
    • 网络grid: 相比flex更强大的布局方式，flex可以看成一维，而grid是二维，从一定角度上讲，可以看成table布局和flex布局的整合。
  • 特定显示类型: 有些布局模型(如table和ruby)有着复杂的内部结构，因此它们的子元素可能扮演着不同的角色。这一类关键字就是用来定义这些“内部”显示类型，并且只有在这些特定的布局模型中才有意义。
    • table-x: 表格布局相关的内部类型，如本文下面用到的table-cell。
    • ruby-x: ruby相关的内部类型，目前没有接触，可以暂时忽略。
  • none: 将元素从文档流中中移除，这会导致该元素及其所有子代元素不再被屏幕访问。

这里主要列举了常用的，怎么使用和注意事项，在使用时会再说明。display更详细的可上mdn查询，

四、布局中box-sizing的注意事项和列间隙演示

W3C的盒模型宽度和高度默认是指内容content区，而在布局中我们则经常需要清除边框border和内边距padding将盒子撑开的影响，后来根据IE盒模型，W3C增加了box-sizing属性，开发者可以选择宽度和高度是否包括border和padding。一般建议清除样式中要包括box-sizing:border-box。即

  1. <!-- 建议盒模型清除的样式 -->
  2. *{
  3.     margin:0;
  4.     padding:0;
  5.     border:none;
  6.     outline:none;
  7.     box-sizing:border-box;
  8. }

display行内块元素的间隙问题: 老师讲课时使用浮动float来解决了块元素的横向布局，不过我对浮动不兴趣，于是想到display的行内块元素解决，不过发现行内块(目前测试了inline-block或inline-flex)水平方向总是存在间隙，导致不是我想要的布局。

  • 水平间隙清除： 在父级加上font-size:0;此时在元素要重新设置font-size，否则继承父级字号就不对。
  • 垂直间隙清除： 一种是通过在元素上加vertical-align:bottom;另一种是元素中有文字时不会生成垂直间隙。

目前列间隙解决方案有两种：一种是将间隙按百分比计算，另一种就是通过calc()+百分比+em灵活控制间隙。后者相比于前者更灵活。

  1. <style>
  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5.   border: none;
  6.   outline: none;
  7.   box-sizing: border-box;
  8. }
  9. header {
  10.   background-color: #0072b0;
  11.   color: white;
  12.   padding: 0.5em 1em;
  13.   border-radius: 0.5em;
  14.   margin-bottom: 1em;
  15. }
  16. .container { font-size: 0;/* 解决行内块水平间隙问题 */ }
  17. .main,
  18. .sidebar,
  19. .widget {
  20.   display: inline-block;
  21.   font-size: 1rem;/* 解决行内块水平间隙问题 */
  22.   vertical-align: top;/* 解决行内块不是顶端对齐，默认是底部对齐 */
  23.   background-color: lightcyan;
  24.   padding: 1.5em;
  25. }
  26. /* 一、百分比实现列间隙 */
  27. /* .main{width: 70%;}
  28. .sidebar{width:29%;margin-left: 1%;} */
  29. /* 二、百分比+em实现列间隙 */
  30. .main { width: calc(70% - 0.5em); margin-right: 0.5em; }
  31. .sidebar { width: calc(30% - 0.5em); margin-left: 0.5em; }
  32. </style>
  33. <header>
  34.   <h1>
  35.     列间隙
  36.     <small>display行内块和box-sizing</small>
  37.   </h1>
  38. </header>
  39. <div class="container">
  40.   <main class="main">
  41.     <h2>欢迎加入战队</h2>
  42.     <p>
  43.       据
  44.       <a href="https://w3techs.com/">w3techs</a>
  45.       统计,目前全球Web开发领域,php仍以78.8%占有率,傲视所有对手, 那些天天唱衰PHP的家伙们被啪啪打脸
  46.     </p>
  47.   </main>
  48.   <aside class="sidebar">
  49.     <div class="widget"></div>
  50.     <div class="widget"></div>
  51.   </aside>
  52. </div>

列间隙

五、等高列的解决方案一:table布局

上例中左边和右边是不等高，这就涉及到元素高度的溢出问题 。在实际开发过程中,程序员通常不会直接去定义元素的一个高度，在普通文档流中，根据阅读的习惯,屏幕的宽度是受限，而高度不受限 。所以，容器高度一般由内容决定，而不是由用户来决定。对于元素高度的溢出问题处理的属性就是overflow。

元素高度溢出处理overflow

  • 默认值visible: 就是溢出显示超过元素高度的内容。
  • hidden: 溢出内容裁切，不显示溢出的内容。
  • scroll: 对溢出内容不改变宽度或高度情况下，通过设置overflow-x:scroll、overflow-y:scroll和overflow:scroll，实现滚动查看溢出内容。
  • auto: 当内容溢出时,显示滚动条,否则就不显示

这里要注意下表格间隙问题，课中老师是使用border-spacing来实现的，因为表格没有margin了，然后通过在外套一层容器，通过容器的margin取负值拉伸来调整达到100%，不过又产生一个问题是底部横向出现滚动条,明显这不是我们想要的。border-spacing设置间隙时不能控制左右或上下，只能是横向或竖向，而相近的border则可以任意控制上、下、左或右，那么表格布局中border是否还有效呢？经测试有效，于是改进方案就是通过border来设置间隙可以完善解决问题。

  • 为了平衡，我设置了左侧的右边框和右侧的左边框为间隙的一半。
  • 背景裁切backgrond-clip要修改为padding-box，不能是默认的border-box，否则背景色或背景图延伸到边框,就看不到边框产生的间隙了。
  1. <style>
  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5.   border: none;
  6.   outline: none;
  7.   box-sizing: border-box;
  8. }
  9. header {
  10.   background-color: #0072b0;
  11.   color: white;
  12.   padding: 0.5em 1em;
  13.   border-radius: 0.5em;
  14.   margin-bottom: 1em;
  15. }
  16. .main,
  17. .sidebar,
  18. .widget {
  19.   background-color: #0072b0;
  20.   background-clip: padding-box;
  21.   color: white;
  22.   padding: 0.5em 1em;
  23.   vertical-align: top;
  24. }
  25. /* table布局实现等高列 */
  26. .container {
  27.   display: table;
  28.   /* 表格宽高默认由内容决定，并不会像块元素那样充满父级容器的全部空间 */
  29.   width: 100%;
  30.   /* 表格中不支持margin; 列间隙/单元格间隙*/
  31.   /* 经测试使用此间隙，再通过外套margin取负值拉伸，结果在横向出现滚动条 */
  32.   /* border-spacing: 1em; */
  33. }
  34. .main,
  35. .sidebar {
  36.   /* 转为单元格之后就默认等高了,于是等高列就实现了 */
  37.   display: table-cell;
  38. }
  39. /* 列间隙通过边框border来实现，可以灵活调整上下左右，而不像border-spacing那么死只能横向或竖向 */
  40. /* #十六进制表示颜色，前6位就是我们常用的RGB，最后两位是透明度,有00-ff个透明选择 */
  41. .main {
  42.   width: 70%;        
  43.   border-right: 0.5em solid#ffffff00;
  44. }
  45. .sidebar {
  46.   width: 30%;
  47.   border-left-width: 0.5em solid #ffffff00;
  48. }
  49. </style>
  50. </style>
  51. <header>
  52.  <h1> 等高列解决方案一:table布局</h1>
  53. </header>
  54. <div class="container">
  55.   <main class="main">
  56.     <h2>欢迎加入战队</h2>
  57.     <p>
  58.       据
  59.       <a href="https://w3techs.com/">w3techs</a>
  60.       统计,目前全球Web开发领域,php仍以78.8%占有率,傲视所有对手, 那些天天唱衰PHP的家伙们被啪啪打脸
  61.     </p>
  62.   </main>
  63.   <aside class="sidebar">
  64.     <div class="widget"></div>
  65.     <div class="widget"></div>
  66.   </aside>
  67. </div>

等高列

六、等高列的解决方案二:flex布局

现在最流行的flex布局实现等高列就更简单了，几行CSS样式就完美解决，默认行中所有列都是等高的，而且没有滚动条的烦恼。

  1. .main,
  2. .sidebar,
  3. .widget {  
  4.   background-color:brown;      
  5.   color: white;
  6.   padding: 0.5em 1em;
  7. }
  9. /* flex布局 */
  10. .container {
  11.   display: flex;
  12.   justify-content: space-between;
  13. }
  14. .main {
  15.   flex: 0 0 70%;
  16.   background-color: #0072b0;
  17. }
  18. .sidebar {
  19.   flex: 0 0 29%;
  20.   background-color: #0072b0;
  21. }
  22. <header>
  23.   <h1>等高列解决方案二:flex布局</h1>
  24. </header>
  25. <div class="container">
  26.   <main class="main">
  27.     <h2>欢迎加入战队</h2>
  28.     <p>
  29.       据
  30.       <a href="https://w3techs.com/">w3techs</a>
  31.       统计,目前全球Web开发领域,php仍以78.8%占有率,傲视所有对手, 那些天天唱衰PHP的家伙们被啪啪打脸
  32.     </p>
  33.   </main>
  34.   <aside class="sidebar">
  35.     <div class="widget"></div>
  36.     <div class="widget"></div>
  37.   </aside>
  38. </div>

flex等高列

学习后总结

  • display要深入探讨下，尤其是在布局中应用。如本文所说的table布局。
  • 自适应是适应多端的根本本要求，它们离不开相对单位、百分比和calc()和布局。
  • 无论行内块元素inline-block(或inline-flex)还是table布局，都存在间隙问题 。前者是默认存在，需要清除。后者不推荐使用border-spacing，具体说明见上面。这里推荐border来解决。
  • flex弹性布局在自适应布局上有先天优势，如等高、居中等问题都能很简便解决。
  • 等高列解决方案老师还讲了min-height和max-height，由于它只能适应固定尺寸，不符合现在自适应，这里就不推荐了。
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：总结是个亮点
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！