上海做网站优化的公司,建设网站服务器选择,河北邢台做网站,天津大学新校区建设网站css元素显示模式 1. 元素的显示模式1.1 块元素1.2 行内元素1.3 行内块元素 2. 元素根据显示模式分类3. 修改元素的显示模式 1. 元素的显示模式
1.1 块元素
块元素的特性#xff1a;
在页面中独占一行#xff0c;从上到下排列。默认宽度#xff0c;撑满父元素。默认高度
在页面中独占一行从上到下排列。默认宽度撑满父元素。默认高度由内容撑开。可以通过 css 设置宽高。
style.first {width: 100px;height: 100px;background-color: blue;}.second {height: 100px;background-color: green;}.third {background-color: red;}
/stylediv classfirst第一个块元素/div
div classsecond第二个块元素/div
div classthird第三个块元素/div1.2 行内元素
行内元素的特性
在页面中不独占一行从左到右排列。默认宽度由内容撑开。默认高度由内容撑开。无法通过 css 设置宽高。
style.first {background-color: blue;}.second {background-color: green;}.third {background-color: red;}
/stylespan classfirst第一个行内元素/span
span classsecond第二个行内元素/span
span classthird第三个行内元素/span1.3 行内块元素
行内块元素的特性
在页面中不独占一行从左到右排列。默认宽度由内容撑开。默认高度由内容撑开。可以通过 css 设置宽高。
style.first {background-color: blue;}.second {height: 100px;width: 100px;background-color: green;}.third {background-color: red;}
/styleinput classfirst placeholder第一个行内块元素/
input classsecond placeholder第二个行内块元素/
input classthird placeholder第三个行内块元素/2. 元素根据显示模式分类
块元素
html、body、h1-h6、hr、p、pre、div ul、ol、li、dl、dt、dd table、tbody、thead、tfoot、tr、caption form、option
行内元素
br、em、strong、sup、sub、del、ins、a、label
行内块元素
img、td 、th、input、textarea、select、button、iframe
3. 修改元素的显示模式
/* block设置为块元素 */
/* inline设置为行内元素 */
/* inline-block设置为行内块元素 */
/* none隐藏元素 */
选择器 {display: block;
}
