css相关

在线编辑

如何理解html语义化

• 让人更容易读懂（增加代码的可读性）
• 让搜索引擎更容易读懂（SEO）

块状元素和内联元素

• display：block/table， div，table，h1，h2，ul，ol，p
• display：inline/inline-block，span，input，img，button

盒模型宽度

offsetWidth = （内容宽度+内边距+边框）
box-sizing：border-box （内容宽度+内边距+边框+外边距）= width

margin纵向重叠问题

相邻元素的margin-top和margin-bottom会发生重叠

margin负值问题

• margin-top和margin-left负值，元素会向上，向左移动
• margin-right负值，右侧元素左移，自身不受影响
• margin-bottom负值，下方元素上移，自身不受影响（相当于自生宽度减小）

BFC理解和应用

• 理解： BFC（block format context）块级格式化上下文
  一块独立渲染的区域，内部元素的渲染不会影响边界以外的元素
• 应用：(父级div的class里有bfc形成的条件，子元素始终在父级div内)
• 形成BFC的常见条件:
• float不是none
• position是absolute或者fixed
• overflow不是visible
• display是flex inline-block等

float布局：实现圣杯布局和双飞翼布局

固定两边宽度，中间自适应的布局

圣杯布局和双飞翼布局

样式还和class的左中右的顺序有关

• 三栏布局，中间一栏最先加载和渲染（内容最重要），两侧内容固定，中间内容随宽度自适应
• 两侧使用margin负值&#