手记

html+css201809282

font-size(字体大小),color(颜色),font-weight:bolid(设置字体加粗),font-style:italic(设置字体斜体),text-decoration:underline(增加下划线),text-的decoration:line-through(设置字体删除线),text-indent:2em(设置缩进两个字),line-height:1.5em(行间距为1.5个字的大小),letter-spacing:1em(设置两个文字之间的距离),text-align(center,right,left)居中,偏右,偏左。

盒子模型:padding(外边距)+border(边框)+margin(内边距)+内容

盒子三种模型:流动、浮动、层模型。

流动模型:也就是我们正常没有格式的模型,块状元素占一行,其他挨着占据一行。

浮动模型:完全用一个float属性,使一个div漂浮于另一个div的某个部位。

层模型:分为三种,绝对定位、相对定位、固定定位。

绝对定位:position:absolute这个是相对于定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。

相对定位:position:relative,是相对于最开始的位置的变化,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。

固定位置:position:fixed,固定在网页的固定位置,不会随着滚动而改变位置。

使用position:absolute可以实现被设置元素相对于浏览器(body)设置定位以后,可以使用position:relative来帮忙来实现相对于其他元素进行变化,但是必须遵守下面规范:

1、参照定位的元素必须是相对定位元素的前辈元素:

<div id="box1"><!--参照定位的元素-->
    <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>

从上面代码可以看出box1是box2的父元素(父元素当然也是前辈元素了)。box1是被参照元素,box2是改变位置的元素。

2、被参照的元素必须加入position:relative;

#box1{width:200px;height:200px; position:relative;}

3、定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了。

#box2{position:absolute;top:20px;left:30px;}

这样box2就可以相对于父元素box1定位了(这里注意参照物就可以不是浏览器了,而可以自由设置了)。

html+css大致就这样了,剩下的慢慢在实践中去学习吧,明天马上学习javascript.

每天叫醒自己的不是闹钟,是梦想!!!


0人推荐
随时随地看视频
慕课网APP