当前位置：首页 > news >正文

小知识点

news 来源：原创 2024/5/2 7:45:06

1.text-align:

　　text-align属性只能针对文本文字和img标签以及其他行内元素，对其他标签无效。

　　text-align:center；不同于html中的<center></center>属性，<center>是将所有被包含的元素都居中显示，而text-align：center只是将元素下面的内联元素居中显示。

2.居中

　　水平居中：

　　　　1.行内元素的水平居中，如果块级元素通过display:inline属性变为行内元素，也用此方法居中

　　　　　　方法：父类设置text-align:center;属性

1 <div  style="height:auto;width:100%;background-color:#ccc;text-align:center">
2   <div style="width:auto;height:200px;background:red;display:inline;">111
3   </div>
4 </div>

　　　　2.块级元素水平居中

　　　　　　　　1.宽度固定的块级元素水平居中：(即:width:X% || XXpx)

　　　　　　　　　　　利用margin属性：margin:0 auto;关键是设置左右边距为auto，上下边距没有关系

1 <div style="height:auto;width:100%;background-color:#ccc;text-align:center">
2   <div style="width:auto;height:200px;background:red;margin:0 auto;">111
3   </div>
4 </div>

　　　　　　　　2.宽度不固定的块级元素水平居中：（即没有对width进行设置）

　　　　　　　　　　　　1.利用<table></table>

　　　　　　　　　　　　　　把要居中的块级元素放在<td></td>中，用单元格对块级元素进行约束,然后设置margin属性

 1 html代码：
 2 <div>
 3 <table>
 4   <tbody>
 5     <tr><td>
 6     <ul>
 7         <li><a href="#">1</a></li>
 8         <li><a href="#">2</a></li>
 9         <li><a href="#">3</a></li>
10     </ul>
11     </td></tr>
12   </tbody>
13 </table>
14 </div>
15 css代码：
16 <style>
17 table{
18     margin:0 auto;
19 }
20 ul{list-style:none;margin:0;padding:0;}
21 li{float:left;display:inline;margin-right:8px;}
22 </style>

　　　　　　　　　　2.利用display属性，同上

　　　　　　　　　　3.利用定位，这个得好好的理解

 1 方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。
 2 代码如下：
 3 <body>
 4 <div class="container">
 5     <ul>
 6         <li><a href="#">1</a></li>
 7         <li><a href="#">2</a></li>
 8         <li><a href="#">3</a></li>
 9     </ul>
10 </div>
11 </body>
12 css代码：
13 <style>
14 .container{
15     float:left;
16     position:relative;
17     left:50%
18 }
19 .container ul{
20     list-style:none;
21     margin:0;
22     padding:0;
23     position:relative;
24     left:-50%;
25 }
26 .container li{float:left;display:inline;margin-right:8px;}
27 </style>
28 这种方法可以保留块状元素仍以 display:block 的形式显示，优点不添加无语议表标签，不增加嵌套深度，但它的缺点是设置了 position:relative，带来了一定的副作用。
29 这三种方法使用得都非常广泛，各有优缺点，具体选用哪种方法，可以视具体情况而定。

　　垂直居中：

　　　　　　1.单行元素垂直居中

　　　　　　　　利用line-height

 1 父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。如下代码：
 2 <div class="container">
 3     hi,imooc!
 4 </div>
 5 css代码：
 6 <style>
 7 .container{
 8     height:100px;
 9     line-height:100px;
10     background:#999;
11 }
12 </style>

　　　　　　2.多行文本垂直居中

　　　　　　　　1.还是利用表格对其进行约束，然后利用表格的vertical-align:middle;属性

 1 父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种：
 2 方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
 3 说到竖直居中，css 中有一个用于竖直居中的属性 vertical-align，但这个样式只有在父元素为 td 或 th 时，才会生效。所以又要插入 table 标签了。下面看一下例子：
 4 html代码：
 5 <body>
 6 <table><tbody><tr><td class="wrap">
 7 <div>
 8     <p>看我是否可以居中。</p>
 9     <p>看我是否可以居中。</p>
