网页布局
- 单列布局
- 双列布局
- 三列布局
- 混合布局
单列布局
其中单列布局最为简单,一般应用于搜索引擎主页。 单列布局在于设置块状元素居中,只需设置margin:0 auto;(前面的0是上下外面局,可任意设置)。
双列布局
两列布局在于设置中间主体并排分布,在左边的块设置float:left,在右边的块设置float:right即可,当然要使两者的width之和等于某一设定值。
三列布局
在两列布局的基础上再将中间块进行二次分割,方法一致
混合布局
由于中间主体设置了float,最后的footer需要通过清除浮动来正确显示在主体下方,clear:both。
元素定位
Value (position属性)Description
static默认值。没有定位,元素出现在正常的流中。
absolute生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。
relative生成相对定位的元素,相对于其正常位置进行定位。
fixed生成绝对定位的元素,相对于浏览器窗口进行定位。
inherit规定应该从父元素继承 position 属性的值。
sticky基于用户的滚动位置来定位。
relative
相对于自身的定位,可以通过调节top,bottom,left right给定一定的数值完成不同方向的移动定位。再给元素添加定位之后,该元素层级会提高。
absolute
给一个元素设定absolute属性后,该元素会相对于祖元素中第一个定位元素定位(不包括static)
fixed
fixed是一种特殊的absolute,fixed总是以body为定位对象的,按照浏览器的窗口进行定位。一般网页中的小广告都是通过fixed定位实现的。
sticky
粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。 它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。 元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。 这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。一般网页的导航栏会使用这样的定位。
选择器
id选择器(#加id名)
class选择器(.加class名)
style选择器(内敛属性,直接在相对应的元素添加style设置属性)
标签选择器(使用标签名选择)
后代选择器(通过一级一级向下选择,通过空格键或者>号连接)
群组选择器(具有相同属性的不同类或者不同元素是,可以在选择器之间以英文格式的逗号隔开选择)
优先级
内敛 > ID > class > 标签选择器