css杂项补充
一、块与内联
1.块
独行显示
支持宽高，宽度默认适应父级，高度默认由子级或内容撑开
设置宽高后，采用设置的宽高
2.内联
同行显示
不支持宽高
margin上下无效果，左右会起作用，padding不会影响它的高度，背景会影响。
一般不设置内联的margin和padding
3.内联块
同行显示，之间有间距(间距产生原因是空格)
支持宽高，宽高由内容撑开
可以设置宽高，设置其中一个，另一个等比缩放
二、属性补充
1.overflow
指定内容溢出元素的框，会发生什么。
| 值 | 描述 |
|---|---|
| visible | 默认值 |
| hidden | 内容被修剪，超出内容不可见 |
| scroll | 内容被修剪，滚动条显示 |
| auto | 如果内容超出，便修剪，滚动条显示 |
| inherit | 从父元素继承 |
三、隐藏
盒子之间会相互影响，可以设置隐藏
1.以背景颜色透明度隐藏(了解)
background-color: transparent;
盒子还在，内容或子级标签会被显示，例如盒子中有文本，盒子被隐藏，文本会被显示
2.以盒子透明度隐藏
opacity: 0;
值:0~1
盒子真正意义上透明，但盒子区域占位还在
3.display
display:none;
将盒子从文档中移除，盒子的区域占位消失，当盒子重新获得显示时，该盒子依旧从消失位置显示。
四、画图
1.画梯形
html:
<div class="bd"></div>
css:
.bd {
width: 100px;
height: 100px;
background-color: transparent;
}
.bd {
/*border: 50px solid orange;*/
border-top: 50px solid orange;
/*border-right: 50px solid cyan;*/
/*border-bottom: 50px solid yellow;*/
/*border-left: 50px solid blue;*/
border-right: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid transparent;
}
通过设置边框实现
2.画三角形
.bd {
width: 0;
height: 0;
}
.bd {
border-top: 50px solid orange;
border-right: 50px solid cyan;
border-bottom: 50px solid yellow;
border-left: 50px solid blue;
}
