オーバーフロー関連のプロパティ - 要素タイプ
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:省略号
注記:
ステップ:
テキストの内容は要素を超える必要があります (コンテナーの幅を設定します)。
ホワイトスペース:nowrap; 改行を強制しない
オーバーヒドゥン: 隠された領域を超えて
text-overflow: 省略記号; 省略記号の表示
単一行のテキストにのみ有効です
2. 要素の種類の分類
CSS の表示分類に従って、XHTML 要素は次のように分類されます。
3 種類: ブロックレベル要素、インライン要素/インライン要素、インラインブロック要素
块级元素:
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.垂直整列
行内块元素垂直对齐方式
top:顶部对齐
middle:垂直居中
bottom 底部对齐
sub与父元素的下标文本基线对齐
sup与父元素的文本顶部对齐
basline文本基线对齐
text-top与父元素的文本顶部对齐
text-bottomt与父元素的文本底部对齐
注:
只针对行块级元素有效
兄弟元素之间互相两两对齐
5. 置換要素と非置換要素
置換要素:img入力
属性と属性値を使用して指定されたコンテンツを表示します
非置換要素: img 入力などを除くすべて。
ブラウザ上に直接表示されるコンテンツ