バックエンド プログラマーがフロントエンド (CSS) について語る レッスン 2: CSS_html/css_WEB-ITnose の 5 つのソース

0. ブラウザのデフォルト スタイル

HTML 要素にスタイルを設定しない場合、ブラウザに表示される内容 (例: 要素は太字で表示され、

要素は縦棒で表示されます) margin 要素と

要素のフォント サイズは

要素のフォント サイズの 2 倍になっています。これはなぜですか?

ブラウザにはデフォルトのスタイルが付属しているため、html要素にスタイルが設定されていない場合、ブラウザはデフォルトのスタイルに従って表示します。ただし、ブラウザのデフォルト スタイルは最下位レベルです。スタイルが別の場所に設定されると、ブラウザのデフォルト スタイルは上書きされます。

ブラウザごとにデフォルトのスタイルが異なる場合があることに注意してください。たとえば、CSS を記述するときは、最初に * {margin:0; padding:0;} を設定します。これはなぜでしょうか。ブラウザの互換性の問題が原因です。単純に、すべて 0 に設定すると、すべてのブラウザが統一されます。

以下に、デフォルト スタイルのコードを掲載します。

html, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6, noframes,ol, p, ul, center,dir, hr, menu, pre { display: block }/*以上列表元素默认状态下一块状显示，未显示的将以内联元素显示，该列表针对HTML4版本，部分元素在XHTML1中将废弃*/

li { display: list-item }/*默认以列表显示*/

head { display: none }/*默认不显示*/

table { display: table }/*默认为表格显示*/

tr { display: table-row }/*默认为表格行显示*/

thead { display: table-header-group }/*默认为表格头部分组显示*/

tbody { display: table-row-group }/*默认为表格行分组显示*/

tfoot { display: table-footer-group }/*默认为表格底部分组显示*/

col { display: table-column }/*默认为表格列显示*/

colgroup { display: table-column-group }/*默认为表格列分组显示*/

td, th { display: table-cell; }/*默认为单元格显示*/

caption { display: table-caption }/*默认为表格标题显示*/

th { font-weight: bolder; text-align: center }/*默认为表格标题显示，呈现加粗居中状态*/

caption { text-align: center }/*默认为表格标题显示，呈现居中状态*/

body { margin: 8px; line-height: 1.12 }

h1 { font-size: 2em; margin: .67em 0 }

h2 { font-size: 1.5em; margin: .75em 0 }

ええ、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE

h3 { font-size: 1.17em; margin: .83em 0 }

h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu { margin: 1.12em 0 }

h5 { font-size: .83em; margin: 1.5em 0 }

h6 { font-size: .75em; margin: 1.67em 0 }

h1, h2, h3, h4, h5, h6, b,strong { font-weight: bolder }

blockquote { margin-left: 40px; margin-right: 40px }

i, cite, em,var, address { font-style: italic }

pre, tt, code, kbd, samp { font-family: monospace }

pre { white-space: pre }

button, textarea, input, object, select { display:inline-block; }

big { font-size: 1.17em }

small, sub, sup { font-size: .83em }

sub { vertical-align: sub }/*定义sub元素默认为下标显示*/

sup { vertical-align: super }/*定义sub元素默认为上标显示*/

table { border-spacing: 2px; }

thead, tbody, tfoot { vertical-align: middle }/*定义表头、主体表、表脚元素默认为垂直对齐*/

td, th { vertical-align: inherit }/*定义单元格、列标题默认为垂直对齐默认为继承*/

s, strike, del { text-decoration: line-through }/*定义这些元素默认为删除线显示*/

hr { border: 1px inset }/*定义分割线默认为1px宽的3D凹边效果*/

ol, ul, dir, menu, dd { margin-left: 40px }

ol { list-style-type: decimal }

(1)、表示: ブロック

ol ul, ul ol, ul ul, ol ol { margin-top: 0; margin-bottom: 0 }

なぜデフォルトで p、h1、ul、div がここで定義するブロック表示です。では、div は本質的にブロックであると言うのはやめてください?? この文は、次のように置き換えるべきです。ブラウザのデフォルトのスタイルでは、div はブロックであると規定されています。ブロック要素であるかインライン要素であるかは、ブラウザのカーネルではなく、デフォルトのスタイルによって決まります。

ブロックに設定されていない要素は、デフォルトでインライン要素になります。

(2)、display: list-item

u, ins { text-decoration: underline }

display を使用する場合、一般的に使用される値は通常: inline/block/inline-block であり、list-item は使用されません。では、ここでの list-item は具体的に何をするのでしょうか?自分で試してみるのもいいかもしれません:

margin-left を追加すると、ul-li の効果が現れるのがわかりましたか?

では、なぜ ul-li はデフォルトでそのように表示されるのでしょうか? ??List-item が「犯人」です。

(3), dipplay:table

br:before { content: "A" }/*定义换行元素的伪对象内容样式*/

例をあげてください:

上の図では、最初の div はデフォルトでブロックになっており、その幅はページ全体を占めています。 2 番目の div には display:table が設定されており、その幅はコンテンツによって異なります。これが「カプセル化」です。

(4)、display: table-cell

:before, :after { white-space: pre-line }/*定义伪对象空格字符的默认样式*/

例:

初めて HTML を学んだとき、複数列のレイアウトに div + css を使用する方法がわからなかったのを覚えています。複数列レイアウトに使用されるテーブル。これで、table-cell を使用して table のような複数列のレイアウトを作成できるようになり、その効果は table の場合とまったく同じになります。

(5)、display:inline-block

center { text-align: center }

親コンテナを中心に配置でき、高さ、幅、マージンを設定でき、table や div のように直線を占有しない...? ?これは inline-block です。 (詳細については、このスタイル要素の設定のパフォーマンスを参照してください。)

1. インライン スタイル

で記述されたスタイル コード。

2. 内部スタイル