新手笔记——CSS高级应用
什么是盒子模型
盒子模型是一个极其通用的描述矩形对象布局形式的方法。这些矩形对象统称为盒子，英文box
一个盒子模型有content（网页内容）、border（边框）、padding（内边距）、margin（外边距）四部分组成
content（网页内容）：位于最中间，网页的主要显示内容
border（边框）：为主内边距外面，如果没有内边距就是包着内容的外框。它一般具有一定的厚度
padding（内边距）：位于边框内部的空隙，是内容与边框的距离。
margin（外边距）：位于边框外部的空隙，是边框与外围的距离
PS:因为盒子是矩形结构，所以边框、内边距。外边距这些属性分别对应上（top）、下（bottom）、左（left）、右（right）四条边，这四条边的设置可以不同
边框 border
border有三个属性，分别是color（颜色）、width（粗细）和style（样式）
使用CSS设置边框时，分别使用border-color、border-width和border-style设置边框的颜色、粗细和样式
border-color
border-color的设置方法与文本的color属性或背景颜色background-color一样，可以使用十六进制设置边框的颜色，如红色#FF0000;也可以使用RGBA的颜色表示方法
因为边框分为上、下、左、右四个边框，所以设置边框时用要顺时针上、右、下、左的顺序来设置四个边框，也可以同时设置四个边框的颜色
属性 说明 示例
border-top-color 设置上边框颜色 border-top-color:#369;
border-right-color 设置右边框颜色 border-right-color:#369;
border-bottom-color 设置下边框颜色border-bottom-color:#369;
border-left-color 设置左边框颜色 border-left-color:#369;
border-color 设置四个边框颜色 border-color:#369;
设置上下边框颜色为#369，左右边框颜色为#000
border-color:#369 #000;
上、右、下、左，没有找对边
border-width
border-width用来指定边框的粗细程度，取值有thin、medium、thick和像素值
thin:设置细的边框。
medium:默认值，设置中等的边框，一般的浏览器都将其解析为 2px。
thick:设置粗的边框。
像素值：具体的数值，自定义边框的宽度，如1px、5px等
border-width属性用法与border-color一样，既可以分别设置，也可以同时设置，下面以像素值设置为例：
属性 说明 示例
border-top-width 设置上边框粗细为5px border-top-width:5px;
border-right-width 设置右边框粗细 border-right-width:5px;
border-bottom-width 设置下边框粗细border-bottom-width:5px;
border-left-width 设置左边框粗细 border-left-width:5px;
border-width 设置四个边框粗细为5px border-width:5px;
设置上、下边框粗细为20px，左右为5px
border-width:20px 5px;
设置上边框粗细为5px，左右为1px，下边框粗细为6px
border-width:5px 1px 6px;
设置上下左右分别是1 3 5 2px
border-width:1px 3px 5px 2px;
border-style
border-style用来指定边框的样式，取值有none、hidden、dotted、dashed、solid、double、groove、ridge和outset等。
其中none、dotted、dashed、solid在实际网页制作中经常用到。
none表示无边框，dotted表示点线边框，
dashed表示虚线边框，solid表示实线边框
由于dotted、dashed在大多数浏览器中显示为实线，因此在实际网页应用中，为了浏览器的兼容性，常用的值基本为none和solid
border-style属性用法与border-color和border-width一样，既可以分别设置，也可以同时设置
属性 说明 示例
border-top-style 设置上边框为实线 border-top-style:solid;
border-right-style 设置右边框为实线 border-right-style:solid;
border-bottom-style 设置下边框为实线border-bottom-style:solid;
border-left-style 设置左边框为实线 border-left-style:solid;
border-style 设置四个边框为实线 border-width:solid;
设置上、下边框为实线，左右为点线
border-style:solid dotted;
设置上边框为实线，左右为点线，下边框为虚线
border-style:solid dotted dashed;
设置上下左右分别是实线、点线、虚线、双线
border-style:solid dotted dashed double;
border的简写属性
当同时设置丧属性是，border-color、border-width、border-style的顺序没有限制，可以按任意顺序设置，当时通常的顺序为粗细、颜色和样式
外边距margin
外边距（margin）位于盒子边框外，至于其他盒子之间的距离，也就是指网页中元素与元素之间距离。
外边距与边框一样，也分为上外边距、右外边距、下外边距、左外边距，设置方式和设置顺序也基本相同
属性 说明 示例
margin-top 设置上外边距 margin-top:1px
margin-right 设置右外边距 margin-right:2px
margin-bottom 设置下外边距 margin-bottom:2px
margin-left 设置左外边框 margin-left:1px
margin 设置上右下左外边距分别是3px，5px，7px，4px
margin:3px 5px 7px 4px;
设置上下外边距为3px，左右为5px
margin:3px 5px ;
设置上外边距为3px，左右为5px,，下为7px
margin:3px 5px 7px ;
margin 设置上右下左外边距都是8px
margin:8px;
PS：按照“上、下、左、右”“没有找对边”的方式去设置对应的外边距
标准文档流程
块级元素
<h1>...<h6>、<p>、<div>、列表
内联元素
<span>、<a>、<img/>、<strong>...
display属性
控制元素的显示和隐藏
块级元素与行内元素的转变
值 说明
none 设置元素不会被显示
inline 元素会被显示为内联元素
block 元素会被显示为块级元素
inline-block 行内块元素
浮动—float属性
属性值 说明
left 元素向左浮动
right 元素向右浮动
none 默认值，元素不浮动
cleat属性
清楚浮动
属性值 说明
left 在左侧不予许浮动
right 在右侧不予许浮动
使用clear属性拓展盒子高度
overflow属性
属性值 说明
visible
