第六天笔记
学习目标
- 浮动
- 尚合
- 浮动能干嘛 运用在什么地方
+ 浮动会带来什么问题 怎么解决
浮动
布局的三种基本方式：
- 标准流 按照标签默认的特性摆放盒子即为标准流
- 浮动流 利用浮动摆放盒子即为浮动流
- 定位流 利用定位摆放盒子即为定位流
浮动的意义
- 浮动最开始是做图文绕排的。
- 浮动的布局应用场景：让元素直接排成一排，或者一个靠左一个靠右
浮动的特性解析：
- 浮动的元素会“脱标”
- 脱标的元素拥有行内块的表现
脱标：（脱离了标准流）
标准流：块元素单独占一行，行内元素可以排一排的这种默认的盒子排列方式就是标准流 （按照默认的规则排列的）
1. 脱标的元素不占标准流的位置
2. 不会继承父级的的宽度，内容有多个就撑多大 （不论前身块级还是行内）
3. 可以直接写宽高 （不论前身块级还是行内）
4. margin:auto对于脱标元素不起作用浮动因为脱标的特性（脱离标准流了，不占位置，会盖住其他的标准流的盒子），
所以，在使用上有一个口诀：要浮全浮（要浮动的话兄弟元素都浮动）
其他细节特性：
1. 浮动是在盒子内容区域浮动，不会超出padding区域（水平方向）
2. 浮动的盒子一排装不下的时候会掉下来（掉下来的位置会根据上一个浮动盒子的高度决定）
3. 右浮动会颠倒盒子顺序
4. 浮动的盒子压不住文字和图片
5. 尽量在标准流的盒子里面浮动闭合浮动
浮动带来的问题：浮动元素撑不开父级容器
解决办法（闭合浮动）：
1. 强行给父盒子添加高度 （不推荐，不利于后期维护）
2. 创建一个新的块级盒子放在浮动元素的最后面，给这个盒子添加一个css属性：clear:both;（不推荐，会产生一个多余的盒子）
3. 用伪元素闭合浮动 （推荐，书写一个公共类就可以使用）
4. 给父元素添加overflow:hidden; (在某些特定场景下使用不了)伪元素
就是在当前元素内容的前面或者后面追加一个盒子 这个盒子由css渲染
伪元素特性：
1、伪元素由css渲染 所以不会增加你的DOM（html结构）开销
2、伪元素默认是行内元素 可以进行转块等处理
3、伪元素不管有没有内容 content这个值一定不能少 即使没有 也要写个空
4、伪元素 官方推荐写:: 但是为了兼容考虑 写成单冒号
5、因为伪元素是css渲染 所以JS获取不到伪元素清除浮动完整代码：
.clearfix::after {
content:'';
display:block;
clear:both;
height:0;
visibility:hidden;
}
.clearfix {
*zoom:1;
}
或者
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
/* 为了兼容IE6,7 */
.clearfix {
*zoom:1;
}版心：
是约束网页的一个具体的值
为什么要有版心?
因为电脑的屏幕不一样大，为了在不同的电脑上视觉效果一致，我们需要版心作为约束
版心的公共类的设定
.container {
width: 1280px;
}
<div class="container"></div>特殊情况：
设计师会给你一张很大的图片 1920 * 1000 (是为了适应不同的屏幕)
但是版心只有1280
问：图片怎么处理
答：这个盒子不做约束 width:100%; 这个图片作为背景图片放到这个盒子里面
同时background-position:center 0;综合项目：尚合
ps的使用
基本设置：
1、ctrl+k 打开首选项----单位与标尺--- 将单位都改成像素
2、V工具状态下 在属性栏里面干掉自动选择 同时将组设置为图层
3、在Z工具状态下 去掉细微缩放切片工具的使用
切片工具：c
c是一个工具组 我们需要的是里面的切片工具
shift + c 切换切片工具组
临时切换到切片选择工具：在切片工具下，按住ctrl不放，会临时将切片工具转换成切片选择工具
打开标尺 ctrl+r
怎么切片：用c工具框选对应的图片区域出来，利用三键+s （ctrl+shift+alt+s）导出切片 在导出的过程中选择“选中的切片”