css杂项补充
程序员文章站
2022-07-04 20:13:04
css杂项补充 一、块与内联 1.块 独行显示 支持宽高,宽度默认适应父级,高度默认由子级或内容撑开 设置宽高后,采用设置的宽高 2.内联 同行显示 不支持宽高 margin上下无效果,左右会起作用,padding不会影响它的高度,背景会影响。 一般不设置内联的margin和padding 3.内联 ......
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; }