不知不觉又快到一点了
这几天的学习让我感觉很充实,很舒服
以前觉得不懂得东西,现在似懂非懂了。。
今天学习了浮动这个玩意儿
主要分网页布局、display属性和边框塌陷这三个,还学习了一些基础的动画
一、网页布局
1、常见网页布局:顶部网址、左侧链接、右侧主体、下方版权;
2、标准文档流:inline(内联元素-行)block(块级元素)。
二、display属性
1、block(块元素)display:block 元素被定义为块元素,该元素前后都带有换行符
2、inline(内联元素-行)display:inline 元素被定义为行元素,无换行符
3、inline-block(块元素与行元素在一行中存在)display:inline-block行内含有块元素,块元素不会换行,控制块元素放到一行里面
4、none 设置元素不会被显示
5、float 用于将两个块元素放至一行中 float:left;靠左浮动 float:right;靠右浮动
三、边框塌陷
内容含有清除浮动(clear)和四个解决方案两个方面
清除浮动::、、|||
clear:left 清除左侧浮动元素对自己的影响
clear:right 清除右侧浮动元素对自己的影响
clear:both 清除两侧浮动元素对自己的影响
clear:none 允许浮动元素出现在两侧
四个解决方案::、、|||
1、在父元素最后加空div标签,并设置为 .p{clear:both margin:0 padding:0;}
2、给父元素设高度height
3、给父元素添加overflow属性 .p{overflow:hidden;border:1px solid/dotted/deshed/ #f00;}
4、添加伪类after clear:after{content:"";display:block;clear:both;}
四、动画()