欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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