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

页面布局

作者赵钊课程第七天到第八天:学习布局354次浏览02018-05-09 12:30

日期:2018年5月7日-9日
今天的学习总用时:三天
今天学习的目标:学习掌握页面布局的各种方式

多栏布局有三种基本的实现方案:固定宽度、流动、弹性。
固定宽度布局的大小不会随用户调整浏览器窗口大小而变化,一般是 900 到 1100像素宽。其中 960 像素是最常见的,因为这个宽度适合所有现代显示器,而且能够被 16、12、10、8、6、5、4 和 3 整除,不仅容易计算等宽分栏的数量,而且计算结果也能得到没有小数的像素数。
流动布局的大小会随用户调整浏览器窗口大小而变化。这种布局能够更好地适应大屏幕,但同时也意味着放弃对页面某些方面的控制,比如随着页面宽度变化,文本行的长度和页面元素之间的位置关系都可能变化。Amazon.com 的页面采用的就是流动中栏布局,在各栏宽度加大时通过为内容元素周围添加空白来保持内容居中,而且现在的导航条会在布局变窄到某个宽度时收缩进一个下拉菜单中,从而为内容腾出空间。
弹性布局与流动布局类似,在浏览器窗口变宽时,不仅布局变宽,而且所有内容元素的大小也会变化,让人产生一种所有东西都变大了的感觉。

布局高度与布局宽度
布局高度
多数情况下,布局中结构化元素(乃至任何元素)的高度是不必设定的。事实上,你根本不应该给元素设定高度。除非你确实需要这样做,比如在页面中创造一个绝对定位的元素。
为什么正常情况下都应该保持元素 height 属性的默认值 auto 不变呢?很简单,只有这样元素才能随自己包含内容的增加而在垂直方向上扩展。这样扩展的元素会把下方的元素向下推,而布局也能随着内容数量的增减而垂直伸缩。假如你明确设定了元素的高度,那么超出的内容要么被剪掉,要么会跑到容器之外——取决于元素overflow 属性的设定。
布局宽度
与高度不同,我们需要更精细地控制布局宽度,以便随着浏览器窗口宽度的合理变化,布局能够作出适当的调整,确保文本行不会过长或过短。如果随意给元素添加内边距、边框,或者元素本身过大,导致浮动元素的宽度超过包含元素的布局宽度,那浮动元素就可能“躲”到其他元素下方。
让栏宽限制其中内容元素的宽度。

为栏设定内边距和边框
只要一调整各栏中的内容,布局就可能超过容器宽度,而右边的栏就可能滑到左边的栏下方。一般来说,两种情况下可能会发生这种问题。
 为了让内容与栏边界空开距离,为栏添加水平外边距和内边距,或者为了增加栏间距,为栏添加外边距(只要开始给布局添加样式,就一定会采用这里说的一种做法,甚至双管齐下),导致布局宽度增大,进而浮动栏下滑。换句话说,右边浮动的栏因为没有足够的空间与其他栏并列,就会滑到左边栏的下方。
 在栏中添加大图片,或者没有空格的长字符串(如长 URL),也会导致栏宽超过布局宽度。同样,这种情况下右边的栏也会滑到左边的栏下方。

Position
1、position:static(默认定位)
每个div在文档流中默认的排版,就是static属性值,它不会让div或者其他元素脱离文档流,而是遵循排版的原则,从上到下,块级元素换行,行内元素不换行等等通用原则,所以,如果不用定位属性,那么这个position就不用设置。
2、position:relative(相对定位)
相对定位,就是相对于自己本身进行定为移动,它不会脱离文档流,也就是说,我给一个元素设定了这个属性,那么这个文件还会在这个文档流中来回移动。
3、position:absolute(绝对定位)
跟相对定位不同,它是相对于拥有相对定位属性的父元素进行定位移动,它会脱离文档流。
如果父元素中的所有子元素都设置了absolute,那么所有的子元素都会浮起来,然后堆叠到一块儿,所以为了把各个元素摊开显示,我们需要移动这些元素,而移动这些元素的方法,就是直接是style样式表中书写:left、right、top、bottom四个属性,然后在属性的后面写上px(像素)、%(百分比)等可以表示距离的单位。
并且,这四个元素,都是相对于拥有相对定位(relative)属性的父元素进行移动的。如果父元素没有相对定位,那么绝对定位就是相对于body进行定位的。
所以,为了不让自己设置的元素跑飞了,那就记得给父元素设置relative吧。
4、fixed(固定定位)
这个定位是相对于浏览器窗口进行的定位,移动方法跟相对和绝对定位一样的。
它也会脱离文案流,我们常见的侧边栏或者广告图就是用这个功能实现的。很实用,很强大的功能。
5、inherit(继承定位),就是从父元素继承position定位属性,不怎么常用。

Flexbox
flexbox布局常用于设计比较复杂的页面,可以轻松地实现屏幕和浏览器窗口大小的变化时保持元素的相对位置和大小不变,同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。
到底Flexbox是怎么样的呢?????????
FlexboxFlexboxFlexboxFlexboxFlexboxFlexbox

0条评论