随笔分类 - Css3
摘要：简单的说页面是由若干个盒模型（BOX）堆砌起来的，可以说每个HTML元素就是一个盒模型 盒模型由外到内包括边距(margin)、边框（border）、填充(padding)、内容(content) 在页面中所占的实际宽度是margin + border + paddint + content 的宽度
阅读全文
摘要：px px就是pixel像素的缩写，相对长度单位，网页设计常用的基本单位。像素px是相对于显示器屏幕分辨率而言的 em em是相对长度单位。相对于当前对象内文本的字体尺寸（参考物是父元素的font-size） 如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸 特点： 1. em的值并不是固
阅读全文
摘要：BFC：块格式化上下文(Block Formatting Context) 是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。 BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的
阅读全文
摘要：css实现loading动画非常方便，也非常实用 第一种 第二种 第三种 第四种
阅读全文
摘要：什么是HTML语义化呢？ 根据内容的结构化（内容语义化），选择合适的标签（代码语义化），便于开发者阅读，写出优雅的代码的同时让浏览器的爬虫更好的解析 语义化标签的优势： 1）代码结构清晰，方便阅读 2）有利于搜索引擎优化 3）方便其他设备解析，以语义的方式来渲染网页 选择标签写代码时候需要遵循的：
阅读全文
摘要：在CSS3中可以使用RGBA和HSLA两种色彩模式，这两个都可以用来设置颜色以及指定透明度。 rgba指的是：红色、绿色、蓝色、Alpha透明度（Red-Green-Blue-Alpha）前三个值取值从0~255或0%~100% hsla指定是：色调、饱和度、亮色、Alpha透明度（Hue-Satu
阅读全文
摘要：苹果为了提高Safari中网站的辅助功能，屏蔽了Meta下的user-scalable=no功能 所以在iOS10下面，就算加上user-scalable=no，Safari浏览器也能支持手动缩放 解决这个问题的办法可以用Js监听来阻止手动进行缩放 以下是代码
阅读全文
摘要：input[type="button"], input[type="submit"], input[type="reset"] { -webkit-appearance: none; } textarea { -webkit-appearance: none; } /*以及圆角*/ .button{ border-radius: 0; }
阅读全文
摘要：.css { -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; }
阅读全文
摘要：-webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; user-select: none;
阅读全文
摘要：水平居中的方法： 1、父级text-align:center; 2、table配合margin 3、使用定位 垂直居中的方法： 1、table-cell配合vertical-align 2、absolute配合tranform 3、全能的flex
阅读全文
摘要：两者都为外部引入css的方式。 他们的区别： 1、link属于HTML标签，而@import是css提供的 2、页面被加载时候，link会同时加载，而@import引入的文件会等到页面加载完成之后再进行渲染加载 3、@import只能在IE5以上才能识别，而link属于HTML标签，无兼容问题 4、
阅读全文
摘要：1、定义文档的编码格式（H5的标准写法） 2、声明指定的浏览器以及版本 3、viewport移动设备屏幕可视区域 4、忽略数字自动识别为电话号码 5、忽略识别邮箱 6、Pragma禁止本地缓存 7、百度禁止转码 8、SEO优化部分
阅读全文
摘要：display:inline-block，简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现，之后的内联对象会排列在同一行 比如两个input，默认中间会产生一些间距 解决方案有以下几种 1、将元素放在一行这样就不会产生间距了。（虽然看起来有些low...） 2、给父级f
阅读全文
摘要：文本超出一定宽度让其隐藏，以省略号替代 如下图
阅读全文
