浙江龙网

  1. 首页 > 生活百科 > >

2 CSS布局秘籍-6脉神剑( 三 )

生活百科


  • 区域字符命名，行内空格分割列，行间引号分割 。两行三列：grid-template-areas: "head head right" "navmain right";
  • 相同命名的格子自动合并单元格，且必须为一个相邻的矩形 。
  • 所有名字只能出现在一个连续的区域 ， 不能在不同的位置出现 。
  • 使用.符号，让一个格子留空，就是空着，啥也不干 。
<style>.page{display: grid;/*定义2列、3行*/grid-template-areas: "header header" "left right" "footer footer"; /*图1布局*/grid-template-areas: "left header" "left right" "footer right"; /*图2布局*/grid-template-rows: 40px 1fr 40px;grid-template-columns: minmax(100px,200px) auto;height: 300px; margin: 10px;}.page>.header{grid-area: header;}.page>.left{grid-area: left;background-color: lemonchiffon;}.page>.right{grid-area: right;background-color: rgb(170, 236, 238);}.page>.footer{grid-area: footer;}.page>div{background-color: aquamarine;padding: 10px;}</style><div class="page"><div class="header">header</div><div class="left">left</div><div class="right">right</div><div class="footer">footer</div></div>? 调整命名即可实现不同的布局：
2 CSS布局秘籍-6脉神剑

文章插图
2 CSS布局秘籍-6脉神剑

文章插图
03、float浮动布局float 属性让素左右浮动起来，元素从正常布局流 (normal flow) 中移除，会浮动到父容器的左侧或右侧 。会改变元素本身和跟随他后面的（不管层级、类型）其他正常流布局元素的行为，它后面的正常布局的元素围绕该浮动元素 ， 并填满其右侧（或左侧）的空间 。因为float脱离了文档流，正常流的元素就会和他重叠，但元素的content内容不重叠，就会产生环绕效果 。
属性描述值float设置元素浮动布局● left：将元素浮动到左侧 。● right：将元素浮动到右侧 。clear适用于浮动和非浮动元素，清除浮动效果● none：元素不会被向下移动以清除浮动 。● left：元素被向下移动以清除左浮动 。● right：元素被向下移动以清除右浮动 。● both：元素被向下移动以清除左右浮动 。<div><img src="https://www.huyubaike.com/res/qq-128.png" width="80" style="float:left"><img src="https://www.huyubaike.com/res/vedio.png" width="80" style="float:right"><p style="background-color:#0001;">所有元素都是一个盒子Box，盒子Box是页面布局的基本单位，盒子的不同类型决定了他的布局方式 。一个页面由各种盒子的组合、嵌套形成 。</p></div>
2 CSS布局秘籍-6脉神剑

文章插图
在flex、grid网格布局问世之前 ， float是实现页面布局的重要手段，他也存在一些惨无人道的问题，可以参考上一章节BFC部分内容 。
  • 使用float布局必须精心计算他们的宽度，还要考虑他们的padding、border、margin，推荐启用代替IE盒模型 ， 避免不受控的溢出 。
  • 而且他本质上还是一维的，不支持跨行 。
  • 浮动使用的越复杂，清除也会越复杂 ， 应尽早清除，避免给后面的元素造成麻烦 。推荐在浮动布局后添加一个空的清除浮动div 。
下面的示例代码就是典型的传统基于float浮动实现的栅格布局，把列等分为12份，并穷举创建横跨2-12列的样式类，代码量多，点都不优雅 。
body {width: 90%;max-width: 980px;margin: 0 auto;}*{box-sizing: border-box;}/* row用来清除row之间的浮动影响 */.row {clear: both;}.col {float: left;margin-left: 2.08333333%;width: 6.25%;}.col.span2 { width: calc((6.25%*2) + 2.08333333%); }.col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); }.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); }/*...*/.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }/* 用来作为空列的偏移*/.offset-by-one {margin-left: calc(6.25% + (2.08333333%*2));}? float表单：
<style>.form-float *{ box-sizing: border-box; }.form-float>.row{clear: both;padding: 5px 0;}.form-float>.row>.col{float: left;background-color: antiquewhite; padding: 5px;}.form-float>.row>.col.lab{width: 15%;text-align: right;}.form-float>.row>.col.span1{ width: 35%; }.form-float>.row>.col.span2{ width: 85%; }.clear{ clear: both; }</style><form class="form-float"><div class="row" id="r1"><label for="" class="col lab" id="l1">姓名：</label><input type="text" class="col span1" value="https://www.huyubaike.com/biancheng/杜牧"><label for="" class="col lab">籍贯：</label><input type="text" class="col span1" value="https://www.huyubaike.com/biancheng/唐"></div><div class="row"><label for="" class="col lab">性别：</label><div class="col span1"><input type="radio"><label for="">男</label>&nbsp;&nbsp;<input type="radio"><label for="">女</label></div><label for="" class="col lab">生日：</label><input type="date" class="col span1"></div><div class="row"><label for="" class="col lab">简介：</label><textarea name="" id="" cols="100" rows="5" class="col span2">停车坐爱枫林晚 ， 霜叶红于二月花</textarea></div></form><div class="clear"></div>

推荐阅读


上一篇：OpenHarmony移植案例： build lite源码分析之hb命令__entry__.py

下一篇：一 我要涨知识 —— TypeScript 常见面试题