html 浮动纵向布局,【静态页面架构】HTML之布局

一.布局；

1.水平居中

第一种居中方式；

以text-align属性设置父级元素和设置行内块级元素

body{

text-align: center;

}

#qq{

width: 200px;

height: 200px;

background-color: blue;

text-align: center

}

#q1,#q2{

width: 200px;

height: 200px;

background-color: red;

display: inline-block;

}

#q2{

background-color: yellow;

}

爱新觉罗

呼延觉罗

第二种居中方式；

以设置块级元素和外边距特性来设置

#qq{

width: 100%;

height: 200px;

background-color: white;

}

#q1{

width: 200px;

height: 200px;

background-color: red;

/*margin外边距实现水平居中

dispaky属性值只能是block和table

*/

display: block;

/*设置块级元素*/

margin:0 auto;

}

#q2{

width: 200px;

height: 200px;

background-color: yellow;

margin:0 auto;

}

爱新觉罗

爱新觉罗

第三种居中方式；

以设置绝对定位和trannsform属性值来实现居中

#q1{

width: 100%;

height: 200px;

background-color: white;

position: relative;

/*设置父级元素水平居中*/

}

#q2{

width: 200px;

height: 200px;

background-color: red;

position: absolute;

/*设置绝对定位

设置父级元素水平居中*/

left: 50%;

transform: translateX(-50%);

}

#q3{

width: 200px;

height: 200px;

background-color: blue;

position: absolute;

/*设置绝对定位*/

left: 50%;

transform: translateX(-50%);

}

爱新觉罗

爱新觉罗

第四种居中方式；

以设置相对定位和trannsform属性值(translateX)

#q1{

width: 100%;

height: 200px;

background-color: white;

}

#q2{

width: 200px;

height: 200px;

background-color: red;

position: relative;

/*设置相对定位

设置父级元素水平居中*/

left: 50%;

transform: translateX(-50%);

}

#q3{

width: 200px;

height: 200px;

background-color: blue;

position: relative;

/*设置相对定位*/

left: 50%;

transform: translateX(-50%);

}

爱新觉罗

爱新觉罗

2.垂直居中；

第一种居中方式；

以设置父级元素为单元格，垂直方向居中

body{

height: 880px;

display: table-cell;

vertical-align: middle;

}

#q1{

width: 200px;

height: 660px;

background-color: white;

display: table-cell;

/*相对于表格的单元格(

元素)

单元格的内容可以设置为水平和垂直中对齐*/

vertical-align: middle;

/*垂直方向居中*/

}

#q2{

width: 200px;

height: 200px;

background-color: red;

}

#q3{

width: 200px;

height: 200px;

background-color: blue;

float: left;

}

爱新觉罗

爱新觉罗

第二种居中方式；

以设置子级相对定位和transform属性值(translateY)

#q1{

width: 200px;

height: 660px;

background-color: lightgrey;

position: relative;

/*子级元素垂直居中*/

}

#q2{

width: 200px;

height: 200px;

background-color: red;

position: absolute;

/*设置绝对定位

相对于父级*/

top: 50%;

transform: translateY(-50%);

}

#q3{

width: 200px;

height: 200px;

background-color: blue;

}

爱新觉罗

爱新觉罗

第三种居中方式；

以设置子级元素相对定位和transform属性值(translateY)

#q1{

width: 200px;

height: 660px;

background-color: lightgrey;

}

#q2{

width: 200px;

height: 200px;

background-color: red;

position: relative;

/*设置相对定位*/

top: 50%;

transform: translateY(-50%);

}

#q3{

width: 200px;

height: 200px;

background-color: blue;

}

爱新觉罗

爱新觉罗

3.居中布局；

第一种居中布局；

以设置父级相对定位和子级绝对定位；transform属性值translate;

#qian{

width: 800px;

height: 600px;

background-color: lightgrey;

position: relative;

/*设置相对定位*/

}

#ying {

width: 200px;

height: 200px;

background-color: red;

position: absolute;

/*设置绝对定位*/

left: 50%;

top: 50%;

transform: translate(-50%, -50%)

/*实现块元素居中*/;

}

div {

width: 200px;

height: 200px;

background-color: blue;

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

}

第二种居中布局；

以设置父级单元格和外边距特性

#qian{

width: 800px;

height: 600px;

background-color: lightgrey;

display: table-cell;

/*相对于表格的单元格(

元素)

单元格的内容可以设置为水平和垂直中对齐

*/

vertical-align: middle;

/*父级元素居中*/

}

#ying {

width: 200px;

height: 200px;

background-color: blue;

display: table;

/*块级表格的(table)*/

margin: 0 auto;

}

4.两列布局；

第一种两列布局；

设置左浮动和外左边距

.zuo, .you {

height: 300px;

}

.zuo {

/* 定宽 */

width: 300px;

background-color: lightcoral;

float: left;

}

.you {

background-color: gray;

margin-left: 300px;

}

.zy {

width: 100%;

height: 300px;

background-color: yellowgreen;

clear: both;

}

这是作为左边的定宽

第二种两列布局；

以设置左浮动和开启BFC模式来设置

.zuo, .you {

height: 300px;

}

.zuo {

/* 定宽 */

width: 300px;

background-color: blue;

float: left;/*设置为左浮动*/

/*脱离文档流*/

}

.you{

background-color: gray;

/* 开启BFC模式*/

overflow: hidden;

}

.zy {

width: 100%;

height: 200px;

background-color: red;

clear: both;

}

这是作为左边的定宽

第三种两列布局；

以右浮动和外左边距来设置

.zuo, .you {

height: 300px;

}

.zuo {

/* 定宽 */

width: 300px;

background-color: lightcoral;

float: left;

/* 开启定位 - 定位的层级结构高于浮动 */

position: relative;

}

.rc {

background-color: lightgray;

/*

脱离文档流 - 宽度等于所有后代元素宽度之和

* 右边列必须是只适应 - 不能设置定宽

* 不设置宽度的话，默认为 0

解决 - width: 100%

*/

width: 100%;/* 为页面宽度的100% */

float: right;

/*

margin-left - 控制当前元素的位置

*/

margin-left: -300px;

}

.you {

background-color: gray;

margin-left: 300px;

}

.zy {

width: 100%;

height: 300px;

background-color: yellowgreen;

clear: both;

}

这是作为左边的定宽

第四种两列布局；

以设置父级为display属性值(table)

/* 1.将左右两列元素的父级设置display值为table */

.pt {

display: table;

table-layout: fixed;

width: 100%;

}

.zuo, .you {

height: 300px;

/* 2.将左右两列元素设置display值为table-cell */

display: table-cell;

}

.zuo {

/* 定宽 */

width: 300px;

background-color: red;

}

.you {

background-color: gray;

/*

由于设置display值为table-cell，默认的宽度为所有后代元素宽度之和

这一列作为自适应的一列

不能设置当前列的宽度为定宽

*/

/*width: 100%;*/

}

这是作为左边的定宽