HTML CSS总结

HTML总结

如何理解HTML语义化？

1.让人更容易读懂(增加代码可读性)
2.让搜索引擎更容易读懂(seo)

块级元素

1.display:block/table

 div h1 h2 table ul ol p等

内联元素

2.display:inline/inline-block

    span img input button等

CSS总结

1.盒模型宽度计算

div1的offsetWidth是多少?

    <style>
        #div {
            width: 100px;
            padding: 10px;
            border: 1px solid #ccc;
            margin: 10px;
        }
    </style>
    <div id="div1"></div>

解: offsetWidth = 内容宽度+内边距+边框  所以为122px;
补充: 如果设置box-sizing:border-box; offsetWidth为100px;

2.margin纵向重叠问题

AAA和BBB之间的距离是多少?

    <style>
        p {
            font-size: 16px;
            line-height: 1;
            margin-top: 10px;
            margin-bottom: 15px;
        }
    </style>
   
   <p>AAA</p>
    <p></p>
    <p></p>
    <p></p>
    <p>BBB</p>

解: 1.相邻元素的margin-top和mrgin-bottom会发生重叠
    2.空白内容的<p></p>也会重叠
    所以为15px

3.margin负值问题

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

4.BFC的理解与应用

Block format context 块级格式化上下文
    一块独立渲染区域,内部元素的渲染不会影响边界以外的元素
形成BFC的常见条件:
    float不是none
    position是absolute或fixed
    overflow不是visible
    display是flex inline-block等
BFC的常见应用
    清除浮动

5.float布局

如何实现圣杯布局和双飞翼布局

 三栏布局,中间一栏最先加载和渲染(内容最重要)
 
 两侧内容固定,中间内容随着宽度自适应
 
 一般用于PC网页
 
总结:1.使用float布局 圣杯布局用padding为两边留白,双飞翼用margin为两边留白
    2.两侧使用margin负值,以便和中间内容横向重叠
    3.防止中间内容被两侧覆盖,一个用padding一个用margin

手写clearfix

.clearfix::after{
  content: '';
  clear: both;
  display: table;
}

6.flex布局

flex实现一个三点的色子

.box {
   display: flex;
   justify-content: space-between;
}
.item{
    /*背景色、大小、边框*/
}
.item:nth-child(2){
  align-self: center;
}
.item:nth-child(3){
  align-self: flex-end;
}

7.css定位

absolute和relative分别依据什么定位?

   relative 依据自身定位
   absolute依据最近一层的定位元素定位

居中对齐有哪些实现方式?

水平居中:
    inline元素:text-aligin:center
    block元素:margin:auto
    absolute元素: left:50% + margin-left 负值
垂直居中:
    inline元素:line-height等于height
    block元素:margin:auto
    absolute元素: top:50% + margin-top 负值
    absolute元素: transform(-50%,-50%)
    absolute元素: top,left,bottom,right =0 margin:auto
    flex: display:flex; justify-content: center; align-items: center;
    

line-height如何继承

    1.写具体数值,则继承该值
    2.写比例,则继承该比例
    3.写百分比,则继承计算出来的值, font-size*line-height

响应式布局常用方案

1.media-query,根据不同的屏幕宽度设置根元素font-size
2.rem相对于根元素的相对单位
3.vw、vh