CSS样式--CSS样式相关基础、盒子模型相关样式

1 样式作用

CSS（Cascading Style Sheets）层叠样式表，当标签没有颜色没有内容时，在浏览器中看不出效果。因此样式表是配合标签使用，主要作用如下：
1）装饰
对于元素（可视标签）进行装饰，如背景色，边框线，字体等等
2）排版布局
对元素的排版控制，如元素的宽高，元素之间的距离，位置，元素横排显示等等

2 样式书写

样式写在style标签中，页面变好看的地方。
1）选择器（选择给谁化妆，就给谁添加样式）
找到HTML结构中，需要被添加样式的元素
2）申明
具体要添加修改的样式，包含属性，和属性值两部分
分号代表样式的结束。

		选择器{
					属性:属性值;
		}

3 样式书写的位置

样式有写在head里面，body里面以及外部文件引入页面中。

3.1 头部样式（内联样式）

样式写在head之内，但其功能也是对body之内的标签进行装饰。写在head标签中的style标签内，要指定并书写选择器。

3.2 外部样式（外联样式）

写在单独的.css后缀的文件中，外部文件中要写明文件编码格式以及指定选择器。注意：外部标签不要添加注释，容易在浏览器中显示不出来。通过 link连接标签引入：

3.3 行内样式

直接写在元素行内的style属性的属性值里，不需要选择器，因为样式是直接在标签（选择器）里面写，不需要进行选择。

css选择器是对HTML结构中的一个或者一类元素通过选择器属性进行标记，然后可以通过这些标记找到对应的元素，为其添加样式。

4 选择器的写法

1）定义选择器
定义选择器实际上只是为标签添加了一个属性和属性值作为标记，选择器分为：
①　类名属性（class选择器或类选择器）：标记是小数点 .
②　ID属性（id选择器）：标记是#（哎呀，你掉进井里了）
③　标签名选择器：只需要写对应的标签名字
2）书写选择符
根据定义的选择器，为标签添加样式

id和class选择器区别：
1）相同的id属性值只能出现一次，具有唯一性。id属性可有多个，但一个属性值只能出现一次。
2）class在一个页面可出现多次。
使用区别：
样式使用class多一些。

锄禾日当午

锄禾日当午

（1）做重复性同一样式，最好用class样式写。 （2）id和class可以放在一起写。 （3）相同的属性会被覆盖，加载最后一个，因为网页是从上往下依次解析编码的。 

5 通配符选择器（*）

通配符选择器是一个特殊的选择器，能够选中所有的标签元素，为所有标签添加样式。原因是每个浏览器对1px的标准可能不一样，因此有可能相同的代码在不同浏览器实现效果不同。因此对某些样式进行初始化，可以减少浏览器带来的影响。

				*{
						margin:0px;
						padding:0px;
				}

6 盒子模型相关样式

网页中构成布局的元素均为矩形，那么矩形的宽高，边距等等特性的表现可以被抽象的理解为一个盒子。

盒子与盒子之间的关系：
1） 这些盒子可能大小各异
2）这些盒子之间间隔可能有大有小
3）大盒子里放小盒子，小盒子的位置不确定
4）盒子边缘的厚度可能有厚有薄
所以实际上总的来说，网页元素在组成一个结构的时候最主要的东西就是如下的四个区域与样式：

1. content--元素的宽高(width/height)
2. padding--元素的内边距(padding)
3. border--元素的边框(border)
4. margin--元素的外边距(margin)

7 盒模型具体样式

7.1 width/height （元素）宽与高

属性：

width:100px;
height:100px;

功能：
设置元素的宽度、高度
值：
固定像素值：

							p{ 
								width:100px; 
								height:100px;
							}

百分比（基于父级元素的百分比）：

							p{
									height:10%;
							}

7.2 padding （元素）内边距

属性：

 	padding-top：元素顶部（上）与内部元素的距离
    padding-right：元素右侧（右）与内部元素的距离
    padding-bottom：元素底部（下）与内部元素的距离
    padding-left：元素左侧（左）与内部元素的距离  

功能：
设置元素内边距
值：
固定像素值：p{padding-left:100px; }
百分比（基于父级）：p{ padding-top:10%; }
复合样式（顺时针匹配，若无说明像素值，则与对边值相等）：

padding:10px;
（一个值，上下左右：10px）
padding:10px 20px;
（两个值，上下：10px  左右：20px）
padding:10px 20px 30px;
（三个值，上：10px  左右：20px  下：30px）
padding:10px 20px 30px 40px;
（四个值，上--10px 右--20px 下--30px 左--40px ）

7.3 border （元素）边框

包围元素的边框大小
边框的宽度：
border-width；
属性值：
像素单位
边框的颜色：
border-color；
属性值：
A.关键字：red , black , white , yellow , green , blue …
B. 16进制颜色值：#ffffff，#000000（默认为黑色）
边框的风格：
border-style
属性值：

				none : 无边框（默认值）
       			solid：实线
       			dashed：虚线
       			dotted：点状线
       			double：双实线
       			groove ：3D凹槽
       			ridge：3D立槽
      			inset：3D嵌入边框1
       			outset：3D嵌入边框2
				transparent:透明线

复合样式写法：

1px solid red;

复合样式：
所有边框的单个属性（width或color或solid）：

	border-width:10px;（一个值）
	border-width:10px 20px;（两个值）
    border-width:10px 20px 30px;（三个值）
    border-width:10px 20px 30px 40px;（四个值）
    border-color: red;（一个值）
    border-style: solid;（一个值）

所有边框线的所有属性：

  border:1px solid red;

单条边框线的所有属性：

  	border-left:1px solid red;
    border-right;

单条边框线的单个属性：

	 border-left-width:10px;
    border-left-style:solid;
    border-left-color:red;
    border-right-color:red;

7.4 margin （元素）内外边距

元素的边框外部的距离。
属性：

 	margin-top：元素顶部（上）与外部元素的距离
    margin-right：元素右侧（右）与外部元素的距离
    margin-bottom：元素底部（下）与外部元素的距离
    margin-left：元素左侧（左）与外部元素的距离  

功能：
设置元素外边距
值：
auto:浏览器计算外边距（居中）
length:规定以具体单位计算外边距，如像素、厘米，默认值为0.
%：基于父级元素计算外边距。

复合样式 （顺时针匹配，没有值与对边相等）：

margin:10px;
（一个值，上下左右：10px）
margin:10px 20px;
（两个值，上下：10px  左右：20px）
margin:10px 20px 30px;
（三个值，上：10px  左右：20px  下：30px）
margin:10px 20px 30px 40px;
（四个值，上：10px 右：20px 下：30px 左：40px）

8 边距和合并与溢出

只有上下外边距会发生溢出或合并现象，左右不会。
外边距合并原理:
1）父子关系的上下
当父子关系的两个元素，子级拥有上下外边距时，其外边距不会作用于父级，而是会传递给父级
2)兄弟关系的上下
当上下相邻的两个元素，在相邻的面同时拥有外边距时，其外边距值只会取其中较大的值

8.1 父子关系的上上或者下下外边距溢出

父子关系的同一外边距溢出取最大值：

8.2 合并

并列关系的上下外边距合并取最大值：