注：转自zctya's blog 在用CSS+DIV的布局中，经常会发现，当一个DIV float之后，如果他的高度超过了其父DIV的高度时，其父DIV的高度并不会相应的进行调整。要解决这个问题（也叫做闭合(清除)浮动），我们有四种办法： 1. 额外标签法 这种方法就是向父容器的末尾再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需 要额外的（而且通常是无语义的）标签...
最近半忙不忙的写了一个外包网站，网站主要功能是艺术品竞拍和艺术衍生品的销售。工程已经完成了80%左右，现在前后端代码量已经50W行左右，我主要负责的是前端设计和前端布局。下面就先放一个网站的设计图吧，因为涉及到甲方的“商业机密”，所以打一下马赛克： 这篇文章主要算是我对于这个项目的总结或者说是对于这阶段自己看的一些前端书或者经验的一个总结吧，所以设计图就不贴那么多了。整个项目的设计图由...
一、从扮演浏览器开始 扮演浏览器是Head First图书中很有意义的一个环节。可作者忘记了告诉我们扮演浏览器的台本。我们从这里开始。 上图是webkit内核渲染html和css的流程图。从该图我们可以知道以下几个关键信息： HTML的解析过程和CSS的解析过程是独立完成的。HTML被解析成DOM树；CSS被解析成样式规则。 HTML与CSS在被解析后，会结合在一起形成视图，然后被绘制。显示。 二、导图 导图是该系列文...
一、选择器 1、ID选择器： 语法：首先，ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。请看下面的规则： *#intro {font-weight:bold;} 与类选择器一样，ID 选择器中可以忽略通配选择器。前面的例子也可以写作： #intro {font-weight:bold;} 这个选择器的效果将是一样的。 2、类选择器： 语法：然后我们使用以下语法向这些归类的元素应用样式，即类名前有一个点号（.），然后结合通...
0、浏览器默认样式 当你不为html元素设置任何样式时，显示在浏览器上的（比如：元素会显示粗体、元素有纵向margin、元素字号比元素大一倍……）这是为什么呢？ 因为浏览器自带一个默认的样式，在html元素未被设置样式时，浏览器会按照自己默认的样式来显示。但是浏览器默认样式的级别是最低的，一旦有其他地方设置了样式，浏览器默认样式就会被覆盖掉。 注意，不同浏览器的默认样式有些地方是不一样的。例如，我们在写css...
一、背景： CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。 1、背景色 可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。 例如： p {background-color: gray;} 2、背景图像 要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。如果需要设置一个背景图像，必须为这个属性...
一、继承 继承：所谓CSS样式继承，就是子元素应用父元素的规则声明。（由这一特性，可将CSS属性分为可继承属性和非可继承属性。）可继承属性：属性值可由父元素继承给子元素的属性称之为可继承属性。 哪些属性是可继承属性？ 1、文本样式属性 text-indent、text-align、word-spacing、letter-spacing、text-transform、text-decoration、direction、white-space 2、字体样式属性 font、font-family、font-size、font-s...
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。 提示：背景应用于由内容和内边距、边框组成的区域。 一、CSS 内边距属性 属性 描述 padding 简写属性。作用是在一个声明中设置元素的所内边距属性。 padding-bottom 设置元素的下内边距。 ...
一、定位： 1、定位的理解 （1）相对定位 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。 #box_relative { pos...
最近做了几个项目：配资公司，ecmal商城等，客户对前台要求都很高。所以，今天来谈谈css的基础，以及核心，定位问题。 div、h1或p元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span和h3等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。 在这种情况下，这个框称为无名块框，因为它不与专门定义的元素相关联。 块级元素的文本行也会发生类似的情况。假设有一个包含三...
文章整理了Web前端开发中的各种CSS规范，包括文件规范、注释规范、命名规范、书写规范、测试规范等。 一、文件规范 1、文件均归档至约定的目录中。 具体要求通过豆瓣的CSS规范进行讲解： 所有的CSS分为两大类：通用类和业务类。通用的CSS文件，放在如下目录中： 基本样式库 /css/core 通用UI元素样式库 /css/lib JS组件相关样式库 /css/ui 业务类的CSS是指和具体产品相关的文件，放...
引子： 开始的时候我想先要解决一个问题，怎么设置一个div盒子撑满整个屏幕？ 看下面的html代码： 实现方法一： html, body,#father-body{ height:100%; width:100%; background-color:#123456; } 这里主要解释下%(百分号)在CSS中使用的问题。% 主要是在父级元素或者是祖先元素定义了固定的width 和height 的时候才可以使用（或者说使用的时候才会有效果）。 实现方法二： #father-body{ positi...
新手，求喷，刚刚知道每个浏览器都有对 标签的初始化，就造成我们网站开发者开发的web程序，会在不同的网站上有不同的样式风格，这给用户带来了很不好的体验，这也是浏览器本身的原因造成的，这时候，我们不可能过多的去限制用户的自然选择，所以我们只能优化我们自身的代码，使得我们的web程序兼容性更好，这就需要我们对一些常用基本的标签进行初始化，下面是可以借鉴的几个门户网站的css初始化代码： 腾讯QQ官网 样式初始...
看CSS权威指南，觉得有价值的探究，关于行高和垂直对齐 行高 line-height属性是指文本行基线之间的最小距离，而不是字体的大小 首先，基线(baseline)指的是英文四线格的倒数第二条线。 其次，关于font-size，字体大小受font-size形成的em框限制。 最后，在line-height设定时，由line-height决定基线间最小距离。 关于上图 A line box containing some text and elements. 一行文字被放在一个line b...
一、什么是SASS SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。 本文总结了SASS的主要用法。我的目标是，有了这篇文章，日常的一般使用就不需要去看官方文档了。 二、安装和使用 2.1 安装 SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS。 假定你已经安装好了Ruby，接着在命令行输入下面的...