目录
一、盒子模型（CSS重点）
其实，CSS就三大模块：盒子模型、浮动、定位。
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成
（1）看透网页布局的本质
看透网页布局的本质：把网页元素比如文字、图片等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。
（2）盒子模型（Box Model） IE 、标准 盒模型
所有的文档元素（标签）都会生成一个矩形框，我们称为元素框（element box），它描述了一个文档元素在网页布局中所占的位置大小。因此，每个盒子除了有自己的大小和位置外，还会影响其他盒子的大小和位置。
标准转IE：box-sizing: border-box;
IE转标准：box-sizing: content-box;
标准盒模型：
默认值，盒子实际宽高在设置的width hight的属性之上还要加上padding和border(会自己变大）
IE盒模型：
会压缩内容部分，达到设置padding和border的时候不会增大盒子的宽高（自己设置了多少就多少，不会变大）
（3）盒子边框（border）
边框就是元素最外层的包装。CSS边框属性允许你指定一个元素边框的样式和颜色。
语法：
border： border-width border-style border-color
-
border-width：用于指定边框的粗细。
-
border-style：用于定义边框的样式。
-
border-color：用于设置边框的颜色。
盒子边框总结表
设置内容 样式属性 常用属性值 右边框 border-right-style: 样式; border-right-width: 宽度; border-right-color: 颜色; border-right: 宽度 样式 颜色; 上边框 border-top-style: 样式; border-top-width: 宽度; border-top-color: 颜色; border-top: 宽度 样式 颜色; 下边框 border-bottom-style: 样式; border-bottom-width: 宽度; border-bottom-color: 颜色; border-bottom: 宽度 样式 颜色; 左边框 border-left-style: 样式; border-left-width: 宽度; border-left-color: 颜色; border-left: 宽度 样式 颜色; 样式综合设置 border-style：上边 [右边 下边 左边] none无（默认）、solid（单实线） dashed（虚线）、dotted（点线）、 double（双实线） 宽度综合设置 border-width：上边 [右边 下边 左边] 像素值 使用关键字thick、medium（默认值）、 thin 颜色综合设置 border-color：上边 [右边 下边 左边] 颜色名称、#十六进制、rgb(r,g,b)、 rgb(r%,g%,b%) 边框综合设置 border: 四边宽度 四边样式 四边颜色 还可以设置边框的颜色为"transparent"。
注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。
border-style属性可以有1-4个值：
border-style:dotted solid double dashed;
上边框是 dotted
右边框是 solid
下边框是 double
左边框是 dashed
border-style:dotted solid double;
上边框是 dotted
左、右边框是 solid
下边框是 double
border-style:dotted solid;
上、下边框是 dotted
右、左边框是 solid
border-style:dotted;
四面边框是 dotted
示例：
<p>设置盒子四个边框的颜色</p>p { border-style:solid; border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255); }
表格的细线边框
以前学过的HTML表格的边框很粗，这里只需要CSS一句话就可以美观起来。
table { border-collapse: collapse; /*表示边框合并在一起*/ }示例：
<table cellpadding="0" cellspacing="0"> <tr> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> </tr> </table> table { width: 700px; height: 500px; border: 1px solid deeppink; border-collapse: collapse; /*合并单元格的线*/ } td { border: 1px solid deeppink; }
圆角边框（CSS3）
使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"。radius 半径（距离）
语法格式：
border-top-left-radius: 左上角 border-top-right-radius: 右上角 border-bottom-right-radius: 右下角 border-bottom-left-radius: 右下角 border-radius： 左上角 右上角 右下角 左下角; /*4个值*/ border-radius： 左上角 右上/左下 右下角; /*3个值*/ border-radius： 左上/右下 右上/左下; /*2个值*/ border-radius： 四个圆角值相同; /*1个值*/示例
#rcorners { border-radius: 5px 50px; background: #8AC007; width: 200px; height: 150px; }案例：
<style> input#h { border:1px solid #ccc; border-top-left-radius: 20px; border-bottom-left-radius: 20px; } input#hh { border:1px solid #ccc; border-top-right-radius: 20px; border-bottom-right-radius: 20px; margin-left: -6px; } </style> </head> <body> <input id="h" type="text" name="" id="" size="25" placeholder="乡村爱情12 热搜榜"> <input id="hh" type="text"> </body>
边框三角形：
div { border: 100px solid transparent; border-left-color: red; width: 0px; } <div></div> /*width必须要写，因为不写的话块级元素会占满整个100%，hight可以不写，因为div里面没有内容，就撑不起高度，就是边框自己的高度 其他三个边的颜色也可以写背景的颜色，就是障眼法。 */
（4）内边距（padding）
padding属性用于设置内边距。是指边框与内容之间的距离。
padding-top: 上内边距
padding-right: 右内边距
padding-bottom: 下内边距
padding-left: 左内边距
padding: 上右下左内边距
注意：属性后面的数值可变，表示不同的含义。
值的个数 表达意思 1个值 padding: 四周内边距 2个值 padding: 上下、左右内边距 3个值 padding: 上、左右、下内边距 4个值 padding: 上、下、左、右内边距 课堂案例：新浪导航
（5）外边距（margin）
margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容。
margin-top: 上外边距
margin-right: 右外边距
margin-bottom: 下外边距
margin-left: 左外边距
margin: 上 右 下 左
注意：行内元素可以设置水平方向的内外边距，但不能设置垂直方向的内外边距。
虽然垂直方向的内边距padding可以设置，会有效果，但是只要下面有元素，他就会占据他的位置，就不认同他设置的padding-bottom，所以一般说行内元素可以设置水平的内外边距，但是不能设置垂直的内外边距。
外边距实现盒子居中
可以让一个盒子实现水平居中，需要满足两个条件：
1、必须是块级元素。
2、盒子必须指定了宽度。
只需要给左右的外边距都设置为auto，就可以使块级元素水平居中。margin: 0 auto;
理解：首先如果想要设置居中,width是必须设置的,如果不设置width元素,那么块级元素一定会占据100%的宽度
margin: 0 auto的auto是指平分剩余空间, 比如宽度为200, 父元素的宽度为1000, 那么auto就是指水平方向平分剩余的宽度 (1000-200/2)
拓展：
如果只有一侧设置了auto会产生什么效果？如果只设置margin-left:auto；会让子元素靠着父元素的右侧，因为父元素剩余空间都分给了左侧，而右侧的父元素剩余空间，分配为0 所以靠右
垂直方向不可以margin: auto 0；因为在垂直方向上，块级元素不会自动扩充，它的外部尺寸没有自动充满父元素，也没有剩余空间可说。所以margin：auto 0；不能实现垂直居中。
实际工作中常用这种方式来进行网页布局，示例如下：
.header { width: 960px; margin: 0 auto; /*表示上下外边距为0，左右水平居中*/ }
清除元素的默认内外边距
为了更方便地控制网页中的元素，制作网页时，可以使用如下代码清除元素默认的内外边距：
* { padding: 0; /*清除内边距*/ margin: 0; /*清除外边距*/ }需要注意的是：行内元素只有左右内外边距，是没有上下内外边距的。
文字水平居中 和 盒子水平居中
盒子居中使用margin，给定左右边距为auto即可。
文字居中使用：text-align: center;
文字垂直居中：单行文本 line-height， 多行文本padding
示例：
<div id="box1"> 这是一个div盒子 </div> div { width: 300px; height: 200px; border: 1px solid deeppink; margin: 0 auto; /*盒子居中使用 margin */ text-align: center; /*文本居中使用 text-align*/ }
（6）外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。这个问题只有垂直方向有，水平没有
相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直距离不是margin-bottom与margin-top之和，而是取两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称为外边距塌陷）。
解决方案：
想办法只给一个盒子加外边距
BFC规范
嵌套块元素垂直外边距的合并
当两个块级元素嵌套时，如果内部的块设置有margin-top属性，而且父元素没有下边解决方法所述的特征，那么内部块的margin-top属性会绑架父元素（即将margin-top传递凌驾给了父元素）。注：只有margin-top会有传递问题传递给父元素，其他三个方向没有问题。
解决方案：
设置父元素 或者 自身的 display:inline-block; （BFC规范）
设置父元素的 border:1px solid #fff;(>0) ；或者 border-top(一定要包含border-top方向) 此方法如果不想影响元素高度 加上box-sizing:border-box;
设置父元素的 padding:1px;(>0); 或者padding-top (一定要包含padding-top方向) 此方法如果不想影响元素高度 加上box-sizeing:border-box;
给父元素设置 overflow:hidden; （BFC规范）
给父元素或者自身设置 position:absolute;（BFC规范）
设置父元素非空，填充一定的内容。（在父元素与当前子元素之间 加点具有高度的元素或内容分开父元素与当前子元素）
这个现象并不是bug，而是有理论依据的：《on having layout》
hasLayout 会影响一个盒子和其子孙的边距重叠。根据规范，一个盒子如果没有上补白和上边框，那么它的上边距应该和其文档流中的第一个孩子元素的上边距重叠。
但值得一提的是，只有在FF和Chrome下才会出现这种margin-top绑架父节点的情况，在IE6 IE7中均显示正常，但这恰恰说明了他们是不符合规范的，而FF合Chrome则是严格遵守规范的。
（7）盒子模型布局的稳定性开始学习盒子模型，最大的问题就是分不清内外边距的使用，什么情况下使用内边距，什么情况下使用外边距？
建议如下：
优先使用宽度（width），其次使用内边距（padding），最后使用外边距（margin） width > padding > margin原因：
1.margin会有外边距合并，还有在ie6下margin容易出bug。
2.padding会影响盒子大小，需要进行加减计算。box-sizing:border-box;
3.width没有问题。我们经常用宽度剩余法 、 高度剩余法来做
（8）盒子阴影
语法格式：
box-shadow: 水平位置 垂直位置 模糊距离 阴影尺寸扩大/缩小阴影 阴影颜色 内/外阴影;
值 描述 h-shadow 必需。水平阴影的位置，允许负值 v-shadow 必需。垂直阴影的位置，允许负值 blur 可选。模糊距离 值越大，阴影越模糊 spread 可选。阴影的尺寸 阴影外延出去的长度，类似于border 不同于border，box-shadow并不占据空间 color 可选。阴影的颜色 inset 可选。将外部阴影（outset）改为内部阴影，默认为outset，所以不用写 阴影开始时，是盒子本身的大小 如果不设置水平、垂直位置我们看不出来因为被盒子本身挡住了，如下代码：
<div></div> <style> div { width: 100px; height: 100px; background: #0C58A7; box-shadow: 100px 100px 0px 100px #000; } </style> 这个时候除了距离什么也没设置，可以看到本身的阴影大小就是盒子的宽高度 h-shadow：正值时，阴影往右，负值阴影往左 v-shadow：正值时，阴影往下，负值阴影往上示例：
div { width: 200px; height: 200px; border: 2px solid deeppink; box-shadow: 5px 5px 3px 4px grey; } /*小米盒子阴影示例*/ div { width: 200px; height: 200px; box-shadow: 0 15px 30px rgba(0,0,0,.1); transform: translate3d(0,-2px,0); }
box-shadow 一般用以下的方法
<style> div { width: 200px; height: 200px; background-color: aquamarine; } div:hover { box-shadow: 0 15px 30px rgba(32,43,46,.5); } </style> </head> <body> <div>sdah</div> </body>
（9）综合案例
* {
margin: 0;
padding: 0;
}
.biankuang {
width: 400px;
height: 440px;
background-color: #fff;
border: 1px solid #ccc;
border-top: 5px solid coral;
margin: 20px 50px;
}
.text-top {
font-size: large;
font-family: 'Courier New', Courier, monospace;
padding-left: 10px;
line-height: 36px;
border-bottom: 1px solid #ccc;
}
.text-middle {
padding-top: 10px;
padding-left: 10px;
border-bottom: 1px solid #ccc;
}
li {
line-height: 36px;
color: #B0B0B0;
font-family: 'Helvetica Neue';
font-size: 16px;
}
.text-bottom {
padding-left: 10px;
}
li::marker {
list-style-type: square;
color: #FF8500;
}
</style>
</head>
<body>
<div class="biankuang">
<div class="text-top">搜索趣图 </div>
<div class="text-middle">
<img src="./img/2.png" alt="">
<li>真正的美食 让你欲罢不能的昏过去</li>
</div>
<div class="text-bottom">
<li>“超级地球” 强重力使外星人无法进入太空</li>
<li>美冲浪者翻滚海浪中抓拍内部绝美景象</li>
</div>
</div>
扫一扫
1400
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
