CSS布局（Display、Position、Overflow、Float）

最新推荐文章于 2023-12-04 15:25:34 发布

风吹裙起ppl

最新推荐文章于 2023-12-04 15:25:34 发布

阅读量361

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/NicoleZhang2012/article/details/106902286

版权

布局说明

CSS布局

基本布局属性

Display（显示）

display属性设置一个元素应如何显示。
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
display:block – 显示为块级元素
display:inline – 显示为内联元素
display:inline-block – 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

Visibility（可见）

visibility属性指定一个元素应可见还是隐藏。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
visibility: collapse – 一般的元素的表现与 visibility: hidden 一样，也即其会占用空间。但如果该元素是与 table 相关的元素，例如 table row、table column、table column group、table column group 等，其表现却跟 display: none 一样，也即其占用的空间会释放。(不同浏览器下，对 visibility: collapse 的处理方式不同)

Position（定位）

position 属性指定了元素的定位类型。

static HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
fixed 固定定位元素的位置相对于浏览器窗口是固定位置。
- Fixed定位使元素的位置与文档流无关，因此不占据空间。
- Fixed定位的元素和其他元素重叠。
```
// 右上角显示
p.pos_fixed
{
    position:fixed;
    top:30px;
    right:5px;
}
```
relative 相对定位元素的定位是相对其正常位置。
- 移动相对定位元素，但它原本所占的空间不会改变。
```
// 从元素的原始左侧位置减去 20 像素。（左移20px）
h2.pos_left
{
   position:relative;
   left:-20px;
}
```
absolute 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。
- absolute 定位使元素的位置与文档流无关，因此不占据空间。
- absolute 定位的元素和其他元素重叠。
sticky 粘性定位基于用户的滚动位置来定位。
- 粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
```
// Top为0 的时候固定在那
div.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: green;
    border: 2px solid #4CAF50;
}
```

Overflow （溢出）

overflow 属性规定当内容溢出元素框时发生的事情。
注意:overflow 属性只工作于指定高度的块元素上。

visible 内容不会被修剪，会呈现在元素框之外。(默认值)
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

Float（浮动）

float会使元素向左或向右移动，其周围的元素也会重新排列。往往是用于图像，但它在布局时一样非常有用。
使元素的位置与文档流无关，因此不占据空间。

// 图片浮动显示
.image-list {
    float:left;
    margin:5px
  }

Clear (清除浮动)

clear 属性指定元素两侧不能出现浮动元素。
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

// text_line 元素左右两边不能出现浮动元素
.text_line
{
	clear:both;
}

z-index（顺序）

z-index 设置元素的堆叠顺序。
可定义为一个值(整数数字)，越大代表越置前，如可定义为： z-index:9999。若定义为-1，代表为最底层。

flex布局 & grid布局

flex布局
display: flex
display: inline-flex
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。
参考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
grid布局
display: grid
display: inline-grid
Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
参考:https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

圣杯布局 & 双飞翼布局

左右两栏固定宽度，中间部分自适应的三栏布局，其原理差不多，都有负边距的应用，就是middle的实现不一样。
关于负边距的理解： https://www.cnblogs.com/2050/archive/2012/08/13/2636467.html.

圣杯布局

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Test</title> 
<style>
		.header {
			width: 100%;
			height: 30px;
			background: red;
		}

		.content {
			overflow: hidden;
			padding: 0 100px;
		}

		.footer {
			width: 100%;
			height: 30px;
			background: red;
		}

		.middle {
			position:relative;			
			width: 100%;
			float: left;
			height: 80px;
			background: green;
		}

		.left {
			position:relative;
			width: 100px;
			float: left;
			left:-100px;
			height: 80px;
			margin-left: -100%;
			background: yellow;
		}

		.right {
			position:relative;			
			width: 100px;
			float: left;
			right:-100px;
			height: 80px;
			margin-left: -100px;
			background: pink
		}

</style>
</head>

<body>
        <div class="header">header-start header header header header header header-end</div>
     	<div class="content">
			<div class="middle"> middle-start middle middle middle middle middle middle middle middle middle middle middle-end </div>
			<div class="left">left-start left left left left left left left left left left left left left left left-end </div>
			<div class="right"> right-start right-end</div>
		</div>
		<div class="footer"></div>
</body>
</html>

圣杯布局

双飞翼布局

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Test</title>
<style>
.header {
   		width: 100%;
   		height: 30px;
   		background: red;
   	}

   	.content {
   		overflow: hidden;
   	}

   	.footer {
   		width: 100%;
   		height: 30px;
   		background: red;
   	}

   	.middle {			
   		width: 100%;
   		float: left;
   	}
   	.inner-middle{ 
   	   height: 80px; 
   	   margin: 0 100px; 
   	   background: green;		 
   	}
   	.left {
   		width: 100px;
   		float: left;
   		height: 80px;
   		margin-left: -100%;
   		background: yellow;
   	}

   	.right {			
   		width: 100px;
   		float: left;
   		height: 80px;
   		margin-left: -100px;
   		background: pink
   	}
</style>
</head>

<body>
<div class="header">header-start header header header header header header-end </div>
   <div class="content">
   	<div class="middle">
   		<div class="inner-middle">middle-start middle middle middle middle middle middle middle middle middle middle middle-end</div>
   	</div>
   	<div class="left">left-start left left left left left left left left left left left left left left-end </div>
   	<div class="right"> right-start right-end</div>
   </div>
   <div class="footer"></div>
</body>
</html>

双飞翼布局

风吹裙起ppl

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS布局（Display、Position、Overflow、Float）

布局说明基本布局属性Display（显示）display属性设置一个元素应如何显示。display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。display:block – 显示为块级元素display:inline – 显示为内联元素display:inline-block – 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性Visibility（可见）visibility属性指定一个
复制链接

扫一扫