样式初始化和元素类型---雀雀老师

样式初始化: 

标签写出来后,还没有写css样式 ,浏览器为了 让代码有最基本的可读性,就会默认一些样式.

为什么要初始化? 

1 默认样式 在不同的浏览器表现的效果不一样,(处理兼容问题)

2 有的默认样式的存在 不利于我们对样式的设置.

3 可以对具体相同样式的标签,统一设置. 如 : 通配符的使用.(通配符在设计中不建议使用.会造成性能的浪费.)

还有一种方法,谁需要取消,就都选择在一起,统一设置 ,叫做多元素选择器. 用 逗号 隔开.

如天猫里面的设置:

有专门的样式初始化文件.

引入文件即可. 会自动取消一些还有自动保留一些.会保持可读性.

 

 

 

https://necolas.github.io/normalize.css/8.0.1/normalize.css ;

怪异盒模型 原理是把内容向内压.

普通盒模型计算方法:是加上边框线, 及margin等值,会把盒子撑大.

而用了怪异盒模型.就不用计算了. 具有兼容问题. 不建议使用. 怪异盒模型在手机端里用的比较多.

 

怪异盒子用在: 天猫 布局中如下:

 

 

元素类型

块级元素. 布局的那些都是块级 元素, 特点:1  独占一行 .  2支持宽高.

行内 (内联) 是充当内容的.

 

不设置宽高的时候: 自动撑开

设置宽高后 就规定了.什么都撑不开了. 就会溢出.

3 块级元素 是支持 margin  paddign  的, 是唯一一个支持 auto 的.即, margin :20px; auto;

4 块级元素内部是可以包裹,嵌套其他任意 的标签. 具有了布局的意义 

但是, P 标签却是个 个例 不能包裹 块级元素. 可以包裹,span

h1-h6 标签里也不能来 嵌套跨级标签

如何检验是否是块级元素:

1 设置下宽高 ,看是否可以 呈现出来.

2 在审查元素中, 查看默认的样式,如果有 ,display : block.

内联元素:

1  友好地 和其他行内元素,横排显示.(不能和块级元素并列,块级是独占的.)

2  不支持.宽高  由内容撑开.

3 内联的margin 只支持左右,不支持上下. 不支持 auto

4 行内元素之间会解析空格 , 空格的大小跟文字的大小相关. 

给父级去设置 font-size : 0;  就可以实现 去掉 解析出来的空格

思路是:  先把父级的 去掉, 然后 ,再把子元素的 给回来.

 

5 基线对齐:

基线到底线的距离表现出 下面的一点距离,如上图

6 行内元素是不能嵌套任意的块级元素的. 但 a  标签例外.可以包裹任意的块级元素

 

元素类型的转换:

1 变成行内块,

2 行内变成块级 display: inline-block;

行内块的特性

1 横排显示;

2 支持宽高.

不设置宽高:  由内容撑开. 和行内很像

3 margin 和padding  的支持程度,  

4 缺点: 会解析空格,会基线对齐.  所以,后面会用到 浮动.

 

display :none;

是为了 隐藏元素