学习CSS基础课程的第二天

　　唯有坚持，才能成功。

　　今天是我学习CSS基础课程的第二天，当然也是该课程的最后一天。接下来就让我总结一下今天的学习成果吧！

如何使用CSS绘制出圆角边框呢？

　　1.首先在body部分定义一个div标签（<div></div>）;

　　2.使用CSS设置标签的一些样式，例如：div{　　width:100px;/*设置宽度为100px*/　　height:100px;/*设置高度为100px*/　　border:10px solid red;/*绘制出边框线，对应的参数分别为边框线粗细、边框实线和边框的颜色*/　　border-radius:50px 20px 10px 5px;/*设置圆角边框，对应参数分别为：左上、右上、右下和左下（顺时针方向）*/　　}

 

display的使用方法：

　　display：参数（none、block、inline、inline-block）

　　　　none:不显示

　　　　block:块元素

　　　　inline：行内元素

　　　　inline-block：是块元素，但是可以内联，在一行。

 

父级边框塌陷的问题

　　clear:参数（right、left、both、none）

　　　　right:右侧不允许有浮动的元素；

　　　　left:左侧不允许有浮动的元素；

　　　　both:两侧都不允许有浮动的元素。

解决父级边框塌陷问题的方案：

　　1.增加父级元素的高度：  #id号{ border:1px #000 solid;/*绘制出边框线*/　　height：800px;/*设置高度*/};

　　2.增加一个空的div标签，消除浮动：<div class="clear"></div> ...  .clear{　clear:both;　　margin:0;　　padding:0;};

　　3.使用overflow：在父级元素中增加一个  overflow：hidden;

　　4.父类添加一个伪类 ：after（推荐使用），#id号{　content：‘’； display：block； clear：both;};

以上解决方案的对比：1.浮动元素后面增加空div;简单，代码中尽量避免空div。

　　　　　　　　　　2.蛇者父元素的高度；简单，元素假设有了固定的高度，就会被限制。

　　　　　　　　　　3.overflow；简单，下拉的一些场景避免使用。

　　　　　　　　　　4.分类添加一个伪类：after（强烈推荐使用）；写法稍微有些复杂，但是没有副作用，推荐使用。

 

对比display和float：display方向不可以控制；float浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题。

 

定位：相对定位

　　　　 position:relative;相对于原来的位置，进行了指定的偏移，相对定位的话，它任然在标准文档流中，原来的位置会被保留。

　　　绝对定位

　　　　定位：基于***定位，上下左右

　　　　1.没有父级元素定位的前提下，相对于浏览器定位；

　　　　2.假设父级元素存在定位，我们通常会相对于父级元素进行偏移；

　　　　3.在父级元素范围内移动；

　　　　4.相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留。

　　　固定定位 position:fixed;

 

z-index:默认是0，最高无限（999...）.

最后是老师给我们的总结：

 谢谢大家！一起见证我每天的进步。。。