盒子布局、标签特性display、浮动、定位position（盒子的浮动有哪些设置）

25-02-12 16

想了解盒子布局、标签特性display、浮动、定位position的新动态吗？本文将为您提供详细的信息，我们还将为您解答关于盒子的浮动有哪些设置的相关问题，此外，我们还将为您介绍关于17，CSS区块、

想了解盒子布局、标签特性display、浮动、定位position的新动态吗？本文将为您提供详细的信息，我们还将为您解答关于盒子的浮动有哪些设置的相关问题，此外，我们还将为您介绍关于17 ， CSS 区块、浮动、定位、溢出、滚动条、1、绝对定位(position: absolute) 2、相对定位(position: relative) 3、固定定位(position: fixed)、CSS Positions布局实现弹性盒子布局的技巧、CSS 布局属性大全：display，position 和 float的新知识。

本文目录一览：

盒子布局、标签特性display、浮动、定位position（盒子的浮动有哪些设置）
17 ， CSS 区块、浮动、定位、溢出、滚动条
1、绝对定位(position: absolute) 2、相对定位(position: relative) 3、固定定位(position: fixed)
CSS Positions布局实现弹性盒子布局的技巧
CSS 布局属性大全：display，position 和 float

盒子布局、标签特性display、浮动、定位position（盒子的浮动有哪些设置）

盒子模型布局：

盒子模型：每个标签都是一个盒子

盒子在页面显示在大小是：自身宽度+边框+边距（内边框+外边距）

如果一个盒子设置了边框，则边框需要被加两遍。若果设置了边距则内外边距根据设置情况要被加两遍。

计算宽高Box-sizing: border-Box;（意义是将盒子大小定死，不会再因边距边框大小改变。）

设置上一行属性后，盒子宽度就是width，里面内容自适应。（计算的时候不再需要加边框和边距。）

从里到外：

padding(内边距)：属性值的前后顺序代表了上右下左的属性值。

上右下左上（左右）下（上下）（左右）全部

border（边框:每一个边都可以设置）：

width大小

style样式

color颜色

radius（角）：左上（顺时针，百分比形式50% 0% 0% 0%）

margin（外边距）：上右下左上（左右）下（上下）（左右）全部

（margin:auto;居中属性正对于块标签。）

Box-shadow(盒子阴影外，向外加inset)：水平偏移量上下偏移量清晰度阴影的面积颜色（inset属性加在最后）

h-shadow:水平阴影位置。允许负值。

v-shadow:垂直阴影位置。允许负值。

text-shadow(字体阴影)：水平偏移量上下偏移量清晰度阴影面积颜色

布局：

浮动:float

overflow:hidden 超出部分处理方式

overflow-y:scroll 滚动条

标签特性：display :

inline 行

不能设置宽高，默认不占一行

block 块（margin:auto;居中属性正对于块标签。）

能设置宽高，默认占一行

inline-block 行内块

能设置宽高，默认不占一行

none

display：none 隐藏

标签位置没了。宽高都没了，但是还在。网页可检查到。

visibility:hidden；

标签位置还在，只是遮挡。宽高都在，页面无法看到。

opacity：数值（0~1）；

透明度，但标签和子标签都透明

如果只需要背景半透，字体不变

则需要直接设置背景色，background：rgba();

rgba(0~255,0~255,透明度（0~1）);

布局：

浮动:float

overflow:hidden 超出部分处理方式（将超出的部分隐藏掉）

overflow-y（x）:scroll 隐藏并处滚动条，y是垂直方向，x是水平方向。

定位position:

fixed 绝对定位，相对于屏幕定位，保持在屏幕的位置不变。

设置fixed,标签位置没了（最高层）

top:0px;left:10px;right:20px;bottom:30px;此处为在页面的定位位置。（一般只设两个，上下各一个，左右各一个，避免冲突。）

z-index:层数：层数越高，显示在最前面。（前面的图片会挡住下一层的图片）

