盒子模型(CSS重点)
很多网页非常的整齐好看，这其实是利用了网页布局，它的本质其实把网页元素比如文字图片，放入盒子里面，利用CSS来摆放盒子的过程，CSS没有太多逻辑性的东西，网页的布局我们可以随意设置。
盒子边框(border)
语法格式为：
#d1{
/*border-color: blue;
border-width: 1px;
border-style: solid;*/
/*设置四条边框*/
/*border: 1px solid blue;*/
/*上边框*/
border-top: 2px solid blue;
/*有边框*/
border-right: 2px double red;
/*下边框*/
border-bottom: 8px dashed yellow;
/*左边框*/
border-left: 4px dotted pink;
}
#d2{
border: 1px solid red;
/*radius的值可以设置四个：左上 右上 右下 左下
也可是设置一个值代表四个角相同属性
可以是具体长度单位也可以是百分比
*/
border-radius: 50%;
}
/*css设置边框就会改变元素本身大小*/
注：
其中border-style为边框样式：常用属性值有none（默认值）,solid（单实线）,dashed（虚线）,dotted（点线）,double（双实线）
table{border-collapse:sollapse}
collapse是合并的意思，border-collapse:sollapse表示将边框合并在一起的意思 圆角边框border-radius：左上角 右上角 右下角 左下角
内边距（padding）
#d1{
/*padding-left: 15px;
padding-top: 15px;
padding-right: 25px;
padding-bottom: 30px;*/
text-align: right;
/*设置一个值代表的是四个内边距*/
/*padding: 35px;*/
/*设置两个值代表的上下35 左右45*/
/*padding: 35px 45px;*/
/*设置三个值的意思是上方内边距25 左右35 下方内边距45*/
/*padding: 25px 35px 45px;*/
/*设置四个值得意思是上 右 下 左 顺时针顺序*/
padding: 25px 35px 45px 55px;
/*切记，内边距设置的最小值是0*/
}
外边距（margin）
语法格式与内边距类似
margin-left: 15px;
margin-top: 15px;
margin-right: 25px;
margin-bottom: 30px;
实现盒子居中
必须满足两个条件：
1.必须是块级元素。
2.盒子必须指定了宽度。
代码如下：
div{
width: 200px;
height: 200px;
border: 1px solid red;
background-color: pink;
/*设置外边距值为0则不需要单位，auto自动边距*/
margin: 0 auto;
}
清楚元素的默认内外边距
*{
margin: 0;
padding: 0;
}
盒子布局的稳定性
一般我们按照width> padding> margin的优先使用顺序 但目前浏览器大部分已经是高于ie6的，这样的话margin> padding
盒子阴影
div{
width: 200px;
height: 200px;
border: 1px solid gray;
border-radius: 20px;
/*设置盒子阴影*/
box-shadow: 20px 20px 30px rgba(0,0,0,0.7) inset;
}
前两个属性h-shadow（水平阴影位置），v-shadow（垂直阴影）是必须写的，其余可以省略
浮动（float）
语法展示如下：
<style type="text/css">
body{
padding: 15px;
}
div{
width: 200px;
height: 200px;
border: 1px solid black;
/*float: left;*/
}
#d1{
margin: 15px;
float: left;
}
#d2{
width: 300px;
height: 300px;
border: 1px solid black;
float: left;
margin: 25px;
}
#d3{
clear: both;/*清楚浮动对自己造成的影响，但是不会清楚浮动效果，可选值：left right both*/
margin-top: 50px;
}
/*浮动元素的外边距会影响未浮动标签的位置，反之不会*/
</style>
详情见浮动案例
<head>
<title>案例</title>
<style type="text/css">
*{
margin: 0;
padding: 0
}
html,body{
height: 100%;
/*background-color: red;*/
}
.out{
height: 100%;
width: 1800px;
border: 1px solid red;
margin: 0 auto;
}
.left{
width: 150px;
height: 100%;
}
.left .left1{
height: 50%;
background-color: purple;
}
.left .left2{
height: 50%;
background-color: gray;
}
.right1{
width: 150px;
height: 100%;
}
.right1 .right11{
height: 50%;
background-color: pink;
}
.right1 .right21{
height: 50%;
background-color: green;
}
.main{
height: 100%;
width: 1500px;
}
.left,.main,.right1{
float: left;
}
.header{
height: 5%;
background-color: red;
}
.ad{
height: 5%;
background-color: gray;
}
.content{
height: 80%;
}
.content>div{
float: left;
height: 100%;
}
.content .left{
width: 20%;
background-color: blue;
}
.content .center{
width: 60%;
background-color: yellow;
}
.content .center .banner{
height: 40%;
background-color: #FFA234;
}
.content .center .info{
height: 60%;
}
.info>div{
float: left;
height: 100%
}
.content .center .info .new-type{
width: 30%;
background-color: green;
}
.content .center .info .new{
width: 40%;
background-color: pink;
}
.content .center .info .about{
width: 30%;
background-color: red;
}
.content .right{
width: 20%;
}
.content .right .opt{
height: 70%;
background-color: #AAF123;
}
.content .right .weather{
height: 30%;
background-color: #FBA255;
}
.footer{
height: 10%;
background-color: #FFB112;
}
</style>
</head>
<body>
<div class="out">
<div class="left">
<div class="left1"></div>
<div class="left2"></div>
</div>
<div class="main">
<div class="header"></div>
<div class="ad"></div>
<div class="content">
<div class="left"></div>
<div class="center">
<div class="banner"></div>
<div class="info">
<div class="new-type"></div>
<div class="new"></div>
<div class="about"></div>
</div>
</div>
<div class="right">
<div class="opt"></div>
<div class="weather"></div>
</div>
</div>
<div class="footer"></div>
</div>
<div class="right1">
<div class="right11"></div>
<div class="right21"></div>
</div>
</div>
</body>
清除浮动：
#d3{
clear: both;/*清楚浮动对自己造成的影响，但是不会清楚浮动效果，可选值：left right both*/
margin-top: 50px;
}
/*浮动元素的外边距会影响未浮动标签的位置，反之不会*/
定位的使用
参考代码如下：
<head>
<title>定位</title>
<style type="text/css">
#main{
height: 600px;
width: 600px;
border: 1px solid red;
position: relative;
left: 50px;
top: 50px;
}
#d1{
height: 200px;
width: 200px;
background-color: pink;
/*相对定位：基于该标签未定位的位置进行偏移的*/
position: relative;
left: 50px;
/*可以取负值*/
top: 100px;
}
#d2{
height: 200px;
width: 200px;
background-color: blue;
position: relative;
left: 50px;
top: 50px;
}
</style>
</head>
<body>
<div id="main">
<div id="d1"></div>
<div id="d2"></div>
</div>
</body>
相对定位与绝对定位
参考代码如下
<head>
<title>定位</title>
<style type="text/css">
#main{
height: 600px;
width: 600px;
border: 1px solid red;
position: absolute;
left: 80px;
top: 100px;
}
#d1{
height: 200px;
width: 200px;
background-color: gray;
/*绝对定位 父级标签没有属性时，子级标签的决定定位方式以根标签为准（浏览器左上角顶点）*/
/*当父级标签有定位属性时，子级标签的绝对定位以父级标签为准*/
position: relative;
left: 50px;
top: 50px;
}
#d2{
height: 200px;
width: 200px;
background-color: green;
position: relative;
left: 50px;
top: 50px;
}
/*相对定位会占据原有空间 ，绝对定位会释放空间*/
/*一般情况下：子级使用绝对定位时，父级会使用相对定位*/
</style>
</head>
<body>
<div id="main">
<div id="d1"></div>
<div id="d2"></div>
</div>
</body>
注意：子绝父相
固定定位
参考代码如下：
<head>
<meta charset="utf-8">
<title>定位</title>
#d1{
height: 300px;
width: 200px;
background-color: pink;
text-align: center;
/*固定定位：用于只浏览器左上角顶点计算坐标*/
position: fixed;
top: 350px;
/*对于任何情况的定位都有效*/
z-index: 3;
}
#d2{
margin: 0 auto;
text-align: center;
}
#d3{
height: 200px;
width: 150px;
background-color: green;
position: fixed;
top: 200px;
left: 80px;
z-index: 2;
}
</style>
</head>
<body>
<div id="main">
<div id="d1">我是广告</div>
<div id="d2">
<p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p><p>12313</p>
</div>
<div id="d3">我也是广告</div>
</div>
<
</body>
叠放次序
用z-index来控制，取的数值越大，则再定位元素中越居上，数字后面不能加单位，只有相对定位、绝对定位和固定定位有这个属性，其余都没有。