Commonly used methods for css div layout ㈠_html/css_WEB-ITnose

CSS布局常用的方法：float : none | left | right

取值：
none :? 默认值。对象不飘浮
left :? 文本流向对象的右边
right :? 文本流向对象的左边

它是怎样工作的，看个一行两列的例子

xhtml:

这里是第一列

这里是第二列

CSS:

#wrap{ width:100%; height:auto;}
#column1{ float:left; width:40%;}
#column2{ float:right; width:60%;}
.clear{ clear:both;}

position : static | absolute | fixed | relative

取值：

static :? 默认值。无特殊定位，对象遵循HTML定位规则
absolute :? 将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义
fixed :? 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
relative :? 对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置

它来实现一行两列的例子

xhtml:

这里是第一列

这里是第二列

CSS:

#wrap{ position:relative;/*相对定位*/width:770px;}
#column1{ position:absolute; top:0; left:0; width:300px;}
#column2{position:absolute; top:0; right:0; width:470px;}

他们的区别在哪?

显然，float是相对定位的，会随着浏览器的大小和分辨率的变化而改变，而position就不行了，所以一般情况下还是float布局！

2.CSS常用布局实例

一列
单行一列

body { margin: 0px;   padding: 0px;  text-align: center;  }
#content {  margin-left:auto;  margin-right:auto;  width: 400px;  width: 370px; }

两行一列

body {  margin: 0px;   padding: 0px;   text-align: center;}
#content-top { margin-left:auto;   margin-right:auto; width: 400px;  width: 370px;}
#content-end {margin-left:auto; margin-right:auto;  width: 400px;   width: 370px;}

三行一列

body {  margin: 0px; padding: 0px;  text-align: center;  }
#content-top {  margin-left:auto;  margin-right:auto;  width: 400px;   width: 370px;  }
#content-mid { margin-left:auto; margin-right:auto;  width: 400px;  width: 370px; }
#content-end { margin-left:auto; margin-right:auto; width: 400px;  width: 370px; }

两列
单行两列

#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto;  }
#bodycenter #dv1 {float: left;width: 280px;}
#bodycenter #dv2 {float: right;width: 410px;}

两行两列

#header{    width: 700px; margin-right: auto;margin-left: auto; overflow: auto;}
#bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }
#bodycenter #dv1 { float: left; width: 280px;}
#bodycenter #dv2 { float: right;width: 410px;}

三行两列

#header{    width: 700px;margin-right: auto; margin-left: auto;  }
#bodycenter {width: 700px; margin-right: auto; margin-left: auto;  }
#bodycenter #dv1 {  float: left;width: 280px;}
#bodycenter #dv2 { float: right;  width: 410px;}
#footer{     width: 700px;  margin-right: auto; margin-left: auto;  overflow: auto;  }

三列
单行三列
绝对定位

#left { position: absolute; top: 0px;  left: 0px; width: 120px;  }
#middle {margin: 20px 190px 20px 190px; }
#right {position: absolute;top: 0px; right: 0px;  width: 120px;}

float定位

xhtml:

这里是第一列

这里是第二列

这里是第三列

CSS:

#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}

float定位二

xhtml:

  

This is the main content.

  

This is the left sidebar.

  

This is the right sidebar.

CSS:

body {margin: 0;padding-left: 200px;padding-right: 190px;min-width: 240px;}
.column {position: relative;float: left;}
#center {width: 100%;}
#left {width: 180px; right: 240px;margin-left: -100%;}
#right {width: 130px;margin-right: -100%;}

两行三列

xhtml:

这里是顶行

这里是第一列

这里是第二列

这里是第三列

CSS:

#header{width:100%; height:auto;}
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}

三行三列

xhtml:

这里是顶行

这里是第一列

这里是第二列

这里是第三列

这里是底部一行

CSS:

#header{width:100%; height:auto;}
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float: right; width:40%;}
.clear{ clear:both;}
#footer{width:100%; height:auto;}

PS: The ones listed here are commonly used This is an example, not for research. For each box, I did not set the margin, padding, boeder and other attributes because I personally feel that when width positioning is included, it is best not to use them unless it is absolutely necessary. Because if this is not the case, solving browser compatibility issues will give you a headache and generate a series of CSS codes. I think this is not efficient and effective!

3. Advanced CSS layout skills

It is always possible to use margin and padding, but how to solve the problems that arise? Because browsers interpret container widths in different ways:

IE 6.0 Firefox Opera, etc. are
real width=width padding border margin
IE5.X
real width=width-padding-border- margin

Obviously, the perfect layout in the first case has very miserable consequences in the second case!

The solution is hack


div.content {
width:400px; //This is the wrong width, all browsers read
voice- family: ""}""; //IE5.X/win ignores the content after ""}""
voice-family:inherit;
width:300px; //Including IE6/win Some browsers read this sentence and the new value (300px) overwrites the old
}
html>body .content { //html>body is written in CSS2
width:300px; // Browsers (not IE5) that support this CSS2 writing method are fortunate enough to read this sentence
}

div.content {
width:300px !important; //This is the correct width, most support it The browser marked with !important uses the value here
width (space)/**/:400px; //IE6/win does not parse this sentence, so IE6/win still thinks that the value of width is 300px; and IE5.X /win read this sentence, the new value (400px) overwrites the old one, because the !important tag does not work on them
}
html>body .content { //html>body is written in CSS2
width:300px; // Browsers that support CSS2 writing method are lucky enough to read this sentence
}


Column and other high skills

n rows and n columns layout, The same height of each column (the height of which column cannot be determined in advance) is the goal pursued by every designer. The methods include: filling the background image, adding the
method of the JS script and hiding the overflow part of the container and the negative bottom of the column. A method that combines boundary and positive inner patches.

Background image filling method:

xhtml:

This is The first column

This is the second column

css:

#wrap{ width:776px; background:url(bg.gif) repeat-y 300px;}
#column1{ float: left; width:300px;}
#column2{ float:right; width:476px;}
.clear{ clear:both;}

is to put an npx wide picture outside The containers are repeated vertically and positioned at the staggered position of the two columns. This creates the visual illusion that the two columns are of the same height