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

《CSS设计指南》盒模型 position float相关笔记

作者邹彬课程任务三:三栏式布局3807次浏览312017-03-02 16:30

盒模型

  • border 边框宽窄、样式和颜色
    • 宽度: thin medium thick 非百分比和负值的数值
    • 样式: none hidden dotted dashed solid double groove ridge inset outset
  • padding 盒子内容区和边框的间距
    • 没有设定内边距的情况下,内容紧挨着边框。
    • 内边距实际加在声明的盒子宽度上。
  • margin 盒子与相邻元素的间距
    • 中和外边距和内边距
    • 样式表第一条规则 * {margin: 0; padding: 0;}
  • 叠加外边距
    • 垂直方向上的外边距会叠加(重叠),直到一个元素的外边距碰到另一个元素的边框为止。
    • 水平相邻的元素,它们的水平间距是相邻外边距之和。
    • 外边距的单位
      • 为文本元素设置外边距时通常需要混合使用不同的单位
      • 左右边距使用像素,使文本始终和包含元素边界保持固定间距
      • 上下外边距以em为单位,让段间距随字号变化而响应增大或缩小
盒模型结论一:
  • 没有宽度(没有设置width)的元素始终会扩展到填满其父元素的宽度为止。添加水平边框、内边框和外边框,会导致内容宽度减少,减少量等于水平边框、内边框和外边框的和。
    • 如果不设置块级元素的width属性,那么这个属性的默认值是auto,结果会让元素的宽度扩展到与父元素同宽。
盒模型结论二:
  • 为设定了宽度的盒子添加边框、内边距和外边距,会导致盒子扩展得更宽。实际上,盒子的width属性设定的只是盒子内容区的宽度,而非盒子要占据的水平宽度。
CSS box-sizing

浮动与清除

浮动元素脱离了常规文档流之后,原来紧跟其后的元素就会在空间允许的情况下,向上提升到与浮动元素平起平坐。
float
  • CSS3 Multi-column Layout Module规定了如何用CSS定义多栏布局。
  • 在浮动一张图片或者其他元素是,是在要求浏览器把它往上方推,直到它碰到父元素的内边界。
  • 浮动非图片元素时,要给它设定宽度。
  • 浮动元素位于“文档流外部”,因而它已经不被包含在标记中的父元素之内。
围住浮动元素的三种方法
  • 为父元素添加 overflow:hidden
    • overflow: hidden;
      • 防止包含元素被超大内容撑大
      • 迫使父元素包含其浮动的子元素
  • 同时浮动父元素
    • 被清除(clean)的元素不会被提升到浮动元素的旁边
  • 添加非浮动的清除元素
    • 给父元素的最后添加一个非浮动的子元素,然后清除该子元素。由于包含元素一定会包围非浮动的子元素,而且清除会让这个子元素位于(清除一侧)浮动元素的下方,因此包含元素一定会包含这个子元素——以及前面的浮动元素。
/*clearfix规则:*/
.clearfix:after {
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
/*clearfix添加了一个清除的包含句点作为非浮动元素(要有内容,句号是最小的内容)*/
  • 注意:
    • 不能在下拉菜单的顶级元素上应用overflow:hidden,否则作为子元素的下拉菜单不会显示。
    • 不能对已经靠自动外边距居中的元素使用“浮动父元素”技术,否则它不会居中。
    • 没有父元素时:
      • clearfix “清除子元素”

定位:

position
  • static 静态定位,每个元素都处于常规文档流中
  • relative 相对的是它原来在文档流中的位置(或者默认位置) 。
    • 这个元素原来占据的空间没有动,其他元素也没动。
    • top right bottom left(可以给top left属性设定负值,把元素向上向左移动)
  • absolute 绝对定位会把元素彻底从文档流中拿出来,再相对其他元素定位。
  • fixed 固定定位元素的定位上下文是视口,因此它不会随页面滚动而移动。
定位上下文
  • 把元素的positon属性设定为relative absolute fixed后,继而使用top right bottom left属性,相对于另一个元素移动该元素的位置。这里的“另一个元素”就是该元素的定位上下文。
  • 没有相对定位的祖先元素供其参照,内部div只能以默认的定位上下文body作为参照,相对于它定位。
显示属性
  • block
  • inline

    a {display: block;}
    /*让原先的行内元素填满其父元素*/
    
  • none 该元素及所有包含在其中的元素,都不会在页面中显示。他们原先占据的所有空间也都会被“回收”。

visibility: hidden; 元素隐藏,但它占据的页面空间仍存在。
2条评论