一、水平对齐方式

  1.  <style>
  2.         p{
  3.             width:200px;
  4.             height: 50px;
  5.             line-height: 50px;
  6.             background: pink;
  7.             text-align: center;
  8.         }
  9.     </style>
  10. </head>
  11. <body>
  12.     <!--
  13.         文本水平对齐方式：
  14.         text-align：left / center / right
  15.         单行文本想让文字在这个盒子里垂直居中
  16.         高度 = 行高
  17.     -->
  18.   <p>内容内容内容</p>  
  19. </body>

二、边框属性

边框border: 线型（solid / dashed / dotted / double）粗细（数值 + 单位） 颜色;
右边框border-right: 线形（solid / dashed / dotted / double) 粗细（数值 + 单位） 颜色;
左边框 border-left: 线形（solid / dashed / dotted / double）粗细（数值 + 单位）颜色;
上边框 border-top: 线形（solid / dashed / dotted / double) 粗细（数值 + 单位） 颜色;
下边框 border-bottom: 线形(solid / dashed / dotted / double) 粗细（数值 + 单位）颜色;
solid: 实线，dashed: 虚线，dotted: 点状线，double: 双线

三、关于背景的 css 声明

1、背景颜色
语法：选择符 {background-color: 颜色值;}
简写：background: color 值;

2、背景图片的设置
语法：background-image:url (背景图片的路径及全称)；
网页上有两种图片形式：插入图片、背景图；
插入图片：属于网页内容，也就是结构。
背景图：属于网页的表现，背景图上可以显示文字、插入图片、表格等。

3、背景图片的显示原则
1）容器尺寸等于图片尺寸，背景图片正好显示在容器中;
2）容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素；
3）容器尺寸小于图片尺寸，只显示元素范围以内的背景图
加载背景图必须有容器区域；

4、背景图片平铺属性
语法：选择符

{background-repeat:no-repeat / repeat / repeat-x / repeat-y }

no-repeat: 不平铺
repeat：平铺 (默认)
repeat-x：横向平铺
repeat-y ：纵向平铺

5、背景图的固定
语法：选择符{background-attachment: scroll(滚动) / fixed(固定);}
说明：
fixed: 固定不随内容一块滚动
scroll: 随内容一块滚动

6、背景图片的位置
语法：background-position: 50px 30px;
选择符{background-position:left / center / right / 数值 top / center / bottom / 数值;}
水平方向上的对齐方式（left / center / right）或值
垂直方向上的对齐方式(top / center / bottom)或值
水平向右 垂直向下移动 是正数值
水平向左 垂直向上移动 是负数值

7、Background-position 说明：
两个值 ：第一个值表示水平位置的值，
第二个值表示垂直的位置。
例如：当两个值都是 center 的时候写一个值就可以代表的是水平位置和垂直位置。

8、背景属性的缩写语法：
background:属性值1 属性值2 属性值3；
背景缩写：
{background:#00ff00 url（背景图片的路径及全称） no-repeat center top；}

9、网页上常用的图片格式（压缩图片）
1) jpg: 有损压缩格式，靠损失图片本身的质量来减小图片的体积，适用于颜色丰富的图像;(像素点组成的，像素点越多会越清晰)
2）gif：有损压缩格式，靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画，适用于颜色数量较少的图像;
3) png: 有损压缩格式，损失图片的色彩数量来减小图片的体积，支持透明，不支持动画，是 fireworks 的源文件格式，适用于颜色数量较少的图像;

四、制作三角形

思想：利用 border 的三个属性(宽度，类型，颜色)，绘制出一个正方形，而且这个正方形就是由四个三角形组合而成，然后再保留一个方向的三角形，让其他方向的颜色透明即可；

        <style type="text/css">
            body,ul,ol,p,h1,h2,h3,h4,h5,h6{
                padding: 0;
                margin: 0;
            }
            #sanjiao{
                margin: 50px auto;
                width: 0;
                height: 0px;
                border-width: 100px;
                border-style: solid;
                border-color: blue red yellow transparent;
            }
        </style>
    </head>
    <body>
        <div id="sanjiao"></div>
    </body>
  // 不需要设置盒子的长和宽

五、元素分类

1. HTML 元素分类

根据 css 显示分类，HTML 元素被分为三种类型:块状元素，内联元素，可变元素

  1. 块状元素（block element）四大特点：
    A: 块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，常用的块状元素包块div,dl,dt,dd,ol,ul,fieldset,(h1-h6),p,form,hr,iframe,colgroup,col,table,tr,td,等；
    B: 默认情况下，块状元素都会占据一行，通俗地说，两个相邻块状元素不会出现并列显示的现象；默认情况下，块状元素会按顺序自上而下排列。
    C: 块状元素都可以定义自己的宽度和高度。
    D: 块状元素一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子。

  2. 内联元素（inline element）（或是行内元素）
    内联元素三大特点：
    A: 内联元素的表现形式是始终以行内逐个进行显示；
    B: 内联元素没有自己的形状，不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定，它的最小内容单元也会呈现矩形形状；
    C: 内联元素也会遵循盒模型基本规则，如可以定义padding, border, margin, background等属性，但个别属性不能正确显示;(padding-top:;margin-top/bottom:;)

  3. 可变元素
    需要根据上下文关系确定该元素是块元素或者内联元素。

2. 块级元素

块级元素(block element)
div -最常用的块级元素
dl - 和dt-dd 搭配使用的块级元素
form - 交互表单
h1 - h6 - 大标题
hr - 水平分隔线
ol – 有序列表
p - 段落
ul - 无序列表
li
fieldset - 表单字段集
colgroup-col - 表单列分组元素
table-tr-td 表格及行-单元格

3. 行级元素

内联元素(inline element)
a –超链接（锚点） b - 粗体(不推荐)
br - 换行 i - 斜体
em - 强调
img - 图片 input - 输入框
label - 表单标签
span - 常用内联容器，定义文本内区块
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
u - 下划线
select - 项目选择

三原色
红绿蓝
rbg（255 255 255 .5）
最大为255 只有 rbg 的方式才能用 点几 的方式设置透明度