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 ...
随机推荐
- HAXM cannot be installed nutil TV-x is enabled
提示错误:如图 HAXM cannot be installed nutil TV-x is enabled 问题原因: 电脑没有启动Intel的虚拟化技术 解决方法: 重启电脑,进BIOS中启动VT ...
- CentOS 7 添加win7启动项——修改默认启动项
CentOS 7使用grub2引导启动,在win7之后装完CentOS再启动会丢失win7启动项. 首先,添加win7启动项,步骤如下: 1.使用root登陆系统 2.用文本编辑器打开 /boot/g ...
- 给C#的treeview控件的部分节点添加checkbox
一.先初始化treeview this.treeView1.CheckBoxes = true; this.treeView1.ShowLines = false; this.treeView1.Dr ...
- How to get date from OAMessageDateFieldBean
OAMessageDateFieldBean dateFromBean = (OAMessageDateFieldBean)webBean.findChildRecursive("pRece ...
- 使用Windows Live Writer发布日志
前言 Windows Live Writer是非常不错的一个日志发布工具,支持本地写文章,然后通过点击一个按钮就发布到网站上,如果借助插件,还可以同时发布到多个博客网站,功能非常强大,很多博友认识她之 ...
- [CareerCup] 14.2 Try-catch-finally Java中的异常处理
14.2 In Java, does the finally block get executed if we insert a return statement inside the try blo ...
- Bootstrap 排版
Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落. ...
- Expression 表达式树学习整理
整理了一下表达式树的一些东西,入门足够了 先从ConstantExpression 开始一步一步的来吧 它表示具有常量值的表达式 我们选建一个控制台应用程序 ConstantExpression _ ...
- http技术交流提纲
http技术交流提纲地址:http://lazio10000.github.io/tech/http/#/bored
- js判断页面点击事件
<input type="submit" name="sb1" id="sb1" onclick="queryclick() ...