块级元素：width宽和height高有效。

内联元素：width宽和height高无效。

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常用知识点的更多相关文章

  1. css常用知识点——思维导图

    如图 思维导图图片链接 http://www.edrawsoft.cn/viewer/public/s/21032425741486 有道云笔记图片链接 http://note.youdao.com/ ...

  2. HTML和CSS的知识点

    HTML的知识点 HTML的结构: <!DOCTYPE html>: 文档类型性为HTML5文件 文档声明:在HTML的文档中必不可少,且必须在文档的第一行 文档声明的编码格式<!- ...

  3. Less常用知识点

    上篇文章介绍了如何安装Less,我们将所有东西都写在.less里面,最后通过命令将.less转换成.css文件,就可以放入到项目里用了.今天了解一些less常用知识点. 1.变量:声明两个变量,一个是 ...

  4. CSS 基础知识点 样式 选择器 伪类

    CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...

  5. HTML、CSS常用技巧

    一.HTML 在介绍HTML之前,我们先看一下HTML的文档树结构,主要包括哪些: (一).头部标签 1,Doctype Doctype告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档 ...

  6. CSS3常用知识点

    CSS3常用知识点 1 css3选择器 1.1 属性选择器 /* E[attr~=val] 表示的一个单独的属性值 这个属性值是以空格分隔的*/ .attr2 a[class~="kawa& ...

  7. 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法

    Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...

  8. CSS基本知识点——带你走进CSS的新世界

    CSS基本知识点 我们在学习HTML之后,前端三件套第二件便是CSS,但CSS内容较多,我们分几部分讲解: (如果没有学习HTML,请参考之前文章:HTML知识点概括--一篇文章带你完全掌握HTML& ...

  9. css常用hack

    原文地址:css常用hack 突然想起今天早上在CNZZ看到的统计数据,使用IE6.7的用户比例还真多,看到之后我的心都碎了.微软都放弃了为毛还有这么多人不死心? 所以说,IE下的兼容还是得做的. – ...

随机推荐

  1. MySQL多配置方式的多实例的部署

    安装MySQL需要注意的事项: 选择MySQL的版本的建议: 1)稳定版:选择开源的社区版的稳定版GA版本 2)选择MySQL数据库GA版本发布后六个月以后得GA版本 3)选择发布版本前后几个月没有大 ...

  2. Debian8搭建php环境

    安装apache 新装的系统发现 apt-get install apach<tab> 没有自动补全 请查看 这里 apt-get install apache2 安装mysql apt- ...

  3. ob_start()

    ob_start()函数用于打开缓冲区 1.用于header()之前 ob_start(); //打开缓冲区 echo "Hellon"; //输出 header("lo ...

  4. Python 从零学起（纯基础） 笔记 之 迭代器、生成器和修饰器

    Python的迭代器. 生成器和修饰器 1. 迭代器是访问集合元素的一种方式,从第一个到最后,只许前进不许后退. 优点:不要求事先准备好整个迭代过程中的所有元素,仅仅在迭代到某个元素时才计算该元素,而 ...

  5. 【Beta】Scrum5.5

    Info 时间:2016.12.13 21:45 时长:15min 地点:大运村1号公寓5楼楼道 类型:日常Scrum会议 NXT:2016.12.15 21:30 Task Report Name ...

  6. css设置img成圆形

    效果图: <img src="test.jpg" /> css代码:img{ width:30px;  height:30px;  border-radius:50px ...

  7. CSS-背景渐变的兼容写法

    background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%); background-image: - ...

  8. 11月1日上午PHP------empty、 is_null、isset、unset的区别

    1.empty 判断一个变量是否为"空".null.false.00.0.'0′.』.为以上值的变量在检测時都将返回true. 2.isset 判断一个变量是否已经设置.0.00. ...

  9. 10月24日上午PHP面向对象

    面向对象 程序分为两种,一种是面向过程的,另一种是面向对象的.之前的学的都是面向过程的,按部就班的一步一步的按照顺序往下走. 面向对象: 1.什么叫做对象 一切皆为对象(一个对象由一组属性和有权对这些 ...

  10. light

    Unity5中lightmap的坑 http://blog.csdn.net/langresser_king/article/details/48914901 Unity中光照贴图一二坑及解决办法 h ...