1. Overflow:

是否隐藏超出容器范围之外的内容，主要参数包括Hidden(隐藏),Auto（根据容器内容自动显示滚动条）,scroll（显示滚动条，即使内容不超出容器范围，也会显示一个边框，效果非常不好）；

2. Relative & Absulote

Relative:将元素从文档流中部分不完全脱离出来，因为它先前的位置无法被其他元素所占据；

Absolute:一个元素的Position被设定为Absolute后，而该元素的父级元素没有设置Position属性，则会一直往上找，如何可以找到，则以该父元素做参考进行定位，否则会将<body>做为参考，即：该元素会以屏幕左上角为原点进行定位；

将元素从文档流中完全脱离出来，先前位置会被后续元素所占据；

3. 几种选择器

A. 元素选择器(类型选择器)

html{color:red;}

　　  p{color:gray;}

　　  h2{color:silver;}

B. 通配符选择器(*)

C. 类选择器

　　 用法1：

<p class='important'>This paragraph is very important</p>

.important{color:red;}

用法2(结合元素选择器)：

p.important{color:red;}/*带有important样式的元素p*/

D. ID选择器

E. 属性选择器

img[alt] {border: 5px solid red;}

F. 子选择器

G. 后代选择器

　 H. 兄弟选择器

<li>L1</li><li>L2</li><li>L3</li>

li+li{font-weight:bold;} /*L2/L3 会变粗*/

4. display 属性

inline:将块级元素内容显示为行级元素;

inline-block:将行级元素内容显示为块级元素；

<html>

<head>

    <title>Inline Testing</title>

</head>

<body>

    <div title="The width and height has no effect on inline element!" style="background-color:blue;width:200px;height:200px;display:inline;">Div is block element!</div>

    <div title="Elements with inline property will be in one line with the line-level elements!">

        <div style="background-color:red;display:inline">RED CUBE</div><a href="www.google.com.sg">Google.SG</a>

    </div>

    <div>

        <a title="Adding width and height to the line-level element!" href="www.google.com.sg" style="background-color:purple;display:inline-block;width:200px;height:200px;">Google.SG</a>

    </div>

</body>

</html>

5.Outline属性

<html>

<head><title>Outline Property Testing</title></head>

<body>

    <div style="padding-top:10px;width:150px;display:inline-block;"><button style="outline:dotted; outline-color:blue;">Outline Usage One</button></div>

    <div style="padding-top:10px;width:150px;display:inline-block;"><button style="outline:none;">Outline Usage Two</button></div>

    <div style="padding-top:10px;width:350px;display:inline-block;"><button style="outline:dotted; outline-color:red;outline-offset:10px;">Outline Usage Two(outline-offset:轮廓与边框线的距离)</button></div>

</body>

</html>

6.text-indent

<!DOCTYPE html>

<html>

<head>

    <title>Css(text-indent) Testing</title>

</head>

<body>

    <p style="background-color:red;text-indent:0px;">This is my world!</p>

    <p style="background-color:yellow;text-indent:30px;">This is my world!</p>

</body>

</html>

7. !important

<style="background:rgb(100,100,100) !important"/>

8. -moz、-ms、-webkit三种浏览器的私有属性

-moz代表Firefox私有属性

-ms代表IE私有属性

-webkit代表Safari、Chrome私有属性

例如：设置div圆角的大小

-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;

9. X-UA-Compatible标签（IE8专有属性）

使用：<meta http-equiv="X-UA-Compatible" content="IE=edge" />

IE=edge表示要求IE使用最新的引擎渲染网页，具体可参见该链接；

10. Viewport

具体参见链接响应式web设计--Viewport和visual viewport 和 layout viewport；

11. 图标字体

关于制作图标字体，在unicode字符集里面，E000 至 F8FF属于PUA （Private Use Area）；

