css的元素的显示模式
元素的显示模式：指的是将标签分成不同的种类，我们可以更好的选择使网页得到更好的布局
分为块元素（div一行只要一个）和行内元素（span一行中好几个）
块元素：
h1 -h6 p div ul ol li
特点：
1.独占一行
2.高度、宽度、外边距，内边距可以自己独立控制
3.默认宽度是父级宽度的100%
4.是一个容器里面可以放入其它行内元素或者块级元素
----------注意：文字类的标签不允许在放其他的块级元素了
------------------------------------------------------------------------
行内元素
a strong b em i del s ins u span 等等
特点：
1.一行上可以显示多个行内元素
2.宽度和长度直接设置是无效的
3.默认长宽是本身的文字长度
4.不允许放块级元素，只能放文本和其他的行内元素
---------注意：链接里面不能放链接，
-------------特殊情况a里面可以放块级元素，但是需要转化一下块级模式比较安全。
---------------------------------------------------------------------------------------------------------------------------------------------
行内块元素
img input td
特点：
1.和相邻的行内元素在一行上，但是他们之间会有空白缝隙，一行可以显示多个
2.默认宽度就是它本身文本的宽度
3.高度宽度外边距以及内边距都可以自主控制
---------------------------------------------------------------------------------------------
显示模式的转换
例如： 想要增加a链接的显示范围，
---------------------------------------------------------------------
a {/*这里可以不用link因为用了之后不成功所以我们及直接选择给所有连接设置样式*/ color: teal; text-decoration-line: none; display: block;/*转换行内元素为块级元素*/ width: 150px; height: 50px; background-color: pink; /*这里必须精确到decoration下面的某一个具体属性否则就是全部改我们上面的color也不会起作用*/ } --- div { /* width: 250px; height: 50px;*/ background-color: royalblue; /*把div转化成行内元素*/ display: inline; } span { width: 100px; height: 50px; background-color: saddlebrown; display:inline-block; /*改成行内块元素*/ }</style> </head> <body> <input type="text"> <input type="text"> <input type="text"><br> <a href="#">小猪佩奇</a><br> <a href="#">猪头森</a><br> <a href="#">桃子</a> <a href="http://www.baidu.com">百度</a> <div>我是块级元素</div> <div>我是块级元素</div> <span>行内元素</span> <span>行内元素</span>-------------------------------------------- 模式转换经常会转化成块级元素可以进行设置宽高 标签：行内,color,元素,一行,HTML,day11,宽度,div From： https://www.cnblogs.com/222wan/p/17205676.html