本章知识点

盒子模型
前缀介绍
元素的浮动
元素的定位

前端技术层出不穷，怎么学都都学不玩，不过别担心，任何技术都是循序渐进的。都是依托底层的基础进行扩展和优化，因此我么需要牢记并理解基础知识，这样我们才能面对新的知识新的技术临危不乱，这一章我详细的比较泛，志在了解整个css 布局中基础，而不是去解读每个属性的使用。好了开始吧！

什么是css

英文全称 Cascading Style Sheets 的缩写 css ，中文叫层叠样式，css3 是对css 的升级技术，那么干什么用，我们平时上网看到的文章有标题，有字体大小，错落有致，优美的图片，不同颜色，背景，这个就是css 美化html实现的。和world 一样，你输入文字不好看，这个时候就需要加粗，美化，分段一样我们需要加样式。 css 单独是不能做事的，必须依托像html这样的结构化文档，才能发挥美化作用，因此学习css 必须要了解html《HTML5 快速入门》

html +css 最佳搭档

html 用来展示内容，css 用来设计样式负责变漂亮，css 怎么完美结合？常用的三种弄方式：三种方式实现同样的功能让标题H1 变为红色，看看如何实现；三种方式实现同样的效果 css3基础 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；如果你喜欢此类文章欢迎关注我：chinaynlmq.cn,一起学习！

转载请注明：百网思 » css3从入门到熟练运用（一）：css 核心功能

css3从入门到熟练运用（一）：css 核心功能