武林半侠的博客

CSS 5.1 框模型框模型概述 1.css框模型规定了元素内容（element），边框（border），内边距（padding），外边距（margin）。  2.浏览器兼容性一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而IE 5 和6 的呈现却是不正确的。根据W3C 的规范，元素内容占据的空间是由width 属性设置的，而内

CSS 8.3 高级-display，visibility和cursor 一．display属性最常用的none、block、inline、inline-block1.none，此元素不会被显示，且不保留元素位置。 div {display: none} div+b{ color:red; }

CSS 9 响应式与自适应 一.响应式与自适应的区别1.自适应会自动检测屏幕的大小来加载适当的工作布局，也就是说，当你要采用自适应设计网站时，你得一个一个设计6种常见的屏幕布局。①320  ②480  ③760  ④960  ⑤1200  ⑥1600而且设计是基于断点使用静态布局，一旦页面被加载就无法再进行自动适应。 2.响应式的概念应该覆盖了自适应，而且涵盖的内容更多

CSS 9 响应式与自适应补充--viewport的深入理解(转载) 移动前端开发之viewport的深入理解在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。一、viewport的概念通俗的讲，移动设备

CSS 9 响应式与自适应补充--Media Queries详解(转载)  Media Queries直译过来就是“媒体查询”，在我们平时的Web页面中head部分常看到这样的一段代码：      或者这样的形式：      @import url("css/style.css");  不知道大家留意没有，其中两种方式引入CSS样式都有一个共同的属性“med