10     <p>看我是否可以居中。</p>
11     <p>看我是否可以居中。</p>
12     <p>看我是否可以居中。</p>
13 </div>
14 </td></tr></tbody></table>
15 </body>
16 css代码：
17 table td{height:500px;background:#ccc}
18 因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。

　　　　　　　　　　2.还是利用vertical-align:middle属性，不过不是利用表格来实现了

 1 在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。
 2 html代码：
 3 <div class="container">
 4     <div>
 5         <p>看我是否可以居中。</p>
 6         <p>看我是否可以居中。</p>
 7         <p>看我是否可以居中。</p>
 8         <p>看我是否可以居中。</p>
 9         <p>看我是否可以居中。</p>
10     </div>
11 </div>
12 css代码：
13 <style>
14 .container{
15     height:300px;
16     background:#ccc;
17     display:table-cell;/*IE8以上及Chrome、Firefox*/
18     vertical-align:middle;/*IE8以上及Chrome、Firefox*/
19 }
20 </style>
21 这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7。

3.不自动换行的问题（见word）

这两个东西是什么，我相信至今还有很多人搞不清，只会死记硬背的写一个word-wrap:break-word;word-break:break-all;这样的东西来强制断句，又或者是因为这两个东西实在是太拗口了，长得又差不多，导致连背都很难背下来。

那它们到底是什么呢？我在mozilla的官网上找到如下的解释：

word-wrap

word-break

我们看到两个解释中都出现了 break lines within words 这样的词汇，说明它们都跟单词内断句又关。然后我们试着翻译一下上面的两段英文：

word-wrap:

css的 word-wrap 属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。

word-break:

css的 word-break 属性用来标明怎么样进行单词内的断句。

貌似从上面两个读着都蛋疼的翻译中找到了一些区别：word-wrap 强调的是是否允许单词内断句，而word-break强调的则是怎么样来进行单词内的断句。

到这里，好像依然不是很明朗，好吧，表达能力差的孩纸真是伤不起啊，只能用些实例来补救了。

首先，何谓单词内断句？当然这里指的都是西文单词。

这是没有单词内断句的情况，我们看到那个单词是在是太长了，所以它溢出了包裹它的容器。

这是进行了单词内断句的情况，就是一个单词被断作了两行。

先要明确一点，不加word-wrap或word-break的时候，就是浏览器默认的时候，如果有一个单词很长，导致一行中剩下的空间已经放不下它时，则浏览器会把这个单词挪到下一行去：

word..d 这个我们创造出来的单词本来应该紧接在 long 后面的，但是long后剩下的空间已经不够了，而单词默认是不能断开的，所以浏览器就只好把它屈尊下移了。

这个长单词还不算变态的，因为至少它没有长到超过包裹它的元素的长度，但是如果超过了呢？

如果超过了就像前面我们提到过的，它会溢出它的父容器外，因为这时它是不允许被截断的，那就只能冲出去咯。

这个时候word-wrap就能派上用场了。我们给这段文字加上word-wrap:break-word看看会怎么样

哈哈，你给我滚回去吧，变态的长单词，即使你断了也无所谓。

这样，为了防止长单词溢出，就在它的内部断句了。这就是 word-wrap:break-word 的功能。

在看看word-wrap的浏览器支持情况：

很好，几乎所有浏览器都支持。

好吧，你现在可以说了，都有了word-wrap这个东西，那还要 word-break 来干什么鸟？

万恶的资本家总是想要榨干劳动者的一切，你看，下图中的long后面不是还有一段空间吗，难道就这样放着？太浪费了。。。

是啊，long后面那里足可以放好几个短的单词了，都是那个臭变态的长单词！

以IE真的很体贴，不要再骂它啦，考虑到不浪费一点点空间的问题，它创造出了 word-break 这个东西。现在我们来看看使用 word-break:break-all; 后会怎么样。

看看发生什么了？那个变态的长单词并没有被挪到下一行，而是直接放在了long后面，然后在父容器的右边界断开了。所以，它没有浪费空间了哦。

再看下word-break:break-all的浏览器支持情况：

除了opera外，其他都支持耶（火狐也从不支持改为支持了）!

最开始我们说了，word-wrap 是用来决定允不允许单词内断句的，如果不允许的话长单词就会溢出。最重要的一点是它还是会首先尝试挪到下一行，看看下一行的宽度够不够，不够的话就进行单词内的断句。

而word-break:break-all则更变态，因为它断句的方式非常粗暴，它不会尝试把长单词挪到下一行，而是直接进行单词内的断句。这也可以解释为什么说它的作用是决定用什么方式来断句的，那就是——用了word-break:break-all，就等于使用粗暴方式来断句了。总之一句话，如果您想更节省空间，那就用word-break:break-all就对了！

但无论如何，单词内的断句都会对西文的可读性产生一定的影响，有时候这点就要注意了。

ps:网上有些文章说，word-wrap:break-word 对长串英文不起作用，其实这是非常错误的，word-wrap:break-word照样能把一个长串英文或数字拆成多行。事实上，word-wrap:break-word与word-break:break-all共同点是都能把长单词强行断句，不同点是word-wrap:break-word会首先起一个新行来放置长单词，新的行还是放不下这个长单词则会对长单词进行强制断句；而word-break:break-all则不会把长单词放在一个新行里，当这一行放不下的时候就直接强制断句了。