前端常见问题(一) - CSS其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的background-im

【CSS】

谈谈盒子模型（标准和IE）
- 标准盒子模型宽 = content宽
- IE盒子模型宽 = content宽 + padding + border
```
div {
    margin: 10px;
    border: 1px solid red;
    padding: 5px;
    width: 50px;
    height: 30px;
    background: pink;
  }
```
- 标准盒子模型：(content的宽 = width = 50px)
- ie盒子模型：(content的宽 = width - padding * 2 - border * 2 = 38px)

position值:

属性值	描述
static	默认值。没有定位，元素出现在正常的流中（top, bottom, left, right，z-index 无效）。
inherit	规定应该从父元素继承 position 属性的值。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 left 位置添加 20 像素。
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。(通过 top、right、bottom、left、z-index定位)
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。(通过 top、right、bottom、left、z-index定位)

上下、左右居中一个元素，适用于任何场景
- 示例
样式导入时，使用link和@import的异同？
- 相同点：都是从外部引用css
- 区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS
- 区别2： link引用css时，在页面载同时加载；@import需要页面完全载入后加载
- 区别3：link是XHTML标签，无兼容性问题；@import 是CSS2.1提出的，低版本的浏览器不支持
- 区别4: link支持使用Js控制DOM修改样式；@import不支持：

设置元素字体为8px

  font-size: 16px;
  transform: scale(0.5);
  transform-origin: 0 0;

css scripts:
- 其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的background-image, baackground-repeat, background-position 的组合进行背景定位。

怎么用css画一个三角形

示例

html

  <div class="triangle1"></div>

css

  div {
    width: 0;
    height: 0;
  }
  .triangle1 {
    border-top: 100px solid red;
    border-right: 100px solid blue;
    border-bottom: 100px solid goldenrod;
    border-left: 100px solid pink;
  }

怎样实现一个盒子里两个div,左边固定宽度，右边自适应宽度

示例

html

  <div class="parent">
    <div class="left"></div>
    <div class="right"></div>
  </div>

css

 // 通用的
 .parent {
    width: 100%;
    height: 100px;
  }
  .left {
    width: 100px;
    background: pink;
    height: 100%;
  }
  .right {
    background: palegreen;
    height: 100%;
  }

  /* 法1 左边浮动 */
  .left {
    float: left;
  }

  /* 法2 左边绝对定位 */
  .parent {
    position: relative;
  }
  .left {
    position: absolute;
  }
  .right {
    width: calc(100% - 100px);
    margin-left: 100px;
  }

  /* 法3 右边绝对定位 */
  .parent {
    position: relative;
  }
  .right {
    position: absolute;
    width: calc(100% - 100px);
    left: 100px;
    top: 0;
  }