盒子模型

课时104 边框属性上(掌握)
课时105 边框属性下(掌握)
课时106 边框练习(理解)
课时107 内边距属性(掌握)
课时108 外边距属性(掌握)
课时109 外边距合并现象(掌握)
课时110 盒子模型(理解)
课时111 盒子宽度和高度(理解)
课时112 盒子宽度和高度练习1(理解)
课时113 盒子宽度和高度练习2(理解)
课时114 盒子box-sizing属性(理解)
课时115 盒子模型练习3(理解)
课时116 盒子居中和内容居中(理解)
课时117 清空默认边距(掌握)
课时118 行高和字号(掌握)
课时119 还原字体和字号(掌握)
课时120 文字界面(理解)

边框属性

什么是边框

环绕在标签宽度和高度周围的线条

边框属性格式

方向连写(同时设置四条边的边框)
- border:边框的宽度边框的样式边框的颜色;
- 注意点：
  - 连写格式中颜色可以省略，默认黑色
  - 连写格式中样式不可省略，否则看不到
  - 连写格式中宽度可以省略，省略后可以看到边框
方向连写(分别设置四条边的边框)
- border-top:边框的宽度边框的样式边框的颜色;
- border-right:边框的宽度边框的样式边框的颜色;
- border-bottom:边框的宽度边框的样式边框的颜色;
- border-left:边框的宽度边框的样式边框的颜色;
- 注意点：
  - 连写格式中颜色可以省略，默认黑色
  - 连写格式中样式不可省略，否则看不到
  - 连写格式中宽度可以省略，省略后可以看到边框
要素连写(分别设置四条边的边框)
border-width:上右下左;
border-style:上右下左;
border-color:上右下左;
- 注意点：
  - 这三个属性的取值是按照顺时针赋值的，按照上右下左赋值的，并不是上下左右
  - 这三个属性的取值省略时的规律：
    - 上右下左> 上右下 —— 左边的取值和右边一样
    - 上右下左> 上右 —— 左边的取值和右边一样，下边的取值和上边一样
    - 上右下左> 上 —— 右下左的取值和上边一样
方向加要素非连写(单独设置四条边的边框)
- border-top-width:10px;
- border-top-style:double;
- border-top-color: #000;
- 等等等等
- 企开中基本没用的。。。

内边距属性

边框到内容之间的距离就是内边距

格式

连写
- padding:上右下左；
- 用法同border
非连写
- padding-top: ;
- padding-left: ;
- padding-bottom: ;
- padding-right: ;
- 注意点：
  - 设置内边距后，标签占有的高度和宽度会跟着一块变
  - 内边距也会有背景颜色

外边距属性

标签和标签之间的距离

格式

非连写
- margin-top: ;
- margin-left: ;
- margin-right: ;
- margin-bottom: ;
连写
- margin:上右下左;
- 注意点：
  - 这三个属性的取值是按照顺时针赋值的，按照上右下左赋值的，并不是上下左右
  - 这三个属性的取值省略时的规律：
    - 上右下左> 上右下 —— 左边的取值和右边一样
    - 上右下左> 上右 —— 左边的取值和右边一样，下边的取值和上边一样
    - 上右下左> 上 —— 右下左的取值和上边一样

注意点

外边距那一部分是没有背景颜色的

外边距合并现象(外边距塌陷现象)

在默认布局的垂直方向上，默认情况下外边距是不会叠加的，谁的外边距大，就听谁的.水平方向就不会发生塌陷，就垂直有。

CSS盒子模型

仅仅是一个形象的比喻，在HTML中所有标签都是一个盒子

结论

在HTML所有标签都可以设置：
- 宽度/高度 —— 指定可以存放内容的区域
- 内边距
- 外边距
- 边框

盒子的宽度和高度

1.内容的宽度和高度

通过标签的width和height设置的宽度和高度

2.元素的宽度和高度

宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框
高度同理可得

3.元素空间的宽度和高度

宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距
高度同理可得

盒子box-sizing属性

css3新增了box-sizing属性，这个属性可以保证我们给盒子新增padding和border之后黑子元素的宽度和高度不变

工作原理

增加padding和border之后，要想保障盒子元素的宽高不变，就要减去一部分内容的宽高

取值

content-box
元素的宽高 = 边框 + 内边距 + 内容的宽高
border-box
元素的宽高就会恒等于width

盒子模型练习

注意点

如果两个盒子是嵌套关系，那么设置里面一个盒子顶部的margin，外面的盒子也会被顶下来
若不想被顶下来，就可以给外面的盒子添加一个边框属性
bd —— 加边框的快捷键
企开中，一般情况下，若需要控制嵌套关系盒子之间距离的话，要首先考虑padding，其次在考虑margin，因为后者本质上是用于控制兄弟之间关系的，padding才是控制父子之间关系的

margin: 0 auto;

在一个嵌套关系的盒子中，我们可以用

margin:0 auto;

的方式让里面的盒子在大盒子里面水平居中

注意

他只对水平方向有效，垂直方向无效，这是固定写法
垂直方向居中只能通过像素控制

盒子居中和内容居中

text-align:center和margin: 0 auto区别

前者的作用是设置盒子中储存的问题和图片水平居中
后者的作用是让盒子水平居中

清空默认边距

为啥要清空默认内外边距

企开中为了更好的控制盒子的宽高和计算盒子宽高，第一步需要做的就是清空默认的边距

怎样清空内外标签

* {
    margin: 0;
    padding: 0;
}

注意点

通配符选择器会遍历当前界面中的所有标签，所以性能不好，我们可以去百度个css reset自己加上

/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

行高和字号

什么是行高

所有的行都有自己的行高

注意点

行高和盒子的高不是一个概念
- line-height: ;设置行高
- height设置盒子高

规律

文字在行高中默认是垂直居中的
企开中，我们经常把盒子的高度和行高设置的一样，这样就可以保证一行文字在盒子里是垂直居中的。也就是说，要想做到把一行文字在盒子里垂直居中显示，就把行高和盒子高度都设置成一样的高度就行
企开中，若一个盒子中有多行文字，2的方法就不好用了，只能用padding来让文字居中

还原字体和字号

自己拿着AI玩就行了

注意点

企开中，盒子里放的是文字的话，我们一般以盒子的左边的内边距为基准，而非右边距，因为右边有误差
因为右边放不下文字的话，就会换行显示，但那个距离还在那，那就是误差
顶部的内边距不是边框到文字的距离，而是边框到文字行高顶部的距离

文字界面

就目前我们的技术，做网页

先初始化格式
从外向内，从上到下便携

H5前端开发学习笔记——0x13盒子模型