CSS定位和框模型[初学HTML]（三）

勤学的七七

已于 2022-06-22 20:15:16 修改

阅读量86

点赞数

文章标签： css html css3

于 2022-06-22 20:00:30 首次发布

本文链接：https://blog.csdn.net/m0_46647730/article/details/125414845

版权

CSS定位和框模型

CSS 框模型
CSS 定位

CSS 框模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。

CSS 框模型概述

在这里插入图片描述
内边距、边框和外边距都是可选的，默认值是零。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：

* {
  margin: 0;
  padding: 0;
}

CSS 内边距

元素的内边距在边框和内容区之间。通过 padding 属性来控制该区域。
单边内边距属性：
padding-top 设置元素的上内边距
padding-right 设置元素的右内边距
padding-bottom 设置元素的下内边距
padding-left 设置元素的左内边距
内边距的百分比数值：
可以为元素的内边距设置百分数值
p {padding: 10%;}

CSS 边框

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。每个边框有 3 个方面：宽度、样式，以及颜色。
属性如下

属性	注释
border-style	用于设置元素所有边框的样式
border-width	用于为元素的所有边框设置宽度
border-color	设置元素的所有边框中可见部分的颜色
border-bottom	用于把下边框的所有属性设置
border-left	用于把左边框的所有属性设置
border-right	用于把右边框的所有属性设置
border-top	用于把上边框的所有属性设置

CSS 外边距

围绕在元素边框的空白区域是外边距，设置外边距的最简单的方法就是使用 margin 属性。

单边外边距属性：
margin-top 设置元素的上外边距
margin-right 设置元素的右外边距
margin-bottom 设置元素的下外边距
margin-left 设置元素的左外边距

CSS 定位

CSS 定位 (Positioning) 属性允许你对元素进行定位。CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

CSS relative相对定位

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

CSS absolute绝对定位

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        div{
            width: 200px;
            height: 200px;
        }
        div:nth-of-type(1){
            background-color: brown;
            position: absolute;
        }
        div:nth-of-type(2){
            background-color: cornflowerblue;
            position: relative;
            top: 80px;
            left: 50px;
        }
    </style>
</head>
<body>
    <div>
        这是盒子
    </div>
    <div>
        这是移动后的盒子
    </div>
</body>
</html>

在这里插入图片描述
注：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

CSS Static 静态定位

HTML元素的默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到top, bottom, left, right影响。

CSS fixed 固定定位

元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：

CSS float 属性

left: 左浮动
right: 右浮动
none: 默认值，不浮动
inhert: 继承父亲框的浮动属性

CSS 定位属性

属性	注释
position	把元素放置到一个静态的、相对的、绝对的、或固定的位置中
top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移
bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移
z-index	设置元素的堆叠顺序