背景

  1. background-color背景颜色
  2. background-image：设置背景图片（url（）引入图片的路径）
  • background-image：url（）；
  1. background-repeat设置背景图片的平铺方式：
  • repeat：平铺（默认属性），水平和垂直方向都平铺
  • no-repeat；不平铺
  • repeat-x：在水平方向上平铺
  • repeat-y:在垂直方向上平铺
  1. background-position：设置背景图片的位置
    两个取值（背景图片默认位置在图片的左上角也就是0,0）
    第一个：代表水平方向上的位置
    第二个：代表垂直方向上的位置
  • 固定值：正值是右下方向，负值是左上方向
    关键字:
    水平：left center right
    垂直：top center bottom

版心

  1. 安全宽度：指的是大部分用户可以看到的区域，没有规范的值
  • 版心核心代码：
  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(解决文本溢出)

  • overflow：hidden;（溢出的部分截断隐藏）
  • overflow：scroll;（不管文本有没有溢出都会在右边和下面产生一个滚动条）
  • overflow：auto;(只有在某个方向上溢出的时候才会在那个方向产生一个滚动条)

常见的面试题

  1. 介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
    CSS盒子模型：由四个属性组成的外边距(margin)、内边距(padding)、边界(border)、内容区(width和height);
  • 标准的CSS盒子模型和低端IE CSS盒子模型不同：宽高不一样
  • 标准的css盒子模型宽高就是内容区宽高；
  • 低端IE css盒子模型宽高 内边距﹢边界﹢内容区；
  • （标准的css盒子模型的宽指的是内容区（content）的宽），低端的iecss盒子模型的宽指的是（内容区宽+填充区的宽+边界宽）
  1. 介绍一下精灵图的作用
  • CSS精灵最大的好处在于，当页面加载时，不再加载每一张图片，而是一次加载整个精灵图，从而大大减少了服务器的请求次数，减轻了服务器压力
  1. 在使用display:inline-block时，inline-block元素会有4px左右的空隙，这是什么原因导致的以及解决方法
  • 换行符导致的
  • 解决办法：为父元素中设置font-size: 0，在子元素上重置正确的font-size;(2)为inline-block元素添加样式float:left