The Core of CSS_html/css_WEB-ITnose

Prerequisite:

Block-level elements: The div tag is a block-level element, which is represented as a full line of
on the web page. Inline elements: The span tag is an inline element, and its length is only related to the length of the characters

Small example:

<span style="font-size:18px;"><div  class="menu">阿猫</div>    <span class ="menu">阿狗</span>    <span class="menu">阿兔</span><span class="title">f阿牛</span></span>

Effect:

Method of converting inline elements to block-level elements, for example: converting the beauty of span tags into methods that also span an entire line

<span style="font-size:18px;"><span class ="menu ttt " >阿狗</span></span>

Small example:

<span style="font-size:18px;">.ttt{    display:block;}</span>

Effect:

Standard flow Concept: The arrangement of labels is arranged in the order of writing when displayed. For example, the display order of Cat and Dog in the above example and the

priority of the style page are related to the standard flow.

Box model

The attribute names we often hear in web design: content, padding, border, margin, CSS box mode all have these attributes. We can understand these attributes by transferring them to the boxes (boxes) in our daily life. The boxes we see in our daily life are boxes that can hold things and also have these attributes, so it is called the box pattern.

The box model is divided into outer margins: border (top, bottom, left, right), inner margins: padding (top, bottom, left, right), content: content (width, height) , Picture frame: margin (top, bottom, left, right)

Each label is equivalent to a box. Set the inner and outer margins of each label through the box model.

Small example (1):

<span style="font-size:18px;">.menu{                              /*栏目样式*/    color:#00f;                             /*文字颜色*/    background-color :#ffd800;    border-width:5px;    border-color :#0ff;    border-style:solid;}</span>

Effect:

Small example (2)

<span style="font-size:18px;">内边距属性写法  /*padding-top: 5px;    padding-left : 5px;    padding-bottom : 5px;*/    /*padding: 5px;*/                      /*如果据上下左右的边距一样的话可以这样写*    padding:5px  6px  7px  8px;     /*默认的是逆时针上右下左的顺序*/      </span>

The outer margin and inner margin are written in the same way (note that when the upper and lower columns have margins, both Take the maximum value of the distance between them)

Effect:

Note: Inline styles are for margins, length, etc., that is, box models Not responsive.

Float A floating box can be moved left or right until its outer edge touches the border of the containing box or another floating box. Since the box model is for block-level

elements, block-level elements can be lined up by floating. Out of standard flow.

Small example:

<span style="font-size:18px;">float:left ;         /*盒子向左浮动*/</span>

Effect:

<span style="font-size:18px;">clear:left;         /*清除浮动*/</span>

I would like to recommend a more detailed website introduction to floating: http://www.w3school.com.cn/css/css_positioning_floating.asp

Positioning relative, relative positioning. Locate a certain block-level element without deviating from the standard flow. relative to the original position. Therefore, the position of Ah Mao is still relative to the original position of Ah Dog.

<span style="font-size:18px;">position:relative;   /*相对定位*/    top:20PX;</span>

absolute, Absolute positioning. Relative to the outer box outside the box, it is separated from the standard flow.

The highlight: The box model is a great model. By combining it with real life, we can master the format of web design more thoroughly and simply.