some tips about web design III_html/css_WEB-ITnose

关于css中定位(position):

static : 无特殊定位，对象遵循HTML定位规则

absolute : 将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过css z-index属性定义。此时对象不具有边距，但仍有补白和边框

relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置

简单的说

absolute直接相对于文档位置加以定位,可以重叠,用z-index来区分优先,同样的,不再具有外边距(因为不再相对于其他元素进行定位)

relative则是根据原本该元素应该显示的位置,进行偏移定位,这个时候存在外边距,但是不能和其他元素重叠

要想把几个不随缩放而改变相对定位的div的css写好,最好的方法是放到一个父div里,这个父div用relative 居中定位。

关于css3新东西

css3引入vw vh 作为长度宽度的单位

vw:view width

vh:view height

其实也就是整个当前视图按百分比区别的高度和宽度

比如100vh就是当前的整个视图高度

css3中的梯度渐变

background-image: -webkit-radial-gradient(50px 150px at 200px 150px,hsla(120,70%,60%,0.9),hsla(360,60%,60%,0.9));

50px是椭圆的主要半径,150是纵向的次要半径

at 后面是圆心位置,然后是要渐变的两个颜色

也可以不要 xxxx at xxxx,只是指定个circle 就是圆形