CSS(3)__CSS基本用法<div,文档流,浮动>

1：盒子模型--div

1：画图理解盒子模型

2：一个盒子占据的控件是边框 + 内边距 + 内容区域

Margin:外边距
Width=(margin+border+padding)*2+content
一个盒子中主要的属性就5个：width、height、padding、border、margin。
width是“宽度”的意思，CSS中width指的是内容的宽度，而不是盒子的宽度。
height是“高度”的意思，CSS中height指的是内容的高度，而不是盒子的高度
padding是“内边距”的意思
border是“边框”
margin是“外边距”

3 盒子宽度和高度

盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。

因此一个元素实际宽度

（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

真实占有宽度=  左border  +  左padding  +  width  +  右padding  +  右border
这两个盒子的盒模型图，见下表：  在浏览器中右键选择审查

2 认识padding：内边距

padding就是内边距。padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。

也就是说，background-color将填充所有boder以内的区域。

padding是4个方向的，所以我们能够分别描述4个方向的padding。

方法有两种，第一种写小属性；第二种写综合属性，用空格隔开。

top上、right右、bottom下、left左。（顺时针）

这种属性，就是复合属性。比如不写padding-left那么就是没有左内边距。

综合属性：
如果写了4个值：
padding:30px 20px 40px 100px;

空格隔开的，四个数字就是上、右、下、左。
也就是说，前端开发工程师眼中的顺序不一样。
老百姓：上下左右
强调开发工程师：上、右、下、左

4 盒子边界 margin：外边距

元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：
div{margin:20px 10px 15px 30px;}
也可以分开写：
div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}
如果上右下左的边界都为10px;可以这么写：
div{ margin:10px;}
如果上下边界一样为10px，左右一样为20px，可以这么写：
div{ margin:10px 20px;}
总结一下：padding和margin的区别，padding在边框里，margin在边框外。

5  border盒子边框

就是边框。边框有三个要素：粗细、线型、颜色。
颜色如果不写，默认是黑色。另外两个属性不写，要命了，显示不出来边框。


border: 1px dashed red;


所有的线型：

border是一个大综合属性，
border:1px solid red;




就是把4个边框，都设置为1px宽度、线型实线、red颜色。
border属性能够被拆开，有两大种拆开的方式：
1） 按3要素:border-width、border-style、border-color
2） 按方向：border-top、border-right、border-bottom、border-left


按3要素拆开：
1 border-width:10px;    → 边框宽度
2 border-style:solid;     → 线型
3 border-color:red;      → 颜色。
等价于：
1 border:10px solid red;
现在心里要明白，原来一个border是由三个小属性综合而成：
border-width  border-style   border-color。


按方向来拆
border-top:10px solid red;
border-right:10px solid red;
border-bottom:10px solid red;
border-left:10px solid red;
等价于
border:10px solid red;


按方向还能再拆一层，就是把每个方向的，每个要素拆开，一共12条语句：
border-top-width:10px;
border-top-style:solid;
border-top-color:red;
border-right-width:10px;
border-right-style:solid;
border-right-color:red;
border-bottom-width:10px;
border-bottom-style:solid;
border-bottom-color:red;
border-left-width:10px;
border-left-style:solid;
border-left-color:red;
等价于
border:10px solid red;

2.标准文档流

宏观的讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画。


我们要看看标准流有哪些微观现象：
1） 空白折叠现象：
2） 高矮不齐，底边对齐：

<p>
        人人人人 人人<span>姚明</span>人人人人人人人
        <img src="images/0.jpg" alt="" />
        <img src="images/fayinqinming.jpg" alt="" />
</p>
3） 自动换行，一行不够写，换行写。
 


