html整体模块布局,HTML5布局之路 模块布局

1.hr分割线，br行内换行，仍然属于一个段落。

2.行内标签：span em strong var(斜)

3.display：block，块，前后带有换行符。inline：内联元素，前后没有换行

块元素特性：独占一行，能设置宽高，外边距设置生效。

行元素：默认内容撑开宽高，纵向外边距失效，横向生效。

input option等是行内块状元素。

display主要是用none和block。none不占空间，visibility：hidden占，但是也不显示。

4.块元素可以包含块元素和行元素，标题段落不能包含块元素，ins、del行元素可以包含块元素。

5.后代选择器：

选择器 选择器 {

}

6.子代：

选择器>选择器 {

}

ie6存在兼容问题

7.群组， 加逗号

8.优先级：叠加不进位，逗号分开算。

9.毗邻选择器：

➕连接，相邻的兄弟元素

10.div.wrap div .wrp

第一个之间没有空格表示类名为wrap的div元素

11.a标签：没有协议的链接是无效链接。

锚链接是id

空的一般用javascript:void(0)

12.cursor：pointer

13.img标签为了防止默认底部的像素空隙，可以设置float或者display：block，后者比较常用。

14.内容超出处理：

省略号：

xx {

overflow: hidden;

text-overflow: ellipsis;

word-break: keep-all;

white-space: nowrap;

}

后俩行让文字不换行，多行文字的话，则需要js。

overflow: scroll/auto 超出都会有滚动条，前者没有还是会有，后者没有不会有。

15.margin负值

子元素会从父内容去开始显示。

margin负值主要用于同类同级元素，原本应当是统一样式，但是由于布局需要，某一个或几个样式与其他元素样式有细微差别的场景。

另外，还可以用：first-child这种伪类选择器。