Document flow

Document flow is within the document element 流动direction

Flow direction

内联元素从左往右流, Width is not enough, zigzag, and the elements will be truncated
块元素从上往下流动, Rows and rows

Document flow

Precautions

Inline elements in English words, when the flow is not wide enough, the overall migration of English words will not be interrupted

If you want to interrupt the link above, use css property

/*想打断的内联元素*/{
    word-break: break-all;
    display: inline-block;
}

From the document flow

Like similar suspension on the page
position: fixed;
position: absolute;

About Fonts

Generally, the page default font size 16px
Fonts are generally divided into 上部, 中部, 下部
text (characters, Western) were compared to baseline (lower part) aligned
Different fonts have proposed line of high self-imposed, can self- line-heightprovision

Text alignment, line height schematic

CSS commonly used commands

Font-related

Set the font style

/*各类选择器*/{
    font-family: kai;
}

Bold font

/*各类选择器*/{
    font-weight: bold;
}

Font UPPERCASE

/*各类选择器*/{
    text-transform: uppercase;
}

Related Background

BACKGROUND position with adaptive

/*各类选择器*/{
    background-position: center center;/*水平方向*/ /*垂直方向*/
    background-size: cover;/*背景自适应*/
    background: url(背景图片地址);
}

Inside and outside the set margins`padding` `margin`

/*各类选择器*/{
    padding: 10px 20px 30px 40px;/*上 右 下 左*/
    margin: 10px 20px 30px 40px;/*上 右 下 左*/
}

/*各类选择器*/{
    padding: 10px 30px;/*上 右 下 左*/
    margin: 10px 30px;/*上下 左右*/
}

marginEven tune into a negative value, shifted to the opposite direction chant
Inline elements 左右 paddinghelpful, 上下 paddingdoes not affect the page layout, the same position. You can set CSS: display: line-block;, the upper and lower left and right padding takes effect.

`position`Locate

(For details, please read: HTTPS: //developer.mozilla.org ... ) (1 ㅂ • •) و✧

/*各类选择器*/{
    position: relative/absolute/fixed/sticky/static;
}

fixed       元素的宽度会自动缩成最小、最紧凑的宽度
            可以使用 width height 调整大小
            可以使用 top left right bottom 调整位置
            可以使用 left: 0; right: 0; 来使元素充满<body>

absolute    可以设置子元素 position: absolute;
                   父元素position: elative;
            子元素相对父元素绝对定位

Sub-element centered

Horizontal Centers

/*想要子元素居中的元素*/{
    text-align: center;
}

Vertical center

/*使用vertical-align要求父元素必须有行高，如果没有的话，一定要手动添加：line-height: ;*/

/*想要居中的子元素*/{
    verticle-align: center;
}

The inner joint element centered in the page: a block element wrapped with it, and then add CSS:
```
<div>
    <span></span>
</div>
  
div{
    text-align: center;
}
```

Set child element height height: 100%;, plus the parent element上下等量的 padding

<div>
    <span></span>
</div>
  
div{
    padding: 10px;
}

span{
    height: 100%;
}

The flex layout: about centered, vertically. Add the following elements in the parent css:

/*某父元素*/{
    display:flex;
    align-items:center;
    justify-content:center;
}

frame

Rounded border

/*想要圆角边框的元素*/{
    border: 1px solid red;    //设置元素边框
    border-radius: 30px;      //设置边框圆角30px
}

icon

You can visit the website: http://www.iconfont.cn/ , add the site generated <svg>to html in

To <svg>add css property to change the style

svg{
    width:
    height:
    fill:    /*颜色*/
    margin:
    padding:
}

other

Hover

/*各类选择器*/:hover{
    color: red;
}

Fathers inherit property
并不是所有属性都能继承的
```
/*各类选择器*/{
    color: inherit;
}
```

css annoying chatters

<a>Remove the label lists underscore
```
a{
    text-decoration: none;
}
```
Inline elements can not be developed height ( height) and width ( width)
to transform into a block-level element ( display: block;) or inline block element ( display: inline-block;)
Write your own attributes priority than the default browser and high
Line-height line-heightcan determine the height of inline elements
html programming two lines of the intermediate code 空格and 回车will become a空格
Also different color fonts have different colors
As is centrally disposed vertical padding, only the block element into effect, inline element is not valid
High Line line-heightand the high word font-sizeof the difference will be automatically filled from top to bottom in the font

border and floating

动画操作（如 :hover）border后，元素会左右浮动，
这是由于一开始没有 border，操作后多出来了，
将元素一开始就添加【透明 border】，坑先站好啊，之后动画 border 颜色的显现

Box Model inline elements than fathers

一些默认 display: inline; 的元素被包起来的时候，它的 padding 和margin 有时会超过父辈
需要设定 display: block; 解决

/*内联元素*/{
    display: block;
}

div height by the sum of the height of the internal document flow element determines
the height of wayward inline, forced accurate measurement of little significance

Width and height setting element

weight       锁定宽度，浏览器窗口变小，用滚动条的方式
max-weight   设定最大宽度，浏览器窗口变小，自适应窗口，推荐
当设定了宽度或是最大宽度，使用 margin-left:auto; margin-right:auto; 使元素居中

Inline elements does not accept the set width and height, setting display: inline-block;
but supports padding, margincan be used instead
In order to prevent inconsistent results on different computers, it may be cssre-expressed in the size of the next element, to confirm

& Word document flow & CSS commonly used commands

Document flow

Flow direction

Precautions

From the document flow

About Fonts

CSS commonly used commands

Font-related

Related Background

Inside and outside the set margins`padding` `margin`

`position`Locate

Sub-element centered

frame

icon

other

css annoying chatters

Guess you like

& Word document flow & CSS commonly used commands

Document flow

Flow direction

Precautions

From the document flow

About Fonts

CSS commonly used commands

Font-related

Related Background

Inside and outside the set marginspadding margin

positionLocate

Sub-element centered

frame

icon

other

css annoying chatters

Guess you like

Inside and outside the set margins`padding` `margin`

`position`Locate