http://jastate.com/css3-properties-box-sizingborder-box.html 定义和用法 按照w3c school的说法,box-sizing:border-box就是box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素 那么这句话是什么意思呢? 按照常规CSS2来说,我们定义了一个div,那么它的padding+border+本身内容高度=整个DIV高度 现在box-sizing给了我们一个新的定义,某些情况下,我们不希望paddi…

盒模型box-sizing: 取值 1.content-box 默认值,标准盒模型,设置宽度为内容宽度,实际宽度为左右边距加上左右边框加上左右填充再加上内容宽度 2.border-box 设置宽度等于元素内容宽度,content包含了元素的border和padding 3.inherit 继承父元素的盒模型模式 兼容 iE8+ 解决问题: 边框和填充被计算到盒模型内,不会破坏布局…

写在前面:由于CSS5标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀. -moz-  主要是firefox火狐 -webikt-主要是chrome谷歌和Safari -o-主要是用于苹果机上的浏览器如Opera 下面主要从颜色.文本.选择器等方面来总结一下CSS3新增的属性 颜色 css1和css2只能通过以下三种方式来表示颜色 颜色名称  eg:color:red HEX方式 (语法:#RRGGBB或#RGB   各点的取值范围为00…

第3章 选择器:明确设置哪些样式 每个样式(或者规则)由两个主要部分组成:选择器是告诉浏览器要格式化什么内容:声明块则列出浏览器用来给选择器定义样式的格式化指令. 1.标签选择器:整体控制 标签选择器影响着该标签在网页上的每一个位置. 2.类选择器:精准控制 当你希望某一个或某几个元素的外观与网页上其他的相关标签有所区别时,可以使用类选择器. 类选择器还可以精确控制网页上的某个具体元素,而不管它有哪些标签. 甚至可以用类选择器为有着不同HTML标签的多个元素应用相同的格式. 命名类选择器时要牢记…

1. .myanimate{ transition-property: left;transition-duration: .3s;transition-timing-function: ease } xxx.addClass("myanimate"); xxx.style.left="500"px; 这样写会不执行动画 xxx.addClass("myanimate"); setTimeout(function(){ xxx.style.lef…

1. .myanimate{ transition-property: left;transition-duration: .3s;transition-timing-function: ease } xxx.addClass("myanimate"); xxx.style.left="500"px; 这样写会不执行动画 xxx.addClass("myanimate"); setTimeout(function(){ xxx.style.lef…

Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码: <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" /> <link href="css/style.css" rel="stylesheet" type=&qu…

项目要求: 网站能够使用PC.ipad.mobile phone正常访问 页面PSD版式宽度分别为1024px和750px 参考资料 使用CSS3 Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变内容的情况下,改变页面的布局以精确适应不同的设备. Media Queries的语法如下所示: @media [media_query] media_type and media_feature 使用Media Querie…

关于样式的优先级问题: !important > style > [ id > class > tag ];  z-index 的属性用法: z-index属性是用来设置元素的堆叠顺序,z-index的属性值可为负数.0 或 正数,属性值越大,元素越接近用户,越显示于前面,如下图所示: 新手使用CSS中的这个属性时,经常会忘记在前面要先声明定位元素,即z-index属性只适用于绝对定位容器,例如代码:position: absolute;   z-index: 1; role :…

bootstrap实战教程 bootstrap介绍 简介 Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.全球数以百万计的网站都是基于 Bootstrap 构建的. Bootstrap是完全开源的由Twitter @mdo 和 @fat 构建, 采用 LESS CSS, 通过Node编译, 代码托管.开发.维护都在 GitHub 平台上 Bootstrap 为所有开发者.所有应用场景而设计,所有开发者都能快速上手.所有设备都可…