廊坊网络推广,安徽优化网站,如何制造一个网页,太原seo作为一名小前端#xff0c;块级元素、行内元素用了几千几万次#xff0c;除了“块级独占一行#xff0c;行内不独占”之外#xff0c;对细节属性的了解十分匮乏#xff0c;今天做以部分属性的测试和阐述。
一、 对物理属性的支持
元素类别widthheightpaddingmargin是否独…作为一名小前端块级元素、行内元素用了几千几万次除了“块级独占一行行内不独占”之外对细节属性的了解十分匮乏今天做以部分属性的测试和阐述。
一、 对物理属性的支持
元素类别widthheightpaddingmargin是否独占一行行内元素span,a等××√√×块级元素div,p等√√√√√既行内又块级√√√√×
备注行内元素的上下paddingpadding-top,padding-bottom无效可参考下例。
这是带有上下padding的效果 {background-color: #eee;padding-left: 20px;padding-top: 20px;padding-right: 20px;padding-bottom: 20px;border: 1px solid #666;
}这是去除了上下padding的效果 {background-color: #eee;
padding-left: 20px; padding-right: 20px; border: 1px solid #666;} 可见span元素的位置及文本内容相邻div元素的位置都没有发生改变只是上下padding为其渲染了对应的上下背景色。
二、行内元素如何转化块级
① display:block; 转化为普通块级
②display:inline-block; 转化为内联块级不单独占一行
③float: left/right转化为内联块级不单独占一行但float使得行内元素脱离了文档流记得使用clear清除浮动 span{float:left;width: 100px;height: 100px;background-color: #eee;padding-left:20px;padding-right:20px;border: 1px solid #666;}
!--对应的html代码--
spantest-span/spanspantest-span/spanspantest-span/spandiv styleclear: both;/divdiv stylewidth: 100px;height: 100px;background-color: lightblue;test-div/divdiv stylewidth: 100px;height: 100px;background-color: yellow;test-div/div ④使用定位
使用absolute或者fixed定位也可将行内元素隐式转化为块级元素但也会使之脱离原先的文档流。
综上float和定位都可以隐式的将行内元素转化为块级元素。
三、块级转化为行内元素
①display:inline; 转化为行内元素
②display:inline-block; 转化为内联块级不单独占一行
