随笔分类 - CSS
摘要：1. CSS3 filter(滤镜) 属性 | 2. CSS calc() 函数
阅读全文
摘要：@ 图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。 尤其是移动端响应式，很多情况下希望我们的图标是可以缩放的。此时，一个非常重要的技术就是字体图标（i
阅读全文
摘要：@ CSS 媒体类型 CSS3 多媒体查询 1. 什么是媒体查询 媒体查询（Media Query）是CSS3新语法。 使用 @media查询，可以针对不同的媒体类型定义不同的样式 目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询 2. 媒体查询语法规范 用 @media开头
阅读全文
摘要：浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。padding 和 border 不会撑大盒子 ①私有前缀 -moz-：代表 firefox 浏览器私有属性 -ms-：代表 ie 浏览器私有属性 -webkit-：代表 safari、 chrome 私有属性 -o-：代表 Oper
阅读全文
摘要：@ 1. 传统盒子模型 传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding 通过样式box-sizing: content-box;指定盒子的模型（默认） <style> div { /* 传统盒子模型= width + border + padding
阅读全文
摘要：@ 1. 简介 转换(transform)：是CSS3的特征之一，可以实现元素的位移、旋转，缩放等效果。可理解为“变形”。 移动： translate 旋转： rotate 缩放： scale 2. 2D转换 1.) 二维平面坐标系 2D 转换是改变标签在二维平面上的位置和形状的一种技术。 二维坐标
阅读全文
摘要：@ ① 什么是动画 动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果 ② 动画的基本使用 先定义动画 在调用定义好的动画 ③ 定义动画 用keyframes 定义动画（类似定义类选择器） @keyframes 动画名称 { 0% { w
阅读全文
摘要：@ 1. 简介 过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。 过渡动画： 是从一个状态 渐渐的过渡到另外一个状态 可以让我们页面更好看，更动感十足，虽然 低版本浏
阅读全文
摘要：1. 元素的显示与隐藏 | 2. CSS用户界面样式 | 3. vertical-align 垂直对齐 | 4. 溢出的文字省略号显示 | 5. CSS精灵技术（sprite) | 6. 滑动门 | 7. margin负值 | 8. CSS三角形 | 9. css属性书写顺序 | 10. css初始化
阅读全文
摘要：@ 什么是定位 定位是一种更加高级的布局手段， 通过定位可以将元素摆放到页面的任意位置，它有两部分组成：定位 = 定位模式 + 边偏移 偏移量(offset) 当元素开启了定位以后，可以通过偏移量来设置元素的位置 在 CSS 中，通过 （方位名词）top、bottom、left 和 right 属性
阅读全文
摘要：@ CSS 布局的三种机制 网页布局的核心——就是用 CSS 来摆放盒子，CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位。 普通流（标准流、文档流） 块级元素会独占一行，从上向下顺序排列。 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。 浮动 让
阅读全文
摘要：@ 文档流 - 网页是一个多层的结构，一层摞着一层 - 通过CSS可以分别为每一层来设置样式 - 作为用户来讲只能看到最顶上一层 - 这些层中，最底下的一层称为文档流，文档流是网页的基础 我们所创建的元素默认都是在文档流中进行排列 - 对于我们来元素主要有两个状态 在文档
阅读全文
摘要：@ 网页布局的本质： 首先利用CSS设置好盒子的大小，然后摆放盒子的位置。 最后把网页元素比如文字图片等等，放入盒子里面。 盒子模型（Box Model） 盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。 盒子内容与边框的距离是内边距（类似单元格的
阅读全文
摘要：@ 1. CSS层叠性 div{ color:red; font-size:25px; } div{ color:green; } /* 最后div的color为 green ，red会被层叠掉 */ 概念： 所谓层叠性是指多种CSS样式的叠加。 是浏览器处理冲突的一个能力,如果一个属性通过两个相同
阅读全文
摘要：@ 一、font字体 菜鸟文档：CSS font 属性 1. font-size:大小 作用： font-size属性用于设置字号 p { font-size:20px; } 长度单位： 可以使用相对长度单位，也可以使用绝对长度单位。 相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少
阅读全文
摘要：@ background-color 语法： background-color:颜色值; /* 默认的值是transparent :透明的 */ 可指定透明度的背景色(rgba) 语法： background: rgba(0, 0, 0, 0.3); 最后一个参数是alpha 透明度 取值范围 0~
阅读全文
摘要：@ 一、CSS选择器作用 找到特定的HTML页面元素 h3 { color: red; } /* 选着h3标签，并把属性color值改为red */ 选择器分为 基础选择器 和 复合选择器 二、CSS基础选择器 1. 标签选择器 概念： 标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标
阅读全文
摘要：@ 一、概述 概念： CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表） 作用： 主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。 CSS以HTML为基础，提
阅读全文
