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 ...
随机推荐
- usb驱动开发7之接口描述符
前面struct usb_interface里表示接口设置的struct usb_host_interface被有意的飘过了,咱们在这节主要讲讲这个结构体,同样在include/linux/usb.h ...
- slatsatck file模块2种写法及系统初始化
一 . lamp搭建 file2种写法 saltstack--一键yum lamp:---请注意重点: http://www.blogs8.cn/posts/WLjId80 知识点: 文件的2种写 ...
- IP+IDC-chinaz抓取
#-*-coding:gbk-*- #code by anyun.org import urllib import re import time def getHtml(url): page = ur ...
- C#基础系列：实现自己的ORM（反射以及Attribute在ORM中的应用）
反射以及Attribute在ORM中的应用 一. 反射什么是反射?简单点吧,反射就是在运行时动态获取对象信息的方法,比如运行时知道对象有哪些属性,方法,委托等等等等.反射有什么用呢?反射不但让你在运行 ...
- (OAF)jdeveloper集成log4j并将日志输出到指定文件并写入数据库
参考: How to configure Log4j in JDev 11g Ever wanted to use log4j in your adf project ? Well though Or ...
- ASP.net MVC自定义错误处理页面的方法
在ASP.NET MVC中,我们可以使用HandleErrorAttribute特性来具体指定如何处理Action抛出的异常.只要某个Action设置了HandleErrorAttribute特性,那 ...
- [matlab]改变矩阵的大小并保存到txt文件
要完成的任务是,加载一个保存在txt文件中的矩阵, 并把它扩大10倍,并且要再次保存回去 %加载txt文件 >load('Matrix.txt'); %扩大10倍 repmat(Matrix,r ...
- ubuntu16.04下安装jdk和android studio
1首先要在JDK官网下载对应的Linux的JDK版本.进入该网站后,先选择Accept License Agreement然后即可下载.本人的Linux系统为ubuntukylin 16.04 64 ...
- 《图解tcp/ip》读书笔记（二）
<图解tcp/ip>读书笔记(二) 本周主要阅读的是本书的第三章--数据链路. 当然了,从某些角度讲,我认为这一章就是计算机网络的最基本的内容之一.整章讲述了数据链路层的作用和相关技术,主 ...
- 20145222黄亚奇《Java程序设计》第5周学习总结
教材学习内容总结 Java中所有错误都会被打包为对象,运用try.catch,可以在错误发生时显示友好的错误信息. 运用try.catch,还可以在捕捉处理错误之后,尝试恢复程序正常执行流程.如: i ...