1 块级元素和行内元素
学习的初期，你就要知道，标准文档流等级森严。标签分为两种等级：
1） 块级元素  容器级
● 霸占一行，不能与其他任何元素并列
● 能接受宽、高
● 如果不设置宽度，那么宽度将默认变为父亲的100%。
2） 行内元素 
● 与其他行内元素并排
● 不能设置宽、高。默认的宽度，就是文字的宽度。
   h1{
width: 400px;
height: 90px;
background-color: pink;
}
span{
width: 400px;
height: 90px;
background-color: pink;
}
<h1>哈哈哈哈</h1>
<h1>嘻嘻嘻嘻</h1>
<span>哈哈哈哈</span>
<span>嘻嘻嘻嘻</span>
在HTML中，我们可以将标签分过类，当时分为了：文本级、容器级。
文本级：p、span、a、b、i、u、em
容器级：div、h系列、li、dt、dd


CSS的分类和上面的很像，就p不一样：
所有的文本级标签，都是行内元素，除了p，p是个文本级，但是是个块级元素。
所有的容器级标签都是块级元素。

块级元素：div,p,h,ul,li,

行级元素:a,b,span,label,

2 块级元素和行内元素的相互转换

块级元素可以设置为行内元素
行内元素可以设置为块级元素


div{
display: inline;
background-color: pink;
width: 500px;
height: 500px;
}
       h1 {
            background-color: greenyellow;
            display: inline;
            font-size: 20px;
            font-weight: normal;
        }
     <div>我是一个div</div>
    <div>我是一个div</div>
    <h1>我</h1>
    <h1>爱</h1>
    <h1>雾</h1>
    <h1>霾</h1>
display是“显示模式”的意思，用来改变元素的行内、块级性质
inline就是“行内”。
一旦，给一个标签设置
1 display: inline;
那么，这个标签将立即变为行内元素。此时它和一个span无异：
● 此时这个div不能设置宽度、高度；
● 此时这个div可以和别人并排了


同样的道理，
span{
display: block;
width: 200px;
height: 200px;
background-color: pink;
}
    <span>我是一个span</span>
<span>我是一个span</span>




对于超链接a标签也可以设置成块级标签
a {
            display: block;
            width: 250px;
            height: 40px;
            /*文本居中：*/
            text-align: center;
            /*行高40，和盒子一样高，所以就垂直居中了，后面讲*/
            line-height: 40px;
            background-color: orange;
        }
Display:block:把行内元素转换为块级元素。
“block”是“块”的意思
让标签变为块级元素。此时这个标签，和一个div无异：
● 此时这个span能够设置宽度、高度
● 此时这个span必须霸占一行了，别人无法和他并排
● 如果不设置宽度，将撑满父亲


标准流里面限制非常多，标签的性质恶心。比如，我们现在就要并排、并且就要设置宽高。
所以，移民！脱离标准流！
css中一共有三种手段，使一个元素脱离标准文档流：
1） 浮动
2） 绝对定位
3） 固定定位

3.浮动

浮动是css里面布局用的最多的属性。

.box1{
float: left;
width: 300px;
height: 400px;
background-color: yellowgreen;
}
.box2{
float: left;
width: 400px;
height: 400px;
background-color: skyblue;
}


两个元素并排了，并且两个元素都能够设置宽度、高度了（这在刚才的标准流中，不能实现）。
浮动想学好，一定要知道四个性质。

1 浮动的元素脱标：脱离标准文档流

.box1{
float: left;
width: 200px;
height: 200px;
background-color: yellowgreen;
}
.box2{
width: 350px;
height: 350px;
background-color: skyblue;
}
证明2：
一个span标签不需要转成块级元素，就能够设置宽度、高度了。所以能够证明一件事儿，就是所有标签已经不区分行内、块了。也就是说，一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。
span{
float: left;
width: 200px;
height: 200px;
background-color: orange;
}
    <span>我是span</span>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>

2. 浮动的元素互相贴靠

如果有足够空间，那么就会靠着2哥。如果没有足够的空间，那么会靠着1号大哥。

如果没有足够的空间靠着1号大哥，自己去贴左墙。

3.浮动的元素有“字围”效果

    <div>
<img src="images/1.jpg" alt="" />
</div>
<p>123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</p>

