ホームページ > 記事 > ウェブフロントエンド > CSS は width:auto の使用例の共有について深く理解しています。
CSS は width:auto の使用例の共有について深く理解しています。
- 小云云オリジナル
- 2018-01-08 11:18:551311ブラウズ
この記事は、Css での width:auto の使い方を深く理解するための関連情報を主に紹介しています。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。
はじめに
私の前回の記事を読んだ人は、私がモグラ塚を大騒ぎしていると思うかもしれません。CSS2 の何が良いのですか?次に、書籍「CSS World」を参照して、具体的なポイントとコードへの影響を全員で確認して理解します。
まず、幅のデフォルト値は auto であるため、幅を自動的に制御するコードを手動で記述する必要がないことを知っておく必要があります。
4 つの一般的な幅の表現
利用可能なスペースを最大限に活用する
デフォルトのブロック要素は親要素の幅の 100% であることは誰もが知っていますが、多くの人はブロックに追加の幅 100 を書き込みます。要素 %。
縮小とラップ
一般的なものは、フローティング、インラインブロック要素、および絶対配置です。このプロパティをカプセル化と呼びます。
最小値まで縮小
これは、表のレイアウトが自動に設定されている表でよく発生し、表のセルの幅と高さを制御しない場合、各列が収まらない場合、テキストが切り詰められます。ただし、携帯電話番号、英単語、数字などは分割できないため、一部の列がテキストのみとなり、各単語が min-content と呼ばれる新しい行に表示されます。
コンテナの幅を超えています
次の 2 つの状況が発生しない限り、一般的な要素はコンテナを越えて表示されません。特に最初の状況は、ジュニア フロントエンドの開発でよく遭遇する問題です。
コンテンツが英語または数字で表示される場合、行の折り返しなしで表示されます。
スタイルwhite-space:nowrapが設定されており、行の折り返しはありません。
上記の2つの問題については、それぞれ以下の修正を行うことができます。
word-break:break-all
white-space:normal
その他のプロパティ
外部サイズと流体プロパティ
通常の流れ幅
ブロック要素には流体プロパティがありますdefault 、親要素の幅を継承し、親要素の幅を超えることはありません。ただし、まだ次のようなコードを書く人もいます:
a{
display:block;
width:100%;
}または、このようなコードでは、ナビゲーション内のラベルの間隔幅などを設定します。実際には、ラベルがブロックレベルになった後、それが行われます。幅は計算に応じて自動的に取得されます。
.nav{
width:240px}
.nav-a{
display:block;
width:200px;
margin:0 10px;
padding:9px 10px ;}フォーマットされた幅
フォーマットされた幅は、絶対位置決めと固定位置を含む絶対位置決めモデルを指しますが、この 2 つの基準点は異なります。デフォルトでは、その属性は包括的であり、ボックスの幅はコンテンツの幅によって決まりますが、(非置換要素) left/right が同時に設定されている場合、その幅は、positioning 属性が指定されている最も近い祖先要素を基準にして計算されます。静的ではありません。その幅は親要素の幅 (left-right) になりますが、他のプロパティは変更されません。これは、私が共有した実践的なCSS技術の可変幅と実線幅を組み合わせたレイアウトなど、実際のレイアウトで非常に役に立ちます。
.par{
width:1000px;
position:relative;
}
//子元素宽度为700px
.son{
position:absolute;
left:100px;
right:200px;}内部サイズと流体プロパティ
インクルージョン
インクルージョンとは、要素が非ブロック要素の場合、その幅はコンテンツによって決定され、必要に応じて拡張することのみを担当することを意味します。そして外側はブロック要素である必要があるため、コンテナのプロパティを超えません。
実際の効果は、スクリプトを使用せずに水平方向に中央に配置できるテキストが減り、左側に表示されるテキストが増えます。
.container{
text-align:center;
}
.content{
display:inline-block;
text-align:left;
}推奨される最小幅
この単純な理解は、要素の実際の幅はコンテンツの最小単位に依存し、この優先順位は width:0 よりも高いということです。たとえば、幅を 0 に設定しても、コンテンツに漢字が含まれている場合は、その文字のサイズが表示され、それが単語の場合は、単語のサイズが表示されます。
この実用的な用途では、凹凸形状などのさまざまな単純なグラフィックを作成し、コンテンツを白に設定できます。
.ao{
width:0;
display:inline-block;
}
.ao:before{
color:#fff;
content:'love你love';
outline:2px solid #000;
}最大幅
最大幅は、通常、テキストを制限する場合やコンテンツが多い場合に使用します。このような実際のシナリオはあまりありません。
ここでは 2 つのスクロール効果のみを拡張します。1 つはネイティブ ページまたは dom スクロールで、もう 1 つは iscroll のように内部要素とコンテナーの位置関係を設定して表示され、より効果的です。
関連する推奨事項;
HTML5で読み込み後に再生を開始する属性autoplayを設定または返す
Laravelでのautoloadメソッドの使用方法の詳細な説明
以上がCSS は width:auto の使用例の共有について深く理解しています。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。