css details review notes--basic visual formatting_html/css_WEB-ITnose

CSS contains such an open and powerful model. For such a model, there are countless ways to combine and apply various attributes, and the effects that can be obtained are countless.

Basic box

CSS assumes that each element will generate one or more rectangular boxes, which are called element boxes. There is a content area in the center of each element, which is surrounded by optional inner and outer margins and borders (it is considered optional because it can be set to 0).

There are differences when formatting different types of elements. Block-level elements are treated differently from inline elements, and floating elements and positioned elements also have different performances.

Containing block

Each element is equivalent to the placement of a containing block; it can be said that the containing block is the "layout context" of an element, as defined by CSS2.1 A series of rules are used to determine the containing block of elements.

Common nouns:

Normal flow, Text is displayed from left to right, top to bottom. The only way to get an element out of the normal flow is to make it a floated or positioned element.

Non-replacement element , if the content of the element is included in the document, it is called a non-replacement element.

Replacement element refers to an element used as a placeholder for other content. A classic example of a replaced element is the img element. It simply points to an image file that will be inserted into the document stream at the location of the img element itself.

Block-level elements , which refers to elements such as paragraphs, headings, or divs. This element in normal flow will generate "line breaks" before and after its box, so block-level elements in normal flow will be placed vertically. By declaring display:block, an element can generate a block-level box.

Inline elements, This refers to elements such as strong or span. This element does not generate "line separators" before or after it, they are descendants of block-level elements. By declaring display:inline, the element can generate a vyige inline box.

The root element is the element at the top of the document flow. In an HTML document, this is the element html.

Block-level elements - horizontal formatting

width does not refer to the width of the visible element box. If an internal script is declared for an element, Border and width, the width they specify is the distance from the left outer border to the right outer border. You can simulate the weird phenomenon of IE6 by setting box-sizing: content-box, that is, making the width of the element the actual set width width instead of the width padding border.

Use 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;}

Assume padding-left(padding-right), margin- The sum of the seven attributes of left (margin-rignt), width, and border-left-right (border-right) must be equal to the width of the outer container, which is 400px. If the left margin is set to auto, the width of the left margin will be 200px. That is, auto is used to "fill" the required distance so that the total width of the element is equal to the width of its containing block.

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

The effect is as follows:

Therefore, if both margin-left and margin-right are set to auto:

Setting both margins to equal lengths is a correct way to center an element, unlike using text-align (text-align only applies to inline content with block-level elements, so Setting the element's text-align to center does not center the element).

If both width and margin-left are set to auto, then margin-left will be set to 0:

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

Settings Negative margin,

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

width value is 400px-100px (margin-left) 100px. Because marin-left is a negative value, the actual width of the content must be added (negative margin-left value)

Block-level elements - vertical formatting

The default height of an element is determined by its content. The height is also affected by the width of the content; the narrower the paragraph, the taller it will be to accommodate all the inline content within it.

If the margin-top or margin-bottom of a block element in normal flow is set to auto, it will automatically calculate to 0. Unfortunately, if the value is 0, you cannot easily move the normal flow element to Centered within its containing block. That is, if the top and bottom margins of an element are set to auto. In fact, they are reset to 0, leaving the element with no margins.

Merging vertical margins

Another important aspect of vertical formatting is the merging of vertically adjacent margins. This coalescing applies only to margins. If the elements have padding and borders, they will never be merged.

For example, an unordered list with adjacent list items.

li{margin-top: 10px;margin-bottom: 15px;}

Each list item has a top margin of 10px and a bottom margin of 15px. However, when displaying this list, the distance between adjacent list items is 15px instead of 25px:

This happens because adjacent margins are raised along the Axis merge. In other words, the smaller of the two margins is merged with the larger one.

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

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设置行高，而不是相对于父元素设置。