盒子模型，溢出属性，ps基本操作元素显示类型

盒子模型

• content为div中的文本内容
• padding为边框与文本内容之间的距离（内边距），会增大盒子的占用位置
• border为外边框
• margin为外边框之外占用的面积

内边距

padding（内边距）：1个值，四个方向都一样
          2个值，上下，左右
          3个值上，左右，下
          4个值，上，右，下，左
          单一方向的设置：padding-right，padding-left...

注：背景色可以蔓延到内边距
  padding支持0，但不支持负数
  一个盒子的观测大小为content+padding+border，div{width，height}为content的大小

边框

【1】border:10px solid red
【2】样式：solid实线；double双线；dashed虚线；dotted点状线
【3】背景色也能蔓延到边框
【4】分方向应用：border-top;border-bottom...
【5】border可拆分为border-width；border-style；border-color
【6】border拆分的三个属性都可以实现上，右， 下，左四个方向应用

外边距

• margin支持分方向应用
• 背景色不可以蔓延到外边距
• 支持0和负值
• 屏幕居中margin：0 auto；横向中：auto

特性问题

1.兄弟关系，当两个等级相同的盒子时：垂直方向，外边距取最大值；水平方向，外边距会合并处理
2.父子关系，给子元素加边框时,不会出现边框效果。解决方案：给父盒子加内边距（注意盒子大小的改变）；给父盒子设置边框，transparent（透明颜色）；给父盒子或子盒子添加浮动；父盒子添加overflow：hidden

ps基本操作

溢出属性

pre标签：与格式化文本-保留空格，回车，不换行
pre-wrap:显示空格，回车，换行
pre-line:显示回车，不显示空格，换行
nowrap:不换行

元素显示类型

• 块元素：display：block；display:list-item
• p标签中只能放文本，不能放块元素
• 行内元素：display：inline-block
• 行内元素只能设置左右边距，不能设置上下边距
• 块元素可以设置宽高，行内元素不能设置宽高
• 行内块元素支持上下边距和左右边距

元素类型互相转换

• img可以附加display-block来缩减图片与文本之间的距离
• display-none隐藏属性
• 通过悬停来显示隐藏属性：例div：hover ul{display：block}