让div浮动，p不浮动：

div挡住了p，但是p中的文字不会被挡住，形成“字围”效果。
关于浮动我们要强调一点，浮动这个东西，我们在初期一定要遵循一个原则：
永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。
注意：英文和数字不会形成字围效果

3 浮动的元素有”收缩“效果

浮动的性质：脱标、贴边、字围、收缩。


收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为文字的宽度（这点非常像行内元素）。
比如：
<style type="text/css">
div{
float: left;
background-color: gold;
}
</style>
这个div浮动了，且没有设置宽度，那么将自动缩紧为内容的宽度

4、浮动的清除

来看一个实验：现在有两个div，div身上没有任何属性。每个div中都有li，这些li都是浮动的。
<div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>设计模式</li>
</ul>
</div>


<div>
<ul>
<li>学习方法</li>
<li>英语水平</li>
<li>面试技巧</li>
</ul>
</div>
   li{
float: left;
width: 90px;
height: 40px;
background-color: gold;
/*文本居中*/
text-align: center;
}
我们本以为这些li，会分为两排，但是，第二组中的第1个li，去贴靠第一组中的最后一个li了。

第二个div中的li，去贴第一个div中最后一个li的边了。
原因就是因为div没有高度，不能给自己浮动的孩子们，一个容器。
 清除浮动方法1：给浮动的元素的祖先元素加高度。
如果一个元素要浮动，那么它的祖先元素一定要有高度。高度的盒子，才能关住浮动。

只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。


    *{
margin: 0;
padding:0;
}
div{
height: 50px;
border: 1px solid #000;
}
li{
float: left;
width: 90px;
height: 40px;
margin-right: 10px;
background-color: gold;
/*文本居中*/
text-align: center;
}
实际开发中很少为div盒子设定高度，div是靠内容撑出高度
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.header{
width: 980px;
margin: 0 auto;
}

</style>
<div class="header">
<div class="logo">
<h1><img src="images/logo.png" /></h1>
</div>
</div>

清除浮动方法2：clear:both;

网页制作中，高度height很少出现。为什么？因为能被内容撑高！那也就是说，刚才我们讲解的方法1，工作中用的很少。

脑弄大开：能不能不写height，也把浮动清除了呢？也让浮动之间，互不影响呢？

 

<div>               <ul>                      <li>HTML</li>                      <li>CSS</li>                      <li>JS</li>                      <li>HTML5</li>                      <li>设计模式</li>               </ul>        </div>          <div class="box2">  → 这个div写一个clear:both;属性               <ul>                      <li>学习方法</li>                      <li>英语水平</li>                      <li>面试技巧</li>               </ul>        </div>

 

*{                      margin: 0;                      padding:0;               }              li{                     float: left;                     width: 120px;                     height: 40px;                     text-align: center;                     background-color: orange;              }              .box2{                     clear: both;              }

clear就是清除，both指的是左浮动、右浮动都要清除。意思就是：清除别人对我的影响。

这种方法有一个非常大的、致命的问题，margin失效了。

这样不能设置两个盒子之间的margin了

 .box1 {

           margin-bottom: 10px;

        }

盒子居中margin:0 auto;

margin的值可以为auto，表示自动。当left、right两个方向，都是auto的时候，盒子居中了：

1           margin-left: auto; 2           margin-right: auto;

简写为
1 margin:0 auto;


注意：
1） 使用margin:0 auto; 的盒子，必须有width，有明确的width
2） 只有标准流的盒子，才能使用margin:0 auto; 居中。
也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto;
3） margin:0 auto;是在居中盒子，不是居中文本。
文本的居中，要使用
1 text-align:center;


2 margin:0 auto;   → 让这个div自己在大容器中居中。
3 text-align: center;  → 让这个div内部的文本居中。注意图片就是文本。

注意：中间div一定要放在最后，因为center占据文档流位置，所以一定要放在最后，左右两个元素位置没有关系。当浏览器窗口很小的时候，右边元素会被击倒下一行。