html中的布局方式,网页的布局方式

网页的布局方式其实就是指浏览器如何对网页中的元素进行排版的。

标准流

默认排版方式

块级元素-垂直排版

行内元素、行内块级-水平排版

浮动流：

一种半脱离标准流的排版方式。

脱标：脱离标准流。浮动起来。后面的元素如果没有脱标，会把脱标的元素的位置占住。

不区分行内和块状元素。(即可设置行内元素的宽高)

水平排版，设置有个元素的左对齐或者右对齐，没有居中对齐

浮动流中不可以使用margin：0 auto设置居中对齐

综上所述, 浮动流中的元素和标准流中的行内块级元素很像

.box1{

width: 100px;

height: 100px;

background-color: red;

float: left;

}

.box2{

width: 100px;

height: 100px;

background-color: blue;

float: right;

}

div{

border: 1px solid #000;

}

p{

float: left;

width: 50px;

height: 50px;

background-color: red;

}

我是文字1

我是文字1

我是文字1

.box1 {

/* height: 20px; */

background-color: red;

}

.box1 p {

width: 100px;

background-color: blue;

}

我是文字2

我是文字2

我是文字2

.box2 {

background-color: green;

}

.box2 p {

width: 100px;

background-color: yellow;

}

p {

float: left;

}

.box2{

background-color: green;

clear: both;

/* margin-top: 28px; */

}

//浮动元素不会遮挡住非浮动元素中的文字

//非浮动元素会给浮动元素让位置

//这就是浮动元素字围绕现象

p{

width: 500px;

height: 500px;

background-color: yellow;

}

img{

float: left;

}

//清除浮动的第四种方式(#####通过伪元素清除浮动--推荐)(第三种是内墙和外墙法，不常用，没写)

.box1::after{

/*设置添加的子元素的内容为空*/

content: "";

/*设置添加的子元素为块级元素*/

display: block;

/*设置添加的子元素的高度为0*/

height: 0;

/*设置添加的子元素看不见*/

visibility: hidden;

/*给添加的子元素设置clear: both;*/

clear: both;

}

.box1{

/*兼容IE6*/

*zoom:1;

}

//清除浮动的第五种方式(#####通过overflow清除浮动--推荐)

我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字

div{

width: 100px;

height: 100px;

background-color: red;

overflow: hidden;

}

.box1{

background-color: red;

overflow: hidden;

*zoom:1;

}

.box2{

background-color: green;

}

.box1 p{

width: 100px;

background-color: blue;

}

.box2 p{

width: 100px;

background-color: yellow;

}

p{

float: left;

}

.box1{

width: 200px;

height: 200px;

background-color: red;

/*border: 1px solid #000;*/

overflow: hidden;

}

.box2{

width: 100px;

height: 100px;

background-color: blue;

margin-top: 20px;

}

.father{

width: 400px;

height: 400px;

border: 1px solid #000;

}

.box1{

float: left;

width: 150px;

height: 300px;

background-color: red;

}

.box2{

float: left;

width: 350px;

height: 100px;

background-color: green;

}

.box3{

float: left;

width: 250px;

height: 100px;

background-color: blue;

}

div{

border: 1px solid #000;

}

p{

float: left;

width: 50px;

height: 50px;

background-color: red;

}

什么时候使用标准流，什么时候使用浮动流

垂直方向上使用标准流，水平方向上使用浮动流

拿到一个很复杂的页面应如何入手？

1、从上至下布局

2、从外向内布局

3、水平方向可以先互粉一左一右，先对其中一边进行布局

定位流

相对定位：

相对定位就是相对于自己以前在标准流中的位置来移动

相对定位注意点

1、相对定位是不脱离标准流的, 会继续在标准流中占用一份空间

2、在相对定位中同一个方向上的定位属性只能使用一个

3、由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素

4、由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局【改变的是原来相对位置之前的margin/padding】

input{

width: 200px;

height: 50px;

}

img{

width: 100px;

height: 50px;

position: relative;

top: 20px;

}

定位流-绝对定位：

1、一般情况下相对于body， 如果祖先类有相对、绝对、固定定位流，以有相对、绝对、固定定位的祖先为参考点(如果几个祖先都有这三种定位流，根据离它最近的)，会忽略padding

2、以首屏为参考点，

3、脱离标准流，

4、不区分行内/块级，都可以设置宽高；

.box1{

width: 100px;

height: 100px;

background-color: red;

position: absolute;

right: 0;

bottom: 0;

}

.box2{

width: 2000px;

height: 100px;

background-color: green;

}

.box3{

width: 100px;

height: 2000px;

background-color: blue;

}

.box1{

width: 300px;

height: 300px;

background-color: red;

border: 10px solid #000;

padding: 30px;

position: relative;

}

.box2{

width: 100px;

height: 100px;

background-color: green;

position: absolute;

left: 0;

top: 0;

}

/*

相对定位弊端:

相对定位不会脱离标准流, 会继续在标准流中占用一份空间, 所以不利于布局界面

*/

/*

绝对定位弊端:

默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度高度的变化而变化

*/

/*

最好的解决办法：子绝父相

子元素用绝对定位, 父元素用相对定位

*/

div{

width: 300px;

height: 50px;

background-color: red;

/*margin: 0 auto;*/

position: absolute;

left: 50%;

margin-left: -150px;

}

3定位流-固定定位：position:fixed;

脱离标准流

行内和块级不气愤

不随着页面滚动

.father1{

width: 200px;

height: 200px;

background-color: red;

position: relative;

z-index: 2;

}

.father2{

width: 200px;

height: 200px;

background-color:green;

position: relative;

z-index: 0;

}

.son1{

width: 100px;

height: 100px;

background-color: salmon;

position: absolute;

left: 200px;

top: 200px;

z-index: 1;

}

.son2{

width: 100px;

height: 100px;

background-color:seagreen;

position: absolute;

left: 250px;

top: 50px;

z-index: 7;

}

3定位流-静态定位：