css框模型

内边距

按照上、右、下、左的分别设置各地的内边距，各边可以使用不同的单位或百分比值：

 

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }
//还可以这样写
h1 {padding: 10px 0.25em 2ex 20%;}

 如果上、右、下、左的值一样可以这样写

 

 

h1 {padding: 10px;}
//个边值均为10

 外边距

 

可以用margin来设置上下左右的外边距

margin 可以是任何长度单位。例如：像素、英寸、毫米、em

与内边距设置相同，这些值得顺序是从上外边距（top）开始围着顺时针旋转的

 

margin: top right bottom left

 

 

h1 {margin : 10px 0px 15px 5px;}

 

 

相对路径与绝对路径

通过position来定义路径类型。

position:absolute为绝对路径，

 

.div {  
position: absolute;  
left: 100px;  
top: 100px; 
   }  

 position:relative;为相对路径，也就是在同一个<div/>标签中，相对于绝对位置的标签的位置。

 

 

.div {  
position: relative;  
left: 100px;  
top: 20px;  
   }  

 boder边框属性

 

通过boder属性来定义边框样式；

边框四周宽度

 

.div {  
       boder: 1px;  
}  

 

 

 设置边框四边宽度，(boder-top;boder-right;boder-bottom;boder-left);

  设置边框颜色:

 

.div {  
      boder-color: black; #8b8b8b; rgba(67, 138, 200, 0.91);  
}  
//还可以写成这种形式: 
.div{boder: 1px solid #8b8b8b}
//就是边框宽度为1px的实线灰色边框;
 

 

还可以写成这种形式: boder: 1px solid #8b8b8b;就是边框宽度为1px的实线灰色边框;

bpder-radius设置边框圆角

如：bpder-radius:5px（圆角半径)

(border-top-left-radius; border-top-right-radius; border-bottom-left-radius; border-bottom-right-radius;)

设置文本水平对齐方式：text-align:center;(left;right)

设置垂直居中:line-height:50px(c垂直距离的二分之一)

设置居上:vertical-align:top;(left;right;bottom;)

给边框定义最小长宽:

最小高度: 例

.div {  
         _height: 195px;  
         min-height: 195px;  
//这样当div中的内容超过最小高度后，div会自动适应高度，将边框撑开