HTML和CSS重点知识

1.如何理解html语义化；

1.让人更容易读懂（增加代码可读性）
2.让搜索引擎更容易读懂（SEO(搜索引擎优化） ）

2.块状元素和内联元素

块状元素：
display:block/table;有div h1 h2 table ul ol p等 （独占一行）
内联元素：
display:inline/inline-block;有span img input button等

3.盒模型宽度计算

offsetWidth = （内容宽度+内边距+边框），无外边距

4.margin负值

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

5.BFC的理解和应用

block format context 块极格式化上下文

块级格式化上下文 一块独立渲染区域，内部元素的渲染不会影响边界以外的元素

形成条件： 1.float不是none 2.position是absolute或fixed 3.overflow不是visible 4.display是flex inline-block等

BFC的应用：清除浮动

    


    

        
        
某一段文字……
    

6.圣杯布局和双飞翼布局

6.1圣杯布局和双飞翼布局的目的：

三栏布局，中间一栏最先加载和渲染
两侧内容固定，中间内容随着宽度自适应
一般用于PC网页

6.2 圣杯布局和双飞翼布局技术总结

1.使用float布局

2.两侧使用margin负值，以便和中间内容横向重叠

3.防止中间内容被覆盖，外层container一个用padding来留白,一个用margin来留白

6.3圣杯布局代码

    
    
    
    
    



    

        
this is center
        
this is left
        
this is right
    

6.4 双飞翼布局代码

    
    
    
    
    



    

        

            this is main
        
    
    

        this is left
    
    

        this is right
    

6.5 手写 clearfix 

    /* 手写 clearfix */
        
        .clearfix:after {
            content: '';
            display: table;
            clear: both;
        }

7.css定位

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

8.居中对齐实现的方式

水平居中：
1. inline元素：text-align:center
2. block元素：margin:auto
3. absolute元素：left:50% + margin-left负值(需要知道子元素的宽)

    position: absolute;
    left: 50%;
    margin-left: -150px;

垂直居中：
1.inline元素：line-heigh的值等于height值
2.absolute元素：top:50% + margin-top负值(需要知道子元素的高)

    position: absolute;
    left: 50%;
    margin-left: -150px;
    top: 50%;
    margin-top: -50px;

3.absolute元素：transform(-50%,-50%)

left: 50%;
top: 50%;
transform: translate(-50%, -50%);

4.absolute元素: top,left,bottom,right=0 + margin:auto

    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;

9.line-height如何继承

1.写具体数值，如30px,则继承该值
2.写比例，如1.5,则继承该比例，line-height:24px
3.写百分比，如200%，则继承计算出来的值   font-size *line-height的百分比