CSS style presentation (c)

Various style attributes

• Note: body tag padding with a default value in the browser, ul li and have default margins, so the following can set the default, remove the default elements inside and outside the margins style

body, ul, li {
    margin: 0;
    padding: 0;
}  

* {
    margin: 0;
    padding: 0;
}   

ul {
    list-style: none; /**取消列表自带的小点**/
}

1. border, padding, from the outer
border attribute: border: || border-width border-style border-Color ||
border style border-style property (Border Style): none no border, the default value, as a single frame Solid the solid line (the most common), dashed border as dashed, dotted border as a dotted line, double solid line is a double

div { 
    border-width: 3px;
    border-color: red;
    border-style: double;
    border-top-color: red;
    border-top-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: red;
    border-bottom-style: solid;
    border-top: 1px solid red; /**上边框宽度为1 单实线 红色**/
    border-bottom: 1px solid red;
}

table {
    border: 1px solid red;
    border-collapse: collapse; /**表示边框合并在一起，合并相邻边框**/
}

 /**cellpadding 单元格的padding为0 ，单元格的间隔为0**/
<table cellpadding="0" cellspacing="0"></table>

p {
    
    border-radius: 10px; /**圆角度*/
    border-radius: 50%; /**百分比圆角度*/
    border-radius: 10px 40px; /**对角线设置圆角度：左上角 和 右下角 是10px, 右上角和左下角是40px, */
    border-radius: 10px 40px 80px; /**左上角 10px, 右上角和左下角是40px,  右下角 是 80px*/
    border-radius: 10px 40px 80px 100px; /**左上角 10px, 右上角是40px, ， 右下角是80px 左下角是100；顺时针*/

    padding: 10px; /**内边距,表示上下左右内边距*/
    padding-left: 10px; /**左内边距，还有padding-right padding-top padding-bottom*/
    padding: 20px 30px; /**上下10px 左右30px*/
    padding: 10px 30px 50px; /**上下10px 左右30px 下50px*/
    padding: 10px 30px 50px 70; /**上 右 下 左*/

    margin-top: 100px; /**上外边距*/ 
    margin: 10px 20px 30px 40px; /**外边距：上 右 下 左*/
    margin: 30px; /**上右下左*/

    margin: 30px auto; /** 盒子水平居中，上下30px 左右auto(自动)  这样可以让块级带有宽度的盒子水平居中对齐*/
}

/* 注意！：我们尽量不要给行内元素指定上下的内外边距，左右可以指定*/
/* 注意！：外边距合并：垂直的块级盒子，以最大的为准*/

/*解除嵌套块元素垂直外边距的合并 塌陷的问题
    1.给border
    2.给padding
    3.overflow: hidden;
*/
.father {
    margin-top: 30px;
    margin-bottom: 200px;
    width: 300px;
    height: 300px;
    padding: 20px;
    /*border: 1px solid red; */
    /*padding: 1px;*/
    overflow: hidden;

    /*css3新增的box-sizing属性*/
    /*box-sizing: content-box;*/ /**盒子大小的width+padding+border**/
    box-sizing: border-box; /** padding不会撑开盒子宽度, 盒子大小就是width**/

    /*盒子阴影*/
    box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, 0.4);
    /*box-shadow: 水平位置 垂直位置 模糊距离 阴影尺寸(影子大小) 阴影颜色 内/外阴影(默认外阴影，内阴影是inset)*/
}

.son {
    width: 200px;
    height: 200px;
    background-color: pink;
    margin-top: 40px;
}

2. Calculate the size of the box

• Carton size calculation: content width + padding + border + margin
• Inner box size calculation: content width + padding + border
• If the box is not a given width / height or inherited his father's width / height, padding will not affect the size of the box
• box-sizing: content-box; box size is representative of width + padding + border
• box-sizing: border-box; not representative of padding distraction width of the box, the box is the size of width

3. floating (focus)
Why not display: inline-block?
display: inline-block; internal conversion element row block, row can be put on a gap between the elements, however, inconvenient to handle, so there is no gap between the floater.

Standard flow from the floating float, where the standard flow, the flow to float above the standard, the standard will flow pressing. So first create concept includes floating block, that floating elements are always looking for the nearest parent element alignment, but will not exceed the range of margins.
Floating: If a box inside which the first child floating element, other sub-elements are required to float so as to align the line display.
Floating: After adding floating element, the element may have properties within the row block elements. The purpose is to make more block-level elements are displayed on the same line.

• 1. Add box is floating elements float, it floats on top of the other flow criteria box
• 2. Add the floating box, does not account for the location, it floats up, to its original position of the standard cassette stream

Special Note: floating boxes parent needs and standards with the use of flow

Special Note: If the child is a floating box, and the box is not height, the height of 0 father. When it is inconvenient to a fixed height, in order to allow the expansion of the box is automatically cleared by floating to complete.

/ Clear is to remove attributes, including left (left clear float impact), right (clear influence floating right), both (right and left are clear float Effect) value /

• 1. Additional labeling: behind the floating box to add an empty box <div style = "clear: both;"> </ div>, drawback: meaningless increase the number of tags, and is seldom used
• 2. Add the parent overflow property methods overflow: hidden | auto | scroll can be achieved, will trigger BFC BFC triggers clear float
• 3. Clear float after pseudo-element
• 4. Using double dummy elements before and after the floating clear, strongly recommended

/*3.使用after伪元素清除浮动*/
.clearfix:after {
    content: "."; /**内容是小点 ，尽量加,不要空，防止旧版本浏览器有空隙**/
    display: block;
    height: 0; /*高度为0*/
    visibility: hidden; /*隐藏小点*/
    clear: both; /**清除浮动both**/

}

.clearfix { /**ie6.7浏览器清除浮动的方式**/
    *zoom: 1; /**  *代表ie6、7能识别的特殊符号，zoom就是ie6、7 清除浮动的方法，zoom会触发 hasLayout去清除浮动*/
}

 /*4.双伪元素清除浮动，强烈推荐*/
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clear:after {
    clear: both;
}

.clearfix { 
    *zoom: 1;
}

span {
    background-color: purple;
    height: 100px;
    float: left; /**块级元素和行内元素添加浮动后具有行内块特性，span是行内元素**/
}