css:盒子模型

1.盒子模型具有的属性：

内容(content)
填充(padding)
边框(border)
边界(margin)

图示如下:

image

2.流概念

1.流的概念

在现实生活中已经流水，在网页设计中就是指元素(标签）的排列方式，默认情况下，向网页的左上角流动

2.标准流的概念

元素在网页中就像流水，排在前面的元素(标签)内容在前面出现，排在后面的元素(标签）内容在后面出现

3.非标准流的概念

当某个元素(标签)脱离了标准(比如因为相对定位)排列，就称为非标准流．

3.实例代码一：

    
    
    


hello world

效果：

image

4.实例代码二：

效果如下：

image

5.实例代码三：

    
    
    



    

        
小狗
        
小狗
        
小狗
        
小狗
        
小狗
        
小狗
        
小狗
        
小狗
    

效果如下：

image

6.实例代码四：

    
    
    



    

    优酷牛人
    

        
爱心月
        
爱心月
        
爱心月
    
    
    

        优酷牛人
        

            
爱心月
            
爱心月
            
爱心月
        
    

效果如下：

image

7.实例代码五：

    
    
    



    

    优酷牛人
    

        
行内元素浮动后会变成块元素块元素
            
用户:21856
发布:1天前
        
行内元素浮动后会变成块元素块元素
            
用户:21856
发布:1天前
        
行内元素浮动后会变成块元素块元素
            
用户:21856
发布:1天前
        
行内元素浮动后会变成块元素块元素
            
用户:21856
发布:1天前
        
行内元素浮动后会变成块元素块元素
            
用户:21856
发布:1天前
        
行内元素浮动后会变成块元素块元素
            
用户:21856
发布:1天前
        
行内元素浮动后会变成块元素块元素
            
用户:21856
发布:1天前
        
行内元素浮动后会变成块元素块元素
            
用户:21856
发布:1天前
    

效果如下：

image

盒子基本概念：

padding的设置
padding有四个方向，分别描述4个方向的padding。

描述的方法有两种
padding
1、写小属性,分别设置不同方向的padding

padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
2、写综合属性，用空格隔开

/*
上 右 下 左
*/

padding: 20px 30px 40px 50px ;

/*
上 左右 下
*/

padding: 20px 30px 40px;

/*
上下 左右
*/

padding: 20px 30px;

/*
上下左右
*/
padding: 20px;
2 border:边框的意思，描述盒子的边框

边框有三个要素： 粗细 线性样式 颜色

按照3要素来写border
border-width: 3px;
border-style: solid;
border-color: red;

/*

border-width: 5px 10px;
border-style: solid dotted double dashed;
border-color: red green yellow;

*/
按照方向划分
border-top-width: 10px;
border-top-color: red;
border-top-style: solid;

border-right-width: 10px;
border-right-color: red;
border-right-style: solid;

border-bottom-width: 10px;
border-bottom-color: red;
border-bottom-style: solid;

border-left-width: 10px;
border-left-color: red;
border-left-style:solid;
上面12条语句，相当于 bordr: 10px solid red;

另外还可以这样：

border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid red;
border-left: 10px solid red;
清除边框的默认样式，比如input输入框

border:none;
border:0;
使用border来制作小三角
/小三角 箭头指向下方/
div{
width: 0;
height: 0;
border-bottom: 20px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
3 margin
margin：外边距的意思。表示边框到最近盒子的距离。(兄弟之间)

/表示四个方向的外边距离为20px/
margin: 20px;
/表示盒子向下移动了30px/
margin-top: 30px;
/表示盒子向右移动了50px/
margin-left: 50px;
margin-bottom: 100px;