1.将红色圆设置为背景，白色数字不用设置为绝对定位就能实现，不是父级相对定位后，子元素就要绝对定位吗
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0;padding: 0;}
section{width: 1200px;height: 440px;margin:0 auto;}
aside{width: 400px;float: left;margin:20px 10px;}
article{width: 750px;float: right;margin:20px 10px;}
section h1{font-size: 32px;margin-bottom: 20px;}
section h1 > samp{font-size: 32px;color: #DCDCDC;}
section > aside > dl{position: relative;display: block;height: 70px;margin-bottom: 20px;}
section > aside > dl > dt{position: absolute;left: 70px;font-weight: bold;text-decoration: underline;line-height: 16px;}
section > aside > dl > dd:first-of-type{position: absolute;left: 0;}
section > aside > dl > dd:last-of-type{position: absolute;left: 70px;top: 26px;line-height: 16px;}
section > article > p,img{
margin-bottom: 20px;
}
section > article > img{width: 100%;height: 190px;}
section > aside > dl > dd > .img{background: url(http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png);width:50px;height: 51px;}
section > aside > dl > dd > .img > span{height:51px;line-height: 51px;text-align: center;display: block;color: #fff;font-size: 26px;/*position: absolute;*/}
</style>
</head>
<body>
<section>
<aside>
<h1>Recent <samp>Course</samp></h1>
<dl>
<dt>Hyper Text Markup Language</dt>
<dd><div class="img"><span>1<span></div></dd>
<dd>HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites.</dd>
</dl>
<dl>
<dt>Cascading Style Sheets</dt>
<dd><div class="img"><span>2<span></div></dd>
<dd>Cascading Style Sheets(CSS) is a simple mechanism for adding style (e.g,fonts,colos,spacing)to Web documents.</dd>
</dl>
<dl>
<dt>JavaScript</dt>
<dd><div class="img"><span>3<span></div></dd>
<dd>JavaScript is a high-level,dynamic,untyped,and interpreted programming language</dd>
</dl>
<dl>
<dt>AngularJS</dt>
<dd><div class="img"><span>4<span></div></dd>
<dd>AngularJS is an open-source web application framework mainly maintained by Google and by a community of individuals and...</dd>
</dl>
</aside>
<article>
<h1>Welcome to <samp>Madssive Open Online Course!</samp></h1>
<p>We provide the latest knowledge to help you cope with the changing world!</p>
<img src="http://img1.sycdn.imooc.com/climg//582e61180001ede703300130.jpg">
<p>We hope that all the students who love the Internet can be more convenient access to learning resources,using the Internet thinking to change our learning.</p>
<p>Focus on IT skills education MOOC,consistent with the development trend of the Internet down to earth's MOOC.We are free,we only teach useful,we conentrate on education.</p>
</article>
</section>
</body>
</html>
正在回答
同学你好， 作为初学者，觉得混乱也是正常现象，但是编程是很灵活的，没有规定说必须使用浮动，或者必须使用绝对定位，所以能够实现效果就是可以的。
也可以回顾之前的视频， 自己总结一下，加深理解。
浮动：https://class.imooc.com/course/756
定位：https://class.imooc.com/course/757
如果帮助到了你，欢迎采纳，祝学习愉快
同学你好， 不是的，对于你的问题解答如下：
绝对定位元素脱离了文档流，必须给父元素设置hegiht属性才可以。
设置相对定位的元素，没有脱离文档流，自然的就会撑开它的父元素高度，所以父元素不用设置height属性。
浮动元素脱离了文档流，但是可以通过清除浮动， 消除带浮动元素导致父级高度塌陷的影响，撑开父元素高度，所以也不是必须给父元素设置height。
如果对浮动这一块不是很理解，可以回顾前面滚动属性的讲解，加深理解。https://class.imooc.com/course/756
如果帮助到了你，欢迎采纳，祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星