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

随机推荐

MFC的多线程操作
记得用MFC做了一个图像自动修复软件,当时没有多线程操作这一概念,由于图像修复算法比较复杂,因此,当执行图像修复时,程序就像卡死了似得而不能做其他操作.其实MFC对这种情况有一种很好地解决方案,那就是 ...
Unable to load R3 module D:\Program Files\Oracle\VirtualBox/VBoxDD.DLL (VBoxDD): GetLastError=1790 (VERR_UNRESOLVED_ERROR).
Unable to load R3 module D:\Program Files\Oracle\VirtualBox/VBoxDD.DLL (VBoxDD): GetLastError=1790 ( ...
魔术常量__DIR__
在PHP5.3中,增加了一个新的常量__DIR__,指向当前执行的PHP脚本所在的目录. 例如当前执行的PHP文件为 /www/website/index.php 则__FILE__等于'/www/w ...
php 如何解决“您访问的域名有误或网页不存在”
对一个域名访问,在家访问正常,到办公室就总是看到下面的页面. 清楚浏览器浏览数据是一个解决途径.这里通过Chrome浏览做示例.通过标记路径,进入清除界面. 也可以在浏览器地址中输入 chrome:/ ...
Spring中配置和读取多个Properties文件--转
public class PropertiesFactoryBeanextends PropertiesLoaderSupportimplements FactoryBean, Initializin ...
jquery-easyui 树的使用笔记
通常还是使用jquery-ui, 它是完全免费的, jquery-easyui可以使用 freeware edition. 但easyui还不是完全免费的: 它是基于jquery, 但是第三方开发的, ...
Androidstudio报错UnsupportedClassVersionError
报错信息 Error:java.lang.UnsupportedClassVersionError: com/android/dx/command/Main : Unsupported major.m ...
创立一个网站的前前后后（起因，域名，云平台，备案，CDN等等）(1)
起因写完<完美软件开发:方法与逻辑>这书后,原本想继续写书的,可出来参加了些社区活动后,我发现我写的书大家评价还行,但其实不太理解.而接下来想写的书更加抽象点,准备叫<管理的解析& ...
如何解决mathpage.dll或MathType.dll文件找不到问题
解决方法(具体图文教程): 步骤一要确保路径被office信任.依次打开word->文件->选项->信任中心->信任中心设置->添加新位置,添加C:\Program F ...
ThinkPHP 利用.htaccess文件的 Rewrite 规则隐藏URL中的 index.php
1.首先修改Apache的httpd.conf文件. 确认httpd.conf配置文件中加载了mod_rewrite.so 模块,加载的方法是去掉mod_rewrite.so前面的注释#号讲http ...

CSS常用知识点