1、元素居中

　　（1）水平居中：指定宽度，然后margin auto 即可

.middle{

    max-width:400px;

    //width:400px;//当浏览器被缩小，宽度小于元素宽度时，元素会被遮挡，所以应用max-width，会自动缩小元素以适应浏览器大小。这点对手机浏览器很有用

    margin:0 auto;

}

　　（2）垂直居中：

//先要设置div元素的祖先元素html和body的高度为100%（因为他们默认是为0的），并且清除默认样式，即把margin和padding设置为0（如果不清除默认样式的话，浏览器就会出现滚动条)

        html,body {

            width: 100%;

            height: 100%;

            margin:;

            padding:;

        }

        .content {

            width: 300px;

            height: 300px;

            background: orange;

            position: relative;

            top: 50%; /*偏移*/

            //margin-top: -150px; //上移元素宽度的一半，或用translateY

            transform: translateY(-50%);

        }

　　（3）水平垂直居中：

        html,body {

            width: 100%;

            height: 100%;

            margin:;

            padding:;

        }

        .content {

            width: 300px;

            height: 300px;

            background: orange;

            //水平居中

            margin:0 auto;

            //垂直居中

            position: relative;

            top: 50%; /*偏移*/

            transform: translateY(-50%);

        }

　　（4）使用弹性布局Flex实现居中（水平或垂直）：将祖先元素设置宽高100%，margin和padding设为0；设置直接父元素的display为flex，并设置居中方式（水平或垂直）

　　　　　（关于Flex的直白文章：Flex布局的语法、Flex布局的实践、基于flexbox的栅格化布局库）

   html,body {

            width: 100%;

            height: 100%;

            margin:;

            padding:;

        }

        body {

            display: flex;

            align-items: center; /*定义body的元素垂直居中*/

            justify-content: center; /*定义body的里的元素水平居中*/

        }

        .content {

            width: 300px;

            height: 300px;

            background: orange;

        }

　　（5）其他比较次的方法

　　　　元素水平垂直居中：

#position {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 150px;

    height: 40px;

    margin: -20px 0 0 -75px;

    padding: 0 10px;

    background: #eee;

    line-height: 2.4;

}

　　　　元素固定在底部并居中：

    height: 105px;

    width: 100%;//使之居中

    text-align: center;

    position: absolute;//position和bottom使之居于底部

.center-vertical {

    position: relative;

    top: 50%;

    transform: translateY(-50%);

}

2、把列表元素的display 设为行内元素样式 inline ，可以达到导航栏栏目的效果

3、box-sizing:border-box

　　对于盒子模型，IE早期版本将border和padding算在width内，而css标准则不算在内，这就造成个兼容问题。通过如上设置可以将盒子模型的border、padding算在width内，达到统一的目的；此外，也因而更容易设置盒子的尺寸，因为需要设的尺寸参数少了（少了border和padding）。

4、position:

　　inherent：从父元素继承 position 属性的值；

　　static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）

　　relative：生成相对定位的元素，相对于其正常位置进行定位。

　　fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。

　　absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位（未指明position时默认为static）

5、float:left 能够让被修饰的元素浮动在其后面一个元素的左边；clear:left 能够让被修饰的元素左边没有元素浮动

6、设置文本缩进

text-indent：value（2em）/*缩进两个文字*/

7、设置表格边框合并为单一边框：border-collapse;separate/collapse

<!doctype html>

<html>

  <head>

    <title>表格样式</title>

    <meta charset="utf-8"/>

    <style type="text/css">

      #t1 {

        width:200px;

        border:1px solid #f00;

        padding:10px;

        margin:30px auto;

        border-collapse: collapse;

      }

      #t1 td {

        border:1px solid #00f;

        padding:10px;

      }

    </style>

  </head>

  <body>

    <h1>1.表格适用box模型</h1>

    <table id="t1">

      <tr>

        <td>aaa</td>

        <td>bbb</td>

      </tr>

      <tr>

        <td>ccc</td>

        <td>ddd</td>

      </tr>

    </table>

  </body>

</html>

8、设置背景图片不随页面滚动：background-attachment: fixed

　　示例：http://www.w3school.com.cn/tiy/t.asp?f=csse_background-attachment

9、box-shadow:  h-shadow v-shadow blur spread color inset;

　　参考：http://www.w3school.com.cn/cssref/pr_box-shadow.asp

10、CSS实时编辑显示：通过display:block让css文本显示出来，再加上contentEditable使文本可编辑

<!DOCTYPE html>

<html>

    <body>

        <style style="display:block" contentEditable>

            body { color: blue }

        </style>

    </body>

</html>

11、创建长宽比固定的元素：通过设置父级窗口的padding-bottom可以达到让容器保持一定的长度比的目的，这在响应式页面设计中比较有用，能够保持元素不变形。

<div style="width: 100%; position: relative; padding-bottom: 20%;">

    <div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;background-color:yellow;">

        this content will have a constant aspect ratio that varies based on the width.

    </div>

</div>

12、CSS做简单计算：通过CSS中的calc方法可以进行一些简单的运算，从而达到动态指定元素样式的目的。

