CSS学习总结

CSS是一种通过定义某些样式，可以设置网页元素显示不同的字体、颜色、位置等的语言，被用于描述网页上的信息格式化和现实的方式。

一、元素类型

在CSS中，html中的标签元素大体可分为三种不同的类型：块状元素、内联元素和内联块状元素。

内联元素（display:inline）

内联元素又称 行内元素，其特点为：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
常用的内联元素有：

、、、、 、  、

块级元素（display:block）

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
常用的块状元素有：

、
、
...
、
、
、
、、
、
 、

 
 
**内联块级（display:inline-block）元素 **内联块级元素综合了块级元素和内联元素的优点
 1、和其他元素都在一行上；
 2、元素的高度、宽度、行高以及顶和底边距都可设置
 
 
注意:1、通过给元素设置不同的display（inline/block/inline-block）属性，来改变元素的显示属性。
 2、隐性改变元素属性为inline-block的操作有：position:relative;float:right或者float:left.
 
 
二、盒子模型
 
 
一个盒子模型包括了四部分：外边距（margin）、边框（border）、内边距（padding）、元素内容（element）四个属性。模型如下图所示：
 
 
 
 
  
 
   
 
     
   
 
  
 
  

    元素盒子模型 
  
 
 
 
 
 
 设置属性值遵循的原则是：上右下左。 
 
 
 
三、CSS的三种样式
 
 
内联式：css代码直接写在现有的HTML标签（如p、span...etc）。也就是说，样式的属性内容直接跟在将要修饰的文字标记里。
 嵌入式：css样式代码写在标签之间，嵌入式css样式必须写在之间，并且一般情况下嵌入式css样式写在之间。
 外联式：css代码写在单独的外部文件中，这个css样式文件以“.css”为扩展名，在内（不是在