1.float:该属性的值指出了对象是否及如何浮动。

none：设置对象不浮动
left：设置对象浮在左边
right：设置对象浮在右边

2.clear:该属性的值指出了不允许有浮动对象的边。

none：允许两边都可以有浮动对象
both：不允许有浮动对象
left：不允许左边有浮动对象
right：不允许右边有浮动对象

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>float和clear的例子</title>

    <style type="text/css">

    .float {

        height: 200px;

        width: 200px;

        margin-left: 10px;

        margin-top: 10px;

        background-color: blue;

        float: left;

    }

    .nofloat {

        height: 200px;

        width: 200px;

        background-color: red;

        margin-left: 10px;

        margin-top: 10px;

    }

    .clear{

        clear: both;

    }

    </style>

</head>

<body>

    <div class="float"></div>

    <div class="float"></div>

    <div class="float"></div>

    <div class="clear"></div>

    <div class="nofloat"></div>

    <div class="nofloat"></div>

</body>

</html>

3.position:设置或检索对象是否及如何显示。

static：对象遵循常规流。此时4个定位偏移属性不会被应用。(top，right，bottom，left无效)
relative：对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。(就是其他元素位置不受影响，但本身发生了偏移)
absolute：对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素(父级元素为relative和absolute)，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。
fixed：与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。

4.line-height

normal：允许内容顶开或溢出指定的容器边界。
<length>：用长度值指定行高。不允许负值。(line-height:32px)
<percentage>：用百分比指定行高，其百分比取值是基于字体的高度尺寸。不允许负值。 (line-height:100%)
<number>：用乘积因子指定行高。不允许负值。(line-height:2)

5.水平居中垂直居中

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>垂直居中</title>

    <style type="text/css">

    .center {

        width: 200px;

        height: 200px;

        background-color: yellow;

        text-align: center;

        line-height: 200px;

        margin-left: auto;

        margin-right: auto;

    }

    .center1 {

        width: 200px;

        height: 200px;

        background-color: yellow;

        display: table;

        margin-left: auto;

        margin-right: auto;

    }

    .inner {

        display: table-cell;

        vertical-align: middle;

    }

    </style>

</head>

<body>

    <div class="center">水平居中垂直居中</div>

    <div class="center1">

        <div class="inner">

            水平居中垂直居中水平居中垂直居中水平居中垂直居中水平居中垂直居中水平居中垂直居中水平居中垂直居中水平居中垂直居中水平居中垂直居中水平居中垂直居中水平居中垂直居中水平居中垂直居中水平居中垂直居中水平居中垂直居中

        </div>

    </div>

</body>

</html>

CSS常用知识点的更多相关文章

css常用知识点——思维导图
如图思维导图图片链接 http://www.edrawsoft.cn/viewer/public/s/21032425741486 有道云笔记图片链接 http://note.youdao.com/ ...
HTML和CSS的知识点
HTML的知识点 HTML的结构: <!DOCTYPE html>: 文档类型性为HTML5文件文档声明:在HTML的文档中必不可少,且必须在文档的第一行文档声明的编码格式<!- ...
Less常用知识点
上篇文章介绍了如何安装Less,我们将所有东西都写在.less里面,最后通过命令将.less转换成.css文件,就可以放入到项目里用了.今天了解一些less常用知识点. 1.变量:声明两个变量,一个是 ...
CSS 基础知识点样式选择器伪类
CSS 基础知识点汇集版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...
HTML、CSS常用技巧
一.HTML 在介绍HTML之前,我们先看一下HTML的文档树结构,主要包括哪些: (一).头部标签 1,Doctype Doctype告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档 ...
CSS3常用知识点
CSS3常用知识点 1 css3选择器 1.1 属性选择器 /* E[attr~=val] 表示的一个单独的属性值这个属性值是以空格分隔的*/ .attr2 a[class~="kawa& ...
【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法
Vue框架常用知识点文章目录 Vue框架常用知识点知识点解释第一个vue应用模板语法计算属性与侦听器条件渲染.列表渲染.Class与Style绑定知识点解释 vue框架知识体系 [1]基 ...
CSS基本知识点——带你走进CSS的新世界
CSS基本知识点我们在学习HTML之后,前端三件套第二件便是CSS,但CSS内容较多,我们分几部分讲解: (如果没有学习HTML,请参考之前文章:HTML知识点概括--一篇文章带你完全掌握HTML& ...
css常用hack
原文地址:css常用hack 突然想起今天早上在CNZZ看到的统计数据,使用IE6.7的用户比例还真多,看到之后我的心都碎了.微软都放弃了为毛还有这么多人不死心? 所以说,IE下的兼容还是得做的. – ...

随机推荐

js学习笔记9----时间操作
1.时间操作函数如下: new Date(); //获取系统时间 getFullYear(); //年 getMonth()+1; //月,初始值为0 getDate(); //日 getDay( ...
走进AngularJs(一)angular基本概念的认识与实战
一.前言前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,作为一名业界新秀,紧跟时代潮流,学习掌握新知识自然是不敢怠慢.当听到AngularJs这个名字并知道是google在维 ...
构建自己的 Linux 发行版
如何用 SUSE Studio 构建 Linux 发行版? (1) 进入到 www.susestudio.com,设立一个帐户 (2) 为你的设备(发行版)选择一个基本模板 -软件和软件包选择 (1) ...
IIS注册.netframework4.0指令
C:\Windows\Microsoft.NET\Framework\v4.0.30319\aspnet_regiis.exe -i
C#的访问级别
可访问性级别有 public 访问不受限制. protected 访问仅限于包含类或从包含类派生的类型. interna ...
Objective-C总Runtime的那点事儿（一）消息机制
最近在找工作,Objective-C中的Runtime是经常被问到的一个问题,几乎是面试大公司必问的一个问题.当然还有一些其他问题也几乎必问,例如:RunLoop,Block,内存管理等.其他的问题 ...
.Net 中的反射(反射特性) - Part.3
反射特性(Attribute) 可能很多人还不了解特性,所以我们先了解一下什么是特性.想想看如果有一个消息系统,它存在这样一个方法,用来将一则短消息发送给某人: // title: 标题:author ...
Pjax调用
$.pjax({container:'#content_center',url:href,data:data}); $(document).on('pjax:send', function() {// ...
flask-whooshalchemy需要注意的一点
在学习mega—tutorial时全文搜索模块遇到了问题,那就是使用全文搜索查询出来的数据为空的列表,输出了sql语句后发现where后没有条件,困扰了许久,后来才发现是自己不细心,在进行全文索引时应 ...
Node.js入门笔记（5）：案例两则
案例分析:前端自动化 1. 实现一个自动创建前端项目文件的js 通过node.js自动创建前端项目目录,包括js目录,js目录css目录,index.html和对应的内容. 初步的代码如下: var ...

CSS常用知识点