.container{

    background-position: calc(100% - 50px) calc(100% - 20px);

}

CSS小记的更多相关文章

  1. CSS小记(持续更新......)

    1 内联元素和块级元素的区别以及display的三种属性区别 在说起display属性之前,就必须先说说什么是文档流,以及文档流中的内敛元素和块级元素又是指什么? 一直觉得理解了文档流的概念,一堆CS ...

  2. css小记(3)

    1.只有块级元素可以设置背景图,行内元素要变成块级元素才可以:2.盒子不设置宽度,只设置高度,默认为100%,并自适应屏幕大小变化,为这个盒子设置margin可以在保证margin效果的同时默认调整盒 ...

  3. css小记：hover 鼠标滑过让该元素的子元素或者其他元素改变样式

    <!DOCTYPE><head><meta http-equiv="Content-Type" content="text/html; ch ...

  4. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  5. CSS学习小记

    搜狗主页页面CSS学习小记 1.边框的处理   要形成上图所示的布局效果,即,点选后,导航下面的边框不显示而其他的边框形成平滑的形状.相对于把导航的下面边框取消然后用空白覆盖掉下面搜索栏的边框比较而言 ...

  6. css知多少之绝对定位小记

    一.position定位常见属性 对于属性position来说,属性值有static/relative/absolute/fixed/inherit以下只对绝对定位position:absolute详 ...

  7. CSS中强悍的相对单位之em(em-and-elastic-layouts)学习小记

    使用相对单位em注意点 1.浏览器默认字体是16px,即1em = 16px,根元素设置如下 html{ font-size: 100%; /* WinIE text resize correctio ...

  8. css浮动与绝对定位小记

    浮动 float属性可以设置的值为none,left,right.对于设置了浮动的元素,会向其父元素的左侧或右侧紧靠,默认情况下,盒子的宽度不再伸展,而是根据盒子里面的内容来确定.浮动可以让一个元素移 ...

  9. CSS语法小记

    一.CSS语法结构 语法:选择符{属性:值} 例如:body{font-size:12px;} 参数说明: 1.选择符(Selector):指明这组样式所要针对的对象.可以是一个XHTML标签,例如h ...

随机推荐

  1. 【转】【WPF】wpf 图片指针处理

    我一直用GDI+做Winform 的基于指针的图片处理,这次下决心全部移到wpf上(主要是显示布局很方便)采用的图片是2512*3307 的大图 830万像素类库基于WritableBitmapEx ...

  2. How to install 64-bit Google Chrome 28+ on 64-bit RHEL/CentOS 6 or 7

    How to install 64-bit Google Chrome 28+ on 64-bit RHEL/CentOS 6 or 7 The problem Google developers s ...

  3. 在opencv3中的机器学习算法练习：对OCR进行分类

    OCR (Optical Character Recognition,光学字符识别),我们这个练习就是对OCR英文字母进行识别.得到一张OCR图片后,提取出字符相关的ROI图像,并且大小归一化,整个图 ...

  4. [VIM] 格式化代码

    快速使用vim格式化代码 在vim的编辑模式i下直接ESC退出道命令模式之后直接敲入如下命令: gg=G        将全部代码格式化 nG=mG    将第n行到第m行的代码格式化 注:如果ESC ...

  5. win10快捷键大全 win10常用快捷键

    win10快捷键大全大家可以来了解一下,今天小编带来了win10常用快捷键,很多朋友喜欢使用快捷键来操作电脑,那么Windows10系统有哪些新的快捷键呢• 贴靠窗口:Win +左/右> Win ...

  6. Windows下虚拟机安装Mac OS X ----- VM12安装Mac OS X 10.11

    Windows下虚拟机安装Mac OS X -– VM12安装Mac OS X 10.11 随着Iphone在国内大行其道,越来越多的开发者涌入iOS开发大军 中,但都苦于没有苹果机,本文即将介绍WI ...

  7. [CareerCup] 7.4 Implement Multiply Subtract and Divide 实现乘法减法和除法

    7.4 Write methods to implement the multiply, subtract, and divide operations for integers. Use only ...

  8. 20145222黄亚奇《Java程序设计》第7周学习总结

    教材学习内容总结 第十三章 时间与日期 即使标注为GMT(格林威治时间),实际上谈到的的是UTC(Unix时间)时间. 秒的单位定义时基于TAI.也就是铯原子辐射的振动次数. Unix时间是1970年 ...

  9. Asp.Net的两种开发方式

    来源:http://www.zhidao91.com/asp-net/ 在经过对.Net平台深入的学习以后,我发现很多语言开发动态网站时,它的后台逻辑都差不多是相同的,今天在这里我给大家来聊聊在.Ne ...

  10. 【WEB前端经验之谈】没有速成，只有不断积累。

    2013年8月25日,我人生中的第一份正式工作开始了,第一份工作做的是当时学习的asp.net,用的是C#语言. 到第一家公司上班是公司是做一个OA系统,不过我去的时候大部分都已经完成了,剩下的都是细 ...