第一章

盒子模型概念

• 用来存放网页中的各种元素。

• 网页设计中内容，如文字、图片等元素，都是盒子（div嵌套）

  
  
  image.png

• 宽高属性
  宽度：width:长度值|百分比|auto
  最大宽度：max-width：长度值|百分比|auto
  最小宽度：min-width：长度值|百分比|auto

• 高度属性：
  height：长度值|百分比|auto
  最大高度：max-height：长度值|百分比|auto
  最小高度：min-height：长度值|百分比|auto

      说明：块级元素和替换元素的内容可以设置宽度和高度。
    行内元素，无法设置宽和高，只能由元素内的内容撑开
  
  1、  min-width/min-height属性值会对元素的宽高设置一个最小限制，元素如果设置宽高，可以比这个最小限制大，但不能比其小；
  
  2、  当一个元素同时设置 max-height和min-height，max-height值小于min-height值，最大高度自动转换成最小高度的值，所以显示min-height值。
  

可设置宽高的元素：

• 块级元素 ：···<p>、<div>、<h1>~<h6>、<ul>等。
• 替换元素
  浏览器根据其标签的元素与属性来判断显示的具体内容
  <img>、<input>、<textarea>等。

image.png

边框属性

• 设置元素边框宽度
  border-width：thin | medium | thick|长度值
  注：thin：表示一个窄的边框，medium：表示一个中等边框，thick：表示一个厚的边框
• 设置元素边框颜色
  border-color：颜色 | transparent
  注：transparent：透明
• 设置元素边框样式
  border-style：值
  四个不同方面来表示（上、下、左、右）
  表示：

1. border-[left | right | top | bottom]-width
   2)border-[left | right | top | bottom]-color
   3)border-[left | right | top | bottom]-style
   例：p{boder-left-width：10px；border-left-color:green;border-left-style:solid;}
   简写：
   同一边框：border：宽度 样式 颜色
   不同方面
   border-top：宽度 样式 颜色
   border-left：宽度 样式 颜色
   border-right：宽度 样式 颜色
   border-bottom：宽度 样式 颜色

        1、double定义双线边框
        2、dotted定义点状边框
        3、dashed定义虚线边框
        4、solid定义实线边框
   

padding属性

padding：

• 元素的内容与边框之间的距离（内边距或填充），分四个方向（上，右，下，左）

    1、padding-top：长度值 | 百分比
    2、padding-right：长度值 | 百分比
    3、padding-bottom：长度值 | 百分比
    4、padding-left：长度值 | 百分比
  

• 注：值不能是负值

• 盒子在网页中占的空间。不单单与width和height属性有关，还与padding有关
  内边距属性缩写
  1.padding：值1；
  2.padding：值1 值2；（上下=值1，左右=值2）
  3.padding：值1 值2 值3 （上=值1 左右=值2 下=值3）
  4.padding：值1 值2 值3 值4（上=值1 右=值2 下=值3 左=值4）

第四章

display

image.png

• display：inline｜block｜inline-block｜none

    1、inline，元素将显示为内联元素，元素前后没有换行符
    2、block，元素将显示为块级元素，元素前后将带有换行符
    3、内联（行内）元素之间的缝隙如何解决
  
  1）标签之间不添加任何换行或空格
  2）给它一个父元素，设置父元素的style：font-size:0px，并给子元素单独设置字体大小
  行内元素中，padding可以显示，margin显示左右边距，上下边距不显示。
  4、inline-block，行内块元素，元素呈现为inline，具有block相应特性
  5、none，此元素不会被显示