第四天浮动基础动画

mac2024-01-30  42

不知不觉又快到一点了

这几天的学习让我感觉很充实,很舒服

以前觉得不懂得东西,现在似懂非懂了。。

今天学习了浮动这个玩意儿

主要分网页布局、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;}

四、动画()

最新回复(0)