补充：background-attachment:scroll;是设置背景图片位置不动，滑动滚动条无变化。

relative 相对定位，相当于自己定位

形式的移动，原位置不变！！！

会移动,微调 +-不要超过20px。

<div></div>，设置top，bottom，left，right属性来调节位置。

最主要的！！！限制absolute

absolute 绝对定位，相对于body（页面定位）

标签位置也没了

相对于最近的有position属性的父标签,最顶级是body.

<div>

top,left,right,bottom

z-index:层数

17 ， CSS 区块、浮动、定位、溢出、滚动条

1.CSS 中区块的使用

2.CSS 中浮动的使用

3.CSS 中定位的使用

4.CSS 中溢出的使用

5.CSS 中滚动条的使用

17.1 CSS 中区块的使用

属性名称属性值说明

width 像素/百分比区块的宽度

auto

height 像素/百分比区块的高度

auto

min-height 像素像素/百分比区块最小高度

auto

max-height 像素像素/百分比区块最大高度

auto

min-width 像素像素/百分比区块最小宽度

auto

max-width 像素像素/百分比区块最大宽度

auto

17.2 CSS 中浮动的使用

属性名称属性值说明

float none 正常显示

left 左浮动

right 右浮动

clear none 允许两边浮动

left 不允许左边浮动

right 不允许右边浮动

both 不允许两边浮动

17.3 CSS 中定位的使用

属性名称属性值说明

position relative 设置区块基准点为左上角

absolute 设置网页的为基准点左上角

static 无设置

left auto 以基准点定位在左边

像素/百分比定位在左边

top auto 以基准点定位在上边

像素/百分比定位在上边

right auto 以基准点定位在右边

像素/百分比定位在右边

bottom auto 以基准点定位在下边

像素/百分比定位在下边

z-index auto 自动调整高度

数字数字越大越往上层

17.4 CSS 中溢出的使用

属性名称属性值说明

overflow visible 不剪切内容也不添加滚动条

auto 在必需时对象内容才会被

裁切或显示滚动条

hidden 不显示超过对象尺寸的内容

scroll 总是显示滚动条

overflow-x (同上)

overflow-y (同上)

17.5 CSS 中滚动条的使用

属性名称属性值说明

scrollbar-3dlight-color 颜色/十六进制滚动条亮边框

scrollbar-highlight-color 颜色/十六进制滚动条 3D 界面亮边

scrollbar-face-color 颜色/十六进制滚动条 3D 表面

scrollbar-arrow-color 颜色/十六进制滚动条方向箭头

scrollbar-shadow-color 颜色/十六进制滚动条 3D 暗边

scrollbar-darkshadow-color 颜色/十六进制滚动条暗边框

scrollbar-base-color 颜色/十六进制滚动条基准颜色

scrollbar-track-color 颜色/十六进制滚动条的拖动区域

1CSS 中区块的使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<pre>
	CSS 中区块的使用
属性名称 属性值 说明
width 像素/百分比 区块的宽度
		auto
height 像素/百分比 区块的高度
		auto
min-height 像素像素/百分比 区块最小高度
		auto
max-height 像素像素/百分比 区块最大高度
		auto
min-width 像素像素/百分比 区块最小宽度
		auto
max-width 像素像素/百分比 区块最大宽度
		auto
</pre>
</body>
</html>

　　2浮动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	.div1{
		width: 200px;
		height: 200px;
		background: red;
		float:left;
	}
		.div2{
		width: 200px;
		height: 200px;
		background: green;
		float: left;
	}
		.div3{
		width: 200px;
		height: 250px;
		background: blue;
	}
	.div4{
		width: 200px;
		height: 250px;
		background: yellow;
		clear:both;
	}
	</style>
</head>

<body>
<div></div>
<div></div>
<div></div>
<div></div>
<pre>
	 CSS 中浮动的使用
属性名称 属性值 说明
float none 正常显示
		left 左浮动
		right 右浮动
