第六天笔记

学习目标

1. 浮动
2. 尚合

• 浮动能干嘛 运用在什么地方
  ?+ 浮动会带来什么问题 怎么解决

浮动

布局的三种基本方式：

1. 标准流 按照标签默认的特性摆放盒子即为标准流
2. 浮动流 利用浮动摆放盒子即为浮动流
3. 定位流 利用定位摆放盒子即为定位流

浮动的意义

1. 浮动最开始是做图文绕排的。
2. 浮动的布局应用场景：让元素直接排成一排，或者一个靠左一个靠右

浮动的特性解析：

1. 浮动的元素会“脱标”
2. 脱标的元素拥有行内块的表现

脱标：（脱离了标准流）

标准流：块元素单独占一行，行内元素可以排一排的这种默认的盒子排列方式就是标准流 （按照默认的规则排列的）

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）导出切片  在导出的过程中选择“选中的切片”

html和css(6)

原文：https://www.cnblogs.com/f2ehe/p/11863216.html