CSS の詳細レビュー メモ -- 基本的な視覚的な書式設定_html/css_WEB-ITnose

CSS には、このようなオープンで強力なモデルが含まれており、さまざまな属性を組み合わせて適用する方法は無数にあり、得られる効果は無数にあります。

Basic Box

css は、各要素が要素ボックスと呼ばれる 1 つ以上の長方形のボックスを生成することを前提としています。各要素の中央にはコンテンツ領域があり、オプションの内側と外側のマージンと境界線で囲まれています (0 に設定できるため、オプションとみなされます)。

さまざまなタイプの要素をフォーマットする場合には違いがあります。ブロックレベル要素はインライン要素とは異なる方法で扱われ、浮動要素と位置決め要素もパフォーマンスが異なります。

包含ブロック

各要素は包含ブロックの配置に相当し、包含ブロックは要素の「レイアウト コンテキスト」であると言えます。CSS2.1 は包含ブロックを決定するための一連のルールを定義します。要素のブロック。

一般名詞:

通常の流れ、テキストは左から右、上から下に表示されます。要素を通常のフローから外す唯一の方法は、要素を浮動要素または配置要素にすることです。

非置換要素

、要素の内容が文書に含まれる場合、それは非置換要素と呼ばれます。

置換要素

は、他のコンテンツのプレースホルダーとして使用される要素を指します。置換される要素の典型的な例は img 要素です。これは、ドキュメント ストリームの img 要素自体の位置に挿入される画像ファイルを指すだけです。 ブロックレベル要素

、これは段落、タイトル、div などの要素を指します。通常のフローのこの要素はボックスの前後に「改行」を生成するため、通常のフローのブロックレベルの要素は垂直に配置されます。 display:block を宣言すると、要素はブロックレベルのボックスを生成できます。

インライン要素、

strong や Span などの要素を指します。この要素はその前後に「行区切り文字」を生成しません。これらはブロックレベル要素の子孫です。 display:inline を宣言することで、この要素は viige インライン ボックスを生成できます。

ルート要素 は、HTML ドキュメントの先頭にある要素で、html 要素です。

ブロックレベルの要素 - 水平方向の書式設定

width は、表示される要素ボックスの幅を参照しません。要素に対して内側のスクリーン、ボーダー、および幅が宣言されている場合、指定される幅は左からです。外側の境界線から右の外側の境界線までの距離。 box-sizing: content-box を設定することで、IE6 の奇妙な現象をシミュレートできます。つまり、要素の幅を、width+padding+border ではなく、実際に設定された幅の幅にします。

autoを使用

<div class ="container1"><p>A paragraph</p></div>

.container1{width: 400px;border: 1px solid #000;} .container1 p{<strong>margin-left:auto</strong>;margin-right: 100px;width: 100px;}

padding-left (padding-right)、margin-left (margin-rignt)、width、border-left-right (border)の7つの属性の合計が-right) 外側のコンテナの幅 (400 ピクセル) と等しくなければなりません。左マージンが自動に設定されている場合、左マージンの幅は 200 ピクセルになります。つまり、auto は、要素の合計幅がその要素を含むブロックの幅と等しくなるように、必要な距離を「埋める」ために使用されます。

すごいです

効果は次のとおりです:

したがって、margin-left と margin-right の両方を auto に設定すると:

両方の margin を同じ長さに設定するのは、要素を中央に配置する正しい方法です。これは、text-align の使用とは異なります (text-align はブロック レベル要素のインライン コンテンツにのみ適用されるため、要素の text-align を center に設定しても要素は中央揃えになりません)。

如果設置幅とマリン左都は自動、那么マージン左将会は0に設定されます:

