CSSスタイルのプレゼンテーション（C）

様々なスタイル属性

• 、ブラウザのデフォルト値を持つbodyタグのパディングをUL李と、デフォルトのマージンを持って、次のデフォルトを設定することができますので、マージンのスタイルの内側と外側のデフォルトの要素を削除します。注意してください

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

* {
    margin: 0;
    padding: 0;
}   

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

外から1.ボーダー、パディング、
ボーダー：||ボーダー幅ボーダースタイルのボーダー-色|| border属性
の境界線のスタイルのborder-styleプロパティ（境界線のスタイル）：シングルフレームとしていずれもノーボーダー、デフォルト値、ソリッド破線と実線（最も一般的）は、境界線を破線、点線、二重の実線のように点線の境界線が二重です

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.箱の大きさを計算します

• カートンのサイズの計算：コンテンツの幅+パディング+ボーダー+マージン
• インナーボックスサイズの計算：コンテンツの幅+パディング+ボーダー
• ボックスは、所定の幅/高さや父の幅/高さを継承されていない場合には、パディングは、ボックスのサイズには影響しません
• ボックスサイズ：コンテンツ・ボックス、ボックスのサイズは、幅+パディング+ボーダーの代表であります
• ボックスサイズ：ボーダー・ボックス、ボックスのパディング伸延幅のない代表は、ボックスには、幅の大きさであります

3. フローティング（フォーカス）
なぜ表示：インラインブロック？
表示：インラインブロック、内部変換素子行のブロック、行が、しかし、素子間の間隙に取り扱いが不便に置くことができるので、フローターの間には隙間が存在しません。

標準的なフローフローティングフロート、より標準的なフロー、標準の上に浮いているようにフローは、標準押圧流れます。だから、最初のコンセプトは、フローティング要素が常に最も近い親要素のアライメントを探しているが、利益率の範囲を超えないこと、浮動ブロックを含んで作成します。
浮遊する：最初の子がフローティングその内部ボックス要素場合、他のサブエレメントは、ライン表示を整列させるように浮遊する必要があります。
フローティング：フローティング要素を追加した後、素子は、行ブロック要素内の特性を有することができます。目的は、より多くのブロックレベルの要素が同じ行に表示させることです。

• 1.ボックスを追加浮動要素が浮いている、それは他のフロー条件ボックスの上に浮かびます
• 2.浮動ボックスを追加し、場所を考慮していない、それは標準カセットストリームの元の位置に、浮上します

特記事項：フローを使用した浮動ボックスの親のニーズや規格

特記事項：子供は浮き箱で、箱は高さが、0父親の高さではない場合。それは一定の高さに不都合である場合には、ボックスの拡張を可能にするために自動的に完了するために、浮動によってクリアされます。

/ クリア両方（左右の透明フロート効果である）値、左など、属性を削除（クリアフロート影響を左）、右側（右フローティングクリア影響）することです /

• 1.追加ラベル：浮動ボックスの背後にある空のボックスの<divのスタイル=「クリア：両方;」>を追加するには、</ div>の、欠点：無意味な増加タグの数を、そしてほとんど使用されていません
• 2.親オーバーフロープロパティ・メソッドのオーバーフローを追加：隠された|自動車|スクロールを実現することができ、トリガされますBFC BFCは透明フロートをトリガー
• 3. [フロート擬似要素の後
• 4.強く推奨浮動明確前後のダブルダミー素子を、使用して

/*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是行内元素**/
}