显示类型转换
页面中的所有内容都可以看成块和文字
我们去写一个盒子
div{
width: 100px;
height: 100px;
background-color: skyblue;
}
<div></div>
/*这个盒子能设置宽度,高度和背景颜色.
这时我们去写上文字的时候会发现.*/
我要忘了你的样子
<div></div>
我要忘了你的样子
/*无论文字是写在盒子前面还是后面.
都可以发现盒子不愿意和文字在同一行.
这就是这个盒子的特点.
其实我们页面上还有另外一个盒子*/
span{
background-color: skyblue;
}
<div></div>
我要忘了你的样子<span>我要忘了你的样子</span>我要忘了你的样子
/* 此时span这个盒子和其他文字排成了一排.
所以我们这里可以总结一个规律,页面中有两种类型的标签.
一种是div类型为代表的的标签,一种是span类型为代表的标签.
div标签可以看成我们盒子,span可以看成文字 */
盒子:块级元素,就像单独的单元块.
文字:行内元素,就是一行文字当中的元素.
我们打开开发者检查这个div盒子,里面有个display的属性是block;这就是告诉游览器这个盒子是块级元素.
display:展示,表现.
display:block; 以块级盒子的形式去展现.
我们打开开发者去看下span盒子,可以看到已经按照游览器默认的情况写出了元素类型
span标签的display:inline;行内元素; 以一行文字的形式去展示.
我们之后研究代码的时候,都可以打开开发者工具去查看元素的类型.
我们可以看到body标签也是块级元素,但是head标签是display:none;
display:none;特点:
不占据空间（如同消失一般）,无法点击交互
内部后代元素也不会显示
display为none的元素浏览器不会渲染
常见的块级元素
- div/p/dl/form/h1-h6/ol/ul/li
<ul>
<li></li>
<li></li>
</ul>
/*li标签其实也能算作块级元素之中.但还是有点点不同,不同在哪呢?
打开开发者工具我们可以看到li的display为List-item;但其实我们可以把这个当成是blcok.
因为页面中所有标签分为可以分成两类,第一个是block单独占一行,第二个是Inline可以混入文字 其中的.
我们这里li虽然display是list-item,但是他表现几乎跟块元素一样.*/
常见的行内元素
- a/b/em/i/img/span/strong
块级元素的特点
1.独占一行;
2.可以设置宽高;
3.默认宽度是父元素的100%;
行内元素(内联元素)的特点
1.不独占一行,前后都能跟内容.
2.行内元素就不能设置宽高.
span{
width: 100px;
height: 100px;
}
/*不能设置宽高,由里面的文字所撑开.
但是有一个例外就是我们的img标签*/
img标签是唯一一个能够去设置宽高的行内元素
img{
width:500px;
height:500px;
}
/*能够设置宽高,但不独占一行.
很多人都把理解为行内块元素.但其实不是的.
因为img确实是行内元素,但它也是置换元素
置换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。
例如浏览器会根据<img>标签的src属性的值来读取图片信息引入图片来进行显示，存储在代码之外的.
而如果查看HTML代码，则看不到图片的实际内容；
这些元素拥有内在尺寸 内置宽高 他们可以设置width/height属性.
他们的性质同设置了display:inline-block的元素一致。*/
块元素特点
3.结构上:内部可以包裹其他任意元素
但是:p标签里面不能放块级标签
<p>
123
<div>456</div>
<p>789</p>
</p>
/*P标签遇到块级元素会自动的加上结束标签*/
行内元素的特点
3.结构上:内部不能放块元素
但是a标签能包裹块级元素(特殊,区域链接).
我们a标签主要是跳转,可是你会发现有些不只有文字能点击,其它盒子也能够点击.
所以a标签能包裹块级元素.
但是a标签里面不能包裹a标签
<a href="">
123
<a href="">789</a>
</a>
/*a标签里面遇到第二个a标签又会被阻断,分为两部分*/
块级元素特点
4.正常的外边距和内边距
行内元素特点
上下外边距无效,左右外边距有效但auto居中无效.
内边距只对内联元素产生影响.无视块元素
div{
width: 300px;
height: 300px;
background-color: skyblue;
}
.one{
margin:10px 20px;
}
<span class="one">我要忘了你的样子</span>
<span class="two">在我的怀里</span>
<div></div>
div{
width: 300px;
height: 300px;
background-color: skyblue;
}
.one{
padding: 10px 20px;
background-color: lightgreen;
}
<span class="one">我要忘了你的样子</span>
<span class="two">在我的怀里</span>
<div></div>
行内块的元素的特性
inline-block: (input,select)
**本质上是行内元素,具有块内元素的性质.**对外显示行内元素,对内显示块元素
支持宽高
上下左右外边距有效,不支持auto水平居中
支持上下左右内边距
标签之间的空格解析
解析空格
针对于行内元素(文本)而出现的效果.
html换行被解析为空格也是常说的3像素空隙的问题,其实不只是换行,.
空格或者tab缩进产生的距离都会被解析为了一个空白的文本
解析空格原理:换行也叫作空文本节点，会被保留为一个空格.
span{
background-color: lightgreen;
}
<span class="one">我要忘了你的样子</span>
<span class="two">在我的怀里</span>
ul>li{
width: 50px;
height: 50px;
background-color: skyblue;
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
/*我们想让它水平排列,我们得把这些块元素转换为行内块元素*/
ul>li{ display:inline-block; }
/*现在从左往右一排排列,中间的空隙是怎么来的.
其实就是游览器把换行解析成了"空白节点"*/
解析空格解决办法
- 删除标签之间空格 缺点：不利于文档格式化，对开发者不友好
- 设置margin-left为负值 缺点：不同浏览器间隙不同，需要设置多次
- . 给行内块元素父级设置字体大小为零,行内块元素字体大小重新设置 这是目前最通用的做法
性能方面
000(黑色) 4个字符
black黑色 5个字符
区别:代码性能上的区别
页面的代码量的角度分析
看到页面的代码
1.输入网址,按下回车
2.访问服务器的ip,请求资源,发送资源
3.经过网络传输到你的电脑上.
4.渲染展示.
1.好不好看
2.打开快不快
默认样式
body,p,ul,h1,h2,h3,h4,h5,h6{
margin: 0;
}
ul{
padding-left: 0;
list-style: none;
}
a{
text-decoration: none;
color: #222;
}
鼠标样式
使用cursor属性,设置鼠标样式
- cursor:pointer; 小手掌 ==>常用
- cursor : move 表示对象可以移动
- cursor:wait 表现正在加载
- cursor:help 表示需要帮助
- cursor :url(“5.png”),pointer; 自定义鼠标样式
渐进增强认为应该专注于内容本身。一开始针对低版本的浏览器构建页面，满足最基本的功能，再针对高级浏 览器进行效果，交互，追加各种功能以达到更好用户体验,换句话说，就是以最低要求，实现最基础功能为基本，向上兼容。
优雅降级指的是一开始针对一个高版本的浏览器构建页面，先完善所有的功能。然后针对各个不同的浏览器进行测试，修复，保证低级浏览器也有基本功能 就好，低级浏览器被认为“简陋却无妨 (poor, but passable)” 可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。也就是以高要求，高版本为基准，向下兼容。
- 二者区别
采用渐进增强,先做基本功能,再针对各个游览器渐渐增加功能,相对优雅降级,开发周期长,前期投入资金大,你想拿一个基础功能版给客户看,多寒酸.但是也有好处,提供了好的平台稳定性,维护资金少,长期降低成本
优雅降级可以在较短时间,开发出只用于一个游览器的完整功能版,这时候你拿给客户谈底气就会很足,可以进行市场试水,对于功能尚未确定的产品,优雅降级不失为一种节约成本的方法.
