1.样式初始化 :1.*{margin:0; padding:0;}
2. ol ul list-style:none
3.a 标签取消下划线 text-decoration:none(默认值为underline)
4.img{border:0}
以上写进模板
2.块级元素:独占一行,可自行设置宽高。不写宽默认为父级宽,不写高度由内容撑开,一旦写宽高就固定了,可能会被溢出但不会被撑开。
子级如果设置宽高超出父级会溢出,不会仅在父级内。,内容过多也会溢出盒子。
display:block ,支持margin 以及margin:auto 和 padding
常见的块级元素:div
p
ul ol li
dl dt dd
form
h1~h6
块级标签可以嵌套其它元素:p h1-h6 不能嵌套 ul ol li dl dt dd 之间不能插其它元素。
行内元素不能嵌套块级元素,a标签可以套块级,但不会应用于布局。
行内块不能套块级
3.行内元素(内联元素) .1.可以与其它行内元素友好的横排显示,不独占一行
display:inline 2.不支持设置宽高,宽高由内容撑开,支持设置border.
3.margin 只支持左右的margin,但不支持上下的margin与margin:auto
4.支持padding
5.与块级元素重叠部分,以块级为主。
6.如果行内标签之间没连在一起,网页显示会解析出一个空格且受body里的字体大小影响。eg
解决方法一(不适用。会使代码臃肿):放在一起
解决方法二:body{font-size:0}(0的时候可以省略px)
7.存在基线对齐问题
8.常见的行内元素:span img a b strong
块级元素与行内元素可以通过display 来进行类型转换,来实现需要的功能,比如给a标签display:block就可以给他设置宽高。
display:block 块级
display:inline 行内元素
display:inline-block 行内块元素(不独占一行,但支持设置宽高,不写高度由内容撑开,不写宽度默认父级宽度支持具有块级元素范围的margin padding,如果行内块标签之间没连着写,也会像行内元素一样,会解析出一个空格,会存在一个基线对齐的问题。,基线指的是其内部文字的底部上面一点点,一般用来解决行内元素的宽高设置 margin问题。
网页中基本用浮动来做横排显示
img input 行内块元素