html盒子页面居中,网页布局盒子(box)相关属性和盒子居中

网页布局中盒子的相关属性：

一、盒子的基础属性：

1、width和height：设置盒子的宽度和高度：常见单位：px,em,rem,vh/vm等

2、background:color(设置背景颜色),image(设置背景图片)，repeat(设置背景图片如何重复)，clip(设置背景图片剪裁)，position|size(设置图片位置，和尺寸大小)，attachment(设置图片是否背景固定和滚动：值有fixed,scroll,local)

3、border(top|right|bottom|left):width style color(px,solid|double|dashed|dotted，颜色)

4、box-sizing:设置盒子的区域，值有：content-box(那内容为盒子大小基准)、border-box(以盒子宽高为盒子大小)

5、margin|padding:设置盒子的内外边距

6、overflow:设置内容溢出盒子的处理方法，常见值有auto|scroll|hidden|默认值visible

7、max|min-width|height:最小高度和最大高度

8、opacity:设置盒子的透明度：0-1

9、calc():CSS样式计算函数

二、盒子居中常见的几种方法：

常见的居中分为行内元素居中和块级元素居中：

1、行内元素居中：text-align:center;

2、行内元素垂直居中：line-height:值等于父级高度即可

3、块级元素居中：

方案一：容器不设置高度，利用padding挤压垂直居中，内容通过margin设置水平居中；

方案二：利用position位置属性，把top|left|bottom|right这个四个属性设置为0；再利用margin:auto;把盒子中的元素居中；

三、盒子居中小案例：

1、代码

CSS布局-盒子居中小案例

*{

margin:0;

padding:0;

box-sizing:border-box;

}

.box{

background-color:lightcoral;

width:200px;

height:200px;

opacity:1;

/* 控制容器的行内元素的居中 */

text-align:center;

line-height:200px;

/* 控制盒子居中 */

margin:auto;

position:absolute;

top:0;

right:0;

bottom:0;

left:0;

}

.box span{

background-color:lightblue;

}

/* 利用marin和padding把盒子居中 */

.box1{

border:2pxsolid#008000;

padding:40px;

/* padding: 40px; */

background-color:olive;

}

.small{

width:100px;

height:100px;

background-color:#42B983;

margin:0auto;

}

我行内元素