宽高

  1. width:设置元素的宽度（块元素和行内块元素）
    px：固定单位
    百分比：是占父元素的百分比
  2. height：设置元素的高度（块元素和行内块元素）
    px：固定单位
    auto：不设置高度的情况下高度是内容撑起来的

边框

  1. border：border-width border-style border-color属性含有三个值，每个值使用空格隔开,表示四条边的边框
    border-width：边框的宽 px
    border-style：边框的样式
    solid实线 dotted点状线 dashed虚线 double双实线（想要设置双实线必须边框的宽度大于3px）
    border-color：边框的颜色

  2. 拆分属性
    1）方向拆分
    border-top:上边框，同样含有三个值（border-width border-style border-color）
    border-left:左边框
    border-right：右边框
    border-bottom：下边框
    2）三个属性值拆分（只有一个属性值）
    border-width：边框的宽 px
    border-style：边框的样式
    solid实线 dotted点状线 dashed虚线 double双实线（想要设置双实线必须边框的宽度大于3px）
    border-color：边框的颜色

  3. border属性制作三角形：

  1. div{
  2.     width:0;
  3.     height:0;
  4.     border:100px solid transparent;
  5.     border-top-color:red;
  6. }

padding

  1. 设置盒子的内补白
    一个值：四个方向都有填充
    两个值：上下 左右
    三个值：上 左右 下
    四个值：上 右 下 左
  2. 特点
  • 如果盒子有宽度和高度，再加padding值，则盒子一定会变大
  • 如果盒子没有设置宽度，且默认宽度等于是父亲的宽度，则这个盒子，加padding并不影响盒子的宽度,只影响高度。
  • 行内元素不支持上下的padding（能撑开高度但是不占位置)
  1. 拆分
    方向：
    padding-top:上填充
    padding-right:右填充
    padding-bottom：下填充
    padding-left：左填充

margin

  1. 设置盒子的外边距
    一个值：四个方向
    两个值：上下 左右
    三个值：上 左右 下
    四个值：上 右 下 左
  2. 特点
  • 行内元素不支持上下的margin
  1. 拆分
    方向：
    margin-top:上填充
    margin-right:右填充
    margin-bottom：下填充
    margin-left：左填充

版心

安全宽度：指的是大部分用户的屏幕可以看到的区域，没有规范的值，取决于我们应该去适配多少用户的电脑，不同的网站选择的安全也不是一样的，具体用多少看设计师的
版心核心代码：

  1. .wrap{
  2.     width:版心宽度;
  3.     margin:0 auto;
  4. }

margin

  1. 重叠问题
    当两个相邻的块元素同时拥有一个相反的margin值时（上面的元素有一个margin-bottom值，下面的元素有一个margin-top值），两个margin值会产生重叠，会取其中最大的margin值，这叫margin的重叠问题
    解决方法：尽量给块元素设置同一方向的margin值

  2. 穿透问题
    在普通流中，当给子元素设置一个margin-top值时，福元素会随着子元素一块移动，这就叫margin的穿透问题
    解决办法：

  • 给父元素添加一个边框
  • 给父元素添加一个属性overflow:hidden
  • 给父元素添加一个上内边距padding-top值，然后使父元素的高减去padding-top的值（一般推荐使用这种方法）

overflow:解决文本溢出
hidden：溢出的部分截断隐藏
scroll：不管文本有没有溢出都会在右边和下面产生一个滚动条
auto：只有在某个方向上溢出的时候才会在哪个方向产生一个滚动条

标准盒模型和IE盒模型

标准盒模型：
实际的宽：设置的width+左边的padding值+右边的padding值+左边的border值+右边的border值
实际的高：设置的height+上面的padding值+下面的padding值+上面的border值+下面的border值

可用的内容区域：设置的width和height区域

IE盒模型：
实际的宽：设置的宽度width
实际的高度：设置的高度height

可用的内容区域：设置的宽高-padding_2-border_2

box-sizing：
content-box：标准盒模型
border-box：ie盒模型

背景

  1. background-color背景颜色，颜色三中取值
  2. background-image:设置背景图片
    url()引入背景图片的路径
  3. background-repeat设置背景图片的平铺方式
    repeat:平铺(默认属性)，水平和垂直方向都平铺
    no-repeat：不平铺
    repeat-x：在水平方向上平铺
    repeat-y：在垂直方向上平铺
  4. background-position:设置背景图片的位置
    两个取值：（背景图片默认位置在图片的左上角也就是0,0）
    第一个：代表水平方向上的位置
    第二个：代表垂直方向上的位置

固定值：正值是右下方向，负值是左上方向
关键字：
水平：left center right
垂直：top center bottom

  1. background-attachment:用来设置背景相对于窗口的的固定定位
    fixed设置这个属性使背景图片相对于浏览器窗口进行定位，此时添加background-attachment: fixed;的元素相当于一个视口，只有当这个元素到达设置背景图片的位置的时候才能看到图片

  2. background：background-color background-image background-repeat background-position background-attachment

精灵图

  1. 打开ps建立一个画布（ctrl+n），新建之后，需要定义画布的大小，单位需要改为px，定义画布的宽高，背景一定要选择透明，然后点击确定
  2. 截取想要的精灵图（复制psd文件里面的图层）放在我们建立的画布中，图与图之间要有一定的间距，这个间距不能太小，也不能太大，最后保存图片为png格式放在项目文件夹下
  3. 在需要使用精灵图的位置建立一个专门存放精灵图标的一个空间，通过background-image引入精灵图，然后通过background-position定位想要的精灵图的位置即可