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