css基础笔记（2）

*常规流

可以让盒子上下排列 或者 左右排列的

*浮动

可以让多个块级元素一行显示 或者 左右对齐盒子 浮动的盒子就是按照顺序左右排列

*定位

定位最大的特点是有层叠的概念，就是可以让多个盒子 前后 叠压来显示。 但是每个盒子需要测量数值。

定位

定位：手动控制元素在包含块中的精准位置

涉及的css属性

position属性

• 默认值：static，静态定位（不定位
  • relative：相对定位      相对定位是元素相对于它 原来在标准流中的位置 来说的。
• absolute：绝对定位
  -fixed：固定定位

一个元素，只要position的取值不是static，认为元素是一个定位元素

定位元素会脱离文档流（相对定位除外）

一个元素脱离了文档流：

1. 文档流中元素摆放时，会忽略脱离了文档流的元素
2. 文档流中元素计算高度时，会忽略脱离了文档流的元素

相对定位

不会导致元素脱离文档流，只会让元素在原来的位置上进行偏移

可以通过四个css属性设置其位置

• left
• right
• top
• bottom

盒子的偏移不会对其他盒子产生任何影响

绝对定位

1. 宽高为auto，适应内容
2. 包含块变化：找祖先元素中第一个定位元素，该元素的填充和为器包含块,若找不到，则他的包含块为整个网页（初始化包含块）

1. 完全脱标 —— 完全不占位置；

2. 父元素没有定位，则以浏览器为准定位（Document 文档）。

3. 父元素要有定位
   将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

定位口诀 —— 子绝父相

绝对定位，要和带有定位的父级搭配使用，那么父级要用什么定位呢？

子绝父相 —— 子级是绝对定位，父级要用相对定位。

固定定位

其他情况和绝对定位完全一样

包含块不同：固定为视口（浏览器的可视窗口）

1. 只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；
   • 跟父元素没有任何关系；单独使用的
   • 不随滚动条滚动。

提示：IE 6 等低版本浏览器不支持固定定位。

定位下的居中

绝对定位的盒子居中

注意：绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中。

在使用绝对定位时要想实现水平居中，可以按照下图的方法：

1. left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；
2. margin-left: -100px;：让盒子向左移动自身宽度的一半

某个方向居中

1. 定宽

2. 将左右（上下）距离设置为0

3. 将左右（上下）margin设置为auto

多个定位元素重叠时

堆叠上下文

设置z-index，通常情况下，该值越大，越靠近用户

z-index 的特性如下：

1. 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
2. 如果属性值相同，则按照书写顺序，后来居上；
3. 数字后面不能加单位。

注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

只有定位元素设置z-index有效

z-index可以是负数

 定位改变display属性

• 可以用inline-block 转换为行内块
• 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
• 绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。

一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。

补充

• 绝对定位，固定定位元素一定是块盒，
• 绝对定位，固定定位元素一定不是浮动
• 没有外边距合并

更多的选择器

更多伪类选择器

1. first-child

选择第一个元素

first-of-type，选中元素中第一个指定类型的元素

1. last-child

2. nth-child
   选中指定的第几个元素

even：关键字，等同于2n
odd:关键字，等同于2n+1

1. nth-of-type

选中指定的子元素中第几个某类型的元素

更多的伪元素选择器

1. first-letter
2. first-line
3. selection

透明度

1. opacity，他设置的是整个元素的透明，取值0~1
2. 在颜色位置设置alpha通道（rgba)

鼠标

使用cursor设置

盒子隐藏

1. display：none，不生成盒子
2. visibility：hidden，生成盒子，只是从视觉上yi'chu移除盒子，盒子仍然占据空间

背景图

img元素是属于HTML的概念

背景图属于css的概念

1. 当图片属于网页内容时，必须使用img元素
2. 当图片仅用于美化页面时，必须使用背景图

涉及的css属性

1. background-image

2. background-repeat
   默认情况下，背景图会在横坐标和纵坐标中进行重复

3. background-size

预设值：contain，cover，类似于object-fit
数值或百分比

1. background-position

设置背景图的位置

预设值：left，bottom，right，top,center

数值或百分比

1. background-attachment

通常用它控制背景图是否固定。

1. 背景图和背景颜色混用

2. 速写(简写)属性