浮动（特点-影响-居中）-定位

1 回顾

1. 盒子模型1.1 盒子的显示模式1.2 盒子模型的组成1.3 盒子的内容区域1.4 内边距1.5 边框1.6 外边距1.7 溢出内容的显示方式1.8 如何隐藏元素2. 默认样式和继承样式元素本身的样式 > 默认的样式 > 继承的样式   3. 浮动

2 浮动

2.1 浮动的简介

浮动设计的最初想法是为了实现文字环绕图片的效果。

目前浮动成为了前端主流的布局方式。

2.2 元素浮动之后的特点

不论元素原来是行内元素、块级元素还是行内块元素，设置浮动之后，就成了浮动元素，具有浮动元素自己的特性。
浮动元素默认的宽高是被内容撑开，没有内容就没有宽高；可以通过属性设置元素的宽高。
浮动元素可以完美地设置各个方向的内外边距，且不会有margin的塌陷和合并。
浮动的元素会脱离文档流，多个浮动的元素会水平排列，浮动元素位置如果与不浮动元素重合会显示在上面，不浮动元素中的文本会被挤出。

2.3 浮动元素产生的影响

① 元素浮动之后产生的影响

浮动元素会对后面的兄弟元素产生影响；后面的兄弟元素会在浮动元素的下面显示导致元素重叠。
浮动元素会被父元素产生影响，无法撑开父元素的高度，导致父元素高度塌陷

② 解决浮动的影响（清除浮动）

解决对后面兄弟元素的影响：

给后面的兄弟元素设置 CSS 属性 clear:both既可

解决对父元素的影响：

方案一：给父元素设置 overflow 属性，值不是 visible 既可。（推荐）
方案二：以浮制浮，给元素也设置浮动；缺点：父元素浮动之后产生新的影响。
方案三：给父元素设置固定高度，缺点：需要计算父元素高度。
方案四：在所有浮动元素的后面添加元素（父元素的最后一个子元素），给该元素设置属性 clear:both，要求该元素是块级元素。缺点：需要额外添加元素。
方案五：利用伪类选择器，给元素动态地创建最后一个子元素，该元素会在所有浮动元素的后面，元素与方案四一致。(推荐)
```
父元素::after {content: "";display: block;clear: both;
}
```

注意：

方案一和方案二，本质上都是通过给父元素开启BFC来清除子元素浮动影响的。、
只要有元素浮动，就一定要清除浮动的影响！

2.4 浮动相关的 CSS 属性

CSS 属性	功能	属性值
float	开启浮动	none：不浮动，默认值 left：向左浮动 right：向右浮动
clear	清除浮动的影响	left：清除前面左浮动元素影响 right：清除前面右浮动元素的影响 both：清除前面浮动元素的影响（不论左浮动还是右浮动）

3 行内元素或行内块元素在布局中的特点

3.1 文本属性作用于行内元素和行内块元素

行内块元素和行内元素会被当做文本处理，给他们的父元素设置的文本样式会对他们起作用。

① 让行内块元素或行内元素水平居中（在父元素中）

给父元素设置：

text-align: center;

② 让行内元素或行内块元素垂直居中（在父元素中）

给父元素设置行高，与自己的高度一致。
给行内块元素或行内元素设置 vertical:middle。

3.2 行内元素或行内块元素之间的空白问题

① 元素之间的空白（左右）

产生的原因：

写代码的时候，每写一个元素换个行，换行符被浏览器显示为空白

如何解决：

方案一：每个元素之间不写换行。
方案二：给父元素设置字体大小为 0，再单独给子元素（行内块或行内）设置字体大小。

② 底部的空白（图片的幽灵空白）

产生原因：

行内或行内块元素与文本的基线对齐，会有底部的留白（基线到底线的距离）

解决方法：

方案一：变为块元素（主要解决图片幽灵空白）
方案二：设置父元素字体大小为 0，再单独给子元素（行内块或行内）设置字体大小。
方案三：给行内块或行内元素设置 vertical，值只要不是 baseline 即可。

4 定位

4.1 相对定位

① 如何设置相对定位

 /* 设置相对定位 */position: relative;/* 调整定位元素的位置 *//* left: -10px;top: 10px; */right: 20px;bottom: -20px;

② 相对定位元素定位的参考点

相对定位的元素以自己原来的位置为参考点。

③ 相对定位元素的特点

相对定位的元素不会脱离文档流，也不会对其他元素产生影响，元素相对定位之后之前的特性不变。
相对定位的元素同时可以是浮动的。

4.2 绝对定位

① 如何设置绝对定位

position: absolute

② 绝对定位元素定位的参考点

绝对定位的元素参考它的包含块进行定位。

绝对定位元素的包含块：第一个定位的祖先元素，如果祖先元素都没有定位，包含块就是整个页面。

③ 绝对定位元素的特点

脱离文档流，对后面的元素以及父元素产生影响。
一个元素，不论原来是行内、块级、行内块还是浮动元素，设置成绝对定位，就是绝对定位元素，具有绝对定位元素的特性。同时设置浮动和绝对定位，最终是绝对定位元素。
绝对定位元素默认宽高被内容撑开，能够设置宽高，可以完美设置四个方向内外边距。

