10月26日作业

1.简述块元素和行内元素的概念及特性

块级元素是指在页面上以块的形式显示的元素。它们会独占一行，并且默认情况下会占满其父元素的宽度。常见的块级元素有 <div>、<p>、<h1>-<h6>、<ul>、<li> 等。

独占一行，垂直排列。

默认占满父元素的宽度。

可以设置宽度、高度、内外边距等样式属性。

可以包含其他块级元素和行内元素。

行内元素是指在页面上以行的方式显示的元素。它们不会独占一行，可以和其他行内元素在同一行显示。常见的行内元素有 <span>、<a>、<strong>、<em>、<img> 等。

不会独占一行，水平排列。

宽度默认由内容决定，不可设置宽度和高度属性。

对边距和内边距的处理有一些限制。

不能包含块级元素，但可以包含其他行内元素。

2.了解浮动在网页中的应用，left和right的区别？

浮动 脱离文档流

left 左浮动至左上角

right 右浮动至右上角

3.使用clear属性清除浮动时，属性值left、right和both有什么区别？

left 清除左浮动 会在上一个左浮动的下面

rifgh清除右浮动 会在上一个右浮动的下面

both清除两侧浮动 会在上一个浮动的下面
4.解决父级边框塌陷的4种方法分别是什么，各自的使用场景是什么？

（1）直接设置父级边框大小 简单，元素固定高会降低扩展性

（2）浮动元素后面加空div 简单，空div会造成HTML代码冗余        </div>.clear{  clear: both;  margin: 0; padding: 0;}

（3）父级添加overflow属性         </div>#father         {overflow: hidden;border:1px #000 solid; }

（4）父级添加伪类after写法比上面稍微复杂一点，但是没有副作用，推荐使用

.clear:after{

    content: '';          /*在clear类后面添加内容为空*/

    display: block;      /*把添加的内容转化为块元素*/

    clear: both;         /*清除这个元素两边的浮动*/

}

5.学员操作:PPT第16页(制作电视剧详情列表页面)