1 块级元素
1-1特点
-独占一行,一行只能显示一个
-宽度默认是父元素的宽度,高度默认由内容撑开
-可以设置宽度
2 代表标签
div, p, h系列 ,ul ,li ,dl ,dt ,dd ,form, header·······
3-浏览器显示
3-1代码div显示为独占一行;宽度是body的宽度;
![](https://img.haomeiwen.com/i9717508/2d335e7b2794fe7d.jpg)
3-2其他的块标签在浏览器中的显示
![](https://img.haomeiwen.com/i9717508/5033f9c30df799a4.jpg)
3-3 添加了宽高后,能生效;
类选择器截图
![](https://img.haomeiwen.com/i9717508/acf9f27c232ac01d.jpg)
添加了类选择器的块级标签显示的内容;
![](https://img.haomeiwen.com/i9717508/527d79cfa7980c82.jpg)
总结,块级标签,可以独占一行,宽度是父级标签的100%,给予宽高时,可以显示出背景的宽高。
4 行内标钱
4-1显示特点
-一行可以显示多个
-宽度和高度默认有内容撑开
-不可以设置宽高
代码:
![](https://img.haomeiwen.com/i9717508/54a88660214c9b88.jpg)
浏览器显示
![](https://img.haomeiwen.com/i9717508/1b76cb0829f38124.jpg)
4-2 行内标签对比
类选择截图
![](https://img.haomeiwen.com/i9717508/82c37e1cd851abcb.jpg)
对比代码截图
![](https://img.haomeiwen.com/i9717508/0ea0b6baed512921.jpg)
浏览器显示截图:
![](https://img.haomeiwen.com/i9717508/134abe5e690fde06.jpg)
浏览器显示不论加不加背景,行内块都是显示的不换行,背景颜色都在内容行内显示。
4-3参照对比
类选择截图
![](https://img.haomeiwen.com/i9717508/58fe5b897eba3220.jpg)
代码和浏览器显示对比
![](https://img.haomeiwen.com/i9717508/5be2c174a2a7c91e.jpg)
![](https://img.haomeiwen.com/i9717508/ea533c5a10c73a2e.jpg)
![](https://img.haomeiwen.com/i9717508/9d6f1caf9cf7ede1.jpg)
![](https://img.haomeiwen.com/i9717508/33de1356cac0b427.jpg)
span标签是个行内标签,给他赋予了宽高也是在行内内容显示。
其他标签给予宽高会有相应的变化。
4-2代表标签
a,span,b,u,i,s,strong,ins,em,del,````
(仅为个人自学的一点点思考,如有错漏,欢迎留言指正)
网友评论