1-2 CSS常用样式笔记

最新推荐文章于 2022-06-12 20:01:54 发布

北笙l

最新推荐文章于 2022-06-12 20:01:54 发布

阅读量830

点赞数

本文链接：https://blog.csdn.net/weixin_48376132/article/details/115472277

版权

CSS常用样式

字体属性

字体粗细：font-weight
- normal：默认值，定义标准的字体
- bold：定义粗体字符，b、strong标签的默认值
- bolder：定义更粗的字体
- lighter：定义更细的字体
- 100-900之间的整百数字，数字越大，文字显示越粗
- 其中400等价于normal，700等价于bold
字体风格：font-style
- normal：设置正规的字体
- italic（常用）：设置斜体的文字，主要针对英文，要求英文以字体中的斜体样式显示
- oblique：设置倾斜的文字，只是将文字倾斜显示，与字体无关
行高：line-height
- 文字有默认行高，根据字号大小变化
- 作用：设置的是一行文字实际占有的高度，文字字号在行高中是垂直居中的
- 属性值：px像素值、百分比数值（设置的本身字号像素值的百分比）
- 辅助软件：Fireworks量取行高的步骤
  1. 初始设置：选中文字工具，在属性栏中将平滑消除锯齿，更改为不消除锯齿，方便文字的像素点清晰显示。
  2. 确定文字字号和字体。使用文字工具，书写两个与内容相同的文字，调整字号和字体，直到两个文字都完全重合，就是我们需要的字号和字体。制作时，设置一个与内容文字颜色差异较大的字体颜色。
  3. 根据已知的字号和字体，再书写上下对齐的两行文字，调整属性面板的行高值单位为像素，更改数值大小，直到两行文字都对齐，得到的就是我们需要的行高值
字体综合font
- font: font-style font-weight font-size/line-height font-family;
- 其中前两个属性可颠倒顺序，其他属性不可颠倒顺序，其中font-size和font-family必须写

文本属性

水平对齐text-align
- 设置文本水平方向的对齐。
- 属性值：left——左对齐（大部分默认值）、center——居中对齐、right——右对齐
文本修饰text-decoration
- none——没有修饰、overline——上划线、line-through——中划线、underline——下划线
文本缩进text-indent
- px——首行缩进多少像素
- em（常用）——首行缩进几个中文字符的位置
- 百分比——表示缩进文字所在标签的父级标签的width属性值的百分比
- 属性值区分正负，正数表示向右缩进，负数表示向左缩进。

盒模型属性

宽度width

设置可以添加元素内容的区域的宽度。
属性值:
- auto——默认值，浏览器可计算出实际的宽度
- px——像素值定义的宽度
- %——定义参考父元素宽度width的百分比宽度

高度height

设置可以添加元素内容的区域的高度。
属性值:
- auto——默认值，浏览器可计算出实际的高度
- px——像素值定义的高度
- %——定义参考父元素高度height的百分比高度

内边距padding

设置的是元素的边框内部到宽高区域之间的距离。
特点：可以去加载背景，不能书写嵌套的内容。
属性值：常用px为单位的数值。

边框border

设置的是内边距外面的边界区域，作为盒子的实体化的最外层。
由三个值组成，分为border-width（线的宽度）、border-style（线的形状）、border-color（线的颜色）。
border-style属性值：
- none——定义无边框
- solid——定义实线
- dashed——定义虚线，在大多数浏览器中呈现为实线
- dotted——定义点状边框，在大多数浏览器中呈现为实线
- double——定义双线，双线的宽度等于borde-width的值
- groove——定义3D凹槽边框，效果取决于border-color的值
- ridge——定义3D垄状边框，同上
- inset——定义3D内容凹陷效果，同上
- outset——定义3D内容凸出效果，同上
上边框：border-top 、右边框：border-right 、下边框：border-bottom、左边框：border-left

外边距margin

设置的是盒子与盒子之间的距离。
特点：不能渲染背景。
属性值：常用 px 为单位的数值。
外边距的设置方式与内边距 padding 一模一样的

