块级元素
div {
width: 100px;
height: 200px;
color: aqua;
background-color: blanchedalmond;
将div转为行内块级元素
行内块级元素之间又会有空隙且在一行内显示
display: inline-block;
}
行内元素
span {
width: 200px;
height: 200px;
color: bisque;
background-color: aquamarine;
将span 转为块级元素，之前的span是在一行内显示，转换为块级后
display: block;
}
行内块级元素
input {
background-color: blue;
width: 100px;
height: 100px;
转为块级元素
display:block;
}
块级元素
这个也是块级元素
行内元素 这个也是行内元素display不仅有将盒子转换为块，行内块，行内元素，还有另一种用法就是隐藏元素 隐藏元素，但是不占有位置 display: none; 显示元素，也不占有位置 display: block;
还有另一种元素隐藏是visibility，但是还占有位置 visibility: hidden; 元素可视，还是占有位置 visibility: visible;
display和visibility最大的区别是 display隐藏或者不隐藏都不占有位置 但是visibility不论是隐藏还是不隐藏都占有位置
1.这个单词如果文字显示不开不自动换行，强制不换行 white-space: nowrap;
溢出 overflow: visible; 隐藏多出来的元素 overflow: hidden; scroll 溢出的部分显示滚动条,不溢出也显示滚动条 overflow: scroll; auto 溢出的时候显示滚动条，不溢出的时候不显示滚动条 overflow: auto;
