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

第五天和第六天

作者三十六咲课程第五天和第六天:三种简历848次浏览32018-04-29 03:46

1 盒模型的概念

css框模型(盒模型)是网页布局的基础-每个元素都为一个矩形框,宽的内容(content box)(widrh height)、内边距(padding)、边界(border)、外边距(margin)
默认情况下,是这样的。
盒模型
早期IE盒模型,是这样的,便于布局计算。(css3中设置box-sizing:border-box 也是这样的)
IE盒模型
2 inline、block和inline-block的概念
display 属性可以设置元素的显示方式,常用的有none, inline,block,inline-block。
每个元素都有默认的显示方式,多半是inline或block。
inline: 设置元素为行内元素,不单独一行,不支持宽高,内容撑开。 eg: span
block: 设置元素为块级元素,单独一行,支持宽高。 eg: h1
inline-block:设置元素为行内块元素,是inline和block的结合体,不单独一行,但支持宽高。eg: img
3 内外边距,宽度,高度,box-sizing等属性
内边距 (padding): 指定一个元素的内容与其边界之间的空间,不能为负值。
padding-top padding-right padding-bottom padding-left padding, 其中简写属性可指定一个,两个,三个或四个值。
外边距(margin): 给元素设置外边距属性(元素与元素的边界的距离), 有负外边距,有外边距塌陷的情况。
margin-top margin-right margin-bottom margin-left margin 其中简写属性可指定一个,两个,三个或四个值。
width: 当box-sizing为默认值时,设置内容框的宽度
height: 当box-sizing为默认值时,设置内容框的高度
box-sizing: 设置元素的盒模型的方式,默认为正常的盒模型(即width和height为内容框的值),设置border-sizing时,为IE盒模型(即width和高为包括边界,内边距,内容框)。

4 浮动,清除浮动

浮动(float): 用float属性指定一个元素沿着容器的左边或右边放置,允许文本和内联元素环绕它。当初是为了排版美观而产生,并且它不是真正意义上的脱离文档流(你可以理解为脱离了半层)。
清除浮动 : 因为当容器的高度自动(auto),且容器的内容有浮动元素,这种情况下容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动。

 ```
   /*最常用的方式就是,在浮动元素的父级添加一个clearfix*/
   .clearfix::after {
     content : "";
     display : block;
     clear : both;
   }
   .clearfix {
     /*IE6 IE7 要触发haslayout*/
     zoom: 1;
   }
   /*其他方法差不多,其本质就是在需要清理浮动的元素,后面添加一个具有clear 属性的元素*/

```
5 如何使用浮动进行布局
浮动常用于创建多列布局,最常用的是两列,三列。如果后面还有内容,但又不需要去环绕浮动布局原始,那就需要清除浮动,撑开父级的宽。。具体自行搜索。

0条评论