首页 > > 网页制作 > css >

css解惑

2018-06-24 01:01:51来源：未知阅读 ()

1.word-wrap和word-break的区别

举例如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5 </head>
 6 <body>
 7     <p style="width:100px;border:1px solid #000; color:#F00;">a aaaaaaaaaaaaaaaaaaaa</p>
 8     <p style="width:100px;border:1px solid #000; color:#F00;word-wrap:break-word">a aaaaaaaaaaaaaaaaaaaa</p>
 9     <p style="width:100px;border:1px solid #000; color:#F00;word-break:break-all">a aaaaaaaaaaaaaaaaaaaa</p>
10 </body>
11 </html>

结果如下：

分析：

没有word-wrap和word-break时超长单词会换行，如果还是超出容器宽度则会溢出

word-wrap:word-break表示可以把单词截断

word-break:break-all表示所有东西都会截断

2.text-align:justify

解释：值 justify 可以使文本的两端都对齐。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。您也许已经注意到了，两端对齐文本在打印领域很常见。

举例如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5 </head>
 6 <body>
 7     <p style="width:100px;border:1px solid #000; color:#F00;">a aaaa aaa aaaaa</p>
 8     <p style="width:100px;border:1px solid #000; color:#F00;text-align: justify;">a aaaa aaa aaaaa</p>
 9     
10 </body>
11 </html>

结果如下：

3.chrome的f12审查器查看hover效果

4.border-collapse

结果如下：

4.display

block、inline、inline-block区别

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>display</title>
 5         <meta charset="utf-8">
 6         <style>
 7             p{
 8                 display:block;
 9                 /*display:inline;*/
10                 /*display:inline-block;*/
11                 /*width:370px;
12                 height:20px;*/
13             }
14         </style>
15     </head>
16     <body>
17         <p>本例中的样式表把段落元素设置为内联元素。本例中的样式表把段落元素设置为内联元素。本例中的样式表把段落元素设置为内联元素。本例中的样式表把段落元素设置为内联元素。</p>
18         <p>而 div 元素不会显示出来！</p>
19     </body>
20 </html>