CSS左右偏移

html-css016

CSS左右偏移,第1张

1、新建html文件。

2、创建两个div，并赋予id。

3、为两个div设置宽高和背景，并设置左右浮动。

4、预览效果如图。

5、创建第三个div。

6、为第三个div设置宽高和背景。

7、预览效果如图。

注意事项：

随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。

例：居中.wrapper里的.content

一. 已经元素的宽高的前提下：

(1)  left:50%top:50%

父元素设置相对定位，position: relative 

子元素(要居中的元素)设置绝对定位，position: absolute  left: 50%   top: 50%

（2）设置margin: auto

父元素设置相对定位,position: relative

子元素(要居中的元素)设置绝对定位，position: absolutemargin: auto

(3)   flex布局

父元素设置 display: flex  justify-content: center   align-items: center

二.未知元素宽高的情况下：

（1）四个方向设置值，把元素撑开

父元素设置相对定位，position: relative 

子元素设置绝对定位，position: absolutetop与bottom设置一样的值，left与right设置一样的值，把容器撑开