1.0 盒模型
盒模型、盒子模型、框模型(box model)
- Css将页面中的所有元素都设置为了一个矩形的盒子
- 将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置
- 每一个盒子都由以下几个部分组成:
内容区（content)
内边距（padding)
边框（ border)
外边距（margin)- 上下左右的设置
四个值:上 右 下 左
三个值:上 左右 下
两个值:上下 左右
一个值:上下左右
内容区( content)，元素中的所有的子元素和文本内容都在内容区中排列
- 内容区的大小由width和 height两个属性来设置
width ：设置内容区的宽度
height ：设置内容区的高度边框（border），边框属于盒子边缘，边框里边属于盒子内部，边框外是盒子的外部
- 要设置边框，需要至少设置三个样式;
边框的宽度： border-width
边框的颜色：border-color（color）
边框的样式：border-style- 简写方法：border简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求
- border: 10px red solid;
border:-right:none; //设置四边公共效果，在设置不同边的效果- 除此之外四个方向都可以简写：border-top/bottom/left/right
内边距（padding)，内容区和边框之间的距离是内边距一共有四个方向的内边距：padding-top/right/bottom/left
- 内边距的设置会影响到盒子的大小
- 背景颜色会延伸到内边距上
外边距（margin)，外边距不会影响盒子可见框的大小，但是外边距会影响盒子的位置
- margin-top：上外边距，设置一个正值，元素会向下移动
- margin-right：默认情况下设置
- margin-right不：会产生任何效果
- margin-bottom：下外边距，设置一个正值，其下边的元素会向下移动
- margin-left：左外边距，设置一个正值，元素会向右移动
水平方向布局 -水平等式
一个盒子的可见框的大小，由内容区内边距和边框共同决定， 所以在计算盒子大小时，需要将这三个区域加到一起计算
- 元素在其父元素中水平方向的位置由以下几个属性共同决定:
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
可以设置auto的参数：margin-left、width、margin-right
垂直方向布局 -overflow
1.1 垂直外边距重叠
父子解法(不完美)：
1.修改父元素：pading+，height-
2.父元素添加border隔开父子元素
3.开启BFC模式，overfloat：hidden (完美) --2.1节
<style>
.box1{
height:300px;
width:300px;
background-color:aquamarine;
overflow:hidden;
}
.box2{
margin:100px;
height:100px;
width:100px;
background-color: coral;
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
1.2 行内元素的盒模型 -display -visibility
1.3 默认样式去除
http://meyerweb. com/eric/tools/css/reset/
1.4 还是盒子 -box
box-sizeing
box-shadow、outline
border-radius
1.5 水平排列 -float （脱离文档流）
1.5.1导航条小练习
2.0 高度塌陷和外边距重合
2.1 高度塌陷 和 BFC模式 -overfloat:hidden
父元素不设置高度，子元素设置float：left
BFC(Block Formatting Context)块级格式化环境
- BFc是一个css中的一个隐含的属性，可以为一个元素开启BFc 开启BFC该元素会变成一个独立的布局区域
- 元素开启BFc后的特点:
1.开启BFc的元素不会被浮动元素所覆盖
2.开启BFc的元素子元素和父元素外边距不会重叠
3.开启BFc的元素可以包含浮动的子元素- 可以通过一些特殊方式来开启元素的BFC:
1、设置元素的浮动 （不推荐) ：父元素设置float:left
2、将元素设置为行内块元素（不推荐) ：父元素设置display：inline-block
3、将元素的overflow设置为一个非visible的值
常用的方式为元素设置overflow:hidden开启其BFC以使其可以包含浮动元素
1.1节示例
2.1.1 清除浮动影响 -clear
2.1.2 利用clear解决高度塌陷 - 伪元素::after
原理：放置一个含有clear的div，撑起父元素，防止高度塌陷，普通写法如下。
<style>
.box{
border:5px solid red;
}
.box1{
height:300px;
width:300px;
background-color:aquamarine;
float:left;
}
.box2{
height:100px;
width:100px;
background-color:blue;
}
.box-after{
clear:both;
}
</style>
<body>
<div class="box">
<div class="box1"></div>
<div class="box-after"></div>
</div>
</body>
进阶写法
<style>
.box{
border:5px solid red;
}
.box1{
height:300px;
width:300px;
background-color:aquamarine;
float:left;
}
.box2{
height:100px;
width:100px;
background-color:blue;
}
.box::after{
content: "";
/* after添加的是行内元素，需要转换成块元素，table比block好用 */
display:table;
clear: both;
}
</style>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
2.2 同时解决高度塌陷和外边重叠 -clearfix
<style>
.box{
border:3px solid red;
height:100px;
width:100px;
background-color:aqua;
}
.box1{
margin-top: 50px;
height:50px;
width:50px;
background-color:coral;
float:left;
}
.clearfix::after,
.clearfix::before{
content: "";
display:table;
clear: both;
}
</style>
<body>
<div class="box clearfix">
<div class="box1"></div>
</div>
</body>
3.0 定位（position)
定位是一种更加高级的布局手段
通过定位可以将元素摆放到页面的任意位置-
使用position属性来设置定位
- 可选值:
static：默认值，元素是静止的没有开启定位
relative：开启元素的相对定位
absolute：开启元素的绝对定位
fixed：开启元素的固定定位
sticky ：开启元素的粘滞定位
3.1 相对定位 -relative
当元素的position属性值设置为relative时则开启了元素的相对定位
- 相对定位的特点;
1.元素开启相对定位以后，如果不设置偏移量元素不会发生任何的变化
2.相对定位是参照于元素在文档流中的位置进行定位的
3.相对定位会提升元素的层级
4.相对定位不会使元素脱离文档流
5.相对定位不会改变元素的性质块还是块行内还是行内开启相对定位后需要试着偏移量，以产生效果：top、bottom、left、right
3.2 绝对定位(包含块) -absolute
当元素的position属性值设置为absolute时，则开启了元素的绝对定位
- 绝对定位的特点:
1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化
2.开启绝对定位后,元素会从文档流中脱离
3.绝对定位会改变元素的性质，行内变成块,块的宽高被内容撑开
4.绝对定位会使元素提升一个层级
5.绝对定位元素是相对于其包含块进行定位的包含块(containing block )
- 正常情况下: 包含块就是离当前元素最近的祖先块元素
- 绝对定位的包含块; 包含块就是离它最近的开启了定位的祖先元素， 如果所有的祖先元素都没有开启定位则根元素就是它的包含块
- html（根元素、初始包含块)
3.3 固定定位 -fixed
将元素的position属性设置为fixed则开启了元素的固定定位 固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样
- 唯一不同的是：
固定定位永远参照于浏览器的视口进行定位
固定定位的元素不会随网页的滚动条滚动
3.4 粘滞定位
-当元素的position属性设置为sticky时则开启了元素的粘滞定位
- 粘滞定位和相对定位的特点基本一致， 不同的是：
粘滞定位可以在元素到达某个位置时将其固定
3.5 二维布局 -包含块等式
在开启绝对定位后，水平等式将会增加两个参数：left、right 同时，垂直等式也会生效
这样就可以通过简单方法实现块的二维居中：
3.6 元素的层级
对于开启了定位元素，可以通过z-index属性来指定元素的层级
——z-index需要一个整数作为参数,值越大元素的层级越高
——元素的层级越高越优先显示
如果元素的层级一样,则优先显示靠下的元素
祖先的元素的层级再高也不会盖住后代元素
4.0 弹性盒子
开启方式 display:flex
开启前：
开启后：
4.1 flex模型
4.2 值
- flex-flow：row nowrap 是 flex-direction 和 flex-wrap 的简写。
flex-direction：row 指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。
flex-warp：nowrap 指定 flex 元素单行显示还是多行显示 。如果允许换行，这个属性允许你控制行的堆叠方向。 - flex此属性是以下CSS属性的简写
flex-grow：设置了一个flex项主尺寸的flex增长系数。它指定了flex容器中剩余空间的多少应该分配给项目（flex增长系数）。
flex-shrink：指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
flex-basis：指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。 - 水平垂直对齐
align-items：align-items属性将所有直接子节点上的align-self值设置为一个组。 align-self属性设置项目在其包含块中在交叉轴方向上的对齐方式。
justify-content属性定义了浏览器之间，如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。 - 嵌套-复杂示例
685
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
