css 中text-align:justify 到底有什么作用?

html-css028

css 中text-align:justify 到底有什么作用?,第1张

这个是属性是单词两端对齐的意思。

值 justify 可以使文本的两端都对齐。在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔,使各行的长度恰好相等。

你对比一下下面的代码就明白了

css代码:

.box1{ width:500pxline-height:20pxmargin:10px autobackground-color:#cddtext-align:justify}

.box2{ width:500pxline-height:20pxmargin:10px autobackground-color:#cddtext-align:left}

html代码:

<div class="box1">There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really</div>

<div class="box2">There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really</div>

这个我举个例子告诉你。

比如你的html代码是这样的。<a class="just_a" id="just_a"></a>,那在css里面,标签.#id就是a #just_a{color:red}#id就是#just_a{color:blue}。

因为在CSS文件中,定义样式的时候不仅仅是前缀只能写一个的。也就是说,比如你的页面中有许多的ul,但是样式又共同点,又有不同点,这个时候就要用到你所说的原则四了。在css中直接ul{}定义的样式,由于优先级小,所以所有的ul会首先使用这里定义的,但是比如有个ul是在一个div里的,其他都是在table里的,这个时候div ul{}这样定义的ul样式,会重写之前的公共样式,就达到了重定义的目的。在后端语言中,这叫做方法的重写。

我的回答如果有不清楚的或者你不理解的地方,你可以追问我或者百度hi我,我会继续回答,如果你感到满意,希望能够采纳。谢谢。

新建一个html文件,命名为test.html,用于讲解css如何使每个字符宽度一样。

2

/6

在test.html文件内,使用div标签创建一行字符,用于测试。

3

/6

在test.html文件内,设置div标签的class属性为strdiv,用于下面设置样式。

4

/6

在test.html文件内,编写<style type="text/css"></style>标签,页面的css样式将写在该标签内。

5

/6

在css标签内,通过class设置div的样式,定义其宽度为200px,背景颜色为灰色,并将text-align属性设置为justify,text-align-last属性设置为justity,实现每个字符宽度一样。

6

/6

在浏览器打开test.html文件,查看实现的效果。