浅谈css（块级元素、行级元素、盒子模型）

一、块级元素的特点

1、默认显示在父标签的左上角

2、默认占满一行（占满整个文档流） 文档流是将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。

二、行内元素（内联元素）的特点

1、大小受到文字区域的影响，不受到width、height影响。

2、行内元素不会独自占满一行。

例：

<div id="d1">
这是块级元素
</div>
<span id="d2">
这是行内元素
</span>

<style type="text/css">
#d1{
width:100px;
height:100px;
background:#FF9966;
border:1px solid red;
}
#d2{
width:100px;
height:100px;
background:#FFFF33;
border:1px solid  #0000CC;
}
</style>

 

三、常用的块级元素和行内元素

 1、块级元素（div、table、ul li、ol li、hr、h1~h6、p）

 2、行内元素（a、img、span、input）

四、块级元素和行内元素互转

1、块级==》行内: display：inline;

2、行内==》块级: display：block;

3、块具有行内元素和块级元素的特点：display：inline-block;  （width、height受到影响。不会单独占满一行）

例：块级-行内 display：inline;

<div id="d1">
这是块级元素1
</div>
<div id="d2">
这是块级元素2
</div>

 添加前效果：

<style type="text/css">
#d1{
width:100px;
height:100px;
background:#FF9966;
border:1px solid red;
}
#d2{
width:100px;
height:100px;
background:#FFFF33;
border:1px solid  #0000CC;
}
</style>

添加display：inline;后效果

<style type="text/css">
#d1{
width:100px;
height:100px;
background:#FF9966;
border:1px solid red;
display:inline;
}
#d2{
width:100px;
height:100px;
background:#FFFF33;
border:1px solid  #0000CC;
display:inline;
}
</style>

例：行内-块级 display：inline;（通常a标签用的比较多）

<div id="d1"> <a herf="#">普通行内元素</a> </div>
<hr align="left" width="250px"/>
<div id="d2"> <a herf="#">行内元素变成块级元素</a> </div>

<style type="text/css">
#d1 {
    width:250px;
    height:30px;
    line-height:30px;
    text-align:center;
    border:1px solid red;
}
hr {
    border:1px dashed #990000;
}
#d2 a {
    text-decoration:none;
    color:#000000;
    display:block;
    width:250px;
    height:30px;
    line-height:30px;
    background:#CC6699;
    padding:2px;
    text-align:center;
}
#d2 a:hover {
    text-decoration:none;
    color:#FFFFFF;
    display:block;
    width:250px;
    height:30px;
    line-height:30px;
    background:#0033FF;
    padding:2px;
    cursor:pointer;
    text-align:center;
}
</style>

五、盒子模型

CSS盒子模式:内容(content)、填充(padding)、边框(border)、边界(margin)。

盒子模型是html网页制作中非常重要的布局方式。现在流行的网页制作都是采用盒子模型布局。

padding（内间距）

 1、padding:10px;   //表示 上下左右的内间距都是10px;

 2、padding:10px 20px; //表示 上下10px 左右20px; 

 3、padding:10px 15px 20px; 表示 上10px 左右15px 下20px;

 4、padding：5px 10px 15px 20px; 表示 上5px 右10px 下15px 左20px;

margin(外间距)

1、margin-top：上间距

2、margin-bottom：下间距

3、margin-left：左间距

4、margin-right：右间距

常用居模块的水平居中使用：margin：0px auto;margin与padding如何进行区分，其实说白了padding 就是内容与边框的空隙。而margin则是模块与模块的空隙。