在HTML中,通过各种各样的属性可以给元素增加很多附加的信息。例如,通过ID属性可以将不同DIV元素进行区分。CSS2中引入了一些属性选择器,这些选择器可基于元素的属性匹配元素,而CSS3在CSS2的基础上扩展了这些属性选择器,支持基于模式匹配定位元素。 属性选择器 E[attr] 选择匹配具有属性 ...
分类:
Web程序 时间:
2020-06-12 00:49:43
阅读次数:
97
这个属性官方文档语法: 实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 10px; } .a{ float: left; height: 200px;width ...
分类:
Web程序 时间:
2020-06-11 20:10:48
阅读次数:
183
这个属性的官方文档语法:示例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 10px; } .a{ float: left; height: 300px;width ...
分类:
Web程序 时间:
2020-06-11 20:01:33
阅读次数:
324
浏览 Animate.css官网 的时候发现Animate.css这几个字母的颜色会慢慢变化,个人觉得还是很有意思,本以为是利用animate 改变color,结果F12后发现好多奇怪的css属性。 先来看看我的实现方法 简易实现方法 h2{ height: 60px; color: #f35626 ...
分类:
Web程序 时间:
2020-06-11 15:02:22
阅读次数:
96
前言 此文章是 解剖CSS布局原理 的续集,之前那篇文章讲的都是理论,本文章讲具体的实例,根据自己对布局的理解与开发经验分为以下几类。 因为PC端和移动端布局差异较大,所以我将两端布局分开讲,本文章将针对PC端的布局进行讲解,以下代码只写关键代码。如果你发现你写了关键打代码还达不到效果,请检查是否写 ...
分类:
Web程序 时间:
2020-06-11 13:24:46
阅读次数:
134
内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。 该操作发生在弹性长度以及自动边距被确定后。 它用来在存在剩余空间时如何加以分配,也会在发生内容溢出时影响项目的对齐。 注意:弹性布局中有两个基本术语main axis和cross ...
分类:
Web程序 时间:
2020-06-11 13:18:50
阅读次数:
101
一、基本概念 刷新 QQ 空间动态时,发现一则广告,随着用户上下滑动动态列表,就会自动切换广告图片,这样的效果对移动端本就不大的屏幕来说,无疑是很精妙的考虑,这样的效果是怎么实现的呢? 你可以点击这里:QQ空间广告示意demo 接下来就说说这个效果的具体实现思路: 将两张图片通过定位,相对于图片容器 ...
分类:
Web程序 时间:
2020-06-11 00:32:02
阅读次数:
79
上传头像的时候遇到了头像变形的问题,最后通过object-fit: cover完美解决了。这个CSS属性可以达到最佳最完美的居中自动剪裁图片的功能。 object-fit理解 CSS3 background-size出现的比较早,大家应该知道其支持的一些值,除了数值之外,其还支持几个关键字,例如:c ...
分类:
Web程序 时间:
2020-06-10 13:07:20
阅读次数:
92
box-sizing是css3新增的一个属性 其值有两个,分别是border-box和content-box 当我们给一个容器设置box-sizing为border-box时,就会出现一个很奇妙的现象 div { width: 300px; height: 100%; padding: 20px; ...
分类:
其他好文 时间:
2020-06-10 12:52:39
阅读次数:
114
1、属性选择器说明选取标签带有某些特殊属性的选择器常用选择符描述E[attr]选择具有attr属性的E元素E[attr="val"]选择具有attr属性且属性值等于val的E元素E[attr^="val"]选择具有attr属性且属性值以val开头的E元素E[attr$="val"]选择具有attr属性且属性值以val结尾的E元素E[att
分类:
Web程序 时间:
2020-06-10 09:17:07
阅读次数:
185