On the sixth day notes

learning target

float
Still together

Why can use floating somewhere
+ float will bring about what the problem how to solve

float

The layout of the three basic ways:

Standard labels according to the flow characteristics of the display box is the default standard stream
Floating stream using a floating box that is placed in a floating stream
Bitstream that is positioned by the positioning box placed stream

Floating meaning

Floating is the beginning of doing graphic wrap.
Floating layout scenarios: Let the element directly in a row, a left or a right

Floating property analysis:

Floating element will "mark off"
Off target element has performance inline block

Marked off from the standard flow :()

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

1. 脱标的元素不占标准流的位置
2. 不会继承父级的的宽度，内容有多个就撑多大 （不论前身块级还是行内）
3. 可以直接写宽高 （不论前身块级还是行内）
4. margin:auto对于脱标元素不起作用

Because floating off the subject characteristics (out of the standard flow, and does not account for the location, will cover other standard box flow),
so there is a formulas in use: To float full floating (to be floating if siblings are floating)

Other details of the features:

1. 浮动是在盒子内容区域浮动，不会超出padding区域（水平方向）
2. 浮动的盒子一排装不下的时候会掉下来（掉下来的位置会根据上一个浮动盒子的高度决定）
3. 右浮动会颠倒盒子顺序
4. 浮动的盒子压不住文字和图片
5. 尽量在标准流的盒子里面浮动

Floating closure

Floating problems caused by: floats do not hold open the parent container

Solution (closed float):

1. 强行给父盒子添加高度 （不推荐，不利于后期维护）
2. 创建一个新的块级盒子放在浮动元素的最后面，给这个盒子添加一个css属性：clear:both;（不推荐，会产生一个多余的盒子）
3. 用伪元素闭合浮动 （推荐，书写一个公共类就可以使用）
4. 给父元素添加overflow:hidden; (在某些特定场景下使用不了)

Pseudo-element

This box is additionally rendered by a box in front of or behind the current css element content

Pseudo-element characteristics:

1、伪元素由css渲染  所以不会增加你的DOM（html结构）开销
2、伪元素默认是行内元素 可以进行转块等处理
3、伪元素不管有没有内容  content这个值一定不能少 即使没有 也要写个空
4、伪元素 官方推荐写::  但是为了兼容考虑 写成单冒号
5、因为伪元素是css渲染  所以JS获取不到

Clear pseudo-element float complete code:

.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;
}

Version of the heart:

It is a specific value constraints webpage

Why have a version of the heart?

Because the computer's screen is not as big, for the same visual effect on a different computer, we need as a constraint version of the heart

Public class version of the core was set

.container {
    width: 1280px;
}

<div class="container"></div>

Special cases:

设计师会给你一张很大的图片 1920 * 1000  (是为了适应不同的屏幕) 
但是版心只有1280 

问：图片怎么处理

答：这个盒子不做约束 width:100%;  这个图片作为背景图片放到这个盒子里面 
同时background-position:center 0;

Integrated project: still together

ps use

basic settings:

1、ctrl+k  打开首选项----单位与标尺--- 将单位都改成像素
2、V工具状态下 在属性栏里面干掉自动选择 同时将组设置为图层
3、在Z工具状态下 去掉细微缩放

Use the slice tool

切片工具：c
c是一个工具组 我们需要的是里面的切片工具 
shift + c 切换切片工具组
临时切换到切片选择工具：在切片工具下，按住ctrl不放，会临时将切片工具转换成切片选择工具
打开标尺 ctrl+r

怎么切片：用c工具框选对应的图片区域出来，利用三键+s （ctrl+shift+alt+s）导出切片  在导出的过程中选择“选中的切片”

html and css (6)