- 写在前面：参考哔哩哔哩黑马程序员pink老师教程
- 地址：https://www.bilibili.com/video/BV14J4114768?t=328&p=26
目录
盒子模型（CSS重点）
- 纲要：
- 网页布局的本质：
- 首先利用CSS设置好盒子的大小，然后摆放盒子的位置
- 最后把网页元素比如文字图片等等，放入盒子里面
- 以上两步 就是网页布局的本质
盒子模型（Box Model）
- 所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
- 总结：
- 盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。
- 盒子里面的文字和图片等元素是 内容区域
- 盒子的厚度 我们成为 盒子的边框
- 盒子内容与边框的距离是内边距（类似单元格的 cellpadding)
- 盒子与盒子之间的距离是外边距（类似单元格的 cellspacing）
- 标准盒子模型
盒子边框（border）
border : border-width || border-style || border-color
属性 作用 border-width 定义边框粗细，单位是px border-style 边框的样式：
none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线
border-color 边框颜色
边框综合设置
border : border-width || border-style || border-color
- 例：
<style> div { width: 200px; height: 200px; /*边框的宽度 实际开发中都是跟 px 单位*/ /*border-width: 5px;*/ /*实线的*/ /*border-style: solid;*/ /*虚线的 dashed 大师的 说话都很虚*/ /*border-style: dashed;*/ /*点线*/ /*border-style: dotted;*/ /*border-color: pink;*/ /*边框的综合性写法 没有顺序*/ /*边框粗细 边框 样式 边框颜色*/ border: 5px dotted pink; } </style>
盒子边框写法总结表
- 很多情况下，我们不需要指定4个边框，我们是可以单独给4个边框分别指定的。
上边框 下边框 左边框 右边框 border-top-style:样式; border-bottom-style:样式; border-left-style:样式; border-right-style:样式; border-top-width:宽度; border- bottom-width:宽度; border-left-width:宽度; border-right-width:宽度; border-top-color:颜色; border- bottom-color:颜色; border-left-color:颜色; border-right-color:颜色; border-top:宽度 样式 颜色; border-bottom:宽度 样式 颜色; border-left:宽度 样式 颜色; border-right:宽度 样式 颜色;
- 案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 200px; height: 400px; /*上边框写法*/ border-top: 2px solid red; border-left: 1px solid green; border-right: 1px solid blue; border-bottom: 1px solid pink; } input { /*border-top: none; border-left: none; border-right: none; border-bottom: 1px dashed red;*/ /*四个边框都去掉 先写大的，后写小的*/ border: none; border-bottom: 1px dashed red; } </style> </head> <body> <div> </div> 用户名: <input type="text" > <br> 密码: <input type="text" > </body> </html>
表格的细线边框
- 通过表格的
cellspacing="0",将单元格与单元格之间的距离设置为0，- 但是两个单元格之间的边框会出现重叠，从而使边框变粗
- 通过css属性：
table{ border-collapse:collapse; }
- collapse 单词是合并的意思
- border-collapse:collapse; 表示相邻边框合并在一起
- 案例
<style> table { width: 500px; height: 300px; border: 1px solid red; } td { border: 1px solid red; text-align: center; } table, td { border-collapse: collapse; /*合并相邻边框*/ } </style>
内边距（padding）
内边距：
- padding属性用于设置内边距。 是指 边框与内容之间的距离。
设置
属性 作用 padding-left 左内边距 padding-right 右内边距 padding-top 上内边距 padding-bottom 下内边距
- 当我们给盒子指定padding值之后， 发生了2件事情：
- 内容和边框 有了距离，添加了内边距。
- 盒子会变大了。
- 注意： 后面跟几个数值表示的意思是不一样的。
值的个数 表达意思 1个值 padding：上下左右内边距; 2个值 padding: 上下内边距 左右内边距 ； 3个值 padding：上内边距 左右内边距 下内边距； 4个值 padding: 上内边距 右内边距 下内边距 左内边距 ；
- 案例
div { width: 200px; height: 200px; border: 1px solid red; /*左内边距*/ /*padding-left: 10px; padding-top: 30px;*/ /*padding 简写 复合写法*/ /*padding: 20px; 上下左右 都是 20 内边距*/ /*padding: 10px 20px; 上下10 左右 20 内边距*/ /*padding: 10px 20px 30px; 上 10 左右 20 下 30 内边距*/ padding: 10px 20px 30px 40px; /* 上10 右 20 下 30 左 40 顺时针*/ }
案例： 新浪导航
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>新浪导航栏案例</title> <style> /*清除元素默认的内外边距*/ * { margin: 0; padding: 0; } .nav { height: 41px; background-color: #FCFCFC; /*上边框*/ border-top: 3px solid #FF8500; /*下边框*/ border-bottom: 1px solid #EDEEF0; } .nav a { /*转换为行内块*/ display: inline-block; height: 41px; line-height: 41px; color: #4C4C4C; /*代表 上下是 0 左右是 20 内边距*/ padding: 0 20px; /*background-color: pink;*/ text-decoration: none; font-size: 12px; } .nav a:hover { background-color: #eee; } </style> </head> <body> <div class="nav"> <a href="#">设为首页</a> <a href="#">手机新浪网</a> <a href="#">移动客户端</a> <a href="#">博客</a> <a href="#">微博</a> <a href="#">关注我</a> </div> </body> </html>
内盒尺寸计算（元素实际大小）
宽度: Element Height = content height + padding + border （Height为内容高度） 高度: Element Width = content width + padding + border （Width为内容宽度） 盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框
内边距产生的问题
- 会撑大原来的盒子
- 解决：
- 通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小
- 案例：
<style> div { width: 180px; height: 200px; background-color: pink; /*添加10px 内边距 左右 上下*/ padding: 10px; /*盒子的实际大小 = 内容宽度 高度 + 内边距 + 边框*/ /* = 200 + 20 + 0 = 220 */ /*解决的方法： 内边距一定要给的， 我们只能改变 内容宽度 width 让他减去 多出来的内边距就可以了*/ /*200 - 20 = 180 */ } </style>
padding不影响盒子大小情况
- 如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子。
<style> div { width: 200px; height: 200px; background-color: pink; } p { /*width: 200px;*/ height: 30px; background-color: purple; padding-left: 30px; /*特殊情况， 如果这个盒子啊，没有宽度 则padding 不会撑开盒子*/ } </style>
