css浮动元素概念

css属性：边框属性：
border：2px solid red;(复合属性)
2px-------边框宽度------border-width
solid-----边框样式------border-style
取值：
solid-------实线
dashed------虚线
dotted------点线
double------双实线
red-------边框颜色------border-color
添加某一方向上的边框
border-top：------上边框
border-right------右边框
border-bottom------下边框
border-left------左边框
用边框书写三角形（面试题）
div{
width:0px;
height:0px;
border:50px solid transparent;
border-bottom:50px solid pink;
}
浮动：
标准文档流：元素默认的排列方式（垂直排列、水平排列）
浮动：让元素漂浮起来
作用：让垂直排列的元素可以横着排列（页面排版布局）
属性：float：
取值：
left------左浮动
right-----右浮动
none------不浮动
元素浮动后特点：（兄弟关系）
1、多个元素同时浮动
如果同时左浮动，元素依次从左到右排列
如果同时右浮动，元素依次从右到左排列
2、元素添加浮动在页面中不占位置（脱离文档流）
3、多个元素同时浮动，一行内排列不下，最后一个浮动元素会自动折行显示
4、多个元素同时浮动，一行内排列不下，最后一个浮动元素会自动折行显示，折行位置取决于倒数第二个浮动元素的高度。
清除浮动：（清除前面浮动元素带来的影响）
clear：
取值：
none------不清楚前面附送父元素带来的影响
left-------清除前面前面左浮动元素带来的影响
right-------清除前面前面右浮动元素带来的影响
both-------清除前面前面浮动元素带来的影响
浮动带来的影响：
父子关系中，子元素添加浮动，父元素高度会发生变化，---------高度塌陷
解决方法：
1、给子元素添加清楚浮动（clear：both）,添加在不浮动元素身上
2、只有一个子元素，考虑在后面手动添加一个清除浮动的标签，（首选div，选择能够设置宽高的标签）
弊端：页面结构中多了一个标签
3、给父元素添加固定高度
弊端：子元素过多，里面内容会超出
4、给父元素添加overflow:hidden;
元素添加overflow：hidden；触发了BFC机制（块级格式化上下文），形成一个独立的空间，
内部浮动元素的高度参与计算
5、万能清除法

            常用PS操作：
                1、图片拖拽到PS中，将图片打开，调出刻度尺：快捷键：ctrl+R
                2、更改刻度尺单位，鼠标在刻度尺上右键更改单位为像素
                3、快捷键：
                    放大：ctrl+加号     或者alt+鼠标滚轮
                    放大：ctrl+减号
                4、测量宽高：左侧快速工具栏第二个工具，矩形选区
                5、切图：
                    切单张图：
                    辅助线框选出图片区域-------矩形选区工具框选--------ctrl+c-------ctrl+n（更改单位为像素，更改背景色为透明）-------ctrl+v------ctrl+s（保存）

                    批量切图：
                    辅助线框选出图片区域-------选中左侧快速工具栏切片工具------菜单栏（文件）-----导出-----存储为web所有格式-------预览位置框选图片更改图片格式------存储-----更改切片为所有用户切片