white-space:pre-wrap规定段落中的文本不进行换行
/* normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。*/
p { white-space: pre-wrap }
<P>
咏华山
作者:寇准
只有天在上,更无山与齐。
举头红日近,回首白云低。
</P>
效果如下:
pre-wrap.png
box-sizing:border-box通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度
div{
width: 350px;
margin:auto;
white-space:pre-wrap;
box-sizing:border-box;
line-height:1.7em;
text-align:center;
padding-bottom:25px;
background-image:url(images/yellow_bg.png)
}
<div>
《致橡树》
舒婷
我如果爱你——
绝不像攀援的凌霄花,
借你的高枝炫耀自己;
我如果爱你——
绝不学痴情的鸟儿,
为绿荫重复单调的歌曲;
也不止像泉源,
常年送来清凉的慰藉;
也不止像险峰,
增加你的高度,
衬托你的威仪。
甚至日光,
甚至春雨。
</div>
效果如下:
border-box.png
mark突出显示文本时使用,高亮效果
扎实做好<mark>“六稳”</mark>工作落实<mark>“六保”</mark>任务 奋力谱写陕西新时代追赶超越新篇章
效果如下:
mark.png
progress标签标示任务的进度(进程)
<progress value="20" max="100"></progress>
效果如下:
progress.png
contenteditable属性规定元素内容是否可编辑
<p contenteditable="true">这是一个可编辑的段落。</p>
效果如下:
contenteditable.png
h1,h2,h3.h4,h5,h6标题标签的默认属性 标题标签汇1em=16px em是相对元素
h1{font-size: 2em;margin: 1.34em 0;}
h2{font-size: 1.5em;margin: 1.25em 0;}
h3{font-size: 1.17em;margin: 1.17em 0;}
h4{font-size: 1em;margin: 1.33em 0;}
h5{font-size: 0.83em;margin: 1.39em 0;}
h6{font-size: 0.75em;margin: 1.75em 0;}
h1,h2,h3,h4,h5,h6{font-weight: bolder;display: block}
<hgroup> 标签用于对网页或区段(section)的标题进行组合。
<hgroup>
<h1>Welcome to my WWF</h1>
<h2>For a living planet</h2>
</hgroup>
list-style 简写属性在一个声明中设置所有的列表属性。
.le1{list-style: url("https://www.w3school.com.cn/i/eg_arrow.gif")}
.le2{list-style: decimal}
.le3{list-style: decimal-leading-zero}
.le4{list-style: lower-alpha}
.le5{list-style: lower-roman}
.le6{list-style: disc}
/* ul>li{一级列表项目}*6>ul.le$>li{二级列表项目}*3 tab .代表样式名$代表序号效果如下 */
<ul>
<li>一级列表项目
<ul class="le1">
<li>二级列表项目</li>
<li>二级列表项目</li>
<li>二级列表项目</li>
</ul>
</li>
<li>一级列表项目
<ul class="le2">
<li>二级列表项目</li>
<li>二级列表项目</li>
<li>二级列表项目</li>
</ul>
</li>
<li>一级列表项目
<ul class="le3">
<li>二级列表项目</li>
<li>二级列表项目</li>
<li>二级列表项目</li>
</ul>
</li>
<li>一级列表项目
<ul class="le4">
<li>二级列表项目</li>
<li>二级列表项目</li>
<li>二级列表项目</li>
</ul>
</li>
<li>一级列表项目
<ul class="le5">
<li>二级列表项目</li>
<li>二级列表项目</li>
<li>二级列表项目</li>
</ul>
</li>
<li>一级列表项目
<ul class="le6">
<li>二级列表项目</li>
<li>二级列表项目</li>
<li>二级列表项目</li>
</ul>
</li>
</ul>
效果如下:
list-style.png
background-repeat 设置或检索对象的背景图像如何铺排填充。必须先指定[background-image]属性
repeat:背景图像在横向和纵向平铺,默认值。
repeat-x:背景图像在横向上平铺。
repeat-y:背景图像在纵向上平铺。
no-repeat:背景图像不平铺。
round:背景图像自动缩放直到适应且填充满整个容器。(CSS3)
space:背景图像以相同的间距平铺且填充满整个容器或某个方向。(CSS3)
浏览器支持:
1.IE8及更早浏览器不支持为background-repeat定义2个参数值;不支持CSS3新增参数值round | space。
2.Firefox4.0-8.0不支持为background-repeat定义2个参数值;不支持CSS3新增参数值round | space。
3.Safari5.1已接受CSS3新增参数值round | space,但还未实现支持。 4.Chrome13.0-16.0已接受CSS3新增参数值round | space,但还未实现支持。
网友评论