HTML+CSS+JavaScript复习笔记持更（十）—

定位

定位主要是用来设定元素在页面上的位置的，其代码为：position

定位有三种定位方式：

static（无特殊定位，按照dom排序）
absolute（绝对定位，往前面找最近的，有定位属性的元素，以该元素的起点为起点，绝对定位）（脱离文档流，其他元素将会占用该元素的原有位置）
relative（相对定位，相对自己原来在dom元素中的位置定位）（不脱离文档流）
fixed（绝对定位，相对浏览器显示区域）（脱离文档流）

其中在一般的页面中，最常用的就是relative+absolute，在父元素设置relative绝对定位，在子元素设置absolute相对定位，即子绝父相。

设置了position：relative；定位属性之后，通过left、right、top、bottom来设置相对四个方向的位移，即可达到定位的需求

语法格式：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}div{width: 200px;height: 200px;}.x1{position: relative;background-color: chartreuse;left: 100px;}.x2{background-color: red;position: absolute;left: 200px;}</style>
</head>
<body><div class="x1">我是x1<div class="x2">我就是x2</div></div>
</body>
</html>

效果图：

可以设置的单位有px、%

浮动

浮动主要是针对块级元素说的，对块级元素设置float属性后，该元素处于不完全脱离文档流状态。

不完全脱离文档流：使元素漂浮起来，但还保留着自身的位置，其他元素能往上拼接，但是不能占有。
简单的说，就是让别的元素环绕在自己身边。

在float中有两种设置，left、right，分别是左浮动和右浮动

浮动这种特殊的不完全脱离文档流将会极大地破坏原有的文档流位置，所以为了去除这种影响，我们可以在下面的元素设置清除浮动：clean：both；

语法格式：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.x1{width: 1200px;height: 200px;position: relative;background-color: chartreuse;left: 100px;}.x2{     width: 600px;height: 200px;background-color: red;float: left;}.x3{width: 200px;height: 200px;clear: both;background-color: rgb(53, 104, 172);}</style>
</head>
<body><div class="x1">我是x1<div class="x2">我就是x2</div><div class="x3">我就是x3</div></div>
</body>
</html>

效果图：

由于x2这个元素设置了float:left;所以x2浮动起来，跑到x1的最左边，x3也因为x2的浮动而把起点上浮，但是因为x1的不完全脱离文档流会保留自身位置，所以x3不能占有x1的内容区，因而有一点点在下面显示。

当我打开x3的清除浮动clear: both;，x3就会恢复正常，在下面显示

HTML+CSS+JavaScript复习笔记持更（十）——CSS3常用属性之定位相关推荐

HTML+CSS+JavaScript复习笔记持更（一）——标签篇
前言博主现在还是在校生,目前大三,突然想起HTML的很多基础都忘记的差不多了,于是买了几本基础书,创建这篇博文用于记录复习笔记,也希望我自己在整理的时候,能帮助大家加深一些基础知识的印象,本篇博文将 ...
HTML+CSS+JavaScript复习笔记持更（八）——CSS3常用属性之列表
列表属性之前已经介绍过了列表标签.主要有有序列表和无序列表,为了更好地控制这两种列表,CSS还提供了这两种列表的样式设置. list-style(简写属性,把所有列表的属性设置写到一个声明中) li ...
HTML+CSS+JavaScript复习笔记持更（六）——CSS3常用属性之文本
文本相关文本相关,包含了文字样式和文本换行等格式文字文字是一个网页最基础的部分,文字主要有以下几种属性: 字体文字大小文字颜色水平对齐方式段首缩进方式语法格式: <!DOCTYP ...
HTML+CSS+JavaScript复习笔记持更（九）——CSS3常用属性之盒模型
盒模型盒模型是CSS中最最重要的概念之一了,这个概念比较抽象,它规定了元素框处理元素内容.外边距.内边距.边框的方式. 内.外边距的属性内边距:padding 外边距:margin 边框:bord ...
HTML+CSS+JavaScript复习笔记持更（五）——CSS选择器
CSS选择器在一个页面中,必不可少的就是css样式,css样式全都写在style标签中,在使用css时,我们可以用的css选择器非常之多,所以css选择器的分类也很多,但是基本上可以统计分为两类:基 ...
HTML+CSS+JavaScript复习笔记持更（三）——表单篇
表单表单概述表单简介 form 标签输入标签文本框语法格式单选框和复选框语法格式按钮语法格式图像域和文件域语法格式文本域语法格式菜单/列表语法格式表单概述表单在网页中 ...
HTML+CSS+JavaScript复习笔记持更（二）——列表篇
列表无序列表标签写法属性有序列表标签写法属性列表嵌套定义列表的嵌套有序列表和无序列表的嵌套列表在html中至关重要,通常用于各种分类页面,以某宝为例,其主页面有大部分涉及到列表(绿 ...
HTML+CSS+JavaScript复习笔记持更（七）——CSS3常用属性之背景
背景设置 HTML页面中的背景是通过background设置的. 语法格式: <!DOCTYPE html> <html lang="en"> <he ...
HTML+CSS+JavaScript复习笔记持更（四）——多媒体篇
HTML5的多媒体在html5中新增了两个多媒体标签 audio音频标签 video视频标签语法格式在语法格式上,音频与视频,大致相同 (无法正常播放) <video src=" ...

HTML+CSS+JavaScript复习笔记持更（十）——CSS3常用属性之定位

定位

浮动

HTML+CSS+JavaScript复习笔记持更（十）——CSS3常用属性之定位相关推荐

最新文章

热门文章