本章知识点
- 盒子模型
- 前缀介绍
- 元素的浮动
- 元素的定位
前端技术层出不穷，怎么学都都学不玩，不过别担心，任何技术都是循序渐进的。都是依托底层的基础进行扩展和优化，因此我么需要牢记并理解基础知识，这样我们才能面对新的知识新的技术临危不乱，这一章我详细的比较泛，志在了解整个css 布局中基础，而不是去解读每个属性的使用。好了开始 吧！
什么是css
英文全称 Cascading Style Sheets 的缩写 css ，中文叫层叠样式，css3 是对css 的升级技术，那么干什么用，我们平时上网看到的文章有标题，有字体大小，错落有致，优美的图片，不同颜色，背景，这个就是css 美化html实现的。和world 一样，你输入文字不好看，这个时候就需要加粗，美化，分段一样我们需要加样式。
css 单独是不能做事的，必须依托像html这样的结构化文档，才能发挥美化作用，因此学习css 必须要了解html《HTML5 快速入门》
html +css 最佳搭档
html 用来展示内容，css 用来设计样式负责变漂亮，css 怎么完美结合？常用的三种弄方式：
三种方式实现同样的功能让标题H1 变为红色，看看如何实现；
三种方式实现同样的效果
1、style 属性
<h1 style ="color:red">木子聊前端之css3基础</h1>
这种定义方式，是在html标签h1里面直接写入 style 属性后面加入样式的写法，只对当前的标签有效，在开发中不建议使用，但是调试的时候就很好用
2、style 标签书写样式
<body>
<style>
h1{
color:red
}
</style>
<h1>木子聊前端之css3基础</h1>
</body>
这段代码我们将css 写在< style>标签当中，比上一种方法，看上去跟舒服，更方便修改 ，而且在当前页面上可以作用于所有的h1 标签，维护很方便，不足之处在于,如果想在其他html 页面使用这个样式，就不可行，因此在实际项目这中这个做法也不推荐哦。一般在做一个单独的html页面才回使用哦
3、使用< link> 标签，引入外部css样式
这个时候我们需要先建一个css文件，后缀名问.css 的文件目录结构如下：
index.html
test.css
我们给css 问价起个名字test.css，打开css 写入代码：
h1{
color:red
}
看到吧简单，明了。没有多余的html标签
修改html 通过 link标签引入 css 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>木子聊前端</title></title>
<meta name="description" content="提供0到1到基础前端学习，实战层层深入,有问题咨询v:chinaynlmq">
<meta name="keywords" content="前端,javascript,html5，css3">
<link href='test.css' rel="stylesheet" type="text/css">
</head>
<body>
<h1>木子聊前端之css3基础</h1>
</body>
</html>
注意：通过link标签引入 test.css 文件 需要 写入 rel=‘stylesheet’ 告诉浏览器 解析.css 文件样式，不加就会解析不出来哦。写的样式就会没有用， 同时注明type类型是css，type类型可以省略，一般我们习惯加上，更加清晰。
link标签可以引用本地的文件，同事也可以引入远程的文件，而且充分隔离了html文件，做到了多个html文件共享css，一处修改到处修改，在实际运用中，应当采用这个link 引入的方法来书写css
css盒子模型
想象一下，你手中有一个糖，现在我们需要把这个糖放到一个盒子的中间，这个时候就会出现一个空间感，糖到盒子的距离，盒子的厚度，盒子和另外一个盒子的距离。
在HTML 中 块级元素 就像上面的盒子一样，糖就是我们的内容，css样式要做的就是盒子把内容包装的好看而且具有安全距离；比如上面例子h1 的空间感是这样的：
来说明一下图中的各种：
content
是html标签的内容，比如 我们例子中 的 <h1>木子聊前端之css3基础</h1>
padding
用来表示糖到装糖的盒子的空间距离，它包括上下左右的空间：
padding-top，padding-let 等四个方位来表示，简写方式：
padding： 10px 0 20px 30px ；分别代表的顺序：上 右 下 左 也就是上边距离盒子的距离位10px 右边距离盒子的编剧位0 以此类推；
border
用来表示盒子的宽度的，宽度的可以是虚线或者直线，css3还提供图片，边框可以四面都有，或者只是要一个边框。四面都是1px ，可以这样写：border：1px solid red ，表示 1px 的直线 红色边框，如果只需要上部有边框可以这样写：border-top:1px solid red;
margin
用来表示盒子对外的距离，也就是说糖盒子对另外一个盒子的距离，和padding 简写顺序一样 上 右 下 左，也可以单一表示：比如距离下面的文字10px ，margin-bottom:10px;
margin:表示盒子与盒子的距离
padding：表示盒子对内部内容的距离
常用css前缀
css3 的诞生每个浏览的支持情况标准不统一，这个时候就有了前缀用来写兼容：
- -webkit 表示webkit 为核心的浏览器 表示chrom safari 等浏览器
- moz 表示 火狐（Firefox）浏览器
- ms IE 浏览器
- -o Opera 浏览器
在我们写css3的时候 有些属性 可能需要这样写，才能兼容更多浏览器，不过呢现在支持的越来越标准了。遇到兼容在加上也是可以的：
-webkit-border-radius: 30px;
-ms-border-radius: 30px;
-moz-border-radius: 30px;
-o-border-radius: 30px;
bordr-radius:30px
这样在不同浏览器就会用自己的前缀去解析，最后写入统一的标准，直到所有的厂商都支持。
浮动布局
我们在学习html的时候看到，我们所有的内容都是从上到下依次排序的，每一个块级元素，不管有多少内容都会占满这个浏览器的一个横条，那么那些错落有致的布局怎么实现的，有可能就是浮动哈。
先来看看么有浮动的时候
html 代码
<body>
<div>木子聊前端之内容一</div>
<div>木子聊前端之内容二</div>
<div>木子聊前端之内容三</div>
</body>
没有浮动之前，那么我们浮动之后呢？
加入样式代码：
div{
float:left;
border:1px solid black;
}
效果：
直接就浮动上去了。很有意思吧。
float：有四个属性，none ，left，right，inherit；none 为默认值，left，right 一个是左浮动一个是右浮动，inherit 是继续父级的浮动；
浮动之后的元素变化
对于html的块级元素来说，在默认情况下宽度都是100%，而且都是从上到下依次排序，当浮动产生以后，宽度100%就被打破，宽度就依据内容自动调整，如上面的例子；第二，在设置了浮动之后，html文档原来的流程就被打破。不单是在y轴浮动其实，z轴也浮动，也就是说原本文档流是有高度的，浮动之后高度就消失了；如上面的例子没有浮动之前body是有高度的：
浮动之后body的高度就变为0了：
因此在我们使用浮动之后一般都要手动设置高度，不然就影响后面的元素。因为目前父级的高度为0；还有一个问题就是文档用了浮动之后后面的元素就会乱动因此，我们在使用完浮动之后要清除
清除浮动
清除浮动的css属性： clear: both;
万能清除浮动：
.clear{
border: none;
clear: both; /* 这个是重点其他的是兼容 */
margin: 0;
padding: 0;
height: 0;
background: 0;
overflow: hidden;
width: 0;
font-size: 0;
}
使用的是在html标签需要清除浮动的地方加入 如下代码
<div class='.clear'></div>
清除浮动的方法二：
在父级清除，通过伪类实现：
.clearfix:after{
content: '020';
clear: both;
display:block;
height:0;
}
.clearfix{
zoom:1
}
在html这样使用
<div class='clearfix'>
<div>float</div>
<div>float</div>
</div>
<div>无浮动</div>
这样就可以越快的使用浮动了。这个方式也是目前最流行的方式清除浮动
至此大家发现没有css 实现效果都是组合实现的。
css 定位（position）技术
在css的基础中定位是一个重点也是一个难点，可以在x，y，z中定位，left，right，bottom，top四个方向定位x和y，在垂直屏幕方向用z-index定义层级
css 定位 属性 position 常用的值：static、relative、absolution、fixed四个值
相对定位
相对定位是指相对于其他文档流已经定义好的位置进行定位：
div2是相对于 div1 的位置相对向下延续的，而div3 是依据div2 决定的，但是absolute 就不一样了。是脱离了文档流和div3的位置无关；
需要注意的是浮动和定位已经脱离文档流，但是不会对已经相对定位的元素产生影响；
static 和relative 都是相对于其他文档流定位，因此也属于相对定位；不一样的是relative 支持 位置可移动；
绝对定位
绝对定位有如下特点：
- 块级元素默认宽度不再是100%而是依据内容自动识别，当然可以自己定义宽度
- 在不定义z-index的时候。默认覆盖在其他元素之上
- 脱离正常的文档流不在占用空间
absolute和fixed 值 都是绝对定位的范围
absolute
是相对于上一个不为static的父级元素定义的，也就是说父级如果没有指定position属性那么 absolute就相对于整个文档定义
fixed
是生成绝对定位的元素，相对于这个浏览器的位置定位，不管浏览器怎么变换位置适中都不变，底部导航和按钮通常就是这么做的、不兼容低版本，目前也不用去考虑低版本；
<body>
<button>底部按钮</button>
</body>
button{
position:fixed;
bottom:20px;
}
这个效果就是 底部按钮不管你怎么变换浏览器始终都是在距离浏览器底部20px；
如果你喜欢此类文章欢迎关注我或者加V：chinaynlmq ,一起学习！
下一篇《 css3从入门到熟练运用（二）：css3选择器让样式飞起来 》
367
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
