CSS样式更改——多列、元素是否可见、图片透明度

数字码影说
• 阅读 123

前言

上篇文章主要讲述了CSS样式更改中的过渡、动画基础知识,这篇文章我们来介绍下CSS样式更改中多列、元素是否可见、图片透明度知识。。

1.多列 DoubleCol

1).创建多列

div
{
-moz-column-count:2;   /* Firefox */
-webkit-column-count:2; /* Safari 和 Chrome */
column-count:2;
}
div被分隔成两列

2).规定列之间的间隔

div
{
-moz-column-gap:30px;    /* Firefox */
-webkit-column-gap:30px;  /* Safari 和 Chrome */
column-gap:30px;
}
规定列之间30像素的间隔

3).列规则

div
{
-moz-column-rule:1px dotted red;  /* Firefox */
-webkit-column-rule:1px dotted red;  /* Safari and Chrome */
column-rule:1px dotted red;
}
column-rule-width   列之间的宽度规则
column-rule-style   列之间的样式规则
column-rule-color   列之间的颜色规则

4).规定列的宽度和列数

div
{
columns:10px 3;
-moz-columns:10px 3; /* Firefox */
-webkit-columns:10px 3; /* Safari 和 Chrome */
}
column-width   列的宽度
column-count   列数

5).填充列

div
{
column-fill:auto;
}
balance 列处理
auto   自动填充

2.元素是否可见Visibility

div{
  visibility:hidden
  }
visible      元素可见
hidden      元素不可见
collapse     用在表格中元素可见,其它标签元素不可见

3.图片透明度0pacity

opacity:0.4  范围为0~1的小数
filter:alpha(opacity=100) 范围为0~100的整数

参考文档:W3C官方文档(CSS篇)

总结

这篇文章主要介绍了CSS样式更改篇中的多列、元素是否可见、图片透明度知识,希望让大家对CSS样式更改有个简单的认识和了解。
想要学习更多,请前往Python爬虫与数据挖掘专用网站:http://pdcfighting.com/
想学习更多Python网络爬虫与数据挖掘知识,可前往专业网站:http://pdcfighting.com/

点赞
收藏
评论区
推荐文章
菜园前端 菜园前端
2年前
什么是 CSS?
原文链接:什么是CSS?CSS指层叠样式表(CascadingStyleSheets),理解为CSS样式就可以了。CSS样式有什么作用呢?比如我们在页面中添加了一个div,我想给这个div设置宽度、高度、背景色、阴影、内容字体样式等等,就是通过CSS样式来
kenx kenx
4年前
MySQL查询结果集字符串操作之多行合并与单行分割
前言我们在做项目写sql语句的时候,是否会遇到这样的场景,就是需要把查询出来的多列,按照字符串分割合并成一列显示,或者把存在数据库里面用逗号分隔的一列,查询分成多列呢,常见场景有,文章标签,需要吧查询多个标签合并成一列,等,需要怎么去实现呢,这就涉及到MySQL的字符串操作groupconcat场景再现我想把查询多列数据合并成一列显示用逗号分隔
Stella981 Stella981
4年前
Spark DataFrame列的合并与拆分
版本说明:Spark2.3.0使用SparkSQL在对数据进行处理的过程中,可能会遇到对一列数据拆分为多列,或者把多列数据合并为一列。这里记录一下目前想到的对DataFrame列数据进行合并和拆分的几种方法。1DataFrame列数据的合并例如:我们有如下数据,想要将三列数据合并为一列,并以“,”分割
Stella981 Stella981
4年前
GORM——AutoMigrate
AutoMigrate用于自动迁移您的schema,保持您的schema是最新的。注意:AutoMigrate会创建表,缺少的外键,约束,列和索引,并且会更改现有列的类型(如果其大小、精度、是否为空可更改)。但不会删除未使用的列,以保护您的数据。db.AutoMigrate(&User{})
Wesley13 Wesley13
4年前
CSS基本用法介绍
CSS介绍css定义如何显示HTML元素.当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染).CSS语法css实列每个CSS样式由两个组成部分:选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。css注释/这是注释/CSS的几种引入方
Stella981 Stella981
4年前
Sass
嵌套规则(NestedRules)Sass允许将一套CSS样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器mainp{color:00ff00;width:97%;.redbox{
Wesley13 Wesley13
4年前
CSS基础知识整理
1什么是CSS?CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。
Wesley13 Wesley13
4年前
JS和CSS加载(渲染)机制不同
一、结论CSS可以在页面加载完成后随时渲染。举个例子:通过js给某个元素加一个id或者css,只要这个id或者css有对应的样式,此元素的样式就会自动生效。JS不可以在页面加载完成后生效。最明显的例子就是使用EasyUI的时候,iframe中哪些样式无效(EasyUi是依靠JS进行样式处理的,所以无法运行JS,那么样式也就无法设置。简单点说
Stella981 Stella981
4年前
CSS 分类 (Classification)
★★CSS分类属性(Classification)★★⑴CSS分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度。⑵下面是常用的属性以及描述:!(https://oscimg.oschina.net/oscnet/00cb565
Stella981 Stella981
4年前
Css3 Animation 动画十二原则
前言本文主要介绍了CSS3动画基本原理和常用形式作为前端的设计师和工程师,我们用CSS去做样式、定位并创建出好看的网站。我们经常用CSS去添加页面的运动过渡效果甚至动画,但我们经常做的不过如此。动效是一个有助于访客和用户理解我们设计的强有力工具。这里有些原则能最大限度地应用在我们的工作中。迪士尼经过基础工作练习的长时间
Wesley13 Wesley13
4年前
mysql——索引——概念
一、索引索引由数据库表中一列或者多列组合而成,其作用是提高对表中数据的查询速度。索引是创建在表上面的,是对数据表中一列或者多列的值进行排序的一种结构。通过索引,查询数据时可以不必读完记录的所有信息,而只是查询索引列。索引优点:提高检