css之元素的顯示方式
阿新 • • 發佈：2019-02-09
、元素的四種顯示方式
1、隱藏
典型代表: div ,p, h,ul....
特點:
獨自佔據一行
可以設定有效寬高
當發生巢狀的時候,如果沒有給子元素設定寬高,子元素的寬度和父元素一樣寬
<style type="text/css">
div{
width: 300px;
height: 200px;
border: 1px red solid;
}
p{
background-color: gray;
}
</style>
</head>
<body>
<div>div元素<p>段落元素</p></div>
</body>
3、行內元素
代表: span, em,a,strong....
特點:
例如：
<style type="text/css">
span,a{
width: 300px;
height: 200px;
border: 1px red solid;
}
</style>
</head>
<body>
<span>span標籤</span>
<a href="#">百度</a>
</body>
4、行內塊元素
代表:input,img...
<style type="text/css">
input,img{
width: 300px;
height: 200px;
border: 1px red solid;
vertical-align:middle;
}
input{
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<input type="button" value="儲存">
<img src="hbsi.png">
</body>
1、隱藏
2、塊級元素
典型代表: div ,p, h,ul....特點:
獨自佔據一行
可以設定有效寬高
當發生巢狀的時候,如果沒有給子元素設定寬高,子元素的寬度和父元素一樣寬
<style type="text/css">
div{
width: 300px;
height: 200px;
border: 1px red solid;
}
p{
background-color: gray;
}
</style>
</head>
<body>
<div>div元素<p>段落元素</p></div>
</body>
3、行內元素
代表: span, em,a,strong....
特點:
多個元素在一行內顯示
無法設定有效寬高
寬度由容器裡的內容決定例如：
<style type="text/css">
span,a{
width: 300px;
height: 200px;
border: 1px red solid;
}
</style>
</head>
<body>
<span>span標籤</span>
<a href="#">百度</a>
</body>
4、行內塊元素
代表:input,img...
特點:
多個行內塊在一行上顯示
可以設定有效寬高<style type="text/css">
input,img{
width: 300px;
height: 200px;
border: 1px red solid;
vertical-align:middle;
}
input{
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<input type="button" value="儲存">
<img src="hbsi.png">
</body>