关于CSS布局

最新推荐文章于 2024-08-09 16:30:00 发布

lianglizhongblog

最新推荐文章于 2024-08-09 16:30:00 发布

阅读量526

点赞数 1

分类专栏：前端自学总结 CSS 文章标签： CSS布局标准文档流浮动相对定位绝对定位

本文链接：https://blog.csdn.net/lianglizhong1991/article/details/59484560

版权

前端自学总结同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

CSS

10 篇文章 0 订阅

订阅专栏

CSS三大定位机制：标准文档流、浮动布局、绝对定位布局。

一、标准文档流：

1.特点：从上到下，从左到右输出文本。

标准文档流里面又分两种情况，即块级元素和行级元素，也可以说标准文档流是由块级标签和行级标签组成的。

块级元素特点：从左到右撑满页面，独占一行，触碰到页面边缘时会自动换行，常见的块级标签有div、ul、li、dl、dt、p…。

行级元素特点：能在同一行显示，不影响HTML文档结构。

例：

A.专注前端100年

B.专注前端

A和B显示效果是一样的，即都是显示排列在一行。常见的行级标签有：span、strong、img、input…

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

2.标准文档流布局的应用：自动一列居中布局

主要应用到3个关键点：

A.标准文档流的垂直自上而下排列的特点；

B.块元素独占一行的特点；

C.margin属性:为所有的块设置一个包括层，把这些块包含在内，或者说把整个页面给包裹起来，然后再给这个包裹层添加样式：#XXX{width:一个固定值；margin：0 auto;}；

注：①width一般设置一个固定的宽度值，然后里面的块的宽度设置为100%，即里面的块元素会继承父元素的宽度值；

②auto的意思是会根据浏览器的宽度自动设置两边的外边距，也就是自适应。

③当包裹层同时设置了浮动或者绝对定位的话，那么auto是起不到自动居中的作用的；

二、浮动布局：首先我们要清楚什么情况下会出现或者说会需要用到浮动？浮动通常是出现在多个块状元素需要在并排显示时，因为块状元素的特点，一个块状元素是独占一行的，所以要想多个块状元素并排显示，这时候就需要用到浮动。

浮动(float)：

A. 当设置了float以后，可以理解为块/盒子脱离了标准文档流浮动起来，漂浮在标准文档流上面，但要注意的是，虽然设置了浮动的元素脱离了标准文档流，但是元素的内容还在标准文档流里面，还占据空间，而且后面紧邻的元素虽然占据了漂浮元素的空间，但是不会覆盖它的内容:

浮动前（注："siderbar"层和"content"层位于"mainbody"里面）：

“content”设置浮动后：

清除浮动:什么是清除浮动呢？或者说什么时候会用到清除浮动呢？我们知道浮动会对标准文档流里面的其他元素产生影响，从而使得页面可能会变得很乱，例如上面的"content"设置浮动后，对紧邻在它后面的"footer"层产生了影响，而且对它的父级元素"content"层也产生了影响，使得整个页面变得凌乱不堪，那如何消除这个影响呢？这时候就要用到浮动了：

常用的清除浮动有：

1.clear:

clear:left;

clear:right;

clear:both;

它的意思是清除元素的左侧浮动或者右侧浮动或者两侧浮动。

clear这种清除浮动一般常用于受浮动元素影响的紧邻于浮动元素后面的元素的这种浮动；

2.设置元素的宽度width100%（或者固定的值）+overflow:hidden：

Overflow清除浮动常用于：当一个父块里面有两列，而这两列都设置了浮动，由于父块没有设置浮动，所以父块的高度就没办法扩展了，可能出现的情况是父块的背景被覆盖住不能显示，而这两列的内容就会溢出，这时就需要用清除浮动了（在父块的样式里面添加上该种方法），overflow:hidden除了可以理解为清除浮动之外，也可以理解为是把溢出内容进行隐藏。

清除浮动后：