一.布局；
1.水平居中
第一种居中方式；
以text-align属性设置父级元素和设置行内块级元素
<style>
body{
text-align: center;
}
#qq{
width: 200px;
height: 200px;
background-color: blue;
text-align: center
<!--将text-align属性设置父级元素-->
<!--设置文本内容水平方向居中-->
}
#q1,#q2{
width: 200px;
height: 200px;
background-color: red;
display: inline-block;
<!--设置行内块级元素-->
}
#q2{
background-color: yellow;
}
</style>
</head>
<body>
<div id="qq">
<div id="q1">爱新觉罗</div>
</div>
<div id="q2">呼延觉罗</div>
</body>第二种居中方式；
以设置块级元素和外边距特性来设置
<style>
#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;
}
</style>
</head>
<body>
<div id="qq">
<div id="q1">爱新觉罗</div>
</div>
<div id="q2">爱新觉罗</div>
</body>第三种居中方式；
以设置绝对定位和trannsform属性值来实现居中
<style>
#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%);
}
</style>
</head>
<body>
<div id="q1">
<div id="q2">爱新觉罗</div>
<!--实现水平居中-->
</div>
<div id="q3">爱新觉罗</div>
<!--实现水平居中-->
</body>第四种居中方式；
以设置相对定位和trannsform属性值(translateX)
<style>
#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%);
}
</style>
</head>
<body>
<div id="q1">
<div id="q2">爱新觉罗</div>
<!--实现水平居中-->
</div>
<div id="q3">爱新觉罗</div>
<!--实现水平居中-->
</body>2.垂直居中；
第一种居中方式；
以设置父级元素为单元格，垂直方向居中
<style>
body{
height: 880px;
display: table-cell;
vertical-align: middle;
}
#q1{
width: 200px;
height: 660px;
background-color: white;
display: table-cell;
/*相对于表格的单元格(<td>元素)
单元格的内容可以设置为水平和垂直中对齐*/
vertical-align: middle;
/*垂直方向居中*/
}
#q2{
width: 200px;
height: 200px;
background-color: red;
}
#q3{
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div id="q1">
<div id="q2">爱新觉罗</div>
<!--实现垂直居中-->
</div>
<div id="q3">爱新觉罗</div>
<!--实现垂直居中-->
</body>第二种居中方式；
以设置子级相对定位和transform属性值(translateY)
<style>
#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;
}
</style>
</head>
<body>
<div id="q1">
<div id="q2">爱新觉罗</div>
<!--实现垂直居中-->
</div>
<div id="q3">爱新觉罗</div>
<!--实现垂直居中-->
</body>第三种居中方式；
以设置子级元素相对定位和transform属性值(translateY)
<style>
#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;
}
</style>
</head>
<body>
<div id="q1">
<div id="q2">爱新觉罗</div>
<!--实现垂直居中-->
</div>
<div id="q3">爱新觉罗</div>
<!--实现垂直居中-->
</body>3.居中布局；
第一种居中布局；
以设置父级相对定位和子级绝对定位；transform属性值translate;
<style>
#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%);
}
</style>
</head>
<body>
<div id="qian">
<div id="ying"></div>
</div>
<div></div>
</body>第二种居中布局；
以设置父级单元格和外边距特性
<style>
#qian{
width: 800px;
height: 600px;
background-color: lightgrey;
display: table-cell;
/*相对于表格的单元格(<td>元素)
单元格的内容可以设置为水平和垂直中对齐
*/
vertical-align: middle;
/*父级元素居中*/
}
#ying {
width: 200px;
height: 200px;
background-color: blue;
display: table;
/*块级表格的(table)*/
margin: 0 auto;
}
</style>
</head>
<body>
<div id="qian">
<div id="ying"></div>
</div>
</body>4.两列布局；
第一种两列布局；
设置左浮动和外左边距
<style>
.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;
}
</style>
</head>
<body>
<div class="zuo">这是作为左边的定宽</div>
<div class="you">
<div class="zy"></div>
</div>
</body>第二种两列布局；
以设置左浮动和开启BFC模式来设置
<style>
.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;
}
</style>
</head>
<body>
<div class="zuo">这是作为左边的定宽</div>
<div class="rc">
<div class="you">
<div class="zy"></div>
</div>
</div>
</body>第三种两列布局；
以右浮动和外左边距来设置
<style>
.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;
}
</style>
</head>
<body>
<div class="zuo">这是作为左边的定宽</div>
<!-- 为作为右边自适应列，添加父级容器元素 -->
<div class="rc">
<div class="you">
<div class="zy"></div>
</div>
</div>
</body>第四种两列布局；
以设置父级为display属性值(table)
<style>
/* 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%;*/
}
</style>
</head>
<body>
<div class="pt">
<div class="zuo">这是作为左边的定宽</div>
<div class="you"></div>
</div>
</body>