列布局—自动居中（浮动布局）

 W3C倡导结构、样式、行为分离

 css中存在三种机制：标准文档流（Normal）、浮动（Floats）、绝对定位（Absolute position）

一个布局的开始一定要养成初始化网页的盒子模型：  *｛margin：0；padding：0；｝

学习三个点：标准文档流、块级元素、margin属性

标准文档流：从上到下，从左到右，输出内容   由块级元素和行级元素组成

块级元素：从左到右撑满页面，独占一行  触碰到页面边缘时，会自动换行

行级元素：能在同一行内显示  不会改变HTML文档结构

块级元素和行级元素都是盒子模型

盒子模型——网页布局的基础：边框（border）、外边框（margin）、内边框（padding）、盒子中的内容（content）

盒子模型尺寸=边框+外边框+内边框+盒子中的内容尺寸    

                例：一个div的边框为3px，内边框为2px，右外边框为10px，往其内部插入一张宽度为120px的图片，则div的宽度为多少  

 div宽度=3px（border）+2px（padding）+10px（padding）X 2+120px（content）

 

 

???实现自动居中：

1、给父级div设置包裹元素   .wrapper｛width：770px；margin：0 auto；｝    margin的上下不用设置

 auto，会根据浏览器的宽度自动的设置两边的外边距➡️原理：外边距=（浏览器的宽度-外包含的宽度）/2

如果设置margin为auto属性时，居中是就不要设置浮动或绝对定位属性

例如：使用关键自动居中margin：10px auto；width：80%；

右设置为auto，一定要设置width为一个定值，不能为100%

2、块级元素实现横向居中      css中规定的第二种定位机制—浮动布局能够实现横向多列布局，最常见的横向两列布局、横向三列布局

通过设置float属性实现，分为三个属性值：left左浮动、right右浮动、none不浮动
特点：元素会左移或右移，直至碰到容器为止

 设置了浮动元素，仍处于标准文档流中

当元素没有设置浮动宽度时，而设置了浮动属性float：left，浮动的宽度随着内容的变化而变化
当元素设置浮动属性时，会对相对的元素产生影响，相邻元素特指紧邻后面的元素……两个相邻的块级元素设置了左右浮动时相邻后面的元素会受到影响，

       一般清除浮动的方法

       a、clear属性—常用clear：both
           clear：left或clear：right这需要明白是哪个元素，否则会不起作用
       b、width：100%（或固定宽带）+overflow：hidden同时使用
           空标签br不建议使用清除浮动，br虽然能清除浮动但，对于页面是没有意义的，不使用无意义的空标签是w3c的标准

 

 

 

转载于:https://www.cnblogs.com/hq123/p/5940530.html