目录
伪类
伪元素
子元素和后代元素选择器
盒子模型
边距
边框
边框样式
内联元素盒子模型
伪类
伪类：专门用来表示元素的一种特殊状态
* 比如：访问过的超链接，普通的超链接。获取焦点的文本框
* 当我们需要为这些需要处在这些特殊状态的元素设置样式时，就可以使用伪类
* 给链接设置：
* 正常链接：a:link
* 访问过的链接：a:visited（只能定义字体颜色）
* 鼠标滑过的链接：a:hover
* 正在点击的链接：a:active
* 浏览器通过浏览记录判断链接是否访问过，由于涉及到用户隐私，所以visited只能定义颜色
* hover和active也可以为其他元素设置
例子：
<style type="text/css">/** 为没访问过的链接设置一个颜色*/a:link{color: purple;} a:hover{color: gold;} /** :foucs:获取焦点:before:获取焦点前* :after:获取焦点后::selection:选中的元素* 文本框获取焦点以后，修改背景颜色*/input:focus{background-color: yellowgreen;}</style></head><body><a href="块和内联.html">访问块和内联的链接</a><br /><input type="text" /></body>
鼠标未移动到链接上
鼠标移动到超链接上
鼠标点击输入框之后
伪元素
CSS 伪元素用于向某些选择器设置特殊效果。
伪元素选择器：使用伪元素来表示元素中的一些特殊位置 比如：首字母：:first-letter 首行：:first-line :brfore ：表示元素最前面的部分，一般before都需要和content一起使用 :after ：表示元素最后面的部分，一般after都需要和content一起使用 通过content可以向before和after添加一些内容，不能被选中
伪元素的语法：
selector:pseudo-element {property:value;}
CSS类也可以使用伪元素：
selector.class:pseudo-element {property:value;}
伪元素基本应用例子：
<style type="text/css">/** 为p中的第一个字符来设置一个特殊的样式*/p:first-letter{color: blue;}</style></head><body><p>伪元素选择器</p></body>
子元素和后代元素选择器
子元素选择器；选中指定父元素的指定子元素 * 语法：父元素>子元素{}
例子：
<head><meta charset="utf-8"><title>子元素和后代元素选择器</title><style type="text/css">/** 子元素选择器；选中指定父元素的指定子元素* 语法：父元素>子元素*/div>p>span{color: red;}</style></head><body><div ><p>这是一个div元素中的p元素<br /><span>这是一个div元素中的p元素中的span元素</span></p></div></body>
后代元素选择器：选中指定元素的指定后代元素 * 语法：祖先元素 后代元素{}
例子：
<head><meta charset="utf-8"><title>子元素和后代元素选择器</title><style type="text/css">/*** 为div元素中的span元素设置一个颜色为红色* 后代元素选择器：选中指定元素的指定后代元素* 语法：祖先元素 后代元素{}* */div .o span{color: blue;}</style></head><body><div ><p class="o">这是一个div元素中的p元素<br /><span>这是一个div元素中的p元素中的span元素</span></p></div></body>
盒子模型
CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
一个盒子会分成几个部分：
1.内容区 2.内边距 3.边框 4.外边距
下面的图片说明了盒子模型(Box Model)：
Margin(外边距)- 清除边框外的区域，外边距是透明的。Border(边框)- 围绕在内边距和内容外的边框。Padding(内边距)- 清除内容周围的区域，内边距是透明的。Content(内容)- 盒子的内容，显示文本和图像。
边距
盒子可见框的宽度=border-left-width + padding-left + width +padding-right + border-right-width
内边距（padding）： 盒子里内容区与边框之间的距离 一共有四个方向的内边距，可以通过四个属性设置 内边距会影响盒子的可见框大小，元素的背景会延伸到内边距
padding属性定义及使用说明
padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。
实例:
padding:10px 5px 15px 20px;上填充是 10px右填充是 5px下填充是 15px左填充是 20pxpadding:10px 5px 15px;上填充是 10px右填充和左填充是 5px下填充是 15pxpadding:10px 5px;上填充和下填充是 10px右填充和左填充是 5pxpadding:10px;所有四个填充都是 10px
例子：
<head><meta charset="utf-8"><title>边距</title><style type="text/css">.box1{width: 200px;height: 200px;background-color: greenyellow;border: double;padding-left:100px ;padding-right:100px ;padding-top:100px ;padding-bottom:100px ;}#box2{/*创建一个子元素box2来覆盖父元素*/width: 200px;height: 200px;background-color: royalblue;}</style></head><body><div class="box1"><div id="box2"></div></div></body>
外边距：
可能的值
margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
外边距指的是盒子与其他盒子之间的距离，不会影响盒子可见框的大小 有四个方向的外边距:
margin-topmargin-leftmargin-rightmargin-bottom
例子：
<head><meta charset="utf-8"><title>边距</title><style type="text/css">.box3{width: 100px;height: 100px;background-color: red;margin-top: 50px;margin-left: 100px;}</style></head><body><div class="box3"></div></body>
边框
CSS边框属性允许你指定一个元素边框的样式和颜色。
为元素设置一个边框必须指定三个样式：
border-width边框宽度border-color边框颜色border-style边框样式:solid实线，dashed虚线，dotted点状边框,double双线
边框宽度可以不一致border-width:10px 20px 30px 40px;
边框样式
边框样式属性指定要显示什么样的边界。
border-style属性用来定义边框的样式
border-style 值:
例子：
<head><meta charset="utf-8"><title>盒子模型(框模型)</title><style type="text/css">.box1{/**使用width，height来显示内容区的宽度和高度* */width: 100px;height: 100px;background-color:yellow ;border-width:5px ;border-color: green orange blueviolet red; border-style:dotted ;}</style></head><body><div class="box1"></div></body>
内联元素盒子模型
内联元素不能设置width和height
内联元素可以设置水平方向内边距和垂直方向内边距padding-left\right\top\bottom
将一个内联元素变成块元素，通过display样式可以修改元素的类型
inline：将一个元素变成内联元素显示block：将一个元素变成块元素显示inline-block:将一个元素设置为行内块元素，既可以设置宽高，又不独占一行
例子：
<head><meta charset="utf-8"><title>内联元素的盒子模型</title><style type="text/css">#a{background-color: cornflowerblue;padding-left: 50px;padding-right: 50px;/**内联元素支持边框，可以设置边框**/border: 2px red solid;/**内联元素可以设置外边距,水平方向外边距不会重叠*/margin-right: 30px;}a{background-color: chartreuse;display: block;width: 100px;height: 100px;/**visibility可以用来设置元素的隐藏和显示状态* visible:默认值，元素显示* hidden:元素隐藏*/visibility: visible;}#box1{background-color: greenyellow;width: 100px;height: 100px;}</style></head><body><span id="a">这是一个span元素，有多大占多大</span><span id="b">这是一个span元素，有多大占多大</span><div id="box1"></div><a href="#">这是一个超链接</a></body>
一起学习，一起进步 -.- ，如有错误，可以发评论
