object-fit:指定可替换元素的内容应如何适应到需使用的高度和宽度确定的框平时写代码经常会在代码中插入图片，你是否会多少感觉插入的图片被拉伸或是被缩放，在这里我们就探讨object-fit对图片处理的应用 语法及作用 fill (充满) 整个对象将完全填充内容框。当对象的宽高与内容框不匹配，该对象将被拉伸以适应内容框示例：object-fit:fill; contain (包含) 内容将被缩放，以保持填充元素的宽高比。该对象在填充的时保持长宽比，...
1.浮动高度坍塌原因：父元素的高度是被子元素撑开的，当设置浮动后，会脱离文档流，子元素无法撑起父元素，所以导致高度坍塌解决方法.clearfix:before, .clearfix:after{content: "";display: table;clear: both; } 2.父子兄弟联动解决方法1：padding解决方法2：float（但是有条件）解决方法3：position:absolute解决方法4：border解决方法5：overflow: hidden; 3.position相对定位：relative 针对它本身位置的起始点进行了一个...
1. 引言 上一节《css知多少（5）——选择器》最后提到，选择器类型过多将导致一些问题，是什么问题呢？咱们直接举例子说明。 上图中，css中的两个选择器都是针对<span>的，而且两个设置的颜色不一样，这里的<span>到底听从谁的命令？ 上面还是比较简单的，下面在来一个复杂的： 上图中的<li>该显示成什么颜色呢？2. 特指度 要解决以上问题，我们需要引入一个概念——特指度（specificity）。特指度表示一个css选择器...
一.最简化的CSS Reset(重设) :* {padding: 0;margin: 0; }这是最普遍最简单的CSS重设，将所有元素的padding和margin值都设为0，可以避免一些浏览器在理解这两个属性默认值上的”分歧”。二.浓缩实用型CSS Reset(重设):* {vertical-align: baseline;font-weight: inherit;font-family: inherit;font-style: inherit;font-size: 100%;outline: 0;padding: 0;margin: 0;border: 0; }三.Poor Man 的CSS Reset:html, body {padding: 0;m...
大家都知道现在各个浏览器都支持CSS3的自定义字体(@font-face)，包括IE6都支持，只是各自对字体文件格式的支持不太一样。那么对于网站中用到的各种icon，我们就可以尝试使用font来实现，为什么要将icon做成字体？在很多网站项目中，我们常常会用到各种透明小图标，然后网站要兼容各个浏览器，也可能会有多个尺寸，甚至还要考虑换肤等需求。那么我们就要将这些小图标输出为多种尺寸、颜色和文件格式，比如png8 alpha透明或者png8 in...
CSS 存放位置： 单独css文件 html头部 标签属性优先级：标签属性> html头部> 单独css文件CSS选择器：分类：1、标签选择器 2，id选择器3、class选择器4、层级选择器5、组合选择器1、标签选择器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style>/*标签选择器*/div{color:green;}</style></head><body> <div>baidubaidub...
通常我们设置perspective都是给父元素设置，给当前元素设置会导致没有3D视角的中心点，给父元素的上级元素设置会导致中心点可能错误，因为父元素的上级元素高度可能和父元素不一样。如果发现旋转时元素无法出现近距离变大，远距离变小，可以看看perspective是不是给力父元素 animation的复合写法只需要保证第一次出现的时间是持续时间duration，第二次出现的时间是延迟时间，其他参数顺序可以顺便写name iteration-count timing-...
HTML/CSS方法实现下拉菜单来源：慕课网<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>无标题文档</title><style type="text/css"> *{ margin:0px; padding:0px;}/*清除所有默认格式*/#menu{ background-color:#eee;...
交集选择器交集选择器又两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，语法如；h3.class{color:redd font-size:25px;} 并集选择器如果选择器定义的样式完全相同，或部分相同，就可以利用丙级选择器为它们定义相同的css样式。 后代选择器后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就把是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌...
<section> <p>我是第1个p标签</p> <p>我是第2个p标签</p></section>然后对应2个选择器对应的CSS代码如下：p:nth_child(2) { color:red;} // p:nth-of-type(2) { color:red;}两种对应的效果都是这样的：对于:nth-child选择器有两点需要说明：1，这个是个段落元素2，这个是父级元素的第二个孩子 而对于：nth-of-type选择器，意味着选择一个元素如果：1，选择父级元素的第二个 段落 子 元素 如果把上面的代码稍...
伪元素：（css3中将所有伪元素前变成了两个冒号，即::first-letter、::first-line、::before、::after、::selection。目的是为了区分伪元素与伪类。对于IE6~IE8，仅支持单冒号写法）1.::first-letter ：用来选择文本块的第一个首字母。2.::first-line ：用来匹配元素的第一行文本。3.::befor 和 ::after ：创建一个作为当前元素子元素的伪元素。常通过 content 属性来为一个元素添加修饰性的内容。 此元素默认为行内元素。:before...
background-size与背景图片填满div在开发中，常有需要将一张图片作为一个div的背景图片充满div的需求background-size的取值及解释background-size共有三种属性，分别为background-size: coverMDN文档解释说明：缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn‘t get squished). The ima...
initial关键字： 除了 Internet Explorer，其他的主流浏览器都支持 initial 关键字。 Opera 15 之前的版本不支持 initial 关键字。 initial 关键字用于设置 CSS 属性为它的默认值。 initial 关键字可用于任何 HTML 元素上的任何 CSS 属性。overflow ： 所有主流浏览器都支持 overflow 属性。 注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性...
今天在做一个项目，用zepto给元素增加一个class，class里面有transform的效果。开始的时候，元素的样式是用id选择器写的，但是增加class之后，发现动画效果出不来，当时头好晕没想出来为啥，结果回家后用简单的代码打一遍，发现原来是个很简单的问题……动画出不来的原因就是：id选择器里的css优先级要大于class选择器的优先级。新加进来的class没有办法覆盖掉原有的样式，导致了动画出不来。简单代码测试：<!DOCTYPE html><html><...
通过基础CSS实现输入提示交互动画效果，并兼容各浏览器！1.效果展示 2.css代码 h4 {margin: 30px 0;}input {margin: 0;font-size: 16px;line-height: 1.5;}.input-fill-x, .input-outline-x, .textarea-outline-x {position: relative;}.input-control:focus + label {color: red;background: white;transform: scale(0.8) translate(0, -17px);}.input-label {padding: 0 5px;position: absolute;left: 10px;top: 3px;tr...