盒模型拓展应用

清除默认样式

大部分容器级标签都有默认边距。

body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,td,th {
    margin: 0;
    padding: 0;
}
ul,ol {
    list-style:none;
}
a {
    color: #666;
    text-decoration: none;
}
h1,h2,h3,h4,h5,h6,b,strong {
    font-weight: normal;
}

可以给body标签设置整体文字样式，让大部分后代标签全部去继承。

body {
    color: #666;
    font-size: 14px;
    font-family: "Arial","consolas","Microsoft Yahei","Simsun";
}

高度height应用

根据不同的需求，高度属性可以设置也可以不设置。

如果设置了高度：盒子占有的高度位置就确定了，后面的同级元素会紧挨着加载。自身盒子内部内容过多会溢出盒子区域。

通过溢出的属性 overflow，进行溢出部分内容的显示效果设置。

overflow属性值：

overflow: visible; /*默认值，可见的可视的，一处部分显示的*/
overflow: hidden; /*溢出部分直接隐藏，隐藏超过边框范围的内容*/
overflow: scroll; /*溢出部分出现滚动条，可以拖动滚动条看到隐藏部分，多出盒子高度的部分不显示，不论有没有溢出，水平和垂直方向都会滚动条*/
overflow: auto; /*自动的，如果没有溢出就正常显示，如果有溢出，溢出的方向自动出现滚动条*/

如果不设置高度：会根据标签内部内容高度自动撑开。要求盒子高度必须自适应内部内容的高度。或者设置height的属性值是自动的。

div {height：auto;}

居中

文字水平居中
- text-align属性，不论单行或多行都可以设置。div {text-align: center;}
文字垂直居中
- 单行文本：让文字行高 line-height 等于盒子高度height。
- 多行文本：让元素高度自适应或者正好等于多行文字的高度，设置元素内边距上下值相同。(装文本的盒子不设置高度 / 盒子设置上下相同的内边距)
```
p {
    width: 200px;
    padding: 20px 0;
    background-color: #0f0;
}
```
元素垂直居中
- 与多行文字类似，让父元素高度自适应，子元素高度自动撑开父级的高度，再给父元素设置相同的上下边距。
```
.box {
	width: 300px;
	padding: 20px 10px;
	border:1px solid red;
}
```
元素水平居中
- 如果子盒子宽度<父盒子宽度，可以设置子盒子的 margin 值，水平方向的值都设置为 auto
- 原因：auto 只在水平方向有作用，水平方向的 margin 如果设置为 auto，边距会自动无限增大，直到撑满整个父元素除了子元素宽度之外剩余的区域，如果两个水平方向都是 auto，两边都要无限大，只能达到一个平衡，两边距离相同，导致盒子居中。
```
.box {
    width: 300px;
    height: 300px;
    margin: 0 auto;
}
```

父子盒模型

一般情况下，一个父元素内部可以放一个或多个子元素，多个子元素要排成一行显示，必须保证父元素的宽度一定要足够（不考虑溢出情况），则父元素的width ≥ 所有子元素width + padding + border + margin ，如果不满足条件：要么多余的子元素掉下来不能在一排，要么溢出父元素。
解决方法：计算或量取尺寸时一定要计算准确，一像素都不能偏差。
特殊情况：盒模型自动内减——父子盒模型中，只有一个子元素，且子元素是类似div标签必须占一行的（块级元素）。此时不设置子元素的 width 属性，子元素的 width 属性值会自动加载父级元素的 width，如果同时设置了子元素水平方向的 padding 和 border 、margin，不需要手动去进行内减，子元素的 width 会自动收缩尺寸。子元素所有的水平方向的位置所有属性的加和等于父元素的 width 。

margin塌陷现象

