学习css的第四天
首先做了个案例,昨天的东西了昂,不聊了。
接着学习了圆角边框原理,它呈现的视觉效果就是可以给边框的四周给一个圆形转角,
它的写法是 boder-radius+xx(px)做圆形的方式是建立一个正方形的盒子,然后写一个
border-radius: 50%;然后做圆角矩形:border-radius: 高度的一半;设置圆角的顺序是
左上,右上,右下,左下,顺时针来昂。
第二节学习了盒子阴影,盒子阴影使用box-shadow: ;设置,x偏移量、y偏移量、
阴影模糊半径、阴影扩散半径、阴影颜色,盒子阴影特效也可以使用hover这个酷炫的东西。
之后学习的文字阴影特效与盒子阴影有一部分异曲同工之妙,代码书写是text-shadow,
x偏移量、y偏移量、阴影颜色。
后来讲了浮动,啊这,尴尬,我心里明白但是讲不出来,浮动是使用代码float去设置,
但是要注意盒子浮动会丧失高度并且不再保留原有位置,会使盒子叠加在一起,但是盒子浮动
智能影响后面的盒子,前面的盒子不会改变。
就这吧就这吧,睡了睡了。
啧,忘记说清除浮动了哈哈哈,补上补上。
清除浮动是为了清除浮动元素脱标后造成的影响,清除浮动后,父盒子可以根据浮动的子盒子
自动检测高度,父盒子有了高度,就不会对下方的标准流造成影响了。写 clear:both;
还有清除浮动之父元素,记住overflow就能解决很多了。
.clearfix::after {
content: '';
display: block;
clear: both;
visibility: hidden;
height: 0;
}这个代码也可以!快来复制
.clearfix::before,
.clearfix::after {
content: '';
display: table;
}
.clearfix::after {
clear: both;
}还有这个!这都是大哥用的。
睡了。