clear none 允许两边浮动
		left 不允许左边浮动
		right 不允许右边浮动
		both 不允许两边浮动
</pre>

</body>
</html>

　　31相对定位

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>相对定位,设置区块基准点为左上角</title>
<style type="text/css">
	img {
		position: relative;
		top: 8px;
		left: 8px;
	}	
	</style>
</head>

<body>
<img src="images/pic7.jpg"/><br/>
我是相对定位,设置区块基准点为左上角
<pre>
	CSS 中定位的使用
属性名称 属性值 说明
position relative 设置区块基准点为左上角
			absolute 设置网页的为基准点左上角
			static 无设置
left auto 以基准点定位在左边
		像素/百分比 定位在左边
top auto 以基准点定位在上边
		像素/百分比 定位在上边
right auto 以基准点定位在右边
		像素/百分比 定位在右边
bottom auto 以基准点定位在下边
		像素/百分比 定位在下边
z-index auto 自动调整高度
		数字 数字越大越往上层
</pre>

</body>
</html>

　　32绝对定位

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我是绝对定位，设置网页的为基准点左上角</title>
<style type="text/css">
	img {
		position: absolute;
		top: 228px;
		left: 228px;
		
	}	
	</style>
</head>

<body>
<img src="images/pic7.jpg"/><br/>
我是绝对定位，设置网页的为基准点左上角


</body>
</html>

　　32绝对定位案例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
div{
   font-size:40px;
   font-family:"Times New Roman",Times,serif;
}
.div1{
	color:red;
    position:absolute;
	top:22px;
	left:22px;
}
.div2{
    color:blue;
	position:absolute;
	top:24px;
	left:24px;
}
.div3{
    color:#666666;
	position:absolute;
	top:26px;
	left:26px;
}
.div4{
	color:red;
    position:absolute;
	top:82px;
	left:82px;
	z-index:3;
}
.div5{
    color:blue;
	position:absolute;
	top:84px;
	left:84px;
	z-index:2;
}
.div6{
    color:#666666;
	position:absolute;
	top:86px;
	left:86px;
	z-index:1;
}
</style>
</head>

<body>
<div>www.szwzjs.com</div>
<div>www.szwzjs.com</div>
<div>www.szwzjs.com</div>

<div>www.szwzjs.com</div>
<div>www.szwzjs.com</div>
<div>www.szwzjs.com</div>
</body>
</html>

　　41溢出

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
div{
   background: red;
	width: 200px;
	height: 100px;
}
	.div1{
		background:red;
		width: 200px;
		height: 100px;
		overflow: auto;
	}
		.div2{
		background:red;
		width: 200px;
		height: 100px;
		overflow: hidden;
	}
			.div3{
		background:red;
		width: 200px;
		height: 100px;
		overflow: scroll;
	}
</style>
</head>

<body>
<div>CSS 中溢出的使用
属性名称 属性值 说明
overflow visible 不剪切内容也不添加滚动条
auto 在必需时对象内容才会被
裁切或显示滚动条
hidden 不显示超过对象尺寸的内容
scroll 总是显示滚动条
overflow-x (同上)
overflow-y (同上)</div><hr/><p></p><p></p><p></p>
<div>CSS 中溢出的使用
属性名称 属性值 说明
overflow visible 不剪切内容也不添加滚动条
auto 在必需时对象内容才会被
裁切或显示滚动条
hidden 不显示超过对象尺寸的内容
scroll 总是显示滚动条
overflow-x (同上)
overflow-y (同上)</div>
<div>CSS 中溢出的使用
属性名称 属性值 说明
overflow visible 不剪切内容也不添加滚动条
auto 在必需时对象内容才会被
裁切或显示滚动条
hidden 不显示超过对象尺寸的内容
scroll 总是显示滚动条
overflow-x (同上)
overflow-y (同上)</div>
<div>CSS 中溢出的使用
属性名称 属性值 说明
overflow visible 不剪切内容也不添加滚动条
auto 在必需时对象内容才会被
裁切或显示滚动条
hidden 不显示超过对象尺寸的内容
scroll 总是显示滚动条
overflow-x (同上)
overflow-y (同上)</div>

