一:居中效果实现小结
1,文本居中
文本水平居中:text-align:center;
文本垂直居中:①设置line-height=父元素的height (单行文本);②通过设置padding-top、padding-bottom
2,盒子水平居中:
① margin:0 auto; 该盒子需设置了width,不然其width默认为:auto,此时会把值为auto的margin的值改为0
② 使用绝对定位 ,注意其父盒子要设置定位,position值不为static,常用的是设置为相对定位,即子绝父相
- width: 100px;
- position: absolute;
- left: 50%;
- /* 设置负左外边距,其值为自身宽度的一半 */
- margin-left: -50px;
width: 100px;
position: absolute;
left: 50%;
/* 设置负左外边距,其值为自身宽度的一半 */
margin-left: -50px;
③ 设置盒子显示为inline-block
- .parent {
- text-align: center;
- }
- .child {
- display: inline-block;
- }
.parent {
text-align: center;
}
.child {
display: inline-block;
}
④使用绝对定位
- /* 其父盒子需要设置值不为static的定位,常用相对定位 */
- position: absolute;
- left: 50%;
- /* 不知道盒子自身的宽度;IE9开始支持 */
- transform: translate(-50%,0);
/* 其父盒子需要设置值不为static的定位,常用相对定位 */
position: absolute;
left: 50%;
/* 不知道盒子自身的宽度;IE9开始支持 */
transform: translate(-50%,0);
⑤flex布局
- .parent {
- display: flex;
- justify-content: center;
- }
.parent {
display: flex;
justify-content: center;
}
3,盒子垂直居中
①通过设置display属性
- .parent {
- /* 注意,使用这种方式会导致其margin失效 */
- display: table-cell;
- vertical-align: middle;
- }
.parent {
/* 注意,使用这种方式会导致其margin失效 */
display: table-cell;
vertical-align: middle;
}
②使用绝对定位,注意其父盒子要设置定位,position值不为static,常用的是设置为相对定位
- height: 100px;
- position: absolute;
- top: 50%;
- /* 设置负上外边距,其值为自身高度的一半 */
- margin-top: -50px;
height: 100px;
position: absolute;
top: 50%;
/* 设置负上外边距,其值为自身高度的一半 */
margin-top: -50px;
③使用绝对定位二
- /* 其父盒子需要设置值不为static的定位,常用相对定位 */
- position: absolute;
- top: 50%;
- /* 可在盒子高度自适应下实现垂直居中;IE9开始支持 */
- transform: translate(0,-50%);
/* 其父盒子需要设置值不为static的定位,常用相对定位 */
position: absolute;
top: 50%;
/* 可在盒子高度自适应下实现垂直居中;IE9开始支持 */
transform: translate(0,-50%);
④flex布局
- .parent {
- display: flex;
- align-items: center;
- }
.parent {
display: flex;
align-items: center;
}
二:清除浮动小结
清除浮动:不是删除浮动,而是清除浮动的影响。
1,使用clear
clear: left | right | both | none 应用于块级元素
如:h3 {clear:left;} 确保h3元素左边没有浮动元素
clear工作原理:CSS1和CSS2中,增加元素的上外边距
CSS2.1中,在元素上外边距之上增加额外间隔(即清除区域),并不改变元素的外边距
缺点:靠近浮动元素那边的margin会失效
2,给浮动元素的祖先元素加高度
有高度的盒子才能关住浮动
缺点:直接设置height不好,高度最好让内容去自然撑高
3,隔墙法:
在两部分浮动之间加一个有高度的div,并设置其clear属性。
内墙法:
- <div>
- <div class=“fl”>浮动元素</div>
- <!– 在下面加一个设置clear属性的元素,这样浮动就不会对后面的元素造成影响了 –>
- <div class=“cl”>这可看作是一道内墙</div>
- </div>
<div>
<div class="fl">浮动元素</div>
<!-- 在下面加一个设置clear属性的元素,这样浮动就不会对后面的元素造成影响了 -->
<div class="cl">这可看作是一道内墙</div>
</div>
4,偏方:设置overflow:hidden;(慎用,原因见下文)
5,使用伪元素,推荐使用这种方法
- /* 使用伪元素:after清除浮动 #版本一# */
- .clearfix:after{
- visibility:hidden;
- display:block;
- clear:both;
- content:“”;
- font-size:0;
- height:0
- }
- /* 下面是用来解决ie6,7浮动问题 */
- .clearfix{*zoom:1};
/* 使用伪元素:after清除浮动 #版本一# */
.clearfix:after{
visibility:hidden;
display:block;
clear:both;
content:"";
font-size:0;
height:0
}
/* 下面是用来解决ie6,7浮动问题 */
.clearfix{*zoom:1};
- /* #版本二# */
- .clearfix:after {
- content:“\200B”;
- display:block;
- height:0;
- clear:both;
- }
- .clearfix {*zoom:1;}
/* #版本二# */
.clearfix:after {
content:"\200B";
display:block;
height:0;
clear:both;
}
.clearfix {*zoom:1;}
- /* #版本三# (推荐使用) */
- /* 同时加入:before以解决现代浏览器上边距折叠的问题 */
- .clearfix:before,.clearfix:after{
- content:“”;
- display:table;
- }
- .clearfix:after{clear:both;}
- .clearfix{*zoom:1;}
/* #版本三# (推荐使用) */
/* 同时加入:before以解决现代浏览器上边距折叠的问题 */
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}
补充:BFC
BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
BFC的主要特征: 1.BFC容器是一个隔离的容器,和其他元素互不干扰;所以我们可以用触发两个元素的BFC来解决垂直边距折叠问题。 2.BFC可以包含浮动;通常用来解决浮动父元素高度坍塌的问题。
能够触发(Block Formatting Context)BFC的方式有:
根元素html;
float的值不为none;
overflow的值不为visible;
display的值为table-cell, table-caption, inline-block,flex,inline-flex中的任何一个;
position的值不为relative和static。
通过overflow闭合浮动,实际上已经创建了新的 块级格式化上下文,这将导致其布局和相对于浮动的行为等发生一系列的变化,闭合浮动只不过是一系列变化中的一个作用而已。所以为了闭合浮动去改变全局特性,这是不明智的,带来的风险就是一系列的bug;始终要明白,如果单单只是需要闭合浮动,overflow就不要使用
三:三栏布局小结
1,圣杯布局
圣杯布局:给父容器设置height和左右padding;主子容器放在最前以优先加载,子容器全部左浮动,靠设置负margin和相对定位来实现两栏、三栏布局、多栏布局
优点: 1.使主要内容列先加载。
2.允许任何列是最高的。
3.没有额外的div。
4.需要的hack很少
注:使用圣杯布局三栏布局时,若中间栏的宽度小于左右定宽栏的宽度时,布局就会发生紊乱!!!使用双飞翼布局不存在这种问题;左右两栏设置百分数宽度也可以避免这种问题。
- <style type=“text/css”>
- *{
- padding: 0;
- margin: 0;
- }
- .header,.footer{
- height: 100px;
- text-align: center;
- background-color: green;
- }
- span,h4{
- font-size: 20px;
- line-height: 100px;
- }
- .container{
- height: 250px;
- /* 这里的10%是相对视窗的 */
- padding:0 10%;
- /* padding: 0 200px; */
- }
- .main{
- width: 100%;
- height: 250px;
- background-color: #E14E14;
- float: left;
- }
- .left,.right{
- /* 为什么是12.5%? */
- /* 这里的12.5%是相对其父元素的宽度的,其父元素的宽度为视窗的80%(去掉左右padding), */
- /* 所以有12.5*0.8=10,这样就刚好等于视窗的padding的宽度了 */
- width: 12.5%;
- /* width: 200px; */
- height: 250px;
- float: left;
- /* 为什么要用相对定位?因为右边一栏只通过设置margin无法实现*/
- position: relative;
- }
- .left{
- background-color: #1077DB;
- margin-left: -100%;
- left: -12.5%;
- /* left: -200px; */
- }
- .right{
- background-color: #617608;
- margin-left: -12.5%;
- right: -12.5%;
- /* margin-left: -200px; */
- /* right: -200px; */
- }
- </style>
- <body>
- <div class=“header”>
- <h4>Header</h4>
- </div>
- <div class=“container”>
- <div class=“main”>
- <p>main</p>
- </div>
- <div class=“left”>
- <p>left</p>
- </div>
- <div class=“right”>
- <p>right</p>
- </div>
- </div>
- <div class=“footer”>
- <span>Footer</span>
- </div>
- </body>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.header,.footer{
height: 100px;
text-align: center;
background-color: green;
}
span,h4{
font-size: 20px;
line-height: 100px;
}
.container{
height: 250px;
/* 这里的10%是相对视窗的 */
padding:0 10%;
/* padding: 0 200px; */
}
.main{
width: 100%;
height: 250px;
background-color: #E14E14;
float: left;
}
.left,.right{
/* 为什么是12.5%? */
/* 这里的12.5%是相对其父元素的宽度的,其父元素的宽度为视窗的80%(去掉左右padding), */
/* 所以有12.5*0.8=10,这样就刚好等于视窗的padding的宽度了 */
width: 12.5%;
/* width: 200px; */
height: 250px;
float: left;
/* 为什么要用相对定位?因为右边一栏只通过设置margin无法实现*/
position: relative;
}
.left{
background-color: #1077DB;
margin-left: -100%;
left: -12.5%;
/* left: -200px; */
}
.right{
background-color: #617608;
margin-left: -12.5%;
right: -12.5%;
/* margin-left: -200px; */
/* right: -200px; */
}
</style>
<body>
<div class="header">
<h4>Header</h4>
</div>
<div class="container">
<div class="main">
<p>main</p>
</div>
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
</div>
</div>
<div class="footer">
<span>Footer</span>
</div>
</body>
2,双飞翼布局
相比圣杯布局,双飞翼不必设置左右栏的position: relative,也不必设置左右left、right值,只需多添加一个子元素包含,相应的padding换成margin
双飞翼布局的好处:1.主要的内容先加载的优化; 这是用圣杯布局和双飞翼布局的主要原因!!!
2.兼容目前所有的主流浏览器,包括IE6在内;
3.实现不同的布局方式,可以通过调整相关CSS属性即可实现。
- <style type=“text/css”>
- body,div{
- padding: 0;
- margin: 0;
- }
- .header,.footer{
- height: 100px;
- text-align: center;
- background-color: green;
- }
- span,h4{
- font-size: 20px;
- line-height: 100px;
- }
- .container{
- overflow: hidden;
- }
- .main{
- width: 100%;
- height: 250px;
- background-color: #E14E14;
- float: left;
- /* main本身设置了100%的宽度,所以再设置margin、padding都会使其真实占有宽度超过其父容器, */
- /* 所以这里应该给main的子容器设置margin */
- }
- .main-inner{
- /*margin: 0 10%;*/
- margin: 0 200px;
- }
- .left,.right{
- /*width: 10%;*/
- width: 200px;
- height: 250px;
- float: left;
- }
- .left{
- background-color: #1077DB;
- margin-left: -100%;
- }
- .right{
- background-color: #617608;
- /*margin-left: -10%;*/
- margin-left: -200px;
- }
- </style>
- <body>
- <div class=“header”>
- <h4>Header</h4>
- </div>
- <!– 这里container可以不需要 –>
- <div class=“container”>
- <div class=“main”>
- <div class=“main-inner”>
- <p>main</p>
- </div>
- </div>
- <div class=“left”>
- <p>left</p>
- </div>
- <div class=“right”>
- <p>right</p>
- </div>
- </div>
- <div class=“footer”>
- <span>Footer</span>
- </div>
- </body>
<style type="text/css">
body,div{
padding: 0;
margin: 0;
}
.header,.footer{
height: 100px;
text-align: center;
background-color: green;
}
span,h4{
font-size: 20px;
line-height: 100px;
}
.container{
overflow: hidden;
}
.main{
width: 100%;
height: 250px;
background-color: #E14E14;
float: left;
/* main本身设置了100%的宽度,所以再设置margin、padding都会使其真实占有宽度超过其父容器, */
/* 所以这里应该给main的子容器设置margin */
}
.main-inner{
/*margin: 0 10%;*/
margin: 0 200px;
}
.left,.right{
/*width: 10%;*/
width: 200px;
height: 250px;
float: left;
}
.left{
background-color: #1077DB;
margin-left: -100%;
}
.right{
background-color: #617608;
/*margin-left: -10%;*/
margin-left: -200px;
}
</style>
<body>
<div class="header">
<h4>Header</h4>
</div>
<!-- 这里container可以不需要 -->
<div class="container">
<div class="main">
<div class="main-inner">
<p>main</p>
</div>
</div>
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
</div>
</div>
<div class="footer">
<span>Footer</span>
</div>
</body>
3,一般三栏/多栏布局
布局思想:先左右浮动,然后中栏设置margin
这种布局必须把左右浮动放前面,中栏放最后面,所以无法做到像圣杯布局、双飞翼布局那样可以让主要内容优先加载!
- body,div,p{
- padding: 0;
- margin: 0;
- }
- .container{
- overflow: hidden;
- }
- .left{
- float: left;
- width: 200px;
- height: 400px;
- background-color: green;
- }
- .right{
- float: right;
- width:200px;
- height: 400px;
- background-color: gray;
- }
- .middle{
- margin: 0 220px;
- height: 400px;
- background-color: #9AA507;
- }
body,div,p{
padding: 0;
margin: 0;
}
.container{
overflow: hidden;
}
.left{
float: left;
width: 200px;
height: 400px;
background-color: green;
}
.right{
float: right;
width:200px;
height: 400px;
background-color: gray;
}
.middle{
margin: 0 220px;
height: 400px;
background-color: #9AA507;
}
4,Flex布局
待更新…
</div># 欢迎使用Markdown编辑器写博客
本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦:
- Markdown和扩展Markdown简洁的语法
- 代码块高亮
- 图片链接和图片上传
- LaTex数学公式
- UML序列图和流程图
- 离线写博客
- 导入导出Markdown文件
- 丰富的快捷键
快捷键
- 加粗
Ctrl + B
- 斜体
Ctrl + I
- 引用
Ctrl + Q
- 插入链接
Ctrl + L
- 插入代码
Ctrl + K
- 插入图片
Ctrl + G
- 提升标题
Ctrl + H
- 有序列表
Ctrl + O
- 无序列表
Ctrl + U
- 横线
Ctrl + R
- 撤销
Ctrl + Z
- 重做
Ctrl + Y
Markdown及扩展
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成格式丰富的HTML页面。 —— [ 维基百科 ]
使用简单的符号标识不同的标题,将某些文字标记为粗体或者斜体,创建一个链接等,详细语法参考帮助?。
本编辑器支持 Markdown Extra , 扩展了很多好用的功能。具体请参考Github.
表格
Markdown Extra 表格语法:
项目 | 价格 |
---|---|
Computer | $1600 |
Phone | $12 |
Pipe | $1 |
可以使用冒号来定义对齐方式:
项目 | 价格 | 数量 |
---|---|---|
Computer | 1600 元 | 5 |
Phone | 12 元 | 12 |
Pipe | 1 元 | 234 |
定义列表
-
Markdown Extra 定义列表语法:
项目1
项目2
- 定义 A
- 定义 B 项目3
- 定义 C
-
定义 D
定义D内容
代码块
代码块语法遵循标准markdown代码,例如:
@requires_authorization
def somefunc(param1='', param2=0):
'''A docstring'''
if param1 > param2: # interesting
print 'Greater'
return (param2 - param1 + 1) or None
class SomeClass:
pass
>>> message = '''interpreter
... prompt'''
脚注
生成一个脚注1.
目录
用 [TOC]
来生成目录:
数学公式
使用MathJax渲染LaTex 数学公式,详见math.stackexchange.com.
- 行内公式,数学公式为: Γ(n)=(n−1)!∀n∈N Γ ( n ) = ( n − 1 ) ! ∀ n ∈ N 。
- 块级公式:
更多LaTex语法请参考 这儿.
UML 图:
可以渲染序列图:
或者流程图:
离线写博客
即使用户在没有网络的情况下,也可以通过本编辑器离线写博客(直接在曾经使用过的浏览器中输入write.blog.csdn.net/mdeditor即可。Markdown编辑器使用浏览器离线存储将内容保存在本地。
用户写博客的过程中,内容实时保存在浏览器缓存中,在用户关闭浏览器或者其它异常情况下,内容不会丢失。用户再次打开浏览器时,会显示上次用户正在编辑的没有发表的内容。
博客发表后,本地缓存将被删除。
用户可以选择 把正在写的博客保存到服务器草稿箱,即使换浏览器或者清除缓存,内容也不会丢失。
注意:虽然浏览器存储大部分时候都比较可靠,但为了您的数据安全,在联网后,请务必及时发表或者保存到服务器草稿箱。
浏览器兼容
- 目前,本编辑器对Chrome浏览器支持最为完整。建议大家使用较新版本的Chrome。
- IE9以下不支持
- IE9,10,11存在以下问题
- 不支持离线功能
- IE9不支持文件导入导出
- IE10不支持拖拽文件导入
- 这里是 脚注 的 内容. ↩