在垂直方向如果有两个元素的外边距有相遇的，浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到了边距值大的值内部。
同级元素塌陷
- 上面的元素有下边距，下面的元素有上边距，两个边距相遇，真正的盒子间距离是较大的那个值。
- 解决方法：如果两个元素垂直方向有间距，只给一个元素设置边距，不要进行拆分
父子元素塌陷
- 第一种情况：父元素和子元素都设置了同方向的 margin-top 值，两个属性之间没有其他的内容进行隔离，导致两个属性相遇，发生 margin 塌陷。
- 第二种情况：本身父元素与上一个元素的距离是0，子元素如果设置了垂直方向的上边距，会带着父级一起掉下来。
- 解决方法：让两个边距不要相遇，中间可以使用父元素 border 或 padding 将边距分隔开；
- 常用解决方法：父子盒模型之间的距离就不要用儿子的 margin 去踹出来，而是父级的 padding 挤出来。
注意：尽量少用margin，因为margin会常出问题；水平方向的margin没有塌陷现象

标准文档流

指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。前面内容发生了变化，后面的内容位置也会随着发生变化。
HTML就是一种标准文档流文件。
HTML中的标准文档流特点通过两种方式体现：微观现象和元素等级。
微观现象：①空白折叠现象。 ②文字类的元素如果排在一行会出现一种高低不齐、底边对齐效果。 ③自动换行，元素内一行内容写满元素的 width 时会自动进行换行。
元素等级：块级元素、行内元素、行内块元素

块级元素

块级元素可以设置宽高，在浏览器中正常加载。
块级元素必须独占一行，不能与其他任何标签并排一行。
块级元素如果不设置宽度，会自动撑满父级的 width 区域；高度不设置，会被内容自动撑开高度

行内元素

行内元素不能正常加载宽度和高度属性，其他的盒模型属性虽然能设置，但是容易出现加载问题。
行内元素可以与其他的行内或行内块元素并排一行显示。
行内元素不论是否设置宽高，宽度和高度都只能被内容自动撑开

行内块元素

行内块元素可以设置宽度和高度。
行内块元素可以与其他的行内或行内块并排一行显示。
行内块元素如果不设置宽高，要么以原始尺寸加载要么被内容自动撑开。
行内块依旧具有标准流的微观性质，例如空白折叠现象。

显示模式display

属性值：block——表示元素要以块级元素模式加载，具备块级特点、inline——以行内元素模式加载、inline-block——以行内块元素模式加载、none——表示标签及内部内容直接隐藏，让出原有标准流的位置
display 并没有改变标准流本质性质，页面还是只能从上往下加载，存在空白折叠现象等微观性质。要想实现更多的界面布局效果需要脱离标准流的限制。
标签元素脱离标准流的方法包括：浮动、绝对定位、固定定位。

浮动

浮动定义

属性名：float，漂流、浮动的意思。
属性值： left 左浮动、 right 右浮动。
作用：让元素脱离标准流，同一级的浮动的元素可以并排在一排显示

浮动性质

浮动的元素脱离标准流
1. 浮动的元素可以设置宽高，还可以并排一行，而且不会有空白折叠现象。
2. 如果元素不设置宽高，可以被元素内容自动撑开。
浮动的元素依次贴边（以left左浮动为例）
1. 父元素宽度足够，所有子元素会按照HTML书写顺序，依次向左进行贴边，父元素左边←子元素1←子元素2← 子元素3←子元素4。
2. 父元素宽度如果不够，例如不能放下一个子元素4，那么子元素4在贴边时，会跳过上一个子元素3，向更上一个子元素2进行贴边，如果子元素2后面位置不够，继续跳过子元素2向前面的子元素1进行贴边。
3. 如果子元素4在跳过子元素3向更前面的子元素2贴边时，子元素2的高度不高于子元素3，子元素2没有延伸出一个高度的边让子元素4贴边，那么子元素4就会跳过子元素2向子元素1进行贴边。
4. 如果贴边的这个子元素4宽度小于子元素2，子元素2的高度低于子元素1和子元素3，形成一个凹陷，子元素4会受前面子元素3高度影响，不会出现钻空现象。
5. 如果子元素1后面的距离也放不下子元素4，子元素4最终会贴到父元素左边，如果子元素4的宽度超过了父元素，只会出现溢出现象。
浮动的元素没有margin塌陷

