网页布局
- 单列布局
- 双列布局
- 三列布局
- 混合布局
单列布局
其中单列布局最为简单，一般应用于搜索引擎主页。 单列布局在于设置块状元素居中，只需设置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 > 标签选择器
网友评论