CSS盒子布局

最新推荐文章于 2024-11-06 18:55:22 发布

张九日。

最新推荐文章于 2024-11-06 18:55:22 发布

阅读量4.2k

点赞数 6

本文链接：https://blog.csdn.net/chengxuzx/article/details/117919651

版权

本文详细介绍了CSS中的盒子模型，包括其组成部分、元素分类、浮动布局和清除方式，重点讲述了弹性盒子布局（Flexbox），如flex-direction、flex-wrap等属性，并涉及到CSS3的过渡效果和transform，展示了一种从传统布局到现代布局的转换。

摘要由CSDN通过智能技术生成

1.盒子模型的含义：

在弹性盒子布局中，弹性容器(flex container)中的子元素可以以任意方向排布，也可以伸缩它们自身的尺寸，或者增大自身尺寸以填满未被使用的空间，或者缩小自身尺寸以避免超出父容器的尺寸范围。子元素横向或纵向对齐方式很容易被修改。嵌套的弹性盒子布局(水平内嵌套垂直，或垂直内嵌套水平)，可以用来创建两个维度上的布局。

2.盒子的组成：

盒子的组成由外边距margin，外边框border，内边距padding和内容content组成，其中margin，border，padding是css中的属性，可以通过控制css属性来控制盒子的大小。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>弹性盒子</title>
	<style type="text/css">
    .main
    {
    	display: flex;
    	flex-derection:row;
    	width: 300px;
    	height: 300px;
    	border: 1px solid black;
    }
      .o{
      	width: 300px;
      	height: 300px;
      	background-color: red;}
	</style>
</head>
<body>
	<div class="main">
		<div class="o">第一个</div>
	</div>
</body>
</html>

3.盒子真正的大小

盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距

盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

4.盒子成分：

margin：

margin-top：上边距
margin-buttom：下边距
margin-left：左边距
margin-right：右边距

border：

border-top：上边界
border-bottom：下边界
border-left：左边界
border-right：右边界

border-width：边界宽度
border-style：边界样式
border-sytle属性可取值：

none：定义无边框。
hidden：与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted：定义点状边框。在大多数浏览器中呈现为实线。
dashed：定义虚线。在大多数浏览器中呈现为实线。
solid：定义实线。
double：定义双线。双线的宽度等于 border-width 的值。
groove：定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge：定义 3D 垄状边框。其效果取决于 border-color 的值。
inset：定义 3D inset 边框。其效果取决于 border-color 的值。
outset：定义 3D outset 边框。其效果取决于 border-color 的值。
inherit：规定应该从父元素继承边框样式。
border-color：边界颜色