布局分类

  1. 固定宽度:PC(淘宝),一般:960px、1000px、1024px
  2. 不固定宽度:手机页面(手机淘宝),主要靠文档流的原理来布局,开发者手机页面模式 | 响应式

屏幕 页面 尺寸

文档流本来就是自适应的,不需添加额外样式,(加了固定宽度,就不是)

  • 响应式布局(PC上固定宽,手机不固定),即混合布局

布局思路

整体<->细节

布局思路

文字描述:用什么布局

  • =>兼容IE9=>左浮两个,固定宽度,不要响应式=>给父元素加clearfix=>使用float布局{必要时使用负margin}
  • =>不需兼容IE9
    • =>不只兼容最新浏览器=>使用flex布局{必要时使用负margin}
    • =>只兼容最新浏览器=>使用grid布局

float布局,非响应式

步骤

clearfix::after伪元素清浮动法

  • 子元素加float:left;width
  • 父元素加.clearfix三行Combo

    1
    2
    3
    4
    5
    
    .clearfix::after {
    content: '';
    display: block;
    clear: both;
    }
  • 父元素默认是块级元素

  • 高度是由内部文档流元素高度的总和决定

  • float属性使元素脱离文档流,不再影响父元素高度

  • 父元素里没有文档流元素,高度为0

  • 解决方法:伪元素清浮动法

经验

  • 留一些空间,或者最后一个不设width,或者用max-width
  • 不需要响应式,手机上没IE,float布局专为IE

IE6/7存在双倍margin Bug,margin-leftx2,解决办法两个

一是将错就错,针对IE6/7把margin减半,写margin,再写_margin:或者*margin:

二是加个display:inline-block

IE8不支持::after、HTML5新标签等,header{display:block;}

IE7不支持border-box

栗子实践

float做不同布局

  • 两栏布局(如顶部条)
  • 三栏布局(如内容区),比如:淘宝
  • 四栏布局(如导航)
  • 平均布局(如产品展示区)
  • 过时的淘宝双飞翼布局

代码链接:

注意的事项
  • 将父元素设置为display: inline-block;,压缩宽度到正好包裹子元素,不留空
  • display: inline-block;特点是尽量压窄自己;
  • 默认的display: block;特点是尽量放宽自己;
  • vertical-align:top;或者vertical-align:middle;:如果图片下有多余留空,加上这个属性可以去掉
  • 请看一小时:深入理解CSS:字体度量、line-height 和vertical-align
  • 只记套路,只看结果,中间发生什么,就当不存在
  • 高度确定,宽度适应,或设计师以整数切图
  • 两个元素高度分别是偶数和奇数,不可完全居中对齐,手动调高度
  • 文字高度line-height
  • 计算公约高度:平均高度,高度和除以2,计算差值,设置margin
  • 不设width,用内容去填,即宽度由内容决定,除非<aside></aside>宽度固定,高度由内容撑起来,一般不设置具体高度值
  • 被挤下去,是因为border-box的宽度包含border1px,可以用outline:1px solid red代替,仅用在当border干扰宽度的时候,调试用,但有时可能在外面会看不见,也可用背景色代替
  • 让有固定宽度的块级父元素居中:margin:0 auto;,但不太好
  • CSS重要原则之一:不该写的多余代码不要写;必须的代码不能少
  • margin-left:auto;margin-right:auto;margin:0 auto;更稳妥,可会覆盖margin-top,精确,尽量正交,避免层叠掉其他样式:即最小必要原则
  • 设置了float属性的元素外边距不会合并

margin

怎么把内容扩宽,又不影响布局?一个应用场景:

平均布局中,块级父元素和子元素宽度固定,子元素间空隙margin-right:12px;

子元素们外新加个带有负margin属性的父元素,值为子元素间空隙的负值margin-right:-12px;

原来的父元素变成祖元素,父子关系变了,clearfix类要加到新的父元素上,新父元素多余的右边距设为负值,值为子元素间空隙的负值margin-right:-12px;即可

最后一个子元素的右边框超出了祖元素,新的父元素用正margin会位移,但用负margin会变宽,就可使自己有足够的空间容纳子元素超出的右边框,从而不挤掉最后一个子元素而换行

如果设置的负margin的(绝对)值过大,仍不挤掉最后一个子元素而换行,但会使窗口产生滚动条

可以追加任意多个同样的子元素,即可实现平均布局

经验总结

  • 加头尾,即可满足所有PC页面要求
  • 手机页面不用float
  • float需要计算宽度,不灵活,足以应付IE

问答

  • 不用考虑IE,IE也换Chrome的内核了:Blink(Chrome及其他)、Webkit(Safari)、Gecko(Firefox),其他都淘汰弃用了
  • logonav高度不固定,margin-top:5px可行吗?直接用flexBox布局
  • 父元素宽500px,四个子元素宽分别191px,还有border:1px;加起来不止764px,用border-box不用考虑

·未完待续·

参考文章

CSS 布局.pdf

相关文章