margin 塌陷现象出现在标准流中的，浮动元素已经脱离标准流，不再具有 margin 塌陷现象。
浮动的元素让出标准流位置
1. 元素浮动之后，脱离了标准流，会将原来占有的标准流位置让给后面的一个同级元素。
2. 在 IE6 、 7浏览器中，有兼容问题。
3. 如果没有特殊需求，不允许一个父元素中的子元素有的浮动有的不浮动，同级元素中有一个浮动其他的也要浮动。
字围现象

同级元素中前面的元素浮动，后面的元素不浮动，不浮动的元素内部还有一些文字，浮动盒子会压盖住不浮动盒子的一部分，但是文字内容不会被盖住，不浮动盒子中的文字会让开浮动盒子位置，围绕它进行加载

浮动问题

浮动的子元素是撑不高标准流父亲的。
父元素没有高度，会影响后面元素的标准流位置，如果浮动的子元素足够高时，有可能影响到后面浮动元素的贴边。

清除浮动的方法

height
- 给标准流的父元素强制给一个合适的高度
- 问题：父元素高度不是自适应的，一旦子元素高度变化，问题可能再次出现。
clear属性
- 作用：清除标签元素自身受到的前面的浮动元素的影响。
- 属性值：left 清除前面左浮动、right 清除前面右浮动带来的影响、both 清除前面所有浮动带来的影响
- 给标准流父元素添加 clear 属性，父元素不受前面浮动影响，不会再占有浮动让出的位置
- 问题：父元素不能高度自适应，两个父元素之间如果有 margin 效果不正确
隔墙法
- 外墙法：在两个大的父盒子之间，添加一个空的div标签，标签上带有 clear： both 属性。
- 问题：父元素没有高度自适应
- 内墙法：在父元素内部，所有的浮动子元素后面添加一个空的div元素，标签高度为 0，添加 clear 属性。
- 缺点：如果页面中浮动元素很多，需要添加多个没有语义的空标签，造成 HTML 结构的冗余
伪类
- 本质是使用伪类方法利用css代码书写一堵内墙。
- 通过选中的标签添加伪类，去选中标签的某个状态或位置。 :after：这个伪类表示选中的是某个标签内部的最后的位置。
- 将伪类添加给一个选中父盒子的选择器后面，一般给需要清除浮动的父盒子设置一个clearfix的类名。
```
.clearfix:after {
    content: "1";  /*添加一个文字内容*/
    display: block;  /*将文字转为块级元素*/
    height: 0;	/*将盒子高度固定为0，避免影响父盒子高度*/
    clear: both; /*清除前面浮动影响*/
    visibility: hidden;	/*将创建的元素占位置隐藏*/
}
```
溢出隐藏
- 给内部有浮动子元素的父元素添加溢出隐藏 overflow: hidden;属性，可以解决浮动的所有问题。
- 元素高度设置后，overflow：hidden；效果是将超过高度的部分直接隐藏。
- 元素高度没有设置时，如果元素同时设置了overflow：hidden属性，元素会自适应内容的高度。
- 高度自适应原因：一个元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸时，遇到溢出隐藏浏览器会强制性去检索内部的子元素的高度，不论子元素是标准流还是浮动，都会将最高的高度作为父盒子高度加载。
- 浮动影响后面的元素：父元素有了高度后，可以管理住内部所有的浮动元素，不会延伸到后面标签中影响贴边。

总结

如果父元素高度是固定的，建议使用 height 属性解决。
如果父元素高度需要自适应，建议使用 overflow 属性解决浮动问题。

伪类选择器

