1.1 CSS盒模型

网页中所有的元素都是矩形的,所以可以看出一个个盒子。
网页由多个盒子组成。
盒子:边框+内边距+内容区域+外边距组成。
盒模型 
 
盒模型实例 
边距原色 
 
IE6的盒模型的bug:背景色不能穿透 边框。
而且如果不设置争取的doctype的话,ie6显示的盒子也不是标准的盒子。
IE6的盒模型的bug 

1.2 边框

边框可以被背景色穿透,边框包括三部分可以进行设置:边框的宽度、边框的颜色、边框的样式。
可以分别分开设置,也可以进行合写进行统一设置。所有的边框相关设置在如下的代码中:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02CSS设置盒子边框</title>
<style>
.box {
height: 200px;
width: 200px;
background-color: green;
 
/*设置上边框的宽度*/
border-top-width: 20px;
 
/*设置上边框的颜色*/
border-top-color: red;
 
/*设置上边框的样式: 虚线、实线、点线..*/
border-top-style: double;
 
 
border-bottom-color: yellowgreen;
border-bottom-width: 5px;
border-bottom-style: solid;
 
/*边框的样式设置也可以进行合写*/
/*border-top: 宽度 样式 颜色;*/
border-left: 5px solid blue;
 
/*可以用一行css设置上下左右所有的边框的样式*/
border: 10px dashed blue;

}
</style>
</head>
<body>
<div class="box">

</div>
</body>
</html>
 

 
去掉图片的边框的写法:(在某些老的浏览器中图片是默认有边框)
  /* 去掉默认的边框 ,兼容性最好的写法是*/
  border: 0 none;
 

1.3 内边距

内边距是设置盒子与子盒子之间的距离。
Pading: 10px;   设置上下左右都是10px的内边距。
Padding: 10px 12px;  设置上下是10培训的宽度,左右是12像素的宽度。
Pading: 10px 12px 13px 14px; //  分别设置的是 上 右  下  左
如果设置三个值:  上   左右   下
 

1.4 外边距

外边距设置兄弟元素之间的距离。
Margin的设置跟padding的一样。
Margin: 0 auto; 可以让 块级元素水平的居中。
原理: auto是设置外边距自动赋值。如果左右都是auto的时候,会把盒子所在行剩余的宽度除以2,然后分别赋值给左右的magin值,自然就会让盒子居中显示了。
行内元素的margin(padding)只能在水平方向起作用。垂直方向不起作用。

1.5 外边距合并

第一种外边距合并的情况:
当两个块级元素,上面块级元素拥有下外边距,下面的块级元素拥有上外边距的时候。两个盒子上下的距离会取 两个边距的最大值,而不是把两个盒子的边距进行加和处理。
 
外边距合并 
 
第二种外边距合并的情况:
当块级元素进行嵌套的时候,如果父盒子没有设置上边框和上内边距的话,子盒子的上外边距和 复盒子的上外边距会进行合并。
外边距合并2 

1.6 浮动

1.6.1 标准流

标准流就是浏览器默认布局的方式,也就是从上往下,从左向右的默认的排班布局的方式。
div浮动 
 

1.6.2 浮动布局方式

浮动的本质:就是解决图片和文字并排的格式问题。
 
元素浮动后,会脱离标准流,但是还会影响标准流的布局。
没有设置浮动之前:
没有浮动的情况下 
设置浮动之后:
float浮动后 
 
总结一下:
浮动的元素会不占据标准流的空间。但是会影响标准流中的文本的排版。

1.6.3 浮动的特性

1.浮动脱离标准流,不占位置,但会影响标准流。浮动只有左右浮动。
2. 浮动的元素A排列位置,跟上一个元素(块级)有关系。如果上一个元素有浮动,则A元素顶部会和上一个元素的顶部对齐;如果上一个元素是标准流,则A元素的顶部会和上一个元素的底部对齐。
3.一个父盒子里面的子盒子,如果其中一个子级有浮动的,则其他子级都需要浮动。这样才能一行对齐显示。
4.浮动根据元素书写的位置来显示相应的浮动。
5. 元素添加浮动后,如果没有设置宽高的话,元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少。也就是具有了包裹性。
6.浮动具有破坏性,元素浮动后,破坏来原来的正常流布局,造成内容塌陷。
 
