ホームページ >ウェブフロントエンド >CSSチュートリアル >Webフロントエンドの常識を学ぶための詳細な紹介

Webフロントエンドの常識を学ぶための詳細な紹介

高洛峰
高洛峰オリジナル
2017-03-22 15:19:261510ブラウズ

1. 一般的なブロックレベル要素 インライン要素

p - 最も一般的に使用されるブロックレベル要素

dl - dt-dd で使用されるブロックレベル要素

form - インタラクティブフォーム

h1 -h6-largeタイトル

hr - 水平区切り線

ol - 順序付きリスト

p - 段落

ul - 順序なしリスト

fieldset - フォームフィールドセット

Colgroup-col - フォーム列グループ化要素

table-tr- td テーブル行 - セル

事前にフォーマットされたテキスト

a - ハイパーリンク (アンカー)

br - 改行

i - イタリック体

em - 強調

img - 画像

input - 入力ボックス

ラベル - フォームラベル

スパン - 一般的に使用されるインラインコンテナ、テキスト内のブロックを定義

Strong - 太字の強調

sub - 下付き文字

sup - 上付き文字

textarea - 複数行のテキスト入力ボックス

u - 下線

選択 - プロジェクト選択

2. 3つのテキストを実現するためのいくつかの条件

text-overflow属性は、テキストがオーバーフローしたときに省略マークを表示するかどうかだけであり、効果を達成するための他のスタイルの属性定義はありません。オーバーフロー時に楕円を生成するには、次のように定義する必要があります:

1. コンテナの幅: width: value; (px、%、両方を使用できます)

2. テキストを 1 行で表示するように強制します: white - space:nowrap;

3. オーバーフロー コンテンツは非表示になります: overflow: hidden;

4. オーバーフロー テキストには省略記号が表示されます: text-overflow: ellipsis;

注: オーバーフローを設定するには 1 行のテキストである必要があります。この記事の! ! !

IE6+; chrome1.0+; safari3.1+ (Firefox、Opera はまだサポートされていません)

3. コンテナ内で要素を垂直方向に中央揃えに設定するには、デフォルトを変更する必要があります。

display

属性値は inline-block; で、兄弟要素 (ruler) が追加されます (兄弟要素 [ruler] のスタイルは

vertical-align

:middle;width:0;height に設定されます) :100%;表示:インライン -ブロック;)。 3 つの条件:

1:

text-align

:center をコンテナー (親要素) に追加する必要があります。 2: 現在の要素をインライン ブロック要素に変換する必要があります (display:inline-block;)。そして、現在の要素にvertical-align:middleを追加します;

3: 現在の要素の後に同じレベルの要素spanを追加し(改行なしで)、vertical-align:middle;width:0;height:100を実行します。 %; スパン上; display:inline-block

置換要素と非置換要素

a) 置換要素: ブラウザは、タグと属性に基づいて要素の具体的な表示コンテンツを決定します。 たとえば、ブラウザは画像情報を読み取り、 タグの src 属性の値に基づいて表示しますが、(x)html コードを表示すると、画像の実際の内容は表示されません。 タグのタイプ。入力ボックスやラジオ ボタンなどを表示するかどうかを決定します。 HTML の (x)