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下的兼容还是得做的. – ...

随机推荐

RGW/SWIFT对象存储性能测试工具--COSBench安装
Cosbench是Intel的开源云存储性能测试软件,COSBench目前已经广泛使用与云存储测试,并作为云存储的基准测试工具使用 https://github.com/intel-cloud/cos ...
ASP.NET Identity 简介
翻译自:http://www.asp.net/identity/overview/getting-started/introduction-to-aspnet-identity ,略有改动. 背景:A ...
支付宝AR红包引出Python中的PIL小试
这两天支付宝AR红包火了,周围的同学全在玩.可是我一直在想这个原理是什么?通过请教大神和思考,知道了它有两个限定条件:GPS地理位置和图片的识别.所以,只要我们有了这两个限定条件,就不难进行该红包的破 ...
Redis JedisPool
获取连接池,通常连接池为单例,这里使用双端检测机制保证只有一个实例 public class JedisPoolUtil { private static volatile JedisPool je ...
Maven代理教程
明确代理服务器地址及端口,比如proxy.supremehover.com:8080 找到maven目录下的conf\settings.xml并打开,在proxies节点下添加proxy <pr ...
miniui后台无法接收到input传值
出错原因:在miniui中,此处应写成<input textName="current_unit",在php中才可以使用$_POST['current_unit']获取到值, ...
CodeForces 165E Compatible Numbers（位运算 + 好题）
wo integers x and y are compatible, if the result of their bitwise "AND" equals zero, that ...
8-9 MyBatis基础课
慕课网,'通过自动回复小机器人学习Mybatis',看了一半,没网了... Jsp+servlet+jdbc
TransactionScope 之分布式配置
.Net开发过程中,涉及多个数据库和不同数据库的分布式事务(Distributed Transaction)开发,有时会碰到“与基础事务管理器的通信失败”的错误.导致这个错误一般有下列三个原因:1) ...
Top 15 Java Utility Classes
In Java, a utility class is a class that defines a set of methods that perform common functions. Thi ...

CSS常用知识点