随笔分类 - CSS
摘要：XSS 简介 跨站脚本攻击，英文全称是 Cross Site Script，本来缩写是CSS，但是为了和层叠样式表（Cascading Style Sheet，CSS）有所区别，所以在安全领域叫做“XSS”。 XSS 攻击，通常指黑客利用网站没有对用户提交数据进行转义处理或者过滤不足的缺点，从而通过
阅读全文
摘要：网络加载类 减少 HTTP 资源请求次数 合并静态资源图片、JavaScript 或 CSS 代码，减少页面请求数和资源请求消耗 避免重复的资源，防止增加多余请求 减小 HTTP 请求大小 减少没必要的图片、JavaScript、CSS 及 HTML 代码 对文件进行压缩优化 使用 gzip 等方式
阅读全文
摘要：灵活的背景定位 实现效果： 将背景图定位到距离容器底边 10px 且距离右边 20px 的位置。 background position 方案 实现代码： 实现要点： 允许我们指定背景图片距离任意角的偏移量，只要我们在偏移量前面指定关键字。本例就是设置背景图片离右边缘 20px，离底边 10px。
阅读全文
摘要：使用 CSS 让元素不可见的方法很多，剪裁、定位到屏幕外、明度变化等都是可以的。虽然它们都是肉眼不可见，但背后却在多个维度上都有差别。 元素不可见，同时不占据空间、辅助设备无法访问、不渲染 使用 script 标签隐。例如： 此时，图片 1.jpg 是不会有请求的。 <script <textare
阅读全文
摘要：半透明边框 实现效果： 实现代码： 实现要点： 设置边框为半透明，这是还看不到半透明边框，因为默认情况下，背景会延伸到边框所在的区域下层，也就是背景是被边框的外沿框裁切掉。 通过设置 （初始值是 border box） 让背景不要延伸到边框所在的区域下层，也就是让内边距的外沿来裁切背景。 多重边框
阅读全文
摘要：在 CSS 中要设置元素水平垂直居中是一个非常常见的需求了。但就是这样一个从理论上来看似乎实现起来极其简单的，在实践中，它往往难住了很多人。 让元素水平居中相对比较简单：如果它是一个行内元素，就对它的父元素应用 ；如果它是一个块级元素，就对它自身应用 。 然而如果要对一个元素进行垂直居中，那就没有那
阅读全文
摘要：元素选择器 通配选择器 { sRules } 选定文档所有的元素 类型选择器 E { sRules } 选定指定的文档元素 E 类选择器 E.myclass { sRules } 选定 class 属性包含 myclass 的文档元素 E 多类选择器 E.myclass.myotherclass {
阅读全文
摘要：CSS预处理器是一种语言，用来编写一些CSS的特性,而且无需考虑浏览器兼容性的问题。他们通过编译的代码编写成一般的CSS,不要在停留在石器时代了。
阅读全文
摘要：前言 通常我们在设置链接的一些伪类（ ，`visited hover active LoVe HAte` 。 要想弄明白为什么是这个顺序，首先我们需要知道，CSS在确定应当向一个元素应用哪些样式时，这通常不仅需要考虑 继承 ，还要考虑声明的 特殊性 ，另外需要考虑声明本身的来源，这个过程就成为 层叠
阅读全文
摘要：圣杯布局 实现原理 html代码中，middle部分首先要放在container的最前部分，然后是left，right 1. 将三者都设置 , (因为相对定位后面会用到） 2. middle设置 占满一行 3. 此时middle占满一行，所以要把left拉到middle所在行的最左边，使用 4. 这
阅读全文
摘要：如何清除图片下方出现几像素的空白间隙 方法1 方法2 除了top值，还可以设置为text top | middle | bottom | text bottom，甚至特定的和值都可以 方法3 如何让文本垂直对齐文本输入框 如何让单行文本在容器内垂直居中 只需设置文本的行高line height等于容
阅读全文
摘要：这篇文章很长，但的确是一篇非常干的干货，讲诉了 HTML、JavaScript、CSS、jQuery使用的一些规范与建议，前端的同学可以认真阅读此文，并比较自己平时的一些习惯，看是否有改进的地方…… HTML 咋地了, DOCTYPE?不定义DOCTYPE是一种可以被判死刑的罪行。 以前你可能用...
阅读全文
摘要：本文全部基于HTML进行讲解，没有考虑XML，XHTML的情况，请知悉。 一、元素选择器 通配选择器 语法： * { sRules } 说明： 选定文档所有的元素 示例： * { color: red; } <div>我是div</div> 元素选择器 语法： E { sRules } 说明： 选定
阅读全文
摘要：一、基本概念1、块级元素(block element)：一般都从新行开始占据一定的矩形空间，可以设置其宽、高属性来改变矩形的大小。一般情况下块级元素可以包含内联元素和其它块级元素，但也有特殊如form只能包含其它块级元素，p只能包含内联元素。常见块级元素如div、p、form等。2、内联元素(inl...
阅读全文
摘要：一、引题在之前的浅谈HTML中的块级元素和内联元素中了解到了内联元素一般是不能设置宽高的，但是也有特殊。比如img是内联元素，但可以设置宽高，这肯定让不少人迷惑。这样我们就要引入HTML中置换元素的概念（非置换元素在w3c中没有给出明确的解释，姑且我们就把除置换元素外的元素当作非置换元素吧）。二、替...
阅读全文
