接上一篇，现在继续来说说CSS的常见的一些属性。先举例说明。
#mycss{
/* border是一个复合属性一个属性名中可以执行多个属性值，值之间使用空格分隔 */
border: 1px solid red;
/* 宽度 */
width: 200px;
/* 高度 */
height: 200px;
/* 复合的背景属性 */
background: url('imgs/img1.ico') center no-repeat;
/* 文本缩进 */
text-indent: 20px;
/* 字体大小和风格 */
font-size:1.5em;
font-weight:bolder;
/* 内容溢出处理属性 auto超过显示滚动条 hidden超过直接隐藏 scroll使得横向和纵向都滚动*/
overflow:scroll;
}
#mycss ul{
/* 列表的图标属性 */
list-style-type:square;
}
a{
/* 取消超链接下面的下划线 */
text-decoration:none;
}
常见的一些属性就不再一一举例了，以后在编程开发的过程中，慢慢学习就好。现在来说一下CSS的三大核心技
术中的第一种技术，盒子模型。
其实在HTML页面中充斥着大量的HTML标记元素，浏览器厂商在解析每一个HTML页面元素的时候都会按照盒
子模型的结构进行解析。以下是图例。这样看的更为清楚。
例如我们现在要给一个<h1>标题和<a>超链接来设置盒子属性，代码如下。
h1{
/* 设置内容的宽度和高度 */
width: 200px;
height: 200px;
/* 设置边框 */
border: 2px solid red;
/* 设置内容到边框的距离 padding
无论是pandding还是margin一般如果上下值相同、左右值相同 padding:1px 5px;
如果四个位置值不相同那么需要采用顺时针方向进行逐一的设置 padding: 1px 2px 3px 4px;
也可以使用非简化方式设置盒子模型
* */
padding: 1px 2px 3px 4px;
padding-right: 10px;
/* 设置边框和其他元素之间的空白距离 margin*/
margin: 5px 5px;
}
a{
margin-right: 50px;
text-decoration: none;
font-size: 1.5em;
background-color: gray;
color: red;
font-weight: bolder;
padding: 5px 5px;
}
那么说完了盒子模型，现在来说一下CSS的下一个核心技术，也就是浮动技术。
在说CSS浮动技术之前，我们先来想一个小问题。是否有CSS属性可以在行内元素和块元素之间转换?
答案是肯定的。display = block 块级 | inline 行内，但是div元素的高度和宽度是无效的，因此使用div布局的时候
不能转换div为行内元素，需要采用浮动技术进行布局。
浮动技术，也就是所有的浮动的元素会脱离文档流，然后在页面的上层形成一个立体的层结构。举个例子来说：
武汉的交通 地铁 ---- 马路(HTML 标准的文档流) ---- 高架桥 (浮动技术)
代码如下。
<style>
div{
height: 100px;
width: 100px;
}
.clazz1{
background-color: red;
float: left;
}
.clazz2{
background-color: green;
float: left;
}
.clazz3{
background-color: blue;
float: right;
}
.clazz4{
background-color: gray;
float: left;
clear: left;
}
.clazz5{
background-color: pink;
float: right;
}
p{
background-color: yellow;
width: 200px;
}
</style>
总结下就是：
1.如果一个页面中具有浮动和和非浮动元素，那么在浮动元素之前的非浮动元素会先占据文档的位置。且默认情
况下浮动层的该位置也被占用。
2.浮动的元素在遇到障碍的时候停止浮动。
3.如果都是浮动元素,那么如果空间够大，那么浮动元素会在一起，如果需要在另一行显示那么必须在浮动的同时
使用clear属性 left | right | both。
那么最后我们再来说一下最后一个技术，也就是定位技术。定位技术主要的任务就是将页面中的元素放置到指
定的位置。
常见的定位有三种：
1.绝对定位 position: absolute; 指定定位元素的坐标（top left right bottom）是以整个页面的(0,0)左上角的位置
开始计算。
2.相对定位 position: relative; 指定定位元素的坐标（top left right bottom）是相对的该元素在页面中原有的位
置计算。
3.固定定位 position: fixed; 生成绝对定位的元素，相对于浏览器窗口进行定位，元素的位置通过 "left",
"top", "right" "bottom"属性进行规定。
学习CSS技术之后，已经基本可以写一些界面元素并且可以进行一些界面的美化，作为新手的我，可以有一些
小小的成就感，继续努力，坚持，加油！~