等，你的到来。

今天有人问我input复选框要怎么改变样式，查了一下，特整理下来：<input type="checkbox">input[type="checkbox"] { width: 12px; height: 12px; display: inline-block; text-align: center; vertical-align:...

1、块级元素block，行内元素inline，行内块元素inline-block概念和区别(1)、block①.block确切的说应该是block-level elements块级元素，block元素通常显示为独立的一行，多个block元素会各自新起一行。默认情况下，block元素宽度会自动填满其父级宽度；②.block元素可以设置width、height，margin、p

表格：1.表格在body里的结构不用了可以不写，浏览器会自动添加可以不写，浏览器会自动添加不用了解释：border：是table的属性，可以设置表格和每个单元格的边框，和css样式里的border是不一样的width和height可以设置表格整体宽高cellspacing每一

视频：1.src，视频引入的相对路径；一个视频写在video标签，多个写在source标签2.autoplay视频自动播放3.controls控制条4.loop循环播放5.preload预加载，写了有浪费流量的风险，不写会出现卡顿现象6.width视频的宽度7.source可以给视频设置多个资源，第一个加载失败后可以展示第二个音频：

@keyframes关键帧animation：首先需要定义一套关键帧，关键帧的定义方式比较特殊，它使用了关键字@keyframes来定义动画。这里可以用from{}to{}或者用百分比充当时间点。具体格式为：

Flex弹性布局布局传统解决方案，主要依赖于position属性以及float属性等。然而他们对于那些比较特殊的布局，实现起来是比较麻烦的，比如垂直居中就不好实现。2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。那下面我们就来参照Flex布局教程：语法篇，说说Fl

盒模型以上图为例：在w3c标准盒模型下，元素实际宽等于width + padding-left + padding-right + border-left + border-right + margin-left + margin-right元素实际高等于height + padding-top + padding-bottom + border-top + b

偶尔看到的一篇博文，觉得挺有用的，刚好前两天做项目的时候自己也遇到这个问题，觉得解决方案很好，所以搞过来，大家一起学习一起进步！左边定宽、右边自适应（类似管理台）方案一 左边设置左浮动，右边宽度设置100% () .left { float: left; } .right { width: 100% }方案二 左设置左浮动、右边也左浮动 但是使用calc去补宽度长度计算（方案一

大家好。好久没见了，萍子也已经好久都没更新博文了，嘻嘻，有没有想念萍子啊。最近有点事情需要处理，所以大致请了半个月的假，呼呼~这半个月的假期过去再回来摸键盘码代码，感觉脑子一片空白啊，多尴尬啊，这个“从入门到放弃的”的水平，现在更糟糕了，唉~萍子心理暗暗暗示自己要加油啊，马上过年了，得过个好年呐。~~(>_

最近在做一个H5的小型电商项目，其中有一个是现金刷卡之后需要上传凭证图片的，因此也就需要在H5中实现可以上传图片。 我们都知道，input标签的type为file是可以上传图片的，本来想着这么简单，有啥难的，可是到后来这样写完，看效果的时候，缺发现这个东西它是有兼容问题的，IOS和Android是不一样的，所以特写此博文记录下来，也希望能帮到大家。One最开始的时候，是没做区分，以为这样...

蒙版/遮罩mask很简单的一个属性，并不是PS里面的那个蒙版蒙版目前只有-webkit-内核的浏览器支持（谷歌、Safari、新欧朋opera），其他不支持需要png的透明度遮罩-webkit-mask-image:url("png的图片，需背景透明")，和背景设置一样，可以设置多个png图为蒙版我这里用的png图是一个小星星：效果图：哈哈哈，是不是

边框图片border-image其有五个属性：border-image-source：边框图片的路径border-image-slice：图片边框向内偏移border-image-width：图片边框的宽度border-image-outer：边框图片区域超出边框的量border-image-repeat：图片边框的平铺状态，有三个参数平铺repeat、铺满round、

浮动：使元素脱离文档流，按照一定的方式排列，遇到相邻的浮动元素或者父级的边界停下来。可以往left，也可以往right一般建议用ul.f>li.s编写，（unorder list无序标签，需搭配li作为子标签）,用div也可以，但是有些浮动效果做不到。特性：1.浮动的元素排在同一排2.浮动的元素内容撑开高度3.浮动的元素支持所有的CSS样式4.浮动的元素脱离文档

渐变：CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 分为线性渐变(linear-gradient)、径向渐变(radial-gradient) 线性渐变(linear-gradient)： 为了创建一个线性渐变，必须至少定义两种颜色。这个颜色就是你想呈现的平稳过渡的颜色，同时也可以设置一个起点和一个方向（或一个角度）。 语法：background:l

一、学习选择器的优先级，我们要知道的是：写到选择器里面的样式都会生效，只有样式出现冲突的时候才会有优先级的概念；二、七种常用的基本选择器类型：1.通配选择器*{}代表文档里所有标签，一般用于初始化操作优先级最低，权值02.标签选择器div{}代表文档里所有相同的标签权值13.类选择器.div1{}标签的类名可以重名权值104.id

一、三种引入方式以及其应用场景1.行间样式，当样式非常少、在一组选择器内需要优先样式，缺点是不是人看的代码样式，影响布局结构的视觉效果a、写在起始标签的style属性里，各样式之间用“；”隔开2.内部引入方式，当页面布局少情况下使用，缺点是扩展性差，布局稍微多一些就需要来回滚动页面，很麻烦a、标签选择器，也就是body中对应的所有相同类型标签，对它们进行样式设置

HTML标签 1.辅助标签，设置编码格式为utf-8国际统一编码2.文档类型声明为html类型3.页面的所有内容都写在这个标签里面4.页面的所有头部信息写在这里5.网页的标题6.页面的主体部分信息写在这里7.无语义标签，是一个块标签，默认独占一行8.水平线标签9.无语义标签，是一个行标签，默认同行显示且行标签不支持宽和

block，inline和inline-block概念和区别总体概念block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (行内元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。

标签的嵌套规范1、行级标签不能嵌套块级标签 （a除外）2、块级标签可以嵌套行级和块级3、伪类(hover/link/visited/active)只能加给a标签4、p，h一般也不嵌套其他块级标签标签书写规范a、标签分为单标签和双标签，都需要起始标签和结束标签，不同的是单标签起始、结束标签都写在一个尖括号里而双标签则分别写在两个尖括号里；b、所有的标签都是用小写字

定位：一般父级用相对定位，子级用绝对定位1.相对定位：position：relative2.绝对定位：position：absolute3.固定定位：position：fixed默认static没有定位偏移量：left和top比right和bottom的优先级要高相对定位：相对于自身原始位置进行定位原点在自身左上角

精灵图、雪碧图方法：1.运用PS切图，把几个部分粘贴到一个图层，记下每个图片的大小，同时大的粘贴板宽取所有图宽的和，高取所有图中的最大值2.运用背景图的方式插入，设置每个图片的div大小，同时通过调整图片位置background-position的方式达到准确添加背景图的目的好处：1.加快加载速度2.后期维护简单3.能减少图片的字节，曾经比较过多次3

多行文本和图片在未知尺寸的容器中的居中方法1、position：absolute；1⃣当元素没有宽和高的时候，设置四个方向的定位值可以把元素宽高拉开，撑满父级；2⃣当元素有宽高的时候，设置四个方向的定位值为0，可以使用margin：auto；居中。2、margin：0 auto；左右居中3、定位居中父级设置position：relative；子级

过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：规定您希望把效果添加到哪个 CSS 属性上规定效果的时长先依次看一下它的各个转换属性：过渡时间transition-duration: 10s;过渡效果的时间曲线ease先慢后快linear匀速ease-in规定以慢速开始的过渡效果ease-out