<pre>
	CSS 中溢出的使用
属性名称 属性值 说明
overflow visible 不剪切内容也不添加滚动条
				auto 在必需时对象内容才会被
				裁切或显示滚动条
				hidden 不显示超过对象尺寸的内容
				scroll 总是显示滚动条
overflow-x (同上)
overflow-y (同上)
	</pre>


</body>
</html>

　　42滚动条的使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">

div{
		background:red;
		width: 200px;
		height: 100px;
		overflow: scroll;
		scrollbar-arrow-color:red;
		scrollbar-3dlight-color：red;
	}
</style>
</head>

<body>
<div>我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师</div>


</body>
</html>

1、绝对定位(position: absolute) 2、相对定位(position: relative) 3、固定定位(position: fixed)

绝对定位如果父级不使用position:relative，而直接使用position:absolute绝对定位，这个时候将会以body标签为父级，使用position:absolute定义对象无论位于DIV多少层结构，都将会被拖出以<body>为父级（参考级）进行绝对定位。

绝对定位(position: absolute)
实现相对于其它元素进行定位,使用时通常是父级定义position:relative定位，子级定义position:absolute绝对定位属性，并且子级使用left或right和top或bottom进行绝对定位。
相对定位(position: relative)
如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
固定定位(position: fixed)
fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。

http://www.cnblogs.com/xuan-0107/p/4543463.html

CSS Positions布局实现弹性盒子布局的技巧

css positions布局实现弹性盒子布局的技巧

CSS Positions布局实现弹性盒子布局的技巧

在现代的网页设计中，弹性盒子布局（flexbox layout）已经成为一种非常强大和灵活的布局方式。它能够轻松实现响应式布局，使得网页在不同的设备上都能够适应不同的屏幕尺寸。而CSS的position属性可以和弹性盒子布局结合使用，可以实现更加复杂和精细的布局效果。本文将介绍一些使用CSS position属性实现弹性盒子布局的技巧，并提供具体的代码示例。

position: relative + left/right/top/bottom

首先介绍的是使用position: relative属性结合left/right/top/bottom属性实现弹性盒子布局的方法。通过设置相对定位的元素的left、right、top和bottom属性，可以将元素沿父容器的水平和垂直方向移动。

举个例子：

立即学习“前端免费学习笔记（深入）”；

HTML代码：

<div>
  <div></div>
</div>

登录后复制

CSS代码：

.container {
  display: flex;
  width: 400px;
  height: 200px;
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  left: 50px;
  top: 50px;
}

登录后复制

在上面的例子中，容器的宽度为400px，高度为200px，其中内部的盒子通过设置position: relative属性，并结合left和top属性，使得盒子相对于容器向右移动50px，向下移动50px。

position: absolute + left/right/top/bottom

另一种常见的方法是使用position: absolute属性结合left/right/top/bottom属性实现弹性盒子布局。通过设置绝对定位的元素的left、right、top和bottom属性，可以将元素相对于其第一个非static定位的父元素进行定位。

再举个例子：

HTML代码：

<div>
  <div></div>
</div>

登录后复制

CSS代码：

.container {
  display: flex;
  width: 400px;
  height: 200px;
  position: relative;
}

.box {
  width: 100px;
  height: 100px;
  background-color: green;
  position: absolute;
  left: 50px;
  top: 50px;
}

登录后复制

在这个例子中，容器的宽度为400px，高度为200px，通过设置position: relative属性，使得容器成为绝对定位元素的父元素。而内部的盒子通过设置position: absolute属性，并结合left和top属性，使得盒子相对于容器向右移动50px，向下移动50px。

