第五课-默认显示类型与显示类型转换
第五课-默认显示类型与显示类型转换
盒模型=元素
标准盒模型
content padding border margin
块级盒模型 行内盒模型 行内块盒模型
一、什么是显示样式
（一）常用显示样式 display:block；
（二）常用显示样式 display:inline-block;
（三）为什么需要默认显示样式
在前端诞生之初，只有HTML没有CSS，为了保证这些HTML标签展示的内容能够给用户提供较高的可读性，浏览器自己默认设置了一些排版规则，这些规则就是默认样式的前身。
简单来说，浏览器默认样式的目的是为了在用户的样式不起作用或是用户没有给网页设置样式的情况下，保证网页内容最基本的可读性
（四）浏览器内核
内核名称:Trident(IE内核)->IE系列/360浏览器/猎豹浏览器/百度浏览器/世界之窗-> -ms-
Gecko(Firefox内核)->火狐浏览器 -moz-
//Presto(Opera前内核)(已弃用)
Opera现已改用Google Chrome的Blink内核 -o-
Webkit(Safari内核,Chrome内核原型,开源)->苹果Safari浏览器/安卓默认浏览器 -webkit-
Blink->Chrome(谷歌自主研发) -webkit-
现在最新版的浏览器基本都支持css3 基本都不用写前缀 ，写前缀是为了向前兼容老版本的浏览器
（五）默认显示样式
二、显示类型转换
（一）三种显示类型特征
1. 块级元素特性
block: (div/p/dl/form/h1-h6/ol/ul) div,h1~h6,p, ul>li ol>li dldtdd form表单
1.独占一行
2.高度由里面的元素撑开，高度不写,由里面内容撑开
3.宽度默认100%(继承父元素宽度)，
4.可以设置外边距/内边距，支持margin padding auto
5.可以包裹其他任意元素
6.p标签不可包裹块级元素(只存放文本)
2.行内元素特性
inline: (a/b/em/i/img/span) span a b i strong img input
1.和其他行内元素处于同一行
2.不支持宽高
3.上下外边距无效,auto无效(不支持auto居中)不支持margin-top bttom, padding-top bttom 左右有效上下无效
4.内边距只对内联元素产生影响.无视块元素
5.标签之间的空格解析
6.a标签能包裹块级元素(特殊,区域链接)
3. 行内块元素特性: (集合两种盒模型的特征)
inline-block: (input),img
1.本质上是行内元素,具有行内元素的性质
2.支持宽高
3.上下外边距有效,auto无效(不支持auto居中)
4.内边距只对内联元素产生影响.无视块元素
5.标签之间的空格解析
6.img标签不是行内块元素(是行内元素,但是可以设置宽高，这源自于历史…)
7.本质上还是行内元素,具有了块元素的特性
4.块级与行内元素与行内块元素
1.行内元素 不支持宽高(width height)
2.行内块元素 支持宽高 只支持left right 不支持 top bottom
3.块级元素 是支持宽高 left right top bottom 独占一行
5.行内空白符问题
6.元素的显示与隐藏 display：none
隐藏对象:
display: block有显示的意义,和display: none;隐藏不显示
特点:
- 不占据空间（如同消失一般）,无法点击交互
- 内部子元素也不会显示
- display为none的元素浏览器不会渲染
（二）默认样式清除
新一代样式重置规则normalize.css
normalize.css的目标如下：
保留有用的浏览器默认值而不是删除它们。
规范化各种HTML元素的样式。
纠正常见的浏览器的错误不一致。
提高可用性。
使用注释和详细文档解释代码。
它支持各种浏览器（包括移动浏览器），并包括用于规范化HTML5元素，排版，列表，嵌入内容，表单和表格
方便调试，避免大量继承样式导致的调试界面混乱问题
http://nicolasgallagher.com/about-normalize-css/
（三）类型转换
块元素 转成 行内块 行内
行内块 转成 块元素 行内
行内 转成 块元素 行内块
转换方法：
display:block 块元素
inline; 行内元素
inline-block 行内块元素
dispaly:none; 隐藏元素之后怎么显示 从页面上消失了
:hover 伪类选择器 css样式里面
当鼠标移动到元素上面是生效后面css样式
opacity:0~1 元素透明 还在在页面上
不透明
浙公网安备 33010602011771号