CSS 7.7 伪元素 1.伪元素是对（CSS中）元素的特定内容进行操作。如：p：first-letter {}p：first-line {}p：before {}p：after {} 2.first-letter，元素文本的第一个字（母）例如：p:first-letter {  color:#ff0000;  font-size:2em;}

CSS 10 继承 1.不可继承属性position  z-index  display  float  clear  overflowborder及其相关outline及其相关background及其相关width  height及其相关margin  padding及其相关top  bottom  left  right及其相关text-decorati

CSS 4.1 样式-背景1.CSS允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。CSS在这方面的能力远远在 HTML之上。注意：所有背景属性都不能继承。2.背景色 background-color属性。默认值为transparent透明色。例如1：body {background-color: yellow}h1 {backgr

CSS 8.4 导航条 1.导航条都是用ul-li-a做的，关键在于CSS Home News Contact About

CSS 5.3 框模型-内边距和外边距1.内边距：padding（填充，内边距）可能的值：数值或百分比，默认值0注：百分比是相对于其父元素的 width计算的，这一点与外边距一样。所以，如果父元素的 width改变，它们也会改变。例如：①padding：5px（上）2cm（右）1em（下）10%（左）；//顺时针②padding：5px（上）2

CSS3 1.新的边框属性属性描述CSSborder-image设置所有 border-image-* 属性的简写属性。3border-radius设置所有四个 border-*-radius 属性的简写属性。3box-shadow

CSS 2 颜色 1. 颜色的组成计算机颜色是通过对红red、绿green和蓝blue的组合来显示的。注：与绘画中的三原色红黄蓝不同。 2. 十六进制显示颜色格式：#RRGGBB例如：红色：#ff0000（或#FF0000）绿色：#00ff00（或#00FF00）蓝色：#0000ff（或#0000FF）黄色：#ffff00（或#FFFF00）黑色

Bootstrap CSS编码规范 1语法1）用两个空格来代替制表符（tab）-- 这是唯一能保证在所有环境下获得一致展现的方法。2）为选择器分组时，将单独的选择器单独放在一行。3）为了代码的易读性，在每个声明块的左花括号前添加一个空格。4）声明块的右花括号应当单独成行。5）每条声明语句的 : 后应该插入一个空格。6）为了获得更准确的错误报告，每条声明都应该独占

CSS 7.3 选择器-属性选择器 1.匹配含有某属性的元素①匹配含有某属性的所有元素。格式： *[属性] {声明}例如： *[title] { color：red；}  ②匹配含有某属性的特定元素。格式： 元素[属性] {声明}例如： p[href] {color：red：}③匹配同时含有属性1属性2···的特定元素。格式： 元素[属性1][属性2]·

CSS 7.2选择器-类选择器和id选择器注：别用类代替id，虽然功能上类似。因为：当你为一个元素设置id时，别人就知道这是需要唯一的css了，不能用在别处。如果用了类，不能有效的阻止别人将其他元素命名相同的类，使用这个css规则。1.HTML中的类①HTML中不同元素可以起一个类名。格式：元素 class=“类名”>例如：“important”>···“imp

清除浮动的方法一．为什么要清除浮动.div1{background:#800080;border:1px solid red;} .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} .div11{width: 80px;height: 80px;background: red;

CSS 6.1 定位-定位概述 1.一切皆为框。在网页中所有元素都有一个框（只是有的隐藏了），如：等块级元素，即块框；等行内元素，即行内框。注：所谓元素包括及其包含的内容。 2.与定位相关的属性："left", "top", "right" 以及 "bottom" 可能的值：top定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移

CSS 4.2 样式-文本 1.文本颜色color例如：“text/css”>  body { color：red；}  p.class { color：green；}结果： 2.文本首行缩进text-indent，默认为0，即不进行首行缩进。①text-indent=数值例如：“text/css”>  p { text-indent：2

CSS 7.6 伪类 1.链接的伪类·a：link，普通的，未被访问的链接·a：visited，已访问过的链接·a：hover，鼠标指针在链接上时，hover ['hʌvɚ]徘徊·a：active，鼠标点击链接时·a：focus，向拥有键盘输入焦点的元素添加样式。 注1：有顺序要求（focus无顺序要求）：link -> visited -> hover -

CSS 7.5 选择器-子元素、相邻兄弟和普通兄弟选择器1.子元素选择器。选择作为某元素的子元素的元素。格式：父元素 > 子元素 {声明}例如：h1 > strong { color：red；}HTML中：····························· //可以匹配················· //不可以匹配注1：与后

CSS 1 初识 1.CSS基础语法CSS由选择器和声明组成。selector { declaration1；declaration2；···}选择器是要改变样式的HTML元素。每条声明由一个属性和一个值组成。declaration = property ：value例如：h1 { color：red；font-size：14px；} 注意事项：

CSS 8.5 图像透明度  1.属性opacity/filter。opacity [o'pæsəti]不透明，filter ['fɪltə]过滤格式：opacity:0.4;filter:alpha(opacity=40); /* 针对 IE8以及更早的版本 */注：IE9, Firefox, Chrome, Opera 和 Safari使用属性 opac

CSS 6.2 定位-浮动 浮动属性float可能的值描述left元素向左浮动。right元素向右浮动。none默认值。元素不浮动，并会显示在其在文本中出现的位置。inherit规定应该从父元素继承 float 属性的值。

HTML 18.5 表单的布局 我们一般用表格来为点单布局。事实上，使用CSS布局表单是非常困难的。 1.表单布局的草图：  2.编写表格代码表单 Choose your beans: House Blend Bolivia

CSS 3 如何插入样式表 当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种：1.外部样式表当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。标签只能在（文档的）头部。例如：“stylesheet”type=“tex

CSS 8.2 高级-尺寸 一．高度属性height，宽度属性width注1：这个属性定义元素内容区的高度/宽度，在内容区外面可以增加内边距、边框和外边距。注2：行内非替换元素会忽略这个属性。行内非替换元素参见CSS 8.2高级-对齐补充可能的值描述auto默认。浏览器会计算出实际的高度。len

CSS 8.2 高级-对齐补充（关于行内元素，块元素，替换元素和非替换元素及其width height margin padding特性）一、各种元素的width height margin padding特性1.块级元素 例如：div pwidth、 height、margin的四个方向、padding的四个方向都正常显示，遵循标准的css盒模型。2.行内替换元

CSS 8.1 高级-对齐一．居中对齐，使用margin属性，将左右外边距设为auto。注1：浏览器在显示时，默认左对齐。包含外边距的左对齐。这里要实现居中对齐是相对于边框border说的。注2：将左右边距设为auto，实际上左右边距=(父元素宽度-此元素宽度)/2。从外边距的角度看是做对齐，从边框的角度看是居中了。注3：margin只用来居中对齐才好用，若用来左对齐好说，ma

CSS 4.2 样式-文本补充，css中的长度单位 其实css中的长度单位一共有8个，分别是px，em，pt，ex，pc，in，mm，cm；相对长度单位：px：像素（Pixel）,相对于设备的长度单位，像素是相对于显示器屏幕分辨率而言的。譬如，WONDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。em：相对长度单位。相对于当前

CSS 4.3 样式-字体 1.字体系列font-family字体包括通用字体系列和特定字体系列。通用字体系列：相似外形的字体的组合，包含n个特定字体。用5种：Serif字体：成比例（i和m不一样大），且有上下短线。包括：Times、Georgia和 New Century Schoolbook。Sans-serif字体：成比例，无上下短线。包括： Helvetica、

CSS 7.4 选择器-后代选择器 1.后代选择器又称为包含选择器。可以选择作为某元素后代的元素。格式：元素1  元素2  元素3···{声明}例如：h1  em { color：red；}解释：把作为h1元素的后代元素em的文本变成红色。HTML中：·············· //可以匹配·············   //不可以匹配 2

CSS 7.1 选择器-元素选择器 1.所谓的元素选择器，在W3C标准中，元素选择器也称为类型选择器。就是我们最常用的，选择器是元素的。例如：p { color：red；}h1 { color：red；}a { color：red；}html { color：red；}   //html包含的元素颜色都是redbody { color：red；}  //body

CSS 6.1 定位补充-详细讲解Clip属性（转载） Clip属性是大家经常会误解的一个属性，这篇文章帮助大家充分的了解和学习clip属性，用这个属性制作出更好的效果。我可以确定Clip属性有很多同学并不知道，因为这个属性使用率非常的底，我初次接触是在Drupal的主题之中，他们有一段用来隐藏文本的代码，就是使用的clip属性。/* Hide only visually, but

CSS 5.2 框模型-边框 1.边框的样式border-style（简写属性）格式：border-style：上 右 下 左；可能的值：值描述none定义无边框。hidden与 "none" 相同。不过应用于表时除外，对于表，hidden用于解决边框冲突。dot

CSS 4.7 样式-轮廓 1.轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。CSS outline属性规定元素轮廓的样式、颜色和宽度。例如：  2.轮廓样式outline-style值描述none默认。定义无轮廓。dotted定义

CSS 4.6 样式-表格 1.表格边框border属性这里的border是简写属性，即将border-width，border-style，border-color写在一起例如：table, th, td  {  border: 1px solid blue;  }注：有先后顺序，但可以省略某个table, th, td  {  border: 1px blue;  }具

CSS 4.5 样式-列表 1.改变列表样式list-style-type，无序列表ul方块或圆点，有序列表ol数字或字母格式：ul { list-style-type：square；}        //方块ol { list-style-type：upper-roman；}   //大写罗马字母值描述none无

CSS 4.4 样式-链接 1.链接的四种形态：·a：link，普通的，未被访问的链接·a：visited，已访问过的链接·a：hover，鼠标指针在链接上时，hover ['hʌvɚ]徘徊·a：active，鼠标点击链接时 注意顺序要求：link -> visited -> hover -> active或visited -> link -> hover

CSS各种居中方法（转载） 1.水平居中的text-align:center 和 margin:0 auto注1： 这两种方法都是用来水平居中的，前者是针对父元素进行设置而后者则是对子元素。注2：他们起作用的首要条件是子元素必须没有被float影响，否则一切都是无用功。注3：margin:0 auto 2.垂直居中的line-height注：作用在父元素上，当他