CSS的空间处理
一、空间规则
浏览器通常会忽略HTML代码中的空格。
上面是一行HTML代码,在文本之前,内部和之后都有两个空格。为了便于识别亚博视讯 ,此处使用半圆形符号表示空间。
浏览器的输出如下。
你好世界
如您所见,文本之前和之后的空格将被忽略,并且内部的连续空格将仅计为一个。这是浏览器处理空间的基本规则。
如果您希望按原样输出空白,则可以使用前导标签。
另一种方法是使用HTML实体而不是表示空格。
二、空格字符
用于处理空格的HTML规则适用于所有类型的字符。除了普通的空格键,它还包含制表符(t)和换行符(r和n)。
浏览器将自动将这些符号转换为普通的空格键。
在上面的代码中,文本包含换行符,浏览器将其视为空格。输出结果如下。
你好世界
因此,文本内的换行符无效(除非文本置于前面的标记内)。
菲尔普斯世界/ p
上面的代码使用br标签清楚地指示换行符。
三、 CSS空格属性
HTML语言的空间处理基本上是直接过滤。这种处理太粗糙了,完全忽略原始文本中的空格可能是有道理的。
CSS提供了一个空白属性,该属性可以提供一种更精确的方式来处理空白。该属性具有六个值,除了通用继承(继承父元素)外亚博账号登录 ,下面依次介绍其他五个值。
blank属性的默认值为normal,这表示浏览器以正常方式处理空格。
在上面的代码中,文本前面有两个空格,其中包含一个长字和一个换行符。
然后,容器p指定相对较小的宽度。为了便于识别div空格代码,将背景色设置为红色。
p {width:100pxbackground:red;}
显示效果如下。
您可以看到文本开头的空格被忽略了。因为容器太窄,所以第一个单词使容器溢出,然后包装在下一个空间中。文本中的换行符会自动转换为空格。
当blank属性为nowrap时div空格代码,不会出现换行符,因为它超出了容器的宽度。
显示效果如下。
所有文本显示为一行,没有换行符。
当blank属性为pre时,它将被视为pre标签。
显示效果如下。
以上结果与原始文本完全相同亚博网站有保障的 ,保留了所有空格和换行符。
当预包装了space属性时,基本上会根据预标签对其进行处理。唯一的区别是,当超出容器的宽度时,将出现新的一行。
p {空白:预包装;}
显示效果如下。
文本开头的空格,内部的空格和换行符被保留,而换行符在容器外部。
当blank属性位于该行之前时,表示保留换行符。除了换行符将按原样输出外,其他所有内容都符合空白:正常规则。
显示效果如下。
除了文本中的换行符不会转换为空格外,其他所有内容均符合常规处理规则。这对于诗歌文本很有用。
四、参考链接
空格在HTML中什么时候重要?作者:帕特里克·布·罗塞特
“空白”,作者莎拉·科普
成都大学(四川省成都市幼儿园幼儿园,成都卫生学校,成都工业大学医学院医学分院)