オーバーフロー関連のプロパティ - 要素タイプ

オーバーフロー関連のプロパティ - 要素タイプ

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:省略号

注記:

ステップ:

  1. テキストの内容は要素を超える必要があります (コンテナーの幅を設定します)。

  2. ホワイトスペース:nowrap; 改行を強制しない

  3. オーバーヒドゥン: 隠された領域を超えて

  4. 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 入力などを除くすべて。

ブラウザ上に直接表示されるコンテンツ

Guess you like

Origin blog.csdn.net/qq_46372132/article/details/132290192