CSS3(level 2)
文章平均质量分 75
CSS顶级专栏下的 子专栏
谁诉离殇~
菜鸟前端,学习笔记
展开
-
-响应式(d)
三、响应式一个网站能够兼容多个终端,并且在各个终端都可以有很好的展示体验,即可能不同的终端需要有不同的展示效果.1、在css文件内部通过媒体查询运用样式媒体查询即@media指令,只有符合定义条件的才会被应用到网页。一般添加到样式表的末尾。// screen指的是计算机屏幕;and后面是筛选条件,可以有多个;// 而且可以用","来分开多个媒体查询,只要一个媒体查询表达式为真,则就会应用样式// screen可以省略,如果不写的话默认就为all@media screen and (mi原创 2021-10-12 22:29:44 · 101 阅读 · 0 评论 -
-CSS3长度单位rem、vh、vw、vmin、vmax、ex、ch
用这几个单位就可以做自适应布局了,尤其是下面的vh,解决了高度不能使用百分比的问题,很爽。另外,自适应除去用下面这些单位之外,还可以用width的一些新属性,fill-available、fit-content、max-content、min-content一、rem1、使用js来使rem自适应最新领悟重点,关于设计图和量出来的值使用rem:重点为根元素的像素值。我们在js里面把根元素的像素值用读取的屏幕宽度(当然写代码的时候肯定屏幕宽度和设计图宽度一样)除以设计图宽度,即$("html.原创 2021-10-12 22:28:59 · 570 阅读 · 0 评论 -
-css3一些新选择器(d)
由于css特性太多,所以与其企图知道所有的css特性,不如让自己知道可以用什么css实现什么更好。一、多列布局columnscss多列布局规范描述了如何通过多列显示文本(即,如果不用这个属性的话,文本一般都是一大块,而用了这个可以给将文本设置为小块小块的)。下面是常用的5个属性:column-width:<length> | auto 设置或检索对象每列的宽度 .column-count:<integer> | auto 设置或检索对象的列数.column-gap.原创 2021-10-12 22:28:26 · 95 阅读 · 0 评论 -
-css3新增属性和css中一些属性(d)
一、新增属性1、rgba()opacity(不透明度) 属性: 设置元素的不透明级别。从 0.0 (完全透明)到 1.0(完全不透明)。兼容性:所有浏览器都支持 opacity 属性。IE8 以及更早的版本支持替代的 filter 属性。例如:filter:Alpha(opacity=50)。rgba: 同时设置颜色和不透明度。RGB即是代表红、绿、蓝。 a代表 alpha.用法:在background中设置前三个参数代表rgb值,第四个参数代表不透明度。所有浏览器都支持rgba属性。IE8不支原创 2021-10-12 22:27:52 · 319 阅读 · 0 评论 -
-css3高级技术(p)
layout: posttitle: “CSS3高级技术”categories: csstags: css3excerpt: 这篇文章是写一些css3常用的高级特性的,很好用对于这些css3属性,在用百分数设置值的时候,都是相对于元素自身的宽高设置的一、box-shadow(是给元素块添加周边阴影效果影)投影box-shadow的原理是:在元素的原位置模一个和原元素一样大的阴影,然后再为这个阴影设置其他一些东西。(1)浏览器支持: IE9+、Firefox 4、Chrome、Op.原创 2021-10-12 22:27:00 · 386 阅读 · 0 评论