一. 清除浮动
浮动对页面的影响:
如果一个父盒子中有一个子盒子,并且父盒子没有设置高,子盒子在父盒子中进行了浮动,那么将来父盒子的高度为0.由于父盒子的高度为0,下面的元素会自动补位,所以这个时候要进行浮动的清除。
float: left;float: right;
清除浮动:clear:both;
1 使用额外标签法:
在浮动的盒子之下再放一个标签,在这个标签中使用clear:both,来清除浮动对页面的影响。
a.内部标签:会将这个浮动盒子的父盒子高度重新撑开
b.外部标签:会将这个浮动盒子的影响清除,但是不会撑开父盒子。
注意:一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签。
2 使用overflow属性来清除浮动:
先找到浮动盒子的父元素,再在父元素中添加一个属性:overflow:hidden,就是清除这个父元素中的子元素浮动对页面的影响。
注意:一般情况下也不会使用这种方式,因为overflow:hidden有一个特点,溢出这个元素所在的区域以后会被隐藏(等我们学完overflow以后大家就明白了)。
3 使用伪元素来清除浮动:
.clearfix:after {
content:"";//添加内容为空
height: 0;//内容高度为0
line-height: 0;//内容文本的高度为0
display: block;//将文本设置为块级元素
clear: both;//清除浮动
visibility:hidden;//将元素隐藏
}
.clearfix {
zoom: 1;/*为了兼容ie6*/
}
4 伪元素:
伪元素:在页面上不存在的元素,但是可以通过css来添加上去。
种类:
:after(在。。。之后)
:before(在。。。之前)
注意:每个元素都有自己的伪元素。
二. 定位:
问题:现在在页面上有两个盒子,其中第二个盒子将第一个盒子压住了一半。
作用:解决页面上盒子与盒子之间的层叠问题。
使用:
position:(位置)
取值:
1 static:静态的
position:static;静态定位。
所有的标准流中的元素都是静态定位。
2 relative:相对的
position:relative:相对定位。
使用的时候还要配合:top,left,right,bottom来使用。
特点: 如果设置了相对定位并且设置了trbl属性,那么将来盒子会以盒子原本的位置发生偏移。
以.two盒子原来的位置发生偏移,在水平方向向右移动了20像素,在垂直方向也向下移动 了20个像素。
1.0相对于原来的位置进行平移。
2.0设置了相对定位的元素在页面上占据了位置(没有脱离标准流)。
总结:想当年。
3 absolute:绝对的
position:absolute//绝对定位
使用的时候也要配合trbl属性来使用
特点:
1.0如果这个元素没有父元素,那么将来trbl是相对于body来定位的
2.0如果绝对定位的元素有父元素,但是父元素没有定位,那么这个时候trbl还是相对于body来定位的。
3.0如果绝对定位的元素有父元素,而且父元素有定位(非static),那么这个绝对定位的元素偏移是以自己的父元素为基础。
4.0绝对定位之后的元素在页面不会占据位置(绝对定位以后的元素会脱离标准流)。
总结:看脸型。
将来在写页面的时候用的最多的既不是绝对定位也不是相对定位,而是绝对定位与相对定位一起使用:(规范)子绝父相。
子元素使用绝对定位,父元素使用相对定位。
案例:
如果小盒子在大盒子中要定位并且水平居中:
先left: 50%,将小盒子在大盒子平移大盒子的一半,再设置margin-left:-(小盒子宽度的一半),注意一定是负数,那么将来小盒子在大盒子中就可以水平居中了。
4 fixed:固定
position:fixed。
使用的时候也要配合trbl属性来使用
特点:
1)不管页面有多大,trbl永远是相对于浏览器的边框来的。
2)固定定位的元素也脱离了标准流(不在页面上占据位置)
总结:死心眼型。
三. 补充:
1.0如果文本与图片在同一行中,那么将来文字与图片的默认对齐方式是文字的基线对齐图片的底线。
vertical-align:设置文本与图片的对齐方式:
取值:
middle:将中线对齐
2.0overflow:溢出
取值:
hidden:会将超出容器的部分隐藏起来
scroll:给容器加上滚动条
auto:根据具体情况判断容器是否要加上滚动条
3.0元素的隐藏:
overflow:hidden//将超出的部分裁剪掉
visibility: hidden//可以将元素隐藏,但是在页面上还保留着原来的位置。(停薪留职)
display: none;//可以将元素隐藏,并且在页面不占据位置。
diplay:none与display:block是一对反义词。
四. emmet语法:
emmet是我们在sublime中的一个插件在这个插件中集成很多的快捷键。
1 html:
1.1 生成结构的快捷键:
!+ tab,可以生成html的结构代码。
1.2 生成id名和类名
标签名.类名#id名+tab
没有标签名.类名+tab ==>div
1.3 生成同级元素:
标签名+标签名+标签名 “+”tab
1.4 生成子类标签
标签名>子标签名>子标签名>子标签名+tab
**生成与子类标签的同级标签
标签名>子标签名>子标签名>子标签名^^子标签名+tab
1.5 带固定数量的标签:
ul>li*5+tab
1.6 带有序号名称
ul>li.abc$*3 + tab
1.7 生成带有内容的标签:
ul>li>a{item}*5
1.8 生成带有属性的标签
ul>li>a[href=”#”]
2 css
width:30px==>w30+tab