4.3 固定定位

① 如何设置为固定定位

position: fixed;

② 固定定位的元素定位参考点

视口

③ 固定定位元素的特点

脱离文档流，对后面的元素以及父元素产生影响。
一个元素，不论原来是行内、块级、行内块还是浮动元素，设置成绝对定位，就是绝对定位元素，具有绝对定位元素的特性。同时设置浮动和绝对定位，最终是绝对定位元素。
绝对定位元素默认宽高被内容撑开，能够设置宽高，可以完美设置四个方向内外边距。

4.4 定位层级 z-index

定位元素具有显示层级，定位元素的默认显示层级比不定位的元素要高。
定位元素之间，如果不设置显示层级，后面元素显示在上面。
使用属性 z-index 可以设置显示层级，值越大显示层级越高，可以允许负值（定位显示层级小于0，比不定位元素的显示层级还要低）。（注意：只有定位的元素设置 z-index 属性才有效！）
绝对定位元素的显示层级会受到包含块显示层级的影响。

4.5 定位相关 CSS 属性

CSS 属性名	功能	属性值
position	设置定位	static：不定位，默认 relative：相对定位 absolute：绝对定位 fixed：固定定位
left	元素距离左边参照点的位置	长度
right	元素距离右边参照点的位置	长度
top	元素距离上边参照点的位置	长度
bottom	元素距离下边参照点的位置	长度
z-index	设置定位元素的显示层级	数字

4.6 定位的特殊应用

① 定位元素的默认宽度计算

如果定位的元素（固定定位和绝对定位），设置了 width 属性，不要同时设置 left 和 right，也不要同时设置 top 和 bottom，否则导致 right 和 bottom 不生效！
如果定位的元素，没有设置 widh 属性或者 height 属性，默认的宽高不但会受到内容大小的影响，也会受到 left、right、top、bottom 值的影响。此时可以同时设置 left 和 right，可以同时设置 top 和 bottom，会对默认宽高进行影响。

② 设置定位元素在包含块中水平垂直都居中

方案一：

position: absolute;
left: 50%;
top: 50%;
margin-left: -宽度一半;
margin-top: -高度一半;

方案二：

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

5 布局

5.1 页面组成

header
navbar
banner
sidebar / aside
content / main
footer

5.2 样式重置

1. reset.css
2. normalize.css

5.3 页面版心

.container {width: 1000px;margin: 0 auto;
}

HTML-浮动（特点-影响-居中）-定位相关推荐

DIV 浮动层绝对定位居中浮动用CSS怎么写 —— 绯色的CSS系列
DIV浮动层绝对居中定位用CSS怎么写?详细解说,直接看样式,下面的写法兼容IE系列浏览器和火狐浏览器. DIV浮动层绝对居中定位用CSS怎么写?下面的写法兼容IE系列浏览器和火狐浏览器. 详细解说, ...
CSS中文档流之普通流，浮动及定位、浮动特性及清除浮动的方式、定位模式，子绝父相搭配定位方式、z-index层级
文档流: 普通流(normal flow): 字面意思是普通流或者标准流,也就是常说的文档流,指网页内标签正常是从上到下,从左到右排列的意思,css的定位机制有3种:普通流(标准流).浮动.定位. 浮 ...
php元素浮动会产生哪些影响,元素浮动的影响与三列布局的实现原理——2019年9月4日22时30分...
一.元素浮动造成父元素高度折叠同一个块元素中,子级元素浮动,会造成附骥元素的高度折叠,包裹不住子级元素. 网页实际效果展示消除子元素浮动的影响实例 html> 清除浮动的影响 .box1 { ...
css中如何居中一个浮动元素,css浮动元素的居中的例子
居中对于大家来说指的是页面了,此时我们通常使用提50%来实现了,下面来看一个css浮动元素的居中的例子,希望例子对各位有用. 关于浮动元素的居中,其实不太常用,但为了应付某些奇葩的面试官,也要知道怎么 ...
html清楚css的影响,08、清除浮动的影响.html
Document .box{ width:500px; background-color: darkcyan; } .box1{ width:200px; height:600px; backgrou ...
父元素浮动子元素会浮动吗_为什么quot;overflow:hiddenquot;能清除浮动的影响
来源 | https://www.jianshu.com/p/7e04ed3f4bea 我们都知道"overflow:hidden"可以溢出隐藏,即当内容元素的高度大于其包含块的高 ...
页面中元素居中定位的几种方法
元素居中定位的几种方法元素居中定位的几种方法方法一父元素子元素方法二父元素子元素元素居中定位的几种方法方法一父元素 position: relative; 子元素 position ...
第四章 Html浮动、图文与定位
目录一.浮动 float 二.图文组合单行文本省略号多行文本省略号三.定位 position 1.静态定位static 2.相对定位 relative 3.绝对定位 absolute ---父 ...
HTML元素居中定位与尺寸拉伸
块级元素就是那些自为一行的元素,有高度宽度.行内元素没有高度,行内块级元素有高度,不换行. 好了,下面用几个刚刚试验的例子把这部分知识小记一下,为日后深入学习打基础. 1.水平居中非块级元素水平居中 ...

HTML-浮动（特点-影响-居中）-定位