概念
- 普通的类：必须给标签设置对应的 class 属性值，才能选中标签，而且类选择器后面添加的属性，会立即加载到浏览器之上。
- 伪类：不需要给标签添加任何属性，伪类名都是语法提前规定好的，书写时伪类必须搭配其他选择器使用，伪类选择器后面添加的样式不一定立即加载到浏览器之上，只有用户触发了对应的行为，伪类的样式才会立即加载。
- 伪类选择器的权重与普通的类选择器相同。
a标签的伪类
- 以根据用户行为不同，划分为四种状态，用户触发对应行为，就可以加载对应的样式。
书写顺序
- 伪类的权重是相同的，只能根据书写顺序，后写的层叠先写的，所以伪类书写顺序非常重要。
- 要想让每个伪类的状态正常加载，书写顺序必须是：a:link访问前、a:visited访问后、 a:hover鼠标移上、a:active鼠标点击。
- 为了方便记忆，利用爱恨准则：love hate

背景属性

背景颜色background-color

作用：在盒子区域添加背景颜色的修饰。
加载区域：在 border 及以内加载背景颜色。

背景图片background-image

作用：给盒子添加图片的背景修饰。
加载范围：默认的加载到边框及以内部分。后期如果图片不重复加载，加载从 border 以内开始。

背景重复background-repeat

作用：设置添加的背景图是否要在盒子中重复进行加载。
属性值：repeat——重复，默认属性值，表示会使用背景图片重复加载填满整个盒子背景区域、 no-repeat ——不重复，不论背景图是否大于盒子范围，都只加载一次图片、 repeat-x ——水平重复，使用背景图片水平重复加载铺满第一行，垂直方向不重复、repeat-y ——垂直重复，使用背景图片垂直重复加载铺满第一列，水平方向不重复。

背景定位background-position

作用：主要用于设置不重复的图片在背景区域的加载开始位置。
属性值分为三种写法
- 单词表示法：水平方向可选单词——left、center、right ，垂直方向可选单词——top、center、bottom ，单词表示图片与盒子背景区域进行对应方向的对齐。
- 像素表示法：像素是几，表示背景图片左上角针对 border 以内的左上顶点水平/垂直方向位移的距离。（像素值区分正负）
- 百分比表示法：100%代表的数值——水平方向，等价于盒子的border以内的背景区域宽度减去图片的宽度；垂直方向，等价于盒子的border以内的背景区域高度减去图片的高度。
可以利用属性值为负数，制作在小盒子中显示大的背景图的一部分。
- 使用FW量取尺寸，获取数据，使用切片工具制作一个想要显示区域大小的切片，让切片左上顶点位于想要加载的背景部分。
- 读取属性栏的切片数据，其中宽、高就是要加载的盒子的宽高，x 和 y 的数值表示移动的距离的绝对值，直接将数值加负号赋值给背景定位属性。

背景附着background-attachment

作用：设置的是背景图片是否要随着页面或者盒子的滚动而滚动。
属性值：scroll—— 滚动的，表示背景图片与盒子保持相对位置不变，随着页面的滚动而滚走。 fixed ——固定的，背景图的定位的参考点从盒子 border 以内的左上顶点变为了浏览器窗口的左上顶点，页面滚动时，浏览器窗口的左上顶点是不变的，导致背景图固定在浏览器窗口的某个位置，不会随着页面滚动而滚走。

综合写法background

五个属性值之间可以互换位置。
如果属性值没有设置完全，其他没有设置的单一属性会按照默认值加载。
如果想去层叠综合属性中的一部分，其他的属性保持不变，最好使用单一属性写法进行层叠。

背景应用

背景图替换插入图方法
- h1标签是权重最高的标签，一般会在内部书写最重要的内容，比如 logo 图片、最大的标题等。
- h1内部的文字，可以帮助提高 SEO 搜索排名。在设置的是 logo 图片时，如果使用插入图，就不能书写搜索关键字。
- 如果想解决 SEO 问题，可以将 HTML 结构中，插入图换成搜索关键字，然后使用 css 添加背景图给a标签或h1标签。
- 文字隐藏方法：①将字号设置为 0。IE8 及以上或高版本浏览器可以隐藏文字，但是 IE7 及以下有兼容问题。 ②可以设置给标签一个 text-indent 属性，属性值为负的很大的值，文字会走到盒子外部，直接再设置溢出隐藏属性，将溢出文字隐藏。

padding区域背景图

