小白学前端08

两列布局:
1.容器div水平居中:定义宽度,将水平外边距设置为auto
    920px --适合分辨率1024*768的屏幕(不过920px是怎么确定出来的呢?)
    margin:0 auto -- 实现水平居中

    用css进行布局有几种不同的方式,包括绝对定位和使用负的边距值
    基于浮动的布局是最容易使用的,也是最可靠的,只需设置希望定位的元素的宽度然后将它向左或向右浮动
    但浮动的元素不再占据文档流中的任何空间,也就不再对包围它们的块框产生任何影响,故需进行清理
    
    一般将两列都向左浮动,然后使用外边距或内边距在两列之间创建一个隔离带
    为了防止浮动元素一列退到另一列的下面(太挤了),不使用水平外边距或内边距来建立隔离带而是一个元素向左一个向右

2. 每一列设置想要的宽度,次要内容向左,主内容向右,主内容添一点内边距,来避免文本紧挨着元素的右边缘

三列布局:

以上布局,宽度都以像素为单位,称为固定宽度的布局,知道了每个元素的精确度,就能够对它们进行精确的布局,而且知道所有东西在什么地方

缺点:因为它们都是固定的,无论窗口尺寸有多大,它们的尺寸总是不变;高分辨率屏幕下为1024*760创建的会缩小并出现在屏幕中间,在低分辨率的屏幕下,会导致水平滚动,因此被认为是:糟糕的权宜之计

>>>流式布局/弹式布局

流式布局:尺寸是用百分比而不是像素,相对于浏览器窗口进行伸缩

缺点:1.在窗口宽度较小时,行变得非常窄,很难阅读,多列布局尤其如此,有必要添加以像素或em为单位的min-width以防布局变得太窄 2.若设计横跨整个窗口,则行变得太长也很难阅读,用百分数设置内边距和外边距使容器只跨越宽度的一部分,如85%

固定宽度转化为流式布局

1.将容器宽度设置为窗口总宽度的百分数(若设计者使用宽度为960像素,而大多数用户的浏览器窗口设置为1250像素,那么使用的百分数为:(960/1250)*100=76.8%)

2.以容器宽度的百分比形式设置主内容区域和次要内容区域的宽度

两列:670/920=72.82% 20/920=2.18% 230/920=25%   三列: 400/670=59.7%   230/670   20/670

原文地址:https://www.cnblogs.com/giggling/p/6854519.html