cspage-break-inside的功能用于设置元素内部的分页行为。虽然分页符总是可以强制的，但是不能保证防止分页符穿透。创建者只能要求用户代理尽可能防止分页符穿透。
如何使用csspage-break-inside功能？
效果：内部分页功能设置元素内部的分页行为。
澄清：虽然总是可以用来强制分页符，但是无法保证分页符不被穿透，创作者只能要求用户代理尽可能防止分页符穿透。适用于：位置值为相对或静态的非滑块级元素。
注意：只要Opera浏览器支持分页内功能。
使用csspan内部中断功能的示例。
.
CSS设置
在修改模板的过程中，需要重写CSS样式表。刚刚看到一篇关于instantshift.com CSS常用技巧的总结文章，整理出来给大家参考，希望对大家有用。
今后，本文将不断更新。
1.文本的水平中心。
将一段文本放在容器的水平中点，只需设置text-align属性：
文本对齐：居中；
2.容器的水平中心。
首先为容器设置显式宽度，然后将边距的水平值设置为自动。
div #容器{
宽度width:760px
margin:0auto
}
3.文本的垂直居中。
单行文本的垂直中心，只需将行高设置为等于容器高度。
例如，容器中有一行数字。
divid=' container ' 1234567890/div
然后CSS这样写道：
div #容器{ height:35px线高：35 px；}
如果有n行文本，则将行高设置为容器高度的1/n。
4.容器的垂直中心。
例如，有两个容器，一个大，一个小。小容器如何垂直居中？
divided=' big '
divided=' small '
/div
/div
首先，将大容器定位为相对容器。
#big{
位置：相对；
高度：480 px；
}
然后，将小容器定位为绝对，沿Y轴将其左上角向下移动50%，最后将其边距-top向上移动其高度的50%。
div#small{
位置：绝对；
top :50%；
高度：240 px；
边距-top :-120 px；
}
用同样的思路，也可以达到水平居中的效果。
5.自适应图片宽度。
如何让较大的图片自动适应小容器的宽度？CSS可以这样写：
img {最大宽度：100%}
但是，IE6不支持最大宽度，因此当遇到IE6时，使用IE条件注释，并将语句重写如下：
img{width:100%}
6.3D按钮。
要使按钮具有3D效果，只需将其左上角边框设置为浅色，右下角边框设置为深色。
div #按钮{
背景技术： # 888；
border:1pxsolid
边框-颜色： # 999 # 777 # 777 # 999；
}
7.7 .字体属性的快速书写。
字体快捷书写的格式为：
正文{
font : font-style font-variant font-weight font-size line-height font-family；
}
所以，
正文{
字体系列：Arial，Helvetica，无衬线；
font-size :13 px；
字体粗细：正常；
font-variant : small-caps；
font-style :斜体；
线高：150%；
}
可以写成：
正文{
font : italic small-caps normal 13px/150% Arial，Helvetica，无衬线；
}
8.8 .链路状态的设置顺序。
链接的四种状态需要按以下顺序设置：
a:link
a:v
isited
a:hover
a:active
9.IE条件注释
你可以利用条件注释，设置只对IE产生作用的语句：
<!--[ifIE]>
<linkrel="stylesheet"type="text/css"href="ie-stylesheet.css"/>
<![endif]-->
还可以区分各种不同的IE版本：
<!--[ifIE6]>-targetsIE6only-->
<!--[ifgtIE6]>-targetsIE7andabove-->
<!--[ifltIE6]>-targetsIE5.5andbelow-->
<!--[ifgteIE6]>-targetsIE6andabove-->
<!--[iflteIE6]>-targetsIE6andbelow-->
10.IE6专用语句：方法一
由于IE6不把html视为文档的根元素，所以利用这一点，可以写出只有IE6才能读到的语句：
/*thefollowingrulesapplyonlytoIE6*/
*html{
}
*htmlbody{
}
*html.foo{
}
IE7专用语句则要写成
/*thefollowingrulesapplyonlytoIE7*/
*+html.foo{
}
11.IE专用语句：方法二
除了IE6以外，所有浏览器都不能识别属性前的下划线。而除了IE7之外，所有浏览器都不能识别属性前的*号，因此可以写出只有这两个浏览器才能读到的语句：
.element{
background:red;/*modernbrowsers*/
*background:green;/*IE7andbelow*/
_background:blue;/*IE6exclusively*/
}
12.CSS的优先性
如果同一个容器被多条CSS语句定义，那么哪一个定义优先呢？
基本规则是：
行内样式>id样式>class样式>标签名样式
比如，有一个元素：
<divid="ID"class="CLASS"style="color:black;"></div>
行内样式是最优先的，然后其他设置的优先性，从低到高依次为：
div<.class<div.class<#id<div#id<#id.class<div#id.class
13.IE6的min-height
IE6不支持min-height，有两种方法可以解决这个问题：
方法一：
.element{
min-height:500px;
height:auto!important;
height:500px;
}
共有三条CSS语句，第一句是针对其他浏览器设置最小高度，第三句是针对IE设置最小高度，第二句则是让其他浏览器覆盖第三句的设置。
方法二：
.element{
min-height:500px
_height:500px
}
_height只有IE6能读取。
14.font-size基准
浏览器的缺省字体大小是16px，你可以先将基准字体大小设为10px：
body{font-size:62.5%;}
后面统一采用em作为字体单位，2.4em就表示24px。
h1{font-size:2.4em}
15.Text-transform和FontVariant
Text-transform用于将所有字母变成小写字母、大写字母或首字母大写：
p{text-transform:uppercase}
p{text-transform:lowercase}
p{text-transform:capitalize}
FontVariant用于将字体变成小型的大写字母（即与小写字母等高的大写字母）。
p{font-variant:small-caps}
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/50508.html