边框 css盒子模型 浮动

 1     <style>
 2         div{
 3             border-style: solid;
 4             border-color: red;     边框颜色
 5             border-width: 5px;
 6             width: 200px;
 7             height: 200px;
 8             border: 10px solid chartreuse;      简写方式
 9             border-top-style: solid;
10             border-right-style: solid;
11             border-bottom-style: dashed;
12             border-color: red;
13 
14         }
15     </style>

       border-radius: 50%;

 1         div{
 2             width: 100px;
 3             height: 100px;
 4             border: 1px solid red;
 5             /*display: inline;  !* 将标签设置为内敛标签 *!*/
 6             /*display: inline-block;  !* 将标签设置为同时具备内敛和块级标签的一些特性,比如可以设置高度宽度,但是不独占一行 *!*/
 7             /*display: none;  !* 隐藏标签 ,并且不占用自己之前的空间*!*/
 8 
 9         }
10         span{
11             border: 2px solid blue;
12 
13         }
14 
15         .c1{
16             width: 200px;
17             height: 200px;
18             /*display: inline-block;*/  
19             display: block; /* 将内敛标签设置为块级标签 */
20         }
21         
22      值               意义
23      display:"none"    HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
24      display:"block"    默认占满整个页面宽度，如果设置了指定宽度 也没有用，则会用 margin填充剩下的部分。
25      display:"inline"    按行内元素显示，此时再设置元素的width、height、margin-top、margin-  bottom和float属性都不会有什么影响。
26      display:"inline-block"    使元素同时具有行内元素和块级元素的特点 可以设置宽高且不独占一行 。   
27     
28     
29 隐藏标签
30     visibility: hidden; /* 隐藏标签,但是标签还占用原来的空间 */
31     /*display: none;  !* 隐藏标签 ,并且不占用自己之前的空间*!*/

 1 content内容区域 自己设置的  
 2 padding 内边距 内容与边框距离 可以自己设置（设置后会在总体会变大） 如果不设置默认？
 3 border 边框宽度  线粗
 4 margin 外边距 你和别的标签距离
 5     div{
 6             width: 200px;
 7             height: 100px;
 8             border: 2px solid deeppink;
 9             /*padding-top: 10px;*/
10             /*padding-left: 5px;*/
11             /*padding-right: 2px;*/
12             /*padding-bottom: 4px;*/
13             /*padding: 10px 20px;  !* 10px上下内边距 ,20px左右内边距 *!*/
14             /*padding: 10px 20px 5px 2px;  !* 10px上下内边距 ,20px左右内边距 *!*/
15             padding: 10px 20px 5px 0;  /* 10px上下内边距 ,20px左右内边距 */
16             
17         }

 1 margin 外边距
 2 top距离上面标签的距离
 3 bottom距离下面标签的距离
 4 left 距离左边标签的距离
 5 rigth 距离右边标签的距离
 6 
 7         .d1 {
 8             width: 200px;
 9             height: 100px;
10             border: 2px solid deeppink;
11             margin-bottom: 200px;  
12         }
13         .d2{
14             margin-top: 100px;  
15             border: 2px solid blue;
16 
17         }
18 
19     两个简写的方式
20     /*margin: 10px 20px;*/
21     margin: 10px 5px 6px 3px;
22 
23     两个情况:
24         垂直方向如果上下两个标签都设置了margin外边距,那么取两者的最大的值
25         水平方法,两个标签都设这外边距,取两者的边距之和

 1 浮动会造成父级标签塌陷问题
 2 解决方法:
 3     1 父级标签设置高度
 4     2 伪元素选择器清除浮动,给父级标签加上下面这个类值
 5         .clearfix:after{
 6             content: ‘‘;
 7             display: block;
 8             clear: both;  清除浮动clear
 9         }
10         
11 clear的值和描述        
12     值    描述
13     left    在左侧不允许浮动元素。
14     right    在右侧不允许浮动元素。
15     both    在左右两侧均不允许浮动元素。