html+css实战（1）

简单电商品台搭建

---

• 先粗糙地分成几个大的div，再给每个div细分，一开始就给每个div命好类名
• 为了不让内容平铺满整个页面，把大的div块用container类封装起来，可使div块对齐

.container{
    display:block;
    max-width:1080px;
    margin:0 auto;
}

• 超链接a
  • 是内联元素，无法设置height、padding、margin，需变为(inline-)block,变为block之后会独占一行？要调整一个东西的宽度要先设为block？哪些是block？
  • 有hover伪元素、text-decoration
• float
  • 常用可设为类
  • 子元素为float 父元素会坍塌
  • float对行内、块状元素的作用
  • 清除float的三种方法
  • 可给父元素设置line-height使div对齐浮动元素
• before、after伪元素：content:""
• 设置col-x类，学会用百分比设宽度

.col-x{
    display:block;
    position:relative;
    float:left;
}

• Box-sizing：border-box是包括border算宽度

• *{background：rgba（）}方便在初始布局阶段确认每一个div位置

• 在标签后面不能多一个逗号！

• outline：位于元素border外围

• 反馈：

  • input：focus{ box-shadow:(inset) x y px rgba(0,0,0,.1) }
  • button/item：hover{ background/box-shadow }

• transition设置变化速度：变化的量（默认all） ms

• 图片获取器

• 布局工具：每一块之间没有空隙，设置padding，不设置背景色；令子元素设置背景色，可实现块之间切割

• 块级元素的默认长（宽）度是父元素的长（宽）度