重生之我是程序员
第二章
经过一周的学习,慢慢适应了这个学习的过程。虽然有些慢热,但是能跟上脚步。一周学完HTML之后,开始学习CSS了,这个转变的过程我觉得主要就是从行内赋予每个标签属性到从<head>
里面给标签赋予属性。
学习CSS之后,div就用的多了起来,作为一个盒子,我们使用起来特变方便,可以随意在里面加入任何我们想要的东西。其中浮动float的使用非常频繁,作为浮动元素,可以左浮动可以右浮动,浮动之后还会脱离文档流,而下面的元素会向前补位。但是浮动有时候会让布局爆炸,于是我门可以在使用clear:left或者clear:right又或者clear:both来消除左浮动、右浮动、或者消除两者的浮动带来的影响。
同时用起来比较多的还有margin,它可以通过margin-top,margin-bottom,margin-left,margin-down进行上下左右移动。总所周知,一个盒子的总宽度是由content和border-left、border-right,padding-left、padding-right及margin组成,padding可以改变内容至边框之间的距离。
我们常见的小图标也可以通过给background设置一个框框,然后使用background position来调整框框中显示的图片,来实现简单的抠图效果。
还有一个比较好用的用来微调元素的方法为子绝父相即子元素为绝对定位(position:absolute;),父元素为相对定位position:relative;(relative、absolute、fixed都可以:绝对定位的盒子是相对于离它最近的一个已定位的盒子进行定位的)。
最近学到一个非常实用,也见的比较多的就是伪类hover的使用。通过<ul>
并给它的子级<li class:“bibi”>
插入图片,然后用 list-style: none把其自带的小圆点去掉同时设置position:relative。再在后面设置一个与其同样的大小的<li class:“lai'lai”>
,background color用rgba调成合适的透明度,并且设置display:none同时也设置position:absolute;,将其移到与上一个<li>
相同的位置。最后用.bibi: hover .lailai{display:block;}。即可实现点击bibi是出现lailai里面的内容。