CSS样式汇总的更多相关文章

  1. CSS样式汇总（转载）

    1.字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 {font-style: o ...

  2. CSS入门（css简介与样式汇总、CSS的使用方式和特征、CSS基础选择器和复杂选择器、边框阴影）

    一.CSS的作用 1.以统一的方式实现样式的定义 2.提高页面样式的可重用性和可维护性 3.实现了内容(HTML)和表示(CSS)的分离 HTML和CSS之间有什么关系? HTML:构建网页的结构 C ...

  3. javascript 动态修改css样式方法汇总(四种方法)

    在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的类名. ...

  4. 转：【总结】浏览器CSS Hacks汇总，浏览器兼容方式CSS Hacks

    [总结]浏览器CSS Hacks汇总   浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等). CSS hacks利用浏览器的 ...

  5. CSS hack 汇总

    1, IE条件注释法,微软官方推荐的hack方式. <!]> IE6以及IE6以上版本可识别 <![endif]--> <!]> 仅IE7可识别 <![end ...

  6. css优先级汇总

    原文:css优先级汇总 我所理解的css优先级:当两个或者多个样式作用于同一个元素时,就会出现css优先级的问题. 多重样式优先级:当内联样式.内部样式和外部样式作用于同一个元素时,属于多重样式的范畴 ...

  7. Angular21 动态绑定CSS样式

    1 需求 在前端开发中通常需要动态对某些元素的样式进行动态设定,传统的CSS绑定分为CSS类绑定和Style样式绑定:在Angular中利用相关指令同样可以完成CSS类绑定和CSS样式绑定 2 内置指 ...

  8. 操作CSS样式公共方法库

    项目中常用的一些方法,我们都封装到公共方法库 let utils = (function () { //=>获取元素的样式 let getCss = function (curEle, attr ...

  9. DIV样式汇总

    DIV样式汇总 最近在学习JavaScript,在做到个要控制控件样式的例子时,突然有了把常用样式汇总一下的想法,于是乎就写了以下内容,以下是以div为例来汇总的,希望对大家有些帮助. 一.常用属性: ...

随机推荐

  1. HTML中div以及span等元素获取焦点

    在js操作html的时候如果想让某个元素获取焦点,一般去掉用其.focus()方法. 但如果为非表单元素的div span等,必须要添加属性tabIndex=1这个属性后调用.focus()方法即可! ...

  2. 前台 JSON对象转换成字符串 相互转换 的几种方式

    在最近的工作中,使用到JSON进行数据的传递,特别是从前端传递到后台,前台可以直接采用ajax的data函数,按json格式传递,后台Request即可,但有的时候,需要传递多个参数,后台使用requ ...

  3. Rsyslog配置文件详解

    Rsyslog配置文件详解https://my.oschina.net/0757/blog/198329 # Save boot messages also to boot.log 启动的相关信息lo ...

  4. Windows server 2008 R2搭建主域控制器 + 辅域控制器

    一:实验模拟环境: Zhuyu公司是一个小公司,随着公司状大,公司越来越重视信息化建设,公司考虑到计算机用户权限集中管理及共享资源同步管理, 需要架设一套AD域控服务器,考虑到成本和日后管理问题,计划 ...

  5. SVD奇异值分解

    奇异值分解 备忘:Eigen类库可能会和其他库产生冲突,将Eigen类库的头文件引用放到前面解决了.

  6. linux下安装编译php的curl扩展

    curl扩展的位置(需要编译的版本)/root/install/php-5.5.24/ext/curl 1.进入对应的扩展目录 # cd /root/install/php-5.5.24/ext/cu ...

  7. c#大文件分割过程

    需求: 在项目开发中,我们会遇到单个文件大小超过1TB的文件,这样的文件只能进行单文件读取,往往会造成读取完成耗时过长,导致客户在使用体验过程中不满意. 为了解决提升大文件的解析速度,我想到了先分割大 ...

  8. Preconditions优雅的检验参数

    Preconditions里面的方法: 1 .checkArgument(boolean) : 功能描述:检查boolean是否为真. 用作方法中检查参数 失败时抛出的异常类型: IllegalArg ...

  9. 。。。在学习新框架Spring MVC的感受。。。

    已经学习一遍Spring MVC了,感觉还是懵懵懂懂的,特别是重定向,路径,参数的这些问题,心好乱,不过,这,都不是问题!!! 继续努力,努力到会为止!!!加油!!!

  10. 使用Redux管理你的React应用

    因为redux和react的版本更新的比较频繁,博客园这里用的redux版本是1.0.1,如果你关心最新版本的使用技巧,欢迎来我的Github查看(https://github.com/matthew ...