html5笔记

最新推荐文章于 2023-09-02 22:42:10 发布

晚i风

最新推荐文章于 2023-09-02 22:42:10 发布

阅读量133

点赞数

本文链接：https://blog.csdn.net/qq_36836332/article/details/81592158

版权

盒子模型

1. 前言

图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容

1. 盒子的区域

一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：

width和height：内容的宽度、高度（不是盒子的宽度、高度）。
padding：内边距。
border：边框。
margin：外边距。

上面这个盒子，width:200px; height:200px; 但是真实占有的宽高是302*302。这是因为还要加上padding、border。

注意：宽度和真实占有宽度，不是一个概念！

1. 标准盒子模型

1. Ie 盒子模型

Div 居中的几种方式

1. 利用margin计算数值

利用margin，div1的宽减去div2的宽就是div2margin-left的数值：（100-40）/2=30

div1的高减去div2的高就是div2margin-top的数值：（100-40）/2=30

页面

<!DOCTYPE html><html>

<head>

</head>

<body>

.div1{ width: 100px; height: 100px; border: 1px solid #000000;}

.div2{ width:40px ; height: 40px; background-color: green;}

.div22{

margin-left: 30px;margin-top: 30px;

}

</style>

</div>

</body></html>

1. 利用绝对位置 百分比属性分配然后往回拉

这里 div1 使用相对位置不管

查看 div2 使用绝对位置是他的父元素的 50% 50% 的位置开始

也就是从 div1 的中心开始布置 div2 这个时候是这样的

然后吧 div2 开始往回拉，拉取的距离是 div2 的宽高的一半

margin-top: -20px;margin-left: -20px;

另外子元素div是绝对定位，所以需要父元素设置为position: relative;

页面

<!DOCTYPE html>

<html>

<head>

</head>

<body>

.div1{ width: 100px; height: 100px; border: 1px solid #000000;}

.div2{ width:40px ; height: 40px; background-color: green;}

.div11{

position: relative;

}

.div22{

position: absolute;top:50%;left: 50%;margin-top: -20px;margin-left: -20px;

}

</style>

</div>

</body>

</html>

1. 利用绝对位置 margin 自动其余四个方向为 0

这种方式是一种单独的方式

另外子元素div是绝对定位，所以需要父元素设置为position: relative;

单独使用 margin:auto; 不可以

需要联合使用 position: absolute;margin:auto; top: 0;left: 0;right: 0;bottom: 0;

外边距自动，四个方向都是填满状态

<!DOCTYPE html>

<html>

<head>

</head>

<body>

.div1{ width: 100px; height: 100px; border: 1px solid #000000;}

.div2{ width:40px ; height: 40px; background-color: green;}

.div11{

position: relative;

}

.div22{

position: absolute;margin:auto; top: 0;left: 0;right: 0;bottom: 0;

}

</style>

</div>

</body>

</html>

1. 利用 css3 的新增属性 table-cell

方法设置 div2 的居中，需要本书设置自动 margin：auto

他的父节点 display: table-cell;vertical-align: middle; 设置这个属性

使父元素内的所有行内元素水平垂直居中

<!DOCTYPE html>

<html>

<head>

</head>

<body>

.div1{ width: 100px; height: 100px; border: 1px solid #000000;}

.div2{ width:40px ; height: 40px; background-color: green;}

.div11{

display: table-cell;vertical-align: middle;

}

.div22{

margin: auto;

}

</style>

</div>

</body>

</html>

晚i风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5笔记

盒子模型前言图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容盒子的区域一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：width和height：内容的宽度、高度（不是盒子的宽度、高度）。 padding：内边距。 borde...
复制链接

扫一扫