css杂项补充

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;
}