CSS（10）display和浮動
阿新 • • 發佈：2021-06-26
標準文件流
塊級元素 ： 獨佔一行
h1~h6 p div 列表...
行內元素 ： 不獨佔一行
span a img strong...
display
也是一種實現行內元素排列的方式，但是我們很多情況通用float
block 塊元素
inline 行內元素
inline-block 是塊元素，但是可以內聯，在一行
none
程式碼：
html：
css：
/*
block 塊元素
inline 行內元素
inline-block 是塊元素，但是可以內聯，在一行
none
*/
div{
width: 100px;
height: 300px;
border: 2px solid #779dbd;
display: none;
}
span{
width: 100px;
height: 300px;
border: 2px solid #779dbd;
display: block;
}
浮動
html：
css：
div{
width: 200px;
height: 500px;
border: 2px solid red;
}
div:nth-of-type(1){
display: inline-block;
float: left;
}
div:nth-of-type(2){
display: inline-block;
float: right;
}
div:nth-of-type(3){
display: inline-block;
float: left;
}