资讯专栏INFORMATION COLUMN

css杂项补充

greatwhole / 2952人阅读

摘要:杂项补充杂项补充一块与内联一块与内联块块独行显示支持宽高,宽度默认适应父级,高度默认由子级或内容撑开设置宽高后,采用设置的宽高内联内联同行显示不支持宽高上下无效果,左右会起作用,不会影响它的高度,背景会影响。

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1752.html

相关文章

  • Linux——Linux驱动之杂项设备(基本概念、注册流程、杂项设备的驱动编写)

    摘要:系列专栏博主结合工作实践输出的,解决实际问题的专栏,朋友们看过来开发实战嵌入式通用开发实战嵌入式开发实战 【系列专栏】:博主结合工作实践输出的,解决实际问题的专栏,朋友们看过来! 《QT开发实战》 《嵌入式通用开发实战》 《嵌入式Linux开发实战

    ISherry 评论0 收藏0
  • 杂项】IntelliJ IDEA 安装

    摘要:安装使用全称,是编程语言开发的集成环境。同时该软件也支持多系统或者也完全支持该软件的使用笔者使用同时两版软件都支持安装版和解压版的使用。 IntelliJ IDEA 安装使用 IDEA 全称 IntelliJ IDEA,是java编程语言开发的集成环境。相信玩Java的猿们都不会错过的一款IDE,不过话是这样说,我自己也是从Eclipse神器转到Idea上来的,因此偏爱哪款IDE完全凭...

    vboy1010 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<