随笔分类 -  CSS

渐变色彩 省略标记 嵌入字体 文本阴影
摘要：1、渐变色彩 CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同，这里我们只针对线性渐变的 W3C 标准语法来分析其用法，其余大家可以查阅相关资料。W3C 语法已经得到了 IE10+、Firefox19.0+、Chrome26.0 阅读全文
posted @ 2016-04-11 21:30 庾与熊掌 阅读(233) 评论(1) 推荐(0)
边框
摘要：1、 圆角效果 border-radius border-radius是向元素添加圆角边框。 使用方法： border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角 阅读全文
posted @ 2016-04-06 21:34 庾与熊掌 阅读(190) 评论(0) 推荐(0)
CSS 水平居中总结
摘要：我们在实际工作中常会遇到需要设置水平居中场景，今天我们就来看看怎么设置水平居中的。 如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。如下代码： html代码： css代码： 当被设置元素为块状元素时用 text-align：cente 阅读全文
posted @ 2016-03-24 12:35 庾与熊掌 阅读(137) 评论(0) 推荐(0)
CSS 颜色值 长度值
摘要：在网页中的颜色设置是非常重要，有字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的方法也有很多种： 1、英文命令颜色 前面几个小节中经常用到的就是这种设置方法： 2、RGB颜色 这个与 photoshop 中的 RGB 颜色是一致的，由 R( 阅读全文
posted @ 2016-03-24 11:52 庾与熊掌 阅读(178) 评论(0) 推荐(0)
CSS 布局模型
摘要：在网页中，元素有三种布局模型：1、流动模型（Flow）2、浮动模型 (Float)3、层模型（Layer） 先来说一说流动模型，流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。 流动布局模型具有2个比较典型的特征： 第一点，块状元 阅读全文
posted @ 2016-03-24 10:59 庾与熊掌 阅读(137) 评论(0) 推荐(0)
盒模型--宽度和高度
摘要：盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。 因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。 元素的高度也是同理。 比如： css代码： html代码： 阅读全文
posted @ 2016-03-23 21:31 庾与熊掌 阅读(177) 评论(0) 推荐(0)
CSS 权值 层叠 重要性（!important）
摘要：1、特殊性 权值 有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?我们来看一下面的代码： p和.first都匹配到了p这个标签上，那么会显示哪种颜色呢？green是正确的颜色，那么为什么呢？是因为浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种cs 阅读全文
posted @ 2016-03-22 11:29 庾与熊掌 阅读(6944) 评论(0) 推荐(0)
css 行元素和块元素 相互转换 居中
摘要：div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。 您可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 bl 阅读全文
posted @ 2016-03-21 12:08 庾与熊掌 阅读(10134) 评论(0) 推荐(0)
css position 设置元素的定位方式
摘要：一、简介 CSS的 position 属性设置元素的定位方式，为将要定位的元素定义定位规则。该属性对脚本编写动画特效十分有用。 1、定位元素（positioned element)是计算后位置属性分为： relative（相对）、absolute（绝对） 、 fixed（固定） 或 sticky （ 阅读全文
posted @ 2016-03-21 11:44 庾与熊掌 阅读(922) 评论(0) 推荐(0)