溢出相关属性-元素类型
1.容器溢出相关的属性
overflow:
visible:默认值 ,溢出内容会显示在元素之外
hidden:溢出隐藏
scroll:滚动,溢出内容以滚动方式显示
auto:如果有溢出会添加滚动条,没有溢出正常显示
inherit:规定应该遵从父元素继承overflow属性的值。
overflow-x:水平溢出
overflow-y:垂直溢出
2.空余空间
white-space:
normal:默认值
nowrap:强制不换行,干不过br标签,遇到br还是换行
pre:原格式输出,保留编辑器的格式
pre-wrap:原格式输出,只保留了换行和缩进
pre-line:原格式输出,只保留了换行
inherit
3.显示省略号
text-overflow:
clip:剪裁,默认值不显示省略号
ellipsis:省略号
注:
步骤:
文本内容要超出元素(设置容器宽度)
white-space:nowrap;强制不换行
overhidden:超出隐藏
text-overflow:ellipsis;省略号显示
只针对单行文本有效
2.元素类型分类
根据css显示分类,XHTML元素被分为
三种类型:块级元素,内联元素/行内元素,行内块元素
块级元素:
1.独占一行
2.能设置宽高
3.能正常设置内外边距
4.矩形显示
5.通常作为容器使用
行内元素:
1.独占一行
2.能设置宽高
3.不能正常设置垂直的内外边距,水平的正常
4.非矩形显示,最小单位的时候就是矩形显示
5.通常不作为容器使用
行内块元素:input,img
1.在一行显示
2.能设置宽高
3.能正常设置内外边距
4.矩形显示
5.通常不作为容器使用
6.当设置了浮动之后,就相当于增加了转换为块级元素的属性
3.元素类型的转换
display:
block 转为块级元素(显示)
inline:转为行内元素
inline-block:转为行内块元素
none:隐藏
flex:弹性盒子
grid:网格布局
4.vertical-align
行内块元素垂直对齐方式
top:顶部对齐
middle:垂直居中
bottom 底部对齐
sub与父元素的下标文本基线对齐
sup与父元素的文本顶部对齐
basline文本基线对齐
text-top与父元素的文本顶部对齐
text-bottomt与父元素的文本底部对齐
注:
只针对行块级元素有效
兄弟元素之间互相两两对齐
5.置换元素和非置换元素
置换元素:img input
通过属性及属性值展示指定的内容
非置换元素:除了img input等之外都是
内容直接展示在浏览器上