html-css学习第五天

• 今天学习了盒子模型，但今天的效率不是很高，就感觉左耳朵进右耳朵出，哎。还是做笔记的时候好好巩固一下。

盒子模型

• 就把盒子想象成生活中的盒子，方方正正，通过css设置模式的属性，许许多多的盒子巧妙的设置和摆放就构成了精美的页面
  ，盒子结构如下：
  

• width , height , 分别设置的是盒子内容区的大小，而不是整个盒子的大小

• 边框的设置 （border）

  • border-top-width , 设置上边框的宽度，同理有bottom，right，left.
  • border-width , 分别设置边框的宽度
    • 写一个参数，上下左右都设置成该参数
    • 写两个参数，上下>>第一个参数，左右–>>第二个参数
    • 写三个参数，上–>>参数一，右–>>参数二，下–>>参数三，左–>>参数四
    • 写四个参数，依次设置的是上右下左边框
  • border-color,设置边框的颜色，跟宽度的形式一样
  • border-style,设置边框的样式，参数有none(默认没有边框),solid(实线)，dotted(点状)，dashed(虚线)，double(双线)
  • border , 同时设置四个边框的设置样式，颜色，宽度，没有顺序要求
  • border-top ， 单独设置上边框，同理还有bottom , left , right

• 内边距（padding）

  • 指的是盒子内容区与盒子边框之间的距离，内边距会影响盒子可见框的大小
  • padding-top , 设置上内边距，同时还有bottom , left , right
  • padding , 同时设置四个内边距，分别是top , right , bottom , left

• 外边距（margin）

  • margin-top , 设置上外边距，同时还有bottom , left , right
  • 内边距还可以设置为auto ，如果只指定左外边距或者右外边距为auto，auto将会将外边距设置为最大值。如果left和right同时设置为auto，左右外边距就会平分最大值。如果指定上下外边距为auto ,则外边距为0.
  • margin , 同时设置四个外边距
  • 垂直外边距的重叠：在网页中相邻的垂直方向的外边距会发生外边距的重叠，就是指兄弟元素之间的相邻边距会取得最大值，而不是求和

• 浏览器会默认给一些盒子设置内边距，外边距。我们可以通过css去掉默认的设置。* { margin: 0; padding: 0;}

• 内联元素是否适应盒子模型

  • 内联元素不能设置width，height
  • 可以设置水平内边距 ，也可以设置垂直方向的内边距（不会影响页面的布局，会覆盖其他盒子）
  • 支持水平外边距（不会重叠，二十求和），不支持垂直外边距

• display , 修改块元素和内联元素

  • inline , 可以将一个元素作为内联元素显示
  • block , 可以将一个元素设置为块元素显示
  • inline-block , 将一个元素转换为行内块元素（即可设置宽高，又不会独占一行）
  • none , 不显示元素，并且也不会占位置

• visibility 可以用来设置元素的隐藏和显示的位置，visible（默认值，会显示），hidden（不显示但会占位）

• overflow , 处理子元素的大小超过了父元素的方法

  • visible ， 默认值，不会对溢出的内容做处理
  • hidden , 溢出的内容残忍修剪掉
  • scroll , 无论是否溢出添加滚动条，通过滑动滚动条查看完整内容
  • auto , 相比scroll智能，如果没有溢出就不会显示出滚动条