Css3One

行和块的互相转换

display:元素的出生是自带一个默认display（控制元素显示方式）属性 决定元素该怎么显示

：block 转成块属性
：inline 转成行属性
：inline-block 转成醒内块属性
：none 不显示（元素已经加载到了，但是我们只是控制他不显示而已

元素的隐藏控制

控制元素隐藏有两种放法:

1. display:none（不占用空间，不可继承）
2. visibility:hidden（占用空间会被继承）

---

盒模型

什么是盒子模型：

1. 在html中，把每一个元素都当成一个盒子，拥有盒子的平面外形和空间
   2.盒子模型由 内容（content）内边距（padding）边框（border）外边距
   （margin）
2. 盒子模型分为标准盒子模型和怪异盒子模型
3. 标准和模型所占大小是 内柔+内边距+边框+外边距(混杂模式,ie6)
   怪异盒模型所占的大小是 内柔+外边距
   内容：width为我们设置内容的区域
   padding：
4. 可以显示背景颜色和背景图
5. 不可以为负值
6. 主要用来撑开元素的内容和边框之间的距离 常用在撑开父子之间的距离
   border：
   1. 边框下也有背景颜色和背景图片
   2. border-width border-style border-color

margin：
1. 不能显示背景颜色 也不能显示任何内容
2. 只用来撑开兄弟之间的距离
3. 如果第一个子元素和最后一个子元素分别拥有上magrin和下margin那可能会出现父级塌陷
4. 上边的元素的下margin和上边元素的上margin会进行重合，然后取最大值
5. margin还可以做水平集中 当一个元素设置宽高以后 设置左右margin为auto那么元素左右margin为0
6. margin可以设置负值：元素向上西东 左为负：元素向左移动 上为负：元素向上移动 元素向右移动：元素占用位置减少高度变小 元素向左移动：元素占用位置减少宽度变小
7.两个兄弟元素A和B
A元素书写一个margin-bottom为负值 和B书写margin-top为负数。
盒子模型的补充：
内容区域的盒子：content-box
内边距区域的盒子：padding-box
边框区域的盒子:border-box

---

###水平垂直居中
      方法1：
                position:absolute
                left :0
                top:0
                right:0
                bottom;0
                margin:auto
      方法2：
                position:absolute
                left:50%
                top;50%
                transform:translateX(-50%) translateY(-50%)

---

元素的重叠方式

元素的重叠：
1. 负margin：负margin移动元素以后，原来的位置不再保留。
负margin让元素占用空间变小，后边的元素可以覆盖当前元素
2. 定位相对定位：原来位置保留，并且会覆盖其他元素。
绝对定位：原来位置不保留脱离文档流
3. 浮动：原来位置不保留，脱离文档流

元素的浮动

浮动主要做文字环绕特效，水槽原理
浮动元素不能超过怕上一个兄弟元素（无论是否浮动）
浮动元素在一行排列，顶部对齐
浮动对于行标签来说：可以设置宽高，完美支持margin
浮动对快标签：可以设置宽高不再独占一行

---

清除浮动

请浮动：请浮动并不是不让元素浮动，而是清除浮动元素脱离页面流以后对父级的影响
1. 在父级书写 overflow:hidden等开启BFC的代码，常用overflow:hidden但是BFC代码都有自己的其他效果在不影响代码的情况下可以使用
2. 在所有浮动元素的下边书写一个空标签（块标签）书写（clear属性）为both在结构中多书写一行标签不雅观，有时候会影响代码
3. 在浮动元素后边书写一个br，给br标签书写一个属性：clear:all
4. 给父级设置高度也可以清除浮动，但是基本不用
5. 给父级书写after伪元素 替代直接在浮动元素下书写空标签的方法，一般可以直接命名一个请浮动的类名，将来如果要清浮动 直接把类名给浮动元素，因为低版本的IE不支持伪元素，所以要在低版本IE中 给父元素开启haslayout

