百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

CSS Position 和 Float && 三栏式布局实践

作者陈坚生课程任务三:三栏式布局2115次浏览22017-03-20 23:26

掌握盒模型的概念

CSS 盒模型:

margin-border-padding-content

  • Margin(外边距) - 清除边框外的区域,外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域,内边距是透明的。
  • Content(内容) - 盒子的内容,显示文本和图像。

重要: 当您指定一个CSS元素的宽度和高度属性时,你只是设置内容区域的宽度和高度。要知道,完全大小的元素,你还必须添加填充,边框和边距。.

高度和宽度的计算

最终元素的总宽度计算公式是这样的:

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的:

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

通过 css 的 box-sizing 可以改变盒模型,计算公式也可以改变:

  • content-box

    这是由 CSS2.1 规定的宽度高度行为。
    宽度和高度分别应用到元素的内容框。
    在宽度和高度之外绘制元素的内边距和边框。

  • border-box

    为元素设定的宽度和高度决定了元素的边框盒。
    就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
    通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

浏览器的兼容性问题

一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。

虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是,不要给元素添加具有指定宽度的内边距,而是尝试将内边距或外边距添加到元素的父元素和子元素。

IE8 及更早IE版本不支持 填充的宽度和边框的宽度属性设。

解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。

掌握position与float的概念以及在布局时的用法

position-属性

CSS属性选择用于定位元素的替代规则,被设计为对脚本动画效果有用。

  • 默认定位为 statiic

    该关键字指定元素使用正常的布局行为,即元素在文档流中当前的布局位置,此时 top|left|top|bottom 和 z-index 对其无效

  • 相对定位 relative

    该关键字下,元素先在未添加定位时的位置,然后在未改变页面布局的情况下调整位置,所以会在原来的位置留下空白。(position:relative 未定义对 table-*-group, table-row, table-column, table-cell, table-caption 元素应用的效果)

  • 绝对定位 absolute

    该关键字下,不为元素预留空间,元素会相对最近的非 static 祖先元素进行定位偏移。绝对定位的元素可以设置外边距,但是不会与其他边距合并

  • 绝对定位?固定定位 fixed

    不为元素预留空间,通过指定元素相对屏幕视口(viewport)的位置来指定元素位置,元素的位置在屏幕滚动时不会改变。打印时,元素会出现在每页的固定位置。fixed 会创建新的栈上下文,当元素的祖先的transform 属性非 none 时,容器由视口改为该祖先。

  • 粘性定位 sticky 【处于实验阶段

    盒位置根据正常流计算(这称为正常流动中的位置),然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位。在所有情况下(即便被定位元素为 table 时),该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时,后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同。

    比较好玩的一个期待被标准化的属性, 例子

【注意】

对于相对定位元素,top 和 bottom 属性指定它相对于正常位置的垂直偏移,left 和 right 属性指定水平偏移。

对于绝对定位元素,top、right、bottom 和 left 属性指定元素相对于其包含块的偏移,即此时位置为与包含块的相对位置。元素的边距(margin)定位在这些偏移之中。

在大多数时候,绝对定位元素的 height 和 width 属性的值为 auto,它们会自动计算以适合元素的内容。但是非替换(non-replaced)绝对定位元素可以占据 top 和 bottom 的值(除 auto 外)所共同指定的可用空间,而不必设置 height(也就是设其为 auto)。left、right 与 width 也类似。

float 属性

该属性会使元素脱离正常的文档流,然后被安放到父容器的左端或者右端,并且其他的文本和行内元素环绕它

我们说的浮动属性,准确的定义是 float 值不为 none 的元素

float 的值有:

  • left
    表明元素必须浮动在其所在的块容器左侧的关键字。

  • right
    表明元素必须浮动在其所在的块容器右侧的关键字。

  • none
    表明元素不进行浮动的关键字。

  • inline-start
    关键字,表明元素必须浮动在其所在块容器的开始一侧,在ltr脚本中是左侧,在rtl脚本中是右侧。

  • inline-end
    关键字,表明元素必须浮动在其所在块容器的结束一侧,在ltr脚本中是右侧,在rtl脚本中是左侧。

浮动元素如何定位?

当一个元素浮动之后,它会被移出正常的文档流,然后向左或者向右平移,一直平移直到碰到了所处的容器的边框,或者碰到另外一个浮动的元素。

清除浮动

clear 属性

div { clear: both; }

然而这个方法只是在同一块级格式化上下文(block formatting context)中没有其他元素的时候才是有效的。

如果不能使用清除浮动,另一种做法是浮动容器的限制块级格式化上下文。

overflow

div { overflow: hidden; height: auto; }

显然, overflow 能快速地解决清除浮动的问题,当时如果高度有所限制的话,就会出现滚动条,这个时候,可以看看 Bootstrap 在设计栅格布局时候所用的 hack 方法:

.row:before,
.row:after {
    content: ' ';
    display: table;
    clear: both;
}

通过给浮动元素的父元素设置伪元素样式,成功的撑起了高度,而又没有滚动条的烦恼

参考资料

  • MDN:position:了解 CSS position 属性的基本知识
  • MDN:float:了解 CSS float 属性的基本知识
  • Learn CSS Positioning in Ten Steps:通过具体的例子熟悉 position 属性
  • 清除浮动(clearfix hack):清除浮动是什么,如何简单地清除浮动
  • StackOverflow:Which method of ‘clearfix’ is best?:清除浮动黑科技完整解读
0条评论