这些是使用CSS position属性实现弹性盒子布局的一些技巧。通过将绝对/相对定位的元素嵌套在弹性盒子容器内，我们可以非常灵活地控制元素的位置和大小，从而实现复杂的布局效果。在实际开发中，我们可以根据具体的需求和设计要求，选择合适的方法和属性来实现优雅的弹性盒子布局。

希望以上的代码示例和技巧能够帮助读者更好地理解和运用CSS position属性实现弹性盒子布局。通过合理地运用这些技巧，我们可以轻松地创建出美观、灵活和响应式的网页布局。

以上就是CSS Positions布局实现弹性盒子布局的技巧的详细内容，更多请关注php中文网其它相关文章！

CSS 布局属性大全：display，position 和 float

css 布局属性大全：display，position 和 float

CSS 布局属性大全：display，position 和 float

CSS 是用于控制网页样式的一种标记语言。在设计网页布局时，布局属性是非常重要的。CSS 提供了多种布局属性，其中最常用的是 display，position 和 float。在本篇文章中，我们将详细介绍这三种布局属性，并提供具体代码示例。

display 属性
display 属性用于指定元素的显示类型。常见的 display 属性值有以下几种：

1.1. block
block 元素独占一行，始终从新行开始显示，宽度填满父元素。例如，

元素就是一个典型的 block 元素。

div {
  display: block;
}

登录后复制

1.2. inline
inline 元素不会独占一行，仅占据它需要的空间。例如，元素就是一个典型的 inline 元素。

立即学习“前端免费学习笔记（深入）”；

span {
  display: inline;
}

登录后复制

1.3. inline-block
inline-block 元素不会独占一行，但是可以设置宽度和高度。例如， CSS 布局属性大全：display，position 和 float 元素就是一个典型的 inline-block 元素。

img {
  display: inline-block;
}

登录后复制

1.4. none
none 元素不会显示，会从文档流中移除。例如，可以通过设置 display: none 来隐藏一个元素。

.hidden {
  display: none;
}

登录后复制

position 属性
position 属性用于指定元素的定位方式。常见的 position 属性值有以下几种：

2.1. static
static 是默认的定位方式，元素按照文档流的顺序进行布局。

div {
  position: static;
}

登录后复制

2.2. relative
relative 相对于自身的初始位置进行定位。可以通过使用 top、bottom、left 和 right 属性来调整元素的位置。

div {
  position: relative;
  top: 10px;
  left: 20px;
}

登录后复制

2.3. absolute
absolute 相对于父元素进行定位，或者相对于最近的具有定位属性（position 不是 static）的祖先元素进行定位。

div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

登录后复制

2.4. fixed
fixed 相对于浏览器窗口进行定位，不会随滚动条的滚动而改变位置。

div {
  position: fixed;
  top: 0;
  right: 0;
}

登录后复制

float 属性
float 属性用于指定元素的浮动方式。当一个元素被设置为 float，它将从正常的文档流中脱离，并尽可能地向左或向右浮动。其他元素会围绕浮动元素进行布局。

img {
  float: left;
}

登录后复制

以上就是 display、position 和 float 这三种常见布局属性的介绍和代码示例。在实践中，我们可以根据具体需求来选择使用哪种布局属性，以实现网页布局的设计。希望本文能为读者在 CSS 布局方面提供一些帮助。

以上就是CSS 布局属性大全：display，position 和 float的详细内容，更多请关注php中文网其它相关文章！

今天关于盒子布局、标签特性display、浮动、定位position和盒子的浮动有哪些设置的介绍到此结束，谢谢您的阅读，有关17 ， CSS 区块、浮动、定位、溢出、滚动条、1、绝对定位(position: absolute) 2、相对定位(position: relative) 3、固定定位(position: fixed)、CSS Positions布局实现弹性盒子布局的技巧、CSS 布局属性大全：display，position 和 float等更多相关知识的信息可以在本站进行查询。

本文标签：