CSS拾遗

1:CSS样式的声明

选择符{
    属性：值;
    属性：值;
    。。。
}

其中，选择符有：

标签选择器：标签名{样式}

类选择器： .类名{样式}  

ID选择器：  #ID名{样式}

另外：样式属性的书写格式为：小写单词，用 - 分割。

比如：font-size 、 font-family

2：注释

/*注释*／

3:CSS可以出现的地方

內联式：写在HTMl标签内，作为style属性的值，优先级最高。

嵌入式：在HTML文件的head标签之间定义，用<style type="text/css"> </style>包裹。

外联式：在一个CSS文件内定义样式，然后在HTML文件的head标签之间通过以下标签引入：

<link href="文件名.css" rel="stylesheet" type="text/css" />

优先级：内联式 > 嵌入式 > 外部式

4:样式继承

外层html标签等某些样式，可以被内层html标签所继承。也就是说，外层标签的样式可以作用于内层标签的内容。

样式按照就近原则：离内容最近的样式优先起效。

5：！important

有些特殊的情况需要为某些样式设置具有最高优先级，可以使用!important来解决。

选择器{样式:属性值!important;}

注意：!important要写在分号的前面

6:文字排版相关属性

{font-family:"字体样式名";}
{font-size:字体大小px;}
{color:字体颜色值;}
{font-weight:bold;}//粗体
{font-style:italic;}//斜体
{text-decoration:underline;}//下划线
{text-decoration:line-through;}//删除线（用斜线划掉文本内容）

7:段落排版相关属性

p{text-indent:2em;}//段首文字缩进
p{line-height:1.5em;}//行间距
p{letter-spacing:50px;}//字体间距
p{text-align:对齐方式;}//段落内容对齐方式：居中、左对齐、右对齐

8:html标签元素分类

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

 

常用的内联元素（行内元素）有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

内联元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

常用的内联块状元素（同时具备内联元素、块状元素的特点）有：

<img>、<input>

特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

注意：

当元素的样式中，设置以下 2 个句之一：

 1. position : absolute 

 2. float : left 或 float:right 

元素的display显示类型就会自动变为 display:inline-block（块状元素）的方式显示。

9：盒模型

1、宽度：width，min-width，max-width
2、高度：height，min-height，max-height
3、边框：border：线型 颜色 粗细；线形有实线-solid，虚线-dashed，点线-dotted；另外，边框的上下左右（border-top／bottom／left／right）边可以单独设置
4、内边距：内容距边框的距离，padding，上右下左四个方向。
5、外边距：边框距边框之间的距离，margin

元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。【高度同理】

（第八点中的块级标签都具备盒子模型的特征。）

10:CSS布局模型

在网页中，元素有三种布局模型：
1、流动模型（Flow）

流动（Flow）是默认的网页布局模式。

具有2个比较典型的特征：

第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布。

第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。

2、浮动模型 (Float)

如果现在我们想让两个块状元素并排显示，设置元素浮动就可以实现。

设置样式中的 float属性值即可指定往哪个方向浮动。
3、层模型（Layer）【很少用，因为样式适配不灵活】

层模型有三种形式：

1、绝对定位(position: absolute)

设置样式属性position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

2、相对定位(position: relative)

设置position:relative（表示相对定位），相对于之前的位置进行移动，移动的方向和幅度由left、right、top、bottom属性确定。

3、固定定位(position: fixed)

fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化。

11:CSS代码缩写

1）盒子模型的内边距、边框、外边距的四个方向属性值缩写：（以外边距为例）

1、如果top、right、bottom、left的值相同，如下面代码：

margin:10px 10px 10px 10px;
可缩写为：

margin:10px;
2、如果top和bottom值相同、left和 right的值相同，如下面代码：

margin:10px 20px 10px 20px;
可缩写为：

margin:10px 20px;
3、如果left和right的值相同，如下面代码：

margin:10px 20px 30px 20px;
可缩写为：

margin:10px 20px 30px;

2）颜色值缩写

当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。

例子1：

p{color:#000000;}
可以缩写为：

p{color: #000;}
例子2：

p{color: #336699;}
可以缩写为：

p{color: #369;}

 3）字体样式缩写：多合一

body{
    font-style:italic;
    font-variant:small-caps; 
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋体",sans-serif;
}
这么多行的代码可以缩写为一句：

body{
    font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;
}

14:颜色值

设置颜色的方法有三种：（其中，1、3最常用）

1、颜色英文名

p{color:red;}
2、RGB颜色值

这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。

p{color:rgb(133,45,200);}
每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如：

p{color:rgb(20%,33%,25%);}
3、十六进制颜色

这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。

p{color:#00ffff;}

15:长度值3种

1、像素
像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。

2、em
本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：
p{font-size:12px;text-indent:2em;}
上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。


3、百分比
p{font-size:12px;line-height:130%}
设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。

16:CSS样式设置技巧

文字、图片水平居中：如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。 

定宽块状元素水平居中：块状元素的宽度width为固定值时，设置“左右margin”值为“auto”来实现居中。

不定宽块状元素居中：块状元素的宽度width不固定时，有三种方法居中（这三种方法目前使用的都很多）：

1. 加入 table 标签：

   第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。

   第二步：为这个 table 设置“左右 margin 居中”

2. 设置 display: inline 方法：改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。
3. 设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% 。通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

父元素高度确定的单行文本的竖直居中：设置父元素的 height 和 line-height 高度一致来实现。(height: 该元素的高度，line-height:行高（行间距））

父元素高度确定的多行文本、图片等的竖直居中：使用插入 table  (包括tbody、tr、td)标签，同时设置 vertical-align：middle。