CSS-盒子模型 随学笔记
CSS-盒子模型
页面布局要学习三大核心，盒子模型，浮动和定位，学习好盒子模型能非常好的帮助我们布局页面。
1.看透网页布局的本质
网页布局过程：
（1）先准备好像相关的网页元素，网页元素基本都是盒子Box；
（2）利用CSS设置好盒子样式，然后摆放到相应的位置；
（3）往盒子里面装内容。
网页布局的核心本质：就是利用CSS摆盒子。
2.盒子模型（Box Model）的组成
所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，包括：边框(border)、外边距(margin)、内边距(padding)、和实际内容(content)。
一、边框
border可以设置元素的边框。边框有三部分组成：边框宽度（粗细）边框样式 边框颜色
语法：
boder:border-width||border-style||border-color
参数：border-width 定义边框粗细，单位是px
border-style 边框的样式
border-color 边框的颜色
1.设置边框（边框粗细和颜色）
<style> div { width: 300px; height: 200px; /* 边框的粗细 一般情况下都用px*/ border-width: 5px; border-color: pink; } </style> </head> <body> <div></div> </body>
2.style：
参数：none 无边框。与任何指定的border-width值无关
hidden 隐藏边框。IE不支持
dotted 在MAC平台上IE4+与Windows和UNIX平台上IE55+为点线。否则为实线
dashed 在MAC平台上IE4+与Windows和UNIX平台上IE55+为虚线。否则为实线
solid 实线边框
double 双实线边框
groove 根据border-color的值画3D凹槽
ridge 根据border-color的值画菱形边框
inset 根据border-color的值画3D凹边
outset 根据border-color的值画3D凸边
<style> div { width: 300px; height: 200px; /* 边框的粗细 一般情况下都用px*/ border-width: 5px; /* border-style: solid; 实线*/ /* border-style: dotted; 点线*/ border-style: dashed; /* 虚线 */ border-color: pink; } </style> </head> <body> <div></div> </body>
3.边框的简写
<style> /* 边框简写 没有顺序*/ ul { border:1px solid red; } </style> </head> <body> <ul></ul> <ol></ol> </body>
4.边框分开写法
<style> /* 边框分开写法 */ ol { border-top: 5px solid pink; border-bottom: 5px dashed green; border-left: 5px dashed green; border-right: 5px dashed green; /* 等效果 利用了层叠性 只是层叠了上边框*/ /* border: 5px solid green; border-top:5px solid pink; */ } </style> </head> <body> <ol></ol> </body>
5.表格细线边框
border-collapse属性控制浏览器绘制表格边框的方式。他控制相邻单元格的边框。
语法：border-collapse:collapse;
注意：collapse有折叠的意思；
border-collapse:collapse;表示相邻边框合并在一起。
<style> table, th, td{ border: 1px solid black; border-collapse: collapse; font-size: 14px; text-align: center; } </style> </head> <body> <table align="center" cellpadding="2" cellspacing="0" > <thead> <tr> <th>排名</th> <th>关键词</th> <th>趋势</th> <th>今日搜索</th> <th>最近七日</th> <th>相关链接</th> </tr> </thead> <tbody> <tr><td>1</td><td>鬼吹灯</td><td>↓</td><td>345</td><td>123</td><td>12321</td> </tr> </tbody> </body>
6.边框影响盒子的实际大小
边框会额外增加盒子的大小，因此我们有两种方案解决：
1.测量盒子大小的时候，不量边框；
2.如果测量的时候包含了边框，则需要width/height减去边框宽度。
二、内边距
padding属性用于设置内边距，即内容与边框之间的距离
参数：
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距
1.设置内边距
<style> div { width: 200px; height: 200px; background-color: seagreen; padding-left: 5px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; </style> </head> <body> 盒子的内容是content 盒子的内容是content 盒子的内容是content 盒子的内容是content 盒子的内容是content </div> </body>
2.padding属性的简写
padding属性（简写属性）可以有一到四个值：
padding:5px; 一个值，代表上下左右都有5px内边距
padding:5px 10px; 两个值，代表上下内边距是5px，左右内边距是10px
padding:5px 10px 20px; 三个值，代表上内边距是5px，左右内边距都是10px，下内边距20px
padding:5px 10px 20px 30px; 四个值，代表上是5px，右0是10px，下是20px，左是30px
<style> div { width: 200px; height: 200px; background-color: seagreen; /* 简写：padding: 5px; */ /* padding: 5px 10px;*/ /*padding: 5px 10px 20px*/; padding: 5px 10px 20px 30px; } </style>
3.padding影响盒子的实际大小
padding也会影响盒子的实际大小
如果盒子本身已经有了宽度和高度，此时在指定内边距，会撑大盒子。
解决方案：如果保证盒子跟效果图大小一致，则让width/height减去多出来的内边距大小即可 ；
如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。
三、外边距
argin属性用预设值外边距，即控制盒子和盒子之间的距离。
参数：margin-left 左外边距
margin-right 右外边距
margin-top 上外边距
margin-bottom 下外边距
1.设置外边距
<style> div { width: 200px; height: 200px; background-color: pink; } .one { margin-bottom: 20px; /* margin-top: 20px; 与上面效果等价*/ } </style> </head> <body> <div class="one">1</div> <div class="two">2</div> </body>
2.margin的简写
margin简写方式与padding一致：
margin:5px; 一个值，代表上下左右都有5px外边距
margin:5px 10px; 两个值，代表上下外边距是5px，左右外边距是10px
margin:5px 10px 20px; 三个值，代表上外边距是5px，左右外边距都是10px，下外边距20px
margin:5px 10px 20px 30px; 四个值，代表上是5px，右0是10px，下是20px，左是30px
3.外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
（1）相邻块元素垂直外边距的合并
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下边距margin-bottom，下面的元素有上边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。
解决方案：尽量只给一个盒子添加margin值。
（2）嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素上也有外边距，此时父元素会塌陷较大的外边距值。
解决方案：
1.可以为父元素定义上边框；
2.可以为父元素定义上内边距；
3.可以为父元素添加overflow:hidden;
<style> .father { width: 300px; height: 300px; background-color: pink; margin-top: 50px; /* border: 1px solid transparent; */ /* padding: 1px; */ overflow: hidden; } .son { width: 100px; height: 100px; background-color: royalblue; margin-top: 100px; } </style> </head> <body> <div class="father"></div> <div class="son"></div> </body>
4.外边距的应用
外边距可以让块级盒子水平居中，但是必须满足条件：
（1） 盒子必须指定了宽度（width）；
（2）盒子左右的外边距都设置为auto。
注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:center即可。
5.清除内外边距
网页元素有很多都带有默认的内外边距，而且不同的浏览器也不一致，因此我们在布局前，首先要清除下网页元素的内外边距。
注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。
<style> /* 这句话是我们css的第一行代码 */ * { margin: 0;/*清除外边距*/ padding:0;/*清除内边距*/ } </style> </head> <body> 123 <ul> <li>abcd</li> </ul> <span>行内元素尽量只设置左右的内外边距</span> </body>
浙公网安备 33010602011771号