- 写在前面:参考哔哩哔哩黑马程序员pink老师教程
- 地址:https://www.bilibili.com/video/BV14J4114768?t=328&p=26
目录
扫描二维码关注公众号,回复: 11844986 查看本文章
盒子模型(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>