HTML5自学笔记

一、盒模型

• css将页面中所有元素设置为了一个矩形的盒子。
• 将元素设置为矩形盒子后，对页面的布局就是将不同的盒子摆放到不同的位置。
• 每一个盒子都由以下几部分组成：
  • 内容区（content）
  • 内边距（padding）
  • 边框（boder）
  • 外边距（margin）
• 内容区：content ：元素中的所有子元素和文本内容都在内容区中排列。内容区的大小由width和height两个属性设置。
  • width：设置content 宽度
  • height：设置 content 高度
• 边框（border）: 边框属于盒子的边缘，边框里面属于盒子的内容，边框外面属于盒子的外部。要设置边框，需要至少设置三个样式： 边框的大小会影响盒子的大小。（盒子大小=content大小+边框大小）
  • 边框宽度（border-width）：用来指定box4个方向的宽度
  • 边框颜色(border-color）
  • 边框样式(border-style）
• 边框属性：
  • 边框宽度（border-width）：一般会有一个默认值。设置值说明：
    • 同时设置4个值代表顺序：上边框、右边框、下边框、左边框
    • 同时设置3个值代表顺序：上、左右、下
    • 同时设置2个值代表顺序：上下、左右
    • 同时设置1个值代表顺序：4个边框相同宽。
  • border-top-width、border-left-width、：用来单独指定某一个边框宽度。
  • 边框颜色(border-color）、边框样式(border-style） 规则同border-width 相同。
  • 边框样式(border-style）： 
    • solid:实线
    • dotted：点线
    • dashed：虚线
    • double：双线
  • border 简写属性：没有顺序限制。如果只单独设置时使用（border-top、border-bottom、border-right、border-left）
    • border： solide 10px red;
• padding：内容区和边框之间的距离。（内边距设置会影响到box大小，背景颜色会延伸到内边距中）
  • padding-top、
  • padding-bottom、
  • padding-right、
  • padding-left
• margin:外边距不会影响盒子的大小，会影响盒子的位置。一共四个方向的外边距“
  • margin-top：上外边距，设置一个正值，元素会向下移动。
  • margin-bottom:下外边距，设置一个正值，其下面的元素会向下移动
  • margin-right：右外边距，默认情况下，设置了也不起作用。
  • margin-left：左外边距，设置一个正值，元素会向右移动
  • 元素在页面中是按照自左向右的顺序排列的。所以默认情况下，我们设置了左和上边距，会移动元素本身，而设置了下和右边距会移动其他元素。
  • margin如果设置为负值，则会向相反方向移动。
  • margin 会影响元素占用网页实际空间的大小。
• 元素水平布局：
  • 元素在其父元素中水平防线的位置由以下及格属性共同决定。
    • margin-left:
    • border-left:
    • width:
    • padding-left:
    • border-right:
    • margin-right:
  • 一个元素在其父亲元素中，水平布局必须满足以下等式：
    • 子元素（margin-left+border-left+width+padding-left+border-right+margin-right）= 父元素中内容区域宽度（content 的width）
    • 如果相加结果使等式不成立，则浏览器会自动调整使等式相等。
      • 如果所有值没有auto时，则浏览器会自动调整margin-right 使等式满足。
      • 这7个值中有3个值可以设置为auto，width、margin-left 、margin-right 。
        • 如果某个值为auto，则会自动调整设置了auto的那个值以使等式成立。
        • width的值未设置时默认是auto。
        • 如果把width和一个外边距同时设置为auto，则宽对值会被浏览器调整为最大，设置为auto的外边距会被浏览器调整为0.
        • 如果width、margin-left 、margin-right  三个值都被设置为了auto，则外边距都是0，宽度最大。
        • 如果把两个外边距设置为auto，宽度为固定值，则浏览器会把外边距设置为相同的值。经常使用这个特点使子元素在父元素中居中。
• 元素垂直方向布局：
  • 默认情况下，父元素若未设置高度的话则被子元素内容撑开。
  • 子元素是在父元素的content区中排列的，如果子元素大小大于父元素，则会溢出（超出父元素），需要在父元素中使用overfloat设置子元素的溢出。对应属性：
    • overfloat:visible   默认值，子元素会在父元素中溢出，在父元素外面显示。
    • overfloat:hidden   溢出部分将会被减去，不会显示。
    • overfloat:scroll   在父元素中生成两个（垂直、水平）滚动条，通过在父元素中拖动滚动条查看完整内容。
    • overfloat:auto    根据需要在父元素中生滚动条，通过在父元素中拖动滚动条查看完整内容。
    • overfloat-x、overfloat-y
• 垂直外边距重叠：相邻的垂直方向的外边距会发生重叠现象。
  • 兄弟元素：
    • 兄弟元素的相邻垂直的外边距会取两者之间的较大值（两者都是正值）。
    • 特殊情况，如果相邻外边距一正一负，则取两者的和。
    • 特殊情况，如果相邻外边距都是负值，则取绝对值较大的。
    • 兄弟元素之间的外边距的重叠对发开有利，不需要处理。
  • 父子元素
    • 父子元素间的相邻外边距，子元素的会传递给父元素。（上外边距）​​​​​​​
    • 父子元素外边距的重叠会影响整体布局，需要解决。（临时方案）
      • （临时方案1）设置​​​​​​​border-top：
      • （临时方案2）父元素中使用padding：
• 行内元素的盒模型：
  • ​​​​​​​行内元素不支持设置宽度和高度。
  • 行内元素可以设置padding，但是垂直方向的padding不 会影响页面的布局。
  • 行内元素可以设置border，但是垂直方向的border不 会影响页面的布局。
  • 行内元素可以设置margin，但是垂直方向的margin不 会影响页面的布局。
  • display：用来设置元素展示的类型。
    • ​​​​​​​inline：将元素设置为行内元素。
    • block：将元素设置块元素。
    • inline-block:将元素设置为行内块。
      • 行内块：既可以设置宽度和高度又不会独占一行。
    • table：将元素设置为一个表格。
    • none：元素不再页面中显示
  • visibility：
    • visible:默认值，元素在页面中正常显示
    • hidden：元素在页面隐藏不限时，但是依然占据页面的位置。

二、默认样式

      通常情况下，浏览器都会为元素设置一个默认样式，若元素未设置css样式，则浏览器会使用默认样式。默认样式的存在会影响页面的布局，通常开发时需要去除掉浏览器的默认样式（pc端页面）。

• 简单去除方法： * { margin:0; padding 0}
• 方法二：引入css 文件（https://meyerweb.com/eric/tools/css/reset/），清除对应元素的默认样式。
  • reset.css直接去除所有默认样式表。
  • nomalize.css 统一页面中默认样式表。

三、布局练习

• 要让一个元素在父元素中垂直居中，只需将父元素的line-height设置和父元素的height一样的值即可。
• style中的css样式，最下面的比上面的优先级高。
  • 例如： ul {font-size:15px;}  ul li{font-size:13px}  则列表item中的字体为13px

四、盒大小