随笔分类 - css
摘要：padding内边距可以撑开盒子,我们可以做非常巧妙的运用 比如做导航栏如果每个导航栏里面的字数不一样多,我们可以不用给每个盒子宽度了,直接给padding最合适
阅读全文
摘要：padding属性用于设置内边距，即边框与内容之间的距离 属性 作用 padding-left 左内边距 padding-right 右内边距 padding-top 上内边距 padding-bottom 下内边距 内边距（padding） 当我们给盒子指定padding值之后,发生了2件事情:
阅读全文
摘要：边框会影响盒子实际大小 边框会额外增加盒子的实际大小,因为我们有两种方案解决： 测量盒子大小的时候不量边框 如果测量的时候包含了边框,则需要width/height减去边框宽度（左右都要减）
阅读全文
摘要：看透网页布局的本质 网页布局过程 ** 先准备好相关的网页元素,网页元素基本都是盒子Box. ** 利用CSS设置好盒子样式，然后摆放到相应位置。 ** 在盒子里面装内容 网页布局的核心本质:就是利用css摆盒子。
阅读全文
摘要：background-attachment 属性设置背景图像是否固定或者随页面的其余部分滚动 background-attachment后期可以制作视差滚动的效果。 background-attachment: scroll | fixed
阅读全文
摘要：css的背景 background-position: x y; 参数的意思:X坐标和y坐标。可以使用方位名词或者精确单位 参数是方位名词 如果指定的两个值都是方位名词,则两个值前后顺序无关,比如left top 和 top left效果一致 如果只指定一个方位名词,另一个值省略,则第二个值默认居中
阅读全文
摘要：em是相对单位，如果当前的字体样式 font-size是16px; 那么em就是16px;2em自然就是32px <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>垂直居中</tit
阅读全文
摘要：.img-responsive { display: block; height: auto; max-width: 100%; }
阅读全文
摘要：CSS3 box-sizing 属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。 默认的css 宽度是： width(宽) + padding(内边距) + border(边框) = 元素实际宽度 高度是：height(高) + padd
阅读全文
摘要：CSS3，我们可以创建动画，它可以取代许多网页动画图像，Flash动画，和JAVAScripts。 CSS3 @keyframes 规则 要创建CSS3动画，你将不得不了解@keyframes规则。 @keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前
阅读全文
摘要：CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。 要实现这一点，必须规定两项内容： 指定要添加效果的CSS属性 指定效果的持续时间。 要添加多个样式的变换效果，添加的属性由逗号分隔：
阅读全文
摘要：这里使用了transform模块可以对元素进行移动、缩放、转动、拉长或拉伸。 提供了以下方法： translate() rotate() scale() skew() matrix() translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 效果如下： 使用tr
阅读全文
摘要：以前CSS的版本，网页设计师不得不使用用户计算机上已经安装的字体。 使用CSS3，网页设计师可以使用他/她喜欢的任何字体。 当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。 在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirst
阅读全文
摘要：text-shadow 效果如下： CSS3文本溢出属性指定应向用户如何显示溢出内容 效果如下： clip：默认 ellipsis:文本溢出显示省略号 text-overflow: '>>'：只在火狐浏览器下有效 如果某个单词太长，不适合在一个区域内，它扩展到外面： CSS3中，自动换行属性允许您强
阅读全文
摘要：CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的
阅读全文
摘要：CSS3中包含几个新的背景属性，提供更大背景元素控制。 在本章您将了解以下背景属性： background-image background-size background-origin background-clip CSS3中可以通过background-image属性添加背景图片。 不同的背景
阅读全文
摘要：使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"。 一下分别给背景,边框,图片添加了圆角 效果如下： 如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。 但是，如果你要在四个角上一一指定，可以使用以下规则： 四个值: 第一个值为左上角
阅读全文
摘要：效果如下: 还可以可单独的角添加圆角 border:左上角丨右上角丨右下角丨左下角 如果只给左下角添加圆角那么就是：border-radius:0 0 0 25px; 就是这样 css盒阴影 CSS3 中的 box-shadow 属性被用来添加阴影: 效果如下: CSS3 边界图片 效果如下:
阅读全文
摘要：CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的。 一些最重要CSS3模块如下： 1.选择器（.基本选择器，层次选择器，伪类选择器，伪元素，属性选择器，通配符） 2.盒模型(弹性盒子) 3.背景和边框(边框:圆角 阴影边框图像 背景:background-size,多重背景 ) 4.文字特
阅读全文
浙公网安备 33010602011771号