1、图片的处理
当一个网页有大量图片要加载时，可以对图片进行压缩，或者采用Js异步处理，让一部分图片先加载，鼠标滑动到该处时在加载该处的图片
2、怎样设置HTML元素是它在浏览器中不可见
（1）给它的宽高设置为0
（2）disply:none
(3)overflow:hidden
(4)visibility:hidden;
3、外边距重叠问题
（1）当两个相邻的盒子的外边距都是正数时，重叠结果为两者之间较大的值
（2）当两个相邻的盒子的外边距都是负数时，重叠结果为两者之间绝对值较大的值
.one{
margin-bottom:-100px;
background:red;
}
.two{
margin-top:40px;
background:blue;
}
蓝色盒子压了红色盒子的一半
（3）当两个相邻的盒子的外边距一正一负时，重叠结果为两者相加的值
外边距重叠
div{
width:200px;
height:200px;
background:red;
}
.one{
margin-bottom:-100px;
}
.two{
margin-top:40px;
background:blue;
}
3、背景
背景设置 background：
1、background-color:背景颜色设置
background:rgb(0-255,0-255,0-255);
三原色设置
2、background-image：url()，url(); 多背景图片设置
多个背景，用,隔开
3、background-repeat:repeat-x|repeat-y|no-repeat 背景平铺设置
4、background-position：x,y; 背景定位设置
background-position:centercenter; 让一张图片在盒子中完全居中显示·
background-position:100%center; 让图片靠右
5、background-size:背景尺寸设置
一般只设置一个width，保留它的比例
background-size:cover; 覆盖页面
background-size:contain;自适应（常和position一起用）
4、页面浮动----float
float:浮动
(1)浮动后会脱离文档流,往设置的方向进行浮动，直到遇到父级的边界或者其他的浮动元素 就会停止。
（2）浮动的元素撑不开父级
float:left、right、none
设计之初的作用是用来做文字环绕
p标签 段落 双标签 块级
img标签 图片标签 单标签 比较特殊，行级却可以设计宽高
alt SEO应用--可以用爬虫爬到，搜索中会用到，当图片没加载出来时，Alt文字会显示
float属性对块级元素的影响：
设置浮动之后，块级元素的宽度不再跟随父级宽度，而是内容决定(内容撑开宽度)
.div1{
background:red;
float:left;
}
1111
float元素对行级元素的影响：
可以设置尺寸以及盒模型
.span1{
background:red;
width:200px;
height:200px;
float:left;
}
例：用HTML CSS 实现两列布局，一列宽240，一列跟随浏览器自适应，两列间距10px
div{
height:400px;
}
.one{
width:240px;
background:red;
float:left;
}
.two{
width:240px;
background:red;
float:right;
}
.three{
background:blue;
/*float: left;*/
margin:0px250px;
}
例：用HTML CSS 实现两列布局,一列固定，一列岁浏览器改变大小
.left{
width:240px;
height:400px;
background:red;
float:left;
}
.right{
height:400px;
background:yellow;
margin-left:250px;
}
*浮动的清除
当一个大盒子里有三个盒子且都有float属性时，它们都脱离了文档标准流，这时候大盒子就没有了高度了，这时要清除浮动的影响
.all{
width:600px;
border:4px#000solid;
}
.alldiv{
width:200px;
height:200px;
float:left;
}
.one{
background:red;
}
.two{
background:blue;
}
.three{
background:yellow;
}
一、方法一
給父级盒子设置高度
.all{
height:400px;
width:600px;
border:4px#000solid;
}
二、方法二
再父级盒子中，在浮动的盒子下再放一个一个盒子（这个盒子没有float属性）中设置clear属性，就可清除浮动
（一般不用这种方法去清除浮动，因为会增加页面的标签）
.all{
/*height: 400px;*/
width:600px;
border:4px#000solid;
}
.alldiv{
width:200px;
height:200px;
}
.one{
background:red;
float:left;
}
.two{
background:blue;
float:left;
}
.three{
background:yellow;
float:left;
}
.clear{
clear:both;
}
三、方法三
设置伪元素清除浮动（最常用的清除浮动的方式）
.all{
width:600px;
border:4px#000solid;
}
.alldiv{
width:200px;
height:200px;
}
.one{
background:red;
float:left;
}
.two{
background:blue;
float:left;
}
.three{
background:yellow;
float:left;
}
.clearfix{
/*兼容IE6/7*/
zoom:1;
}
.clearfix::after{
content:"";
display:block;
height:0;
clear:both;
}
四、方法四
使用overflow属性来清除浮动 （一般也不会用这种方法去清除浮动）
.all{
width:600px;
border:4px #000 solid;
overflow:hidden;
}
网友评论