在一个盒子中有背景图部分，而且有文字内容，文字会让开背景图区域进行加载，背景区域应该使用 padding 挤出位置。

四个方向的 padding 都可能用于添加背景图

/*新闻列表前的小符号*/
ul {
	margin: 10px;
    width: 300px;
    border: 1px solid #333;
    list-style: none;
    padding-left: 10px;
    font: 16px/32px "微软雅黑";
}
ul li {
	background: url(../images/s.png) no-repeat left center;
	padding-left: 20px;
}

精灵图技术
- 为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）
- CSS 精灵是一种处理网页背景图像的方式。
- css 精灵的技术依据： ①将网页中需要用到的小尺寸背景图制作成一张背景透明的 png 图片。 ②利用背景定位技术，将精灵图的每个小图片加载到对应的标签上。
- 制作精灵图的注意事项：
  1. 精灵图上放的都是小的装饰性质的背景图片，插入图片不能往上放。
  2. 精灵图的宽度取决于（不能小于）最宽的那个背景图片的标签宽度。
  3. 精灵图可以横向摆放也可以纵向摆放，但是每个图片之间必须留够足够的空白，保证背景图片加载到一个标签内部时，不能出现多余内容。
  4. 在精灵图的最底端，尽量留一点空白，方便以后添加其他精灵图。

CSS3新增背景属性

背景半透明
- rgba 模式：不透明度 alpha 取值范围在 0-1 之间，0 表示完全透明，1 表示完全不透明，0.5 表示半透明。
- 书写方式：rgba(红色，绿色，蓝色，不透明度)
背景背景缩放 background-size
- 属性值：px 值 ——1-2个像素值，只设置1个值，垂直方向等比例拉伸；设置2个值，按照设置值加载。
- 百分比——同像素值设置方法相同，设置百分比时，数值参照盒子的宽、高属性
- cover—— 自动调整缩放比例，把背景图像扩展至足够大，以使**背景图像完全覆盖背景区域**。如有溢出部分则会被隐藏。
- contain ——自动调整缩放比例，把图像图像扩展至最大尺寸，保证图片始终完整显示在背景区域。
多背景
- CSS3 中规定，一个盒子上，可以添加多个背景图片。
- background-image 的属性值书写时，以逗号分隔多背景的 URL路径地址。
- 注意：背景加载时，先写的背景压盖后写的背景图片。

定位属性position

属性值： relative ——相对定位、 absolute ——绝对定位、 fixed ——固定定位
作用：设置定位的元素，它需要根据某个参考元素发生位置的偏移
偏移量属性：水平方向：left、right。垂直方向：top、bottom。属性值——常用 px 为单位的数值，或者百分比。

相对定位relative

参考元素：标签加载的原始位置。
性质：相对定位的元素不脱离标签的原始状态（标准流、浮动），不会让出原来占有的位置。 元素显示效果上，原位留坑，形影分离。
注意：
- 偏移量属性的值是区分正负的。正数：表示偏移方向与属性名方向相反。负数：表示偏移方向与属性名方向相同。（若写left: -50px; top: -100px; 则表示往左上移动）（若写left: 50px; top: 100px; 则表示往右下移动）
- 同一个方向，不能设置两个偏移量属性，如果水平方向同时设置了 left 和 right 属性，只会加载 left 属性。垂直方向只加载 top 属性。
- 由于相对定位的参考元素是自身，left 的正值等价于 right 的负值，top 的正值等价于 bottom 的负值。为了方便记忆，可以选择只使用 left、top 组合。

绝对定位absolute

