标签：自动换行 图片 特点 外边距 url html5 方式 red spl
专题：
一、行内元素与块状元素
1、块状元素
特点：默认占一整行、可以自动换行、可以设置大小
常见块状元素：div、li
2、行内元素
特点：不能设置宽高，内容有多大，我就有多大；
对margin仅设置左右方向有效，上下无效；
对padding设置上下左右都有效，即会撑大空间
不会自动进行换行
常见的行内元素：span、input
3、行内块状元素
特点：不自动换行，能够识别宽高，默认排列方式为从左到右
#kuaizhuang1{ width: 200px; height: 100px; background-color: red; float: left; } #kuaizhuang2{ width: 300px; height: 100px; background-color: gold; float: left; } #kuaizhuang3{ width: 300px; height: 100px; background-color: green; float: left; } #kuaizhuang4{ width: 300px; height: 100px; background-color: blue; float: left; } #hangneiyuansu{ background-color: cyan; width: 1000px; height: 1000px; color: orange; } <!--块状元素--> <div id="kuaizhuang1"></div> <div id="kuaizhuang2"></div> <div id="kuaizhuang3"></div> <div class="qcfd"></div> <div id="kuaizhuang4">这是块状元素</div> <div class="qcfd"></div> <!--行内元素--> <span id="hangneiyuansu">这是行内元素</span>
二、块状元素与行内元素的相互转换 display
1、转行内 inline
2、转块状 block（块）
3、转行内块状 在HTML5中，程序员可以自定义标签，在任意定义标签中，加入display:block;即可，当然也可以是行内或行内块状。-block
<!--相互转换--> <div style="display: inline; width: 100px; height: 100px; background-color: red;">这是块状元素转行内元素测试</div><br /> <div style="display: inline-block; height: 100px; background-color: green;">这是块状元素转行内块状元素测试</div> <div style="width: 100px; height: 100px; background-color: red;">这是块状元素这是块状元素</div> <span style="display: block; width: 200px; height: 200px; background-color: green;">这是行内元素转块状元素测试</span> <span style="display: inline-block; height: 200px; background-color: red;">这是行内元素转行内块状元素测试</span>
三、元素属性
1、间距
margin 外边距
padding 内间距
2、浮动
float：漂流
clear-both：清除漂流
#daohang{ width: 510px; height: 50px; border: 1px solid blue; } .dh{ width: 100px; height: 48px; background-color: burlywood; color: red; float: left; line-height: 48px; text-align: center; border: 1px solid red; } <div id="daohang"> <div class="dh">语文</div> <div class="dh">数学</div> <div class="dh">英语</div> <div class="dh">物理</div> <div class="dh">化学</div> </div>
标签：自动换行 图片 特点 外边距 url html5 方式 red spl
原文地址：https://www.cnblogs.com/zhengleilei/p/8976609.html
