CSS小记
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小记的更多相关文章
- CSS小记(持续更新......)
1 内联元素和块级元素的区别以及display的三种属性区别 在说起display属性之前,就必须先说说什么是文档流,以及文档流中的内敛元素和块级元素又是指什么? 一直觉得理解了文档流的概念,一堆CS ...
- css小记(3)
1.只有块级元素可以设置背景图,行内元素要变成块级元素才可以:2.盒子不设置宽度,只设置高度,默认为100%,并自适应屏幕大小变化,为这个盒子设置margin可以在保证margin效果的同时默认调整盒 ...
- css小记：hover 鼠标滑过让该元素的子元素或者其他元素改变样式
<!DOCTYPE><head><meta http-equiv="Content-Type" content="text/html; ch ...
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- CSS学习小记
搜狗主页页面CSS学习小记 1.边框的处理 要形成上图所示的布局效果,即,点选后,导航下面的边框不显示而其他的边框形成平滑的形状.相对于把导航的下面边框取消然后用空白覆盖掉下面搜索栏的边框比较而言 ...
- css知多少之绝对定位小记
一.position定位常见属性 对于属性position来说,属性值有static/relative/absolute/fixed/inherit以下只对绝对定位position:absolute详 ...
- CSS中强悍的相对单位之em(em-and-elastic-layouts)学习小记
使用相对单位em注意点 1.浏览器默认字体是16px,即1em = 16px,根元素设置如下 html{ font-size: 100%; /* WinIE text resize correctio ...
- css浮动与绝对定位小记
浮动 float属性可以设置的值为none,left,right.对于设置了浮动的元素,会向其父元素的左侧或右侧紧靠,默认情况下,盒子的宽度不再伸展,而是根据盒子里面的内容来确定.浮动可以让一个元素移 ...
- CSS语法小记
一.CSS语法结构 语法:选择符{属性:值} 例如:body{font-size:12px;} 参数说明: 1.选择符(Selector):指明这组样式所要针对的对象.可以是一个XHTML标签,例如h ...
随机推荐
- 【转】【C#】C# 垃圾回收机制
摘要:今天我们漫谈C#中的垃圾回收机制,本文将从垃圾回收机制的原理讲起,希望对大家有所帮助. GC的前世与今生 虽然本文是以.NET作为目标来讲述GC,但是GC的概念并非才诞生不久.早在1958年,由 ...
- U3D 动态创建Prefab的多个实例
情景:我们有一个mytest脚本,一个my_prefab预置体 想在在这个脚本的start()方法中复制多个my_prefab的实例.有3种方法: 1,将预置体my_prefab放于Resouce文件 ...
- jQuery使用ajax跨域获取数据
var webMethod = "http://localhost:54473/Service1.asmx/HelloWorld"; jQuery.support.cors = ...
- Java6 String.substring()方法的内存泄露
substring(start,end)在Java编程里面经常使用,没想到如果使用不当,会出现内存泄露. 要了解substring(),最好的方法便是查看源码(jdk6): /** * <blo ...
- ViewConfiguration.getScaledTouchSlop () 用法
getScaledTouchSlop是一个距离,表示滑动的时候,手的移动要大于这个距离才开始移动控件.如果小于这个距离就不触发移动控件,如viewpager就是用这个距离来判断用户是否翻页 ViewC ...
- Linux10.11-10.18）学习笔记（
1Y86指令集体系结构 ISA:指令集体系结构,一个处理器支持的指令和指令的字节级编码 程序员可见的状态 Y86程序中的每条指令都会读取或修改处理器状态的某些部分,称为程序员可见状态.其中包括: 8个 ...
- 交流异步电机的Modelica模型
Modelica标准库里的异步电机模型过于复杂,为了便于学习,我用最基本的异步电机方程写了一个Modelica模型,公式参照陈伯时的<电力拖动自动控制系统--运动控制系统>第3版的190页 ...
- 导航栏全透明效果, 只保留左右两个按钮, 如何实现?以及关于NavigationController的小问题
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageWithColor:[UIColor clearCo ...
- Jenkins进阶系列之——11修改Jenkins用户的密码
说明:本方法仅适用于jdk6+.tomcat6+和Jenkins专有用户数据库的Jenkins! 很多童鞋在使用jenkins的时候忘记密码了,然后各种蛋疼.最近闲着无事,折腾了下.好了,闲话少扯. ...
- ASP.NET MVC 5 入门教程 (2) 控制器Controller
文章来源: Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc-5-get-started-controller.html 上一节:ASP.NET MVC ...