特点：不管内容有多少，都要换行，同时占满整行，块元素可以放文本，行内元素，块元素。
（3）一些css属性对行内元素不生效，比如margin，left，right，width，height，建议尽可能使用块元素定位。（与浏览器类版本和类型有关）
行内元素1
行内元素2
块元素1
块元素2
.s1{
background-color: silver;
font-size:20px;
}
.s2{
background-color: skyblue;
font-size:30px;
font-style: italic;
}
（4）块元素和行内元素的转换
如果我们希望一个元素按照块元素的方式显示，则： display：block；
abc
也可以写到css中
如果我们希望一个元素按照行内元素的方式显示，则： display：inline；
hello
css核心内容-----流
标准
excel标准偏差excel标准偏差函数exl标准差函数国标检验抽样标准表免费下载红头文件格式标准下载
流/非标准流
标准流：在网页布局中，写在前面的元素出现在前面，写在后面的元素，显示在后面，这是默认的布局方式，也称标准流。
非标准流：在实际网页布局中，我们可能需要使用非标准流的方式来布局（让某个元素脱离它本身的位置）。
css盒子模型
盒子模型的原理图
细节说明：
1）html元素都可以看成一个盒子
盒子模型的参照物不一样，则使用的css属性不一样，比如从div1的角度看，是margin-right，从div2的角度看，则是margin-left
3）如果不希望破坏整个外观，则尽量使用margin布局，因为padding可能会改变盒子的大小（相当于这个盒子有弹性），margin如果过大，盒子内容被挤到盒子外边去，但是盒子本身没有变化
案例:
Box1.html:
Html版本要改成下面的：
Box1.css：
body{
border:1px solid red;/*这里我们给body指定了宽度，样式，颜色（顺序可以随意）*/
width: 800px;
height:1000px;
margin:0 auto;/*0表示上下边距为0，auto左右自动居中*/
}
.s1{
border:1px solid blue;
width:80px;
height:70px;
margin-top: 10px;
margin-left: 10px;
}
.s1 img{
width:60px;
height:60px;
margin-left: 10px;
margin-top: 5px;
}
盒子模型的综合案例（可以当做一个模板来使用）
Boxzong.html文件 float2.html也实现了这个页面 用不同的方法
Boxzong.css文件
body{
margin: 0;
padding: 0;
}
/*最外面的*/
.s1{
border: red solid 1px;
width:600px;
height:400px;
margin-top: 20px;
margin-left: 100px;
}
/*控制整个图片的区域*/
.s2{
border: red solid 1px;
width:500px;
height:300px;
margin-top: 10px;
margin-left: 20px;
list-style-type: none; /*将点清除*/
padding: 0;
}
/*控制单个图片区域*/
.s2 li{
width:80px;
height:100px;
margin-top: 10px;
margin-left: 10px;
border: red solid 1px;
float: left;/*左浮动*/
}
.s2 a{
margin-left: 15px;
}
/*控制图片的*/
.s2 li img{
width:60px;
height:60px;
margin-top: 10px;
margin-left: 10px;
}
例子2：
3.css:
.s1{
border: 1px solid silver;
width:350px;
height:370px;
}
body{
width: 1000px;
height:1000px;
margin:0 auto;
border:1px solid black;
}
.span1{
background-color: pink;
display: block;
}
/*父子选择器 ※*/
.span1 a{
/*float: right;*/
margin-left: 180px;
}
.faceul{
background-color: green;
list-style-type: none;
}
.faceul li{
float:left;/*使图片左浮动*/
width: 100px;
height: 80px;
background-color: pink; /*加背景做调试时用*/
text-align: center;/*表示放在该元素的其他元素会左右居中*/
}
.faceul img{
margin-top: 2px ;
}
/*定义几个常用的字体样式*/
.font1{
font-size: 20px;
font-weight: bold;
}
/*定义几种超链接的样式*/
a:link{
text-decoration: none;
}
浮动
浮动是一个重要的概念：分为左浮动，右浮动，清除浮动。
浮动必要性，因为默认情况下，div纵向排列：
Float1.html文件
div1
div2
div3
Float1.css文件
body{
border:1px solid silver;
width: 800px;
height:1000px;
margin:0 auto;
}
.div1{
border:1px solid blue;
background-color: pink;
width:150px;
height:100px;
margin-top: 10px;
margin-left: 10px;
}
如果我们要实现如下图形，就可以使用右浮动。当把div1向右浮动时，它脱离标准流并且向右移动，直到它的右边缘碰到包含框的右边缘。
Float1.html文件
1div
2div
3div
Float1.css文件
.div1{
width: 150px;
height: 100px;
border: 1px solid black;
background-color: pink;
margin-bottom: 4px;
}
.div2{
float: right;/*右浮动:是指让该元素，尽量向右边移动，直到碰到它的父元素(body)的右边界为止。*/
}
如果我们希望，所有的元素，横向排列，则使用到左浮动：
这时，对div1的css添加：
float：left；左浮动:是指让该元素，尽量向左边移动，让出自己右边的空间使下一个元素使用
特别注意：如果一行宽度不够排下所有的div，则会自动换行：
当然，如果有某个div的过大，则会卡住别的div。
特别强调：如果一个元素右/左浮动，则①它本身会尽可能向右/左移动，直到碰到边框或者别的浮动元素，浮动对块元素和行内元素都是生效的。②元素向右/左浮动，就相当于让出自己的左/右边，别的元素就会在它的左/右边排列。
css定位
css的定位有以下几种：4
1.static定位
这个是默认的方式，对static而言，left和right是不生效的。
2.relative定位（相对定位）
元素框偏离某个位置（靠left 和 top定位），元素仍然保持为定位前的形状，它原本所占的空间仍保留，从这一角度看，好像该元素仍然在文档流/标准流中一样。
特别说明：1.relative的参照点是它原来的位置，进行移动
案例：
改为：
代码：
内容一
内容二
内容三
内容四
在css中：
.style1{
width:100px;
height:70px;
background-color:silver;
float:left;
margin-left:10px;
}
#special{
position:relative; /*使用相对定位*/
left:40px; /*在原来的位置的基础上，向右移动的大小（如果希望向左移动，则值就是负数）*/
top:100px; /*在原来的位置的基础上，向下移动的大小（如果希望向上移动，则值就是负数）*/
}
3.absolute定位（绝对定位）
相当于元素从原来的位置脱离，并让出自己的空间，后面的元素就会占有让出的空间。
改为：
代码：
内容一
二.css的4种选择器
类选择器 id选择器 html元素选择器 通配符选择器
1．类选择器的基本语法:
.类选择器名{
属性名:属性值;
…
}
my.css文件
.style1{
font-size: 20px;
font-weight: bold;
background-color: purple;
}
select1.html文件
浙公网安备 33021202002483