注意:
如果一个标准流的父盒子,没有设置高的情况下,所有的子盒子进行了浮动,那么父盒子的高度会塌陷成0.
 

1.6.4 解决浮动破坏性造成的高度塌陷的问题

第一种解决高度塌陷的方法就是使用overflow。
在父盒子上设置overflow: hidden;之后,父盒子具有的包裹性,就不会出现高度塌陷的问题了。

1.6.5 Overflow详解

当盒子内的元素超出盒子自身的大小时,内容就会溢出(IE6除外),这时如果想要规范溢出内容的显示方式,就需要使用CSS的overflow属性
属性 描述
visible 内容不会被修剪,会呈现在元素框之外(默认值)
hidden 溢出内容会被修剪,并且被修剪的内容是不可见的
auto 在需要时产生滚动条,即自适应所要显示的内容
scroll 溢出内容会被修剪,且浏览器会始终显示滚动条

 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>13CSS溢出处理overflow.html</title>
<style>

div {
background-color: silver;
height: 100px;
width: 100px;
border: 1px solid red;
 
/*overflow: visible;*/
/*overflow: hidden;*/
/*overflow: auto;*/
overflow: scroll;
}
</style>
 
</head>
<body>
<div>


 

1.6.6 补充:BFC

Overflow可以触发元素的BFC,可以让元素具有独立的排版的空间和权限,在bfc内部所有的元素都依据父元素进行排版和布局,所有父元素具有了包裹性,这就是解决高度塌陷问题的原理。
比如: 浮动也可以触发bfc,再有:定位、overflow、display:table、table-cell...
 

1.7 版心的概念

版心就是,网站的核心展示区域,一般居中显示。版心宽度一般是:
960px  980px  1000px  1190px
1200px
 

1.8 清除浮动

清除浮动,就是让当前元素左右两边都不存在浮动元素的时候才把元素放到标准流汇中显示。
Clear:left; 清除左浮动,
清除右浮动: clear:right;
清除左右浮动:clear:both;
常用的几种清除浮动的方法:
第一种:隔墙法。
隔墙浮动 
第二种综合的clearfix的方法:使用overflow进行包裹所有的浮动子元素。有误伤。
Ckearfix的使用场景:
1、父盒子要把所有的子盒子包裹住。
2、父盒子是包裹正行的 div元素,需要前后进行清除浮动。
 

.clearfix {
display: table; /*  触发bfc,div具有的包裹性*/
}
 
.clearfix:before, .clearfix:after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
 
.clearfix {
_zoom: 1;
}
 

1.9 定位概述

默认的文档流的布局的方式决定了元素的位置就是静态的定位方式。Static。
 
可以通过position CSS属性来改变元素的定位的方式。

1.9.1 相对定位:

相对于原来的位置进行偏移。

1.9.2 绝对定位:

根据父容器(必须是非static的定位的容器)进行位置定位。
一般原则:子绝父相

1.9.3 固定定位:

固定在浏览器的某个位置,浏览器scroll时不会发生变化。
 

1.9.4 Zindex

Zindex可以改变元素层叠的位置。
Zindex可以改变元素层叠的位置 
Zindex越大,越靠近用户。
页面zindex规划案例:
一般的zindex都会在100区间内。
如果是页面比较顶部的用200区间的
如果是广告,那么需要最顶部,则是300区间

1.9.5 三列自适应布局

代码如下:
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>26三列自适应布局</title>
<style>
* { padding: 0; margin: 0; }
.sub-nav, .aside {
width: 200px;
background-color: teal;
height: 300px;
}
.main {
margin-left: 203px;
margin-right: 203px;
height: 300px;
background-color: yellowgreen;
}
 
.sub-nav {
float: left;
}
.aside {
float: right;
}
</style>
</head>
<body>
<div class="sub-nav">sub-nav</div>
 
<div class="aside">aside</div>
 
<div class="main">main</div>
 

</body>
</html>