.container1 p{background: #ccc;margin-right: auto;margin-left: auto;width: 100px; }

設置外周距離、

.container1 p{ background: #ccc;margin-right: 100px; margin-left: auto;width: auto;    }

width 400px-100pxの範囲(+左マージン)+100ピクセル。 marin-left は負の値であるため、コンテンツの実際の幅を追加する必要があります (負の margin-left 値)

ブロックレベル要素 - 垂直書式設定

要素のデフォルトの高さは、要素の高さによって決まります。コンテンツ。高さはコンテンツの幅にも影響されます。段落が狭いほど、段落内のすべてのインライン コンテンツを収容するために高さが高くなります。 ノーマル フローのブロック要素の margin-top または margin-bottom が auto に設定されている場合、自動的に 0 に計算されます。残念ながら、値が 0 の場合、ノーマル フロー要素をそのブロックを含むブロックに簡単に配置することはできません。中心に中心。つまり、要素の上下のマージンが auto に設定されている場合です。実際、これらは 0 にリセットされ、要素にはマージンがなくなります。

垂直方向のマージンの結合

垂直方向の書式設定のもう 1 つの重要な側面は、垂直方向に隣接するマージンの結合です。この結合はマージンにのみ適用されます。要素にパディングとボーダーがある場合、それらは決してマージされません。 たとえば、リスト項目が互いに隣接している順序なしリスト。

すごいです

各リスト項目には、上マージンが 10 ピクセル、下マージンが 15 ピクセルあります。ただし、このリストが表示されると、隣接するリスト項目間の距離は 25 ピクセルではなく 15 ピクセルになります。

これは、隣接するマージンが垂直軸に沿ってマージされるために発生します。言い換えれば、2 つのマージンのうち小さい方が大きい方とマージされます。

如果相邻有多个外边距，也会出现合并，如列表的最后。对前面的例子进行补充，假设应用一下规则：

ul{margin-bottom:15px} li{margn-top:10px;margin-bottom:20px;} h1{margin-top:28px;}

最后列表合并外边距为28px.

如果其中一个外边距为负数，那么实际外边距就是最大的外边距减去负数外边距的绝对值。

 

行内元素的行布局

对于行内元素来说，这没有块级元素那么简单和直接，块级元素知识生成框，通常不允许其他内容与这些框并存。

文本使用text-align进行两端对其时，word-spacing的值可能被覆盖（如果letter-spacing是一个长度值，这个值不能被覆盖）。

基本术语和概念

匿名文本，是指所有未包含在行内元素中的字符串

I'msohappy!

序列中I'm和happy!都是匿名文本。

em框，em框在字体中定义，也成为字符框。实际的字形可能比其em框更高或更矮。

内容区，在非替换元素中，内容区可能有两种。内容区可以是元素中个字符的em框串在一起构成的框，也可以是由元素中字符字形描述的框。

行间距，是font-size值和line-height值只差，这个差实际上要分为两半，分别应用到内容区的顶部和底部。为内容区增加的这两部分分别称为版兼具。行内距只应用于非替换元素。

行内框，这个框通过向内容区增加行间距来描述。对于非替换元素，袁术行内框的高度刚好等于line-height的值。对于替换元素，元素行内框的高度则恰好等于内容区的高度，因为行间距不应用到替换元素。

行框，这个包含该行中出现的行内框的最高点和最低点的最小框。换句话说，行框的上边界要位于最高行内框的上边界，而行框的底边要放在最低行内框的下边界。

1）内容区类似于一个块级元素的内容框。

2）行内元素的背景应用于内容区及所有内边距。

3）行内元素的边框要包围内容区及所有内边距和边框。非替换元素的内边距、边框和外边距对行内元素或其生成的框没有垂直效果；也就是所它们不会影响元素行内框的高度。

4）替换元素的外边距和边框确实会影响该元素行内框的高度，相应地，也可能影响包含该元素的边框高度。

 

行内非替换元素

假设有一下标记：

<p style="font-size:12px;line-height:12px;">    This is text<em>some of which emphasized</em>,plus other text<br>which id <strong style ="font-size:24px;">strongly emphasized</strong>and which is<br>larger than the surrounding text.</p>

效果如下：

大多数文本的font-size都是12px，只有一个行内非替换元素中的文本大小是24px。不过，所有文本的line-height都是12px，因为line-heght是一个继承属性。因此strong元素的line-height也是12px。 

由于行内框的顶端在元素内容区内部，所以元素的内容落在了行框的外边，实际上与其他行框发生了重叠。其结果是，文本行看上去很不规则。

<p style="font-size:12px;line-height:14px;">    This is text<em>some of which emphasized</em>,plus other text<br>which id <strong style ="font-size:24px;verical-align:4px">strongly emphasized</strong>and which is<br>larger than the surrounding text.</p>

把元素上升4像素，折回同时提升其内容区和行内框。由于strong元素的行内框顶端已经是行中的最高点，对垂直对其的这个修改会把整个行框的顶端也向上移4像素。效果如图：

垂直对齐影响行框高度。

如果line-height不使用单位，而是用值小于1的数值，那么line-height将会相对于元素本省font-size设置行高，而不是相对于父元素设置。