css复习

Jinfang
74 阅读2分钟

一、盒模型宽度计算：

  1. offsetWidth=(内容宽度+内边距+边距)
  2. box-sizing: border-box; (width=内容宽度+内边距+边距+外边距)

二、margin纵向重叠问题：

  1. 相邻元素的margin-top和margin-bottom会发生重叠
  2. 空白内容的<p></p>也会重叠

三、margin负值问题：

  1. margin-top和margin-left负值，元素向上、向左移动
  2. margin=right负值，右侧元素左移，自身不受影响
  3. margin-bottom负值，下方元素上移，自身不受到影响

四、BFC的理解与应用：

  1. BFC:块级格式化上下文，独立的渲染区域，内部元素的渲染不会影响边界以外的元素
  2. 形成条件：
    • float不是none
    • position是absolute或fixed
    • overflow不是visible ***
    • display是flex等

五、float布局及clearfix：

  1. 圣杯、双飞翼：
    • 使用float布局
    • 两侧使用margin负值，以便和中间内容横向重叠
    • 防止中间内容被两侧覆盖，一个使用padding一个用margin
  1. clearfix:
.clearfix:after{
      conter:'';
      display:table;
      clear:both;
   }

六、flex三点布局问题：（blog.csdn.net/scorpion_V/…

  1. 容器：flex-direction 、justify-content、align-items、flex-wrap、align-self(子元素在侧轴方向的对齐方式)
  2. 项目：order（排序）、flex-grow（放大）、flex-shrink（缩小）、align-self

七、定位：

  1. relative:依据自身定位
  2. absolute:根据最近一层的定位元素定位
  3. 水平居住：
    • inline元素： text-align: center
    • block元素： margin: auto
    • absolute元素：left: 50% + margin -left负值
  1. 垂直居中：
    • inline元素：line-height的值等于height值
    • absolute元素：top：50% + margin-top负值
    • absolute元素：transform(-50%,-50%)

八、css-图文样式

  • line-height如何继承：

九、响应式问题：

  • 媒体查询 + rem（基于根元素的相对单位）
@media only screen and (min-width:374px) and (max-width:413){
     html{
            font-size:86px;
         }
 }

10、响应式-vw/vh：

rem的弊端：‘阶梯’性

1.网页视口尺寸：

  1. window.screen.height //屏幕高度
  2. window.innerHeight //网页视口高度
  3. document.body.clientHeight //body高度

2. vw/vh:

  1. vh：网页视口高度的1/100
  2. vw：网页视口宽度的1/100
  3. vmax与vmin取vw与vh比较的最大值或最小值

面试题总结：

1、如何理解HTML语义化？

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

2、块状元素-内联元素

  • block:dev、h1~h6 、table 、ul 、ol、 p 等
  • inline:span、img、 input 、buttton等

3、盒模型宽度计算 4、margin纵向重叠问题 5、margin负值的问题 6、BFC理解与应用 7、

avatar
文章
阅读
粉丝