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 ...
随机推荐
- SilverIight数据绑定实例
前台Code <DataGrid Name="DataGrid1" AutoGenerateColumns="False" IsReadOnly=&quo ...
- 网站性能评分工具Yslow 使用教程
Yslow 这个工具相信无论是搞前端的攻城师或者是搞网站的站长都了解,Yslow 可比谷歌的PageSpeed 有名多了:那个百分制下的评分数据总让国人着迷,看来应试教育造的孽太深了.Jeff 认为的 ...
- 从log4j日志无缝迁移至logback
ogback对比log4j的有点在此就不赘述了. 由于在项目的原有代码中,大量的日志生成是通过log4j实现的,新的代码希望通过logback的方式生成日志,同时希望将老的代码在不修改的情况下直接将日 ...
- 2015某编程网易语言vip课堂全套教程 包含post，hook入门到精通等
2015某编程网易语言vip课堂全套教程 包含post,hook入门到精通等 官方论坛弄来的 如果在官方下载需要权限的 挺不错教程 想学习易语言入门到精通 post hook js改写的可以看 ...
- 在opencv3中实现机器学习之：利用svm(支持向量机)分类
svm分类算法在opencv3中有了很大的变动,取消了CvSVMParams这个类,因此在参数设定上会有些改变. opencv中的svm分类代码,来源于libsvm. #include "s ...
- matlab 中的textscan
textread 与textscan的区别 textscan更适合读入大文件: textscan可以从文件的任何位置开始读入,而textread 只能从文件开头开始读入: textscan也可以从上 ...
- Android -- Scroller
Android里Scroller类是为了实现View平滑滚动的一个Helper类.通常在自定义的View时使用,在View中定义一个私有成员mScroller = new Scroller(conte ...
- php mysqli扩展之预处理
在前一篇 mysqli基础知识中谈到mysqli的安装及基础操作(主要是单条sql语句的查询操作),今天介绍的是mysqli中很重要的一个部分:预处理. 在mysqli操作中常常涉及到它的三个主要类: ...
- groot 引入外部模板
index7.html <html><head> <title>groots引入外部模板van</title> <script src=" ...
- 常见面试第二题之什么是Context
今天的面试题,也就是我们常见面试题系列的第二题,我们来讲一讲android中的context.我相信大家android开发者一定对于这个context非常熟悉,肯定都有使用过,肯定没有没使用过的.但是 ...