宏观看css
分为css2.1 和css3
css2.1的目的是实现网页的基本布局;
css3 本质上并没有改变,只是增强了css2.1的功能,实现网页炫酷的效果;
css3主要放在学完js和jQuery 之后在学习。
今天主要学习css2.1版本,制作静态页面,那么css2.1中到底学习哪些东西?
css2.1:选择器,文字样式属性,盒模型,浮动,定位(绝对定位,相对定位),精灵,背景图。
原理:
标准文档流:符合你的书写模式,从左至右,从上至下书写。
脱离标准文档流:浮动,绝对定位,固定定位
清除浮动:clear:both;内墙法,外墙法,设高度,overflow:hidden;
定位:子绝父相;
盒模型:padding 和border 都是外扩的。
width不写会自动撑满,块级元素,行内元素,还有一个选择器权重问题。
补充一个小知识点:在制作网页的过程中,鼠标触碰导航条选项,有时候会遇到增加一条边框,造成抖动,影响后面的选项。有两个解决办法
一:一开始就设置好边框,让边框为透明,这样在触碰的时候改变颜色就行了
border:1px solid transparent
:hover 时候 改变颜色
二:padding 和border 相互变动,总的宽高不变
一个盒子的宽高包括了padding 和border 和width ,当border增加时候,就让padding减少就可以了,这样盒子的总宽高会保持不变。
PS:现在的企业基本很少用css2.1去写页面了,基本上都是用框架,如react ,vue 实现了。