CSS盒子边距
关键词：css, 盒子边距, padding, margin
内边距
/* 只设置一边的内边距 */
padding-top: 20px;
/* 四边相同 */
padding: 10px;
/* 上下，左右 */
padding: 10px 20px;
/* 上，左右，下 */
padding: 10px 20px 40px;
/* 上，右，下，左 */
padding: 10px 20px 40px 80px;
外边距
/* 参数个数效果与内边距相同 */
margin:20px
外边距实现盒子居中
/* 能使带有宽度的块元素水平居中 */
/* 上下，水平居中 */
margin: 20px auto
文字水平居中与盒子水平居中的区别
/* 文字水...
CSS盒子边框
关键词：css, 盒子边框, border
盒子边框
/* 边框宽度 */
border-width: 8px;
/* 边框颜色 */
border-color: red;
/* 边框风格 */
border-style:
none：无边框，并忽略所有边框的宽度，默认值
solid：单实线，最常用
dashed：虚线
dotted：点线
double：双实线
单独设置一侧的边框
border-top-color: blue;
简写方式
/* 简写方式：宽度 样式 颜色 */
border: 8px solid green;
合并相邻边框
border-collapse: collapse;
圆角
/* 四个角相同 */
border-radius: 10...
CSS清除浮动
关键词：css, 清除浮动, float
清除浮动
什么是清除浮动？
准确地说，并不是清除浮动，而是清除浮动后造成的影响。
为什么要清除浮动？
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。
清除浮动的本质？
主要为了解决父级元素因为子级浮动引起内部高度为0的问题。
使用方法
通常情况下考虑到子盒子高度会变，一般父盒子不方便给高度。
如果父盒子没有设置高度，里面放置的子盒子是：
标准流布局，子盒子撑开父盒子，父盒子高度会自动变成子盒子高度总和。
浮动流布局，浮动元素不占位置，无法撑开父盒子，父盒子高度为0。（这种情况需要避免）
选择器{clear:属性值;}
...
CSS定位属性
关键词：css, 定位属性, position
定位属性 = 边偏移 + 定位模式
边偏移
定位模式
静态定位 static
默认模式。
其实就是标准流的特性，相当于没写position属性。同时边偏移也会无效。一般用来清除定位。
静态定位模式下，边偏移无效。
相对定位 relativel
不脱离所在的标准流。
以自己原来位置的左上角为基准点进行偏移。原来在标准流中的空间，继续被占用，不因发生移动而改变。
相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待。
相对于自己原来的位置进行偏移。
绝对定位 absolute
脱离所在的标准流。
以有定位的父级元素为基准点进行偏移（所有父级元素都没有定位时，以浏览...
CSS三大特性与权重叠加
关键词：css, 三大特性, 权重叠加, !important
层叠性（新定义的样式会覆盖已定义的样式）
样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
样式不冲突，不会层叠。
继承性
子标签会继承父标签的某些样式，如文本颜色和字号。
特殊性（权重、优先级）
specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
子元素的权重为0。
权重的叠加
权重叠加只会累计数值，不会跨级别进位。所以不管多少个0,0,0,1叠加，也不会变成0,0,1,0
div ul li ------> 0,0,0,3
.nav u...
CSS链接伪类选择器
关键词：css, 链接伪类选择器
链接伪类选择器
不需要的可以去掉，但是顺序不能变动。
<style type="text/css">
a:link {color: red} /*未点击*/
a:visited {color: yellow} /*点击过*/
a:hover {color: green} /*鼠标放在链接上*/
a:active {color: orange} /*按下鼠标*/
</style>
CSS选择器
关键词：css, 选择器, class
标签选择器（元素选择器）
定义
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
<style>
h2 {color: red; font-size: 60px;}
</style>
使用
<h2>这里是一个副标题</h2>
类选择器
命名规则：
长名称或词组可以使用“-”短横线进行连接，不建议使用“_”下划线。
不能使用纯数字命名，选择器会无效。
可以使用中文命名，但不建议使用。
定义
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
<style type="text/css">
.t...
CSS背景图
关键词：css, 背景图, background
背景颜色
background-color: red;
背景图片
background-image: url(images/img123.png);
平铺方式
/* 平铺方式 */
/* repeat-x：背景图像在横向上平铺
repeat-y：背景图像在纵向上平铺
repeat：背景图像在横向和纵向平铺
no-repeat：背景图像不平铺
round：背景图像自动缩放直到适应且填充满整个容器。（CSS3）
space：背景图像以相同的间距平铺且填充满整个容器或某个方向。（CSS3） */
background-repeat: no-repeat;
图片位置
/* 只有当平铺方式为no-repeat时有效。 *...
CSS盒模型
关键词：css, 盒模型, box-sizing
margin：会有外边距合并的问题，不同浏览器可能会出现margin加倍的问题。
padding：会影响盒子大小，需要进行加减计算再使用。
width：没有问题。
盒模型的模式
box-sizing
content-box; 默认值，盒子大小 = width + padding + border
border-box; 这种模式是w3c的标准，盒子大小 = width, 也就是 padding 和 border 是包含在盒子里面的。
.contentModel {
background-color:lightblue;
width: 200px;
height: 200...
CSS样式表
关键词：css, 样式表, !important, style, link
样式表
种类
浏览器缺省设置
外部样式表
内部样式表（位于<head>标签内部）
内联样式（位于HTML元素内部）
优先级
优先权：内联样式 > 内部样式表 > 外部样式表 > 浏览器缺省设置
多重样式优先级顺序（由低到高），内联样式拥有最高优先级。
通用选择器（*）
元素(类型)选择器
类选择器
属性选择器
伪类
ID 选择器
内联样式
规则例外（!important）
当 !important 规则被应用在一个样式声明中时，该样式声明会覆盖CSS中任何其他的声明，无论它处在声明列表中的哪里。
一些经验法...
109 post articles, 11 pages.