样式初始化、display、外边距合并

一、标签样式初始化
css reset原则:但凡是浏览默认的样式,都不要使用。
  body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
  ol,ul{margin:0;padding:0;list-style:none;}
  a{text-decoration:none;}

二、标签的两大阵营
大多数 HTML 元素被定义为块级元素或内联元素。根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级”元素;而span元素的默认display属性值为“inline”,称为“行内”元素。

三、块和内联特征
块级标签特征:  display属性默认为block
1、独占一行,不和其他元素呆在一行
2、可以设置宽高、外边距和内边距
3、没有宽度时默认宽度100%
4、可以容纳内联元素和其他块元素
常见块级标签:div、h1、p、ul、ol、dl、hr、table 

内联(行内)标签特征:  display属性默认为inline
1、性情温和,喜欢和其他内联元素呆在一行
2、不支持设置宽高
3、内容撑开宽高,宽高就是它的文字或图片的宽高,不可改变
4、只能容纳文本和其他内联元素
5、不支持上下margin,上下padding只对自身有效
常见内联(行内)标签:span、strong、em、a、i

四、标签类型转换
display:block   显示为块  使内联元素具备块元素的特性
display:inline   显示为内联    使块级元素具备内联元素的特性  
display:none   隐藏元素,包括它的子元素,并且不在页面中占据位置

五、display:inline-block
Inline-block的特点和问题
特点:
1、块级可以(横排展示)  ——友好
2、行内标签支持宽高
3、没有宽度的时候内容撑开宽度
4、支持margin

问题:
1、标签间空格 被解析
2、不支持margin:auto;
3、ie6 ie7 不支持块属性标
  签的inline-block;

六、外边距合并
外边距合并:当两个(垂直外边距)相遇时,它们将形成一个外边距,
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
1:当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。

margin

2:当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。

margin

注:只有普通文档流中块级的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

七、元素中文本的水平对齐方式
text-algin
left  把文本排列到左边
right  把文本排列到右边
center  文本水平居中

ӭע΢ŹںţruitiancnͶϵz_vae@sina.com

  •      性能一直以来是前端开发中非常重要的话题。随着前端能做的事情越来...
    2018-10-16 09:08
  •      与简单的网站相比,现代应用程序有更多不同的需求。但是,浏览器是...
    2018-10-15 17:44
  •      作为网页内容的一部分,图像和视频通常要消耗很多资源加载。要提高...
    2018-09-10 11:22