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

随机推荐

awk中gsub的应用
(1)文件filename的内容 cat awk_file 1 2 3 $1,200.00 1 2 3 $2,300.00 1 2 3 $4,000.00 (2)去掉第四列的$和,并汇总第四列的和. ...
jquery 离开页面提示信息
<script> $(window).bind('beforeunload', function () { return '您输入的内容尚未保存,确定离开此页面吗?'; });</s ...
Jquery动态添加的元素绑定事件的3种方法
假设我们点击li标签,弹出他的文本,如果是动态添加的li,点击是没有效果的,压根弹不出来文本. 下面博主分享一下为动态添加的元素绑定事件的三种方法,网上一般都是两种,我在这里多增加了一种. 事件案例: ...
php 做数学运算时结果为0的原因
php是一种弱类型的脚本语言,一般情况下字符串型的数字可以直接参与运算. 但是当字符串开头是实体空格的时候系统会默认字符串等于0. 此问题比较隐蔽,在此记录下
去掉IE11的叉叉
在 IE11 下,浏览器自作多情在 text input 组件上加一个 close 叉叉: 用CSS伪类定义: input::-ms-clear { display: none; }
Hive 字符串操作[转]
1. 字符串长度函数:length 语法: length(string A) 返回值: int 说明:返回字符串A的长度举例: hive> select length('abcedfg') f ...
iOS开发网络篇—数据缓存
iOS开发网络篇—数据缓存一.关于同一个URL的多次请求有时候,对同一个URL请求多次,返回的数据可能都是一样的,比如服务器上的某张图片,无论下载多少次,返回的数据都是一样的. 上面的情况会造 ...
[译]ES6中的代理对象
原文:http://ariya.ofilabs.com/2013/07/es6-and-proxy.html 能够拦截在一个对象上的指定操作的能力是非常有用的,尤其是在故障调试的时候.通过ECMASc ...
关于session和cookie
一.cookie机制和session机制的区别 **************************************************************************** ...
hadoop集群安装_实战
spark1.6.2+ hadoop2.6.2 词频统计完整案例:http://blog.csdn.net/zythy/article/details/17852579 hadoop学习:http:/ ...

CSS常用知识点