参考元素：参考的是距离最近的有定位的祖先元素，如果祖先都没有定位，参考body。
性质：绝对定位的元素脱离标准流，会让出标准流位置，可以设置宽高，若不设置只能被内容撑开。
在绝对定位中，由于参考点不同，left 正值不再等价于 right 的负值。
以body为参考元素时
- 如果有 top 参与的定位，参考点就是body页面的左上顶点和右上顶点;自身的对比点是盒子的所有盒模型属性最外面的左上角或右上角。
- 如果有 bottom 参与的绝对定位，参考点是body页面首屏的左下顶点或右下顶点。对比点是盒子的有盒模型属性最外面的左下角或右下角。
- 实际应用中，较少使用body作为参考元素,因为不同分辨率的浏览器中，绝对定位的元素位置不同。
祖先级为参考元素
- 参考的是祖先元素中有任意定位的，在 HTML 结构中距离目标最近的祖先。
- 有三种定位组合方式：子绝父相、子绝父绝、子绝父固，由于相对定位的祖先级位置更稳定，大多使用子绝父相的情况。
祖先元素参考点
- 参考点是盒子 border 以内的四个顶点，组合方向决定了参考点。
- 绝对定位的元素只关心对比点和参考点之间的距离，会忽视参考元素的 padding 区域。
- left、top：参考点是祖先的 border 以内的左上顶点，对比点是盒子自身的左上角。
- right、top同理
- left、bottom同理
- right、bottom同理

固定定位fixed

参考元素：浏览器窗口。
参考点：浏览器窗口的四个顶点。跟偏移量组合方向有关。
性质：固定定位的元素脱离标准流，让出标准流位置，可以设置宽高，根据偏移量属性可以任意设置在浏览器窗口的位置。固定定位的元素会始终显示在浏览器窗口上。

定位应用

压盖效果
- 所有的定位类型都可以实现压盖效果。
- 由于绝对定位的元素脱标，不占标准流位置，压盖效果更彻底，实际工作中，常见的是绝对定位制作的压盖。
绝对定位的盒子居中
- position: absolute; left: 50%; width: 100px; margin-left: -50px;
- 不论子盒子的宽度是否比参考元素更宽，都能使用以上方法进行居中设置。
浮动的元素居中，在不改变原始浮动状态情况下，可以利用相对定位居中方法。

压盖顺序

默认压盖顺序
- 定位的元素不区分定位类型，都会去压盖标准流或浮动的元素。
- 如果都是定位的元素，在 HTML 中后写的定位压盖先写的定位。
- 书写代码时，需要注意压盖效果，必须合理设置 HTML 元素的书写顺序。
自定义压盖顺序
- z-index: 数字;
- 注意事项
  1. 属性值大的会压盖属性值小的，设置z-index属性的会压盖没有设置的。
  2. 如果属性值相同，比较HTML书写顺序，后写的压盖先写的。
  3. z-index属性只能设置给定位的元素才会生效。
  4. 父子盒模型中，如果父子盒子都进行了定位，与其他的父子级有压盖的部分
    - 父级盒子：如果不设置z-index，后写的压盖先写的；如果设置了z-index，值大的压盖值小的。
    - 子级盒子：如果父级没有设置z-index属性，子级z-index大的会压盖小的；如果父级设置了 z-index值，无论子级值是多少，都是父级的值大的子级压盖父级值小的子级，俗称“从父效应” 。

cursor: pointer; 光标变为小手

行内元素添加绝对/固定定位,可以直接设置宽度和高度。

块级元素添加绝对/固定定位,若不给宽度和高度，默认大小是内容的大小。

脱标的盒子不会触发外边距塌陷。

绝对/固定定位会压住下面标准流所有的内容，包括文字图片，和浮动不同。

网页布总结：

标准流：可以让盒子上下/左右排列，垂直的块级盒子显示就用标准流布局。
浮动：可以让多个块级元素一行显示/左右对齐盒子，多个块级盒子水平显示就用浮动布局。
定位：定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示，如果元素自由在某个盒子内移动就用定位布局。

display: none; /*隐藏元素，不再占有原来的位置*/
display: block; /*显示元素*/
visibility: visible; /*元素可视*/
visibility: hidden; /*元素隐藏，继续占有原来的位置*/

固定定位小技巧：（固定在版心右侧，版心即浏览器可视区）

让固定定位的盒子left: 50% 走到浏览器可视区的一半位置
值大的子级压盖父级值小的子级，俗称“从父效应” 。