.clearFix{
**是css hack
*zoom：1
}
.clearFix;after{
content:"/200B”（空字符）
height：0（高度为0不占用空间）
display：block（清除浮动的标签是一个块标签）
clear：both
}

---

定位：

相对定位：
1. 相对自身的位置定位（ex：right：100px 元素向左移动）
2. 不会脱离页面流
3. left right top bottom 控制元素的定位位置 left和top具有优先性
4. 一个元素设置相对定位，不会影响这给元素的其他属性
5. 一般用在书写包含块 或者是给非定位的元素设置堆叠顺序

绝对定位
1. 相对包含块的位置进行定位
2. 脱离页面流
3. left right top bottom 控制元素的定位位置 left和top具有优先级
4. 改变元素属性
行标签：可以设置宽高
块标签：不再独占一行
5. 在浮动解决不了的布局下可以使用；在元素层叠的时候也可以是用
相对浏览器窗口定位（固定定位）
1. 相对于浏览器窗口定位 位置只和浏览器窗口有关
2.脱离页面流
3. left right top bottom 控制元素的定位位置 left和top具有优先级
4. 改变元素属性
行标签：可以设置宽高
块标签：不再独占一行
5. 无论页面滚动条或窗口大小怎么变化，元素的位置始终相对浏览器

设置元素的堆叠顺序：
z-index
整数
z-index默认为 auto
值越大越靠前
值为负

---

包含块

包含块分为初始包含块 和其他元素包含块
首先：初始包含块：html根元素
当绝对定位一直找不到最近定位父级的话，那么就会相对于初始包含块来定位。
当禁止系统滚动条的时候，固定定位的效果其实也是相当于初始包含块定位
包含块：

1. 当一个元素没有定位属性的时候，其实就是position属性为static（静态的也就是在页面流正常显示）这给元素的包含块就是它自己的父级
2. 当一个元素是相对于自身位置定位，（relative），那么他的包含块也是父级
3. 如果一个元素定位属性是绝对定位（absolute），那么他的包含块是 沿着父级一直寻找 知道寻找到拥有定位属性的，不包含static的祖辈元素为止，这个祖辈元素就是它的包含块，但是如果找不到拥有定位属性的祖辈元素那么html就是他的包含块
4. 如果元素是fixed定位，其实他的包含块（官方说明还是初始包含块），但是是相对浏览器定位的

overflow属性

overflow：控制元素超出后的显示方式
当元素不设置任何overflow属性的时候元素超出正常显示，但是超出部分不会占用空间
visible：默认值 超出显示hidden：超出隐藏（在js中scrollLeft等属性依然生效，隐藏的是超出部分和滚动条的样式）
scroll：超出生成滚动条（默认x和y全部生成 无论是否超出，都会生成滚动条）可以通过overflow-X和overflow-Y来单独设置滚动条
auto：自动生成滚动条（内容超出才生成滚动条，否则是不会生成滚动条样式的）
想让一个元素的height百分比生效，一定父级拥有height属性

---

系统滚动条

当html和body只有html拥有overflow属性，那么html的滚动条就会传递到系统滚动条document上
当html和body，只有body拥有overflow属性，那么body 的滚动条也会传递到系统滚动条上面
当html和body都拥有overflow的属性的时候那么body的滚动条就是自己的 html的滚动条会传递给系统滚动条

禁止系统滚动条
因为系统滚动条要么就是从body来 要么是从html中来 所以把的系统滚动条禁止了，那么系统就没有滚动条了

---

text-transform

将内容全部转换为大写
text-transform：uppercase
将内容全部转换为小写
text-transform：lowercase
将内容首字母大写
text-transform：capitalize

---

BFC

BFC：块级格式化上下文，其实就是一块独立区域。决定元素如何对其内部内容进行定位，并且决定着和其他元素的关系
BFC：构成的条件：

1. 浮动
2. 定位：绝对定位和固定
3. display:inline-block table-cell flex
4. overflow只要不为 visible
5. 根元素

BFC可以解决的问题：

1. 请浮动
2. 解决父级塌陷