1、能够使代码精简。
使用cssdiv布局使代码变得精简,css文件可以在网站的任意一个页面进行调用,避免了使用table表格修改部分页面。
2、提升网页访问速度。
cssdiv布局较传统的Table布局比较,减少了许多代码,浏览访问速度得以提升,从而提升网站的用户体验度。
3、有利于优化。
采用cssdiv布局的网站对于搜索引擎很有帮助,简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。
不会今日学习内容:2D转换之位移、旋转(包括旋转原点的设置)、缩放、倾斜;3D转换之位移、旋转、缩放、倾斜。
总结如下要点:
(一)2D转换
(若想看到变换效果,要给图形的盒子设置过渡transition:3s)
1.位移
语法=>transform:translate(x,y)
其中x表示水平方向的位移(即左右),y表示垂直方向的位移(即上下)。
括号内最多只能有2个值,当只有1个值的时候表示水平位移。
值的大小可以为正数,也可以为负数。当值为负数的时候向反方向移动。
值的单位可以为像素(如100px,-100px),也可以为百分比(如50%,-50%)。当值用百分比来表示的时候,参照的是元素translate所在盒子的大小。
translate属性不脱标!
2.旋转
语法=>transform:rotate()
括号内表示旋转的角度,必须使用单位deg。
当括号内的值为正数时,表示顺时针旋转;为负数时,表示逆时针旋转。
你的div2没有包含在div1里,是不会出现你所说的问题的。要么就是你的css样式定义了div{...},这样所有div都会受影响。要两个互不影响,直接写.div1{...}和.div2{..}这样。如果不能理解,介意你把代码放上来。