百网思正是上线了。欢迎围观

css3从入门到熟练运用(一):css 核心功能

前端 ynlmq 710浏览 0评论

本章知识点

  1. 盒子模型
  2. 前缀介绍
  3. 元素的浮动
  4. 元素的定位

前端技术层出不穷,怎么学都都学不玩,不过别担心,任何技术都是循序渐进的。都是依托底层的基础进行扩展和优化,因此我么需要牢记并理解基础知识,这样我们才能面对新的知识新的技术临危不乱,这一章我详细的比较泛,志在了解整个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 支持 位置可移动;

绝对定位

绝对定位有如下特点:

  1. 块级元素默认宽度不再是100%而是依据内容自动识别,当然可以自己定义宽度
  2. 在不定义z-index的时候。默认覆盖在其他元素之上
  3. 脱离正常的文档流不在占用空间

absolute和fixed 值 都是绝对定位的范围

absolute 是相对于上一个不为static的父级元素定义的,也就是说父级如果没有指定position属性那么 absolute就相对于整个文档定义 fixed 是生成绝对定位的元素,相对于这个浏览器的位置定位,不管浏览器怎么变换位置适中都不变,底部导航和按钮通常就是这么做的、不兼容低版本,目前也不用去考虑低版本;

 <body>
<button>底部按钮</button>
 </body> 
button{
    position:fixed;
    bottom:20px;
}

这个效果就是 底部按钮不管你怎么变换浏览器始终都是在距离浏览器底部20px; 如果你喜欢此类文章欢迎关注我:chinaynlmq.cn,一起学习!

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

喜欢 (100) or 分享 ( 0)

发表我的评论

您尚未登录,请 登录注册 后评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(0)个小伙伴在吐槽