css盒子模型 在W3C模型中: 总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right 在IE模型中: 总宽度 = margin-left + width + margin-right 在CSS3中引入了box-sizing属性, 它可以允许改变默认的CSS盒模型对元素宽高的计算方式. 共包括两个选项: content-box:标准盒模型,CSS定义…

相关文章 简书原文:https://www.jianshu.com/p/e87bfd27ff59 我的前端规范——开篇:http://www.cnblogs.com/shcrk/p/9271561.html 我的前端规范——HTML篇:http://www.cnblogs.com/shcrk/p/9271613.html 我的前端规范——CSS篇:http://www.cnblogs.com/shcrk/p/9271608.html 我的前端规范——JavaScript篇:http://www.…

0.浏览器默认样式 当你不为html元素设置任何样式时,显示在浏览器上的(比如:<b>元素会显示粗体.<p>元素有纵向margin.<h1>元素字号比<p>元素大一倍--)这是为什么呢? 因为浏览器自带一个默认的样式,在html元素未被设置样式时,浏览器会按照自己默认的样式来显示.但是浏览器默认样式的级别是最低的,一旦有其他地方设置了样式,浏览器默认样式就会被覆盖掉. 注意,不同浏览器的默认样式有些地方是不一样的.例如,我们在写css时,都会首先设置 * {…

[导读] 前端打包的工具有很多,我用的习惯的就是这个grunt,无论是你要在github上做开源,还是让自己的项目变得更易于维护,grunt都是首选. 前端打包的工具有很多,我用的习惯的就是这个grunt,无论是你要在github上做开源,还是让自己的项目变得更易于维护,grunt都是首选. 网上的安装教程非常多了,这里就只是介绍一下都有哪些好用的插件. 1:grunt-contrib-less less,可以让css变得更简单,更易于维护,他可以定义常量,可以转换单位,还可以计算颜色,他用嵌套…

一.继承 继承:所谓CSS样式继承,就是子元素应用父元素的规则声明.(由这一特性,可将CSS属性分为可继承属性和非可继承属性.)可继承属性:属性值可由父元素继承给子元素的属性称之为可继承属性. 哪些属性是可继承属性? 1.文本样式属性 text-indent.text-align.word-spacing.letter-spacing.text-transform.text-decoration.direction.white-space 2.字体样式属性 font.font-family.fo…

一.定位: 1.定位的理解 (1)相对定位 相对定位是一个非常容易掌握的概念.如果对一个元素进行相对定位,它将出现在它所在的位置上.然后,可以通过设置垂直或水平位置,让这个元素"相对于"它的起点进行移动. 如果将 top 设置为 20px,那么框将在原位置顶部下面 20 像素的地方.如果 left 设置为 30 像素,那么会在元素左边创建 30 像素的空间,也就是将元素向右移动. #box_relative { position: relative; left: 30px; top:…

元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 提示:背景应用于由内容和内边距.边框组成的区域. 一.CSS 内边距属性 属性 描述 padding 简写属性.作用是在一个声明中设置元素的所内边距属性. padding-bottom 设置元素的下内边距. padding-left 设置元素的左内边距. padding-right 设置元素的右内边距. padding-top 设置…

一.背景: CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果. 1.背景色 可以使用 background-color 属性为元素设置背景色.这个属性接受任何合法的颜色值. 例如: p {background-color: gray;} 2.背景图像 要把图像放入背景,需要使用 background-image 属性.background-image 属性的默认值是 none,表示背景上没有放置任何图像.如果需要设置一个背景图像,必须为这个属性设置一个 URL 值: body…

一.伪类: 属性 描述 :active 向被激活的元素添加样式. :focus 向拥有键盘输入焦点的元素添加样式. :hover 当鼠标悬浮在元素上方时,向元素添加样式. :link 向未被访问的链接添加样式. :visited 向已被访问的链接添加样式. :first-child 向元素的第一个子元素添加样式. :lang 向带有指定 lang 属性的元素添加样式. 例如:在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标…

一.选择器 1.ID选择器: 语法:首先,ID 选择器前面有一个 # 号 - 也称为棋盘号或井号.请看下面的规则: *#intro {font-weight:bold;} 与类选择器一样,ID 选择器中可以忽略通配选择器.前面的例子也可以写作: #intro {font-weight:bold;} 这个选择器的效果将是一样的. 2.类选择器: 语法:然后我们使用以下语法向这些归类的元素应用样式,即类名前有一个点号(.),然后结合通配选择器: *.important {color:red;} 如果…