文本设置+元素类型

一、文本

1、文本溢出

overflow:文本溢出设置;

overflow:scroll /auto /hidden/inherit;             超出时,滚动查看(未超出时也会有滚动机制)/超出时,滚动查看(未超出时不会有滚动机制)/ 超出隐藏 /继承父级的overflow设置

2、文本空白

white-space:normal; 默认值
white-space:pre;空白会被浏览器保留,保留原有格式,不会被迫换行
white-space:pre-wrap;保留所有格式,会被迫换行

white-space:pre-line;保留换行,不保留缩进,多个空格只保留一个

white-space:nowrap;强制不换行

3、文本省略号

text-overflow:clip/ellipsis;裁剪/省略号

显示省略号方法:元素设置宽度,且内容足够——white-space:nowrap;强制不换行——overflow:hidden;隐藏——text-overflow:ellipsis;省略号(只针对当行文本有效)

二、元素类型

1、块状元素block:单独占据一行,可以定义自己的宽度和高度,能够正常设置内外边距。一般用于搭建页面结构。例如:div h3 ul li p。。。。。

2、内联元素inline:只占据自己内容大小的位置。不能设置宽高,宽高由内容撑开。不能正常设置上下内外边距(对布局无效,对自身有效)。一般结合css样式显示视觉效果(span a i em b)

3、内联块元素inline-block:只占据自己内容大小,能设置宽高,能正常设置内外边距。(img input)

三、元素类型转换 display:  ;

dislay:inline/block/inline-block;将元素转换成内联元素/块元素元素(元素显示)/内联块元素

display:none;元素不显示,隐藏

猜你喜欢

转载自www.cnblogs.com/xsqlj/p/12421537.html