一、html

块级标签：可以设置宽高；默认独占一行，margin四个方向都可以行内标签（内联标签）：不可以设置宽高，根据内容的宽高展示；margin只能设置左右；行内块标签：img、input（可以和行内块共处一行）结构化标签：h1 p span div等等功能化标签：canvas audio video，配合js使用； ##二、css浮动

1、浮动：

（1）让元素变成一行：浮动布局（2）文本环绕

2、浮动特点

（1)改变元素的类型：改变的是行内块类型；开始默认的是内容宽度，设置宽度则显示规定宽度。（2）半脱离文档流（3）如果父级的宽度不够，会掉下来 #3、浮动布局出现的问题（1）父级的塌陷（本质原因是父级没有高度）；（2）如果出现浮动，对后面的元素产生影响；

4、清除浮动

clear：left|right|both（一般情况下both）（1）给同级的没有浮动的元素加clear：both；（2）工作中，给父级加类.clearfix

.clearfix:after {   <----在类名为“clearfix”的元素内最后面加入内容；
    content: ".";     <----内容为“.”就是一个英文的句号而已。也可以不写。
    display: block;   <----加入的这个元素转换为块级元素。
    clear: both;     <----清除左右两边浮动。
    visibility: hidden;      <----可见度设为隐藏。注意它和display:none;是有区别的。仍然占据空间，只是看不到而已；
    height: 0;     <----高度为0；
    font-size:0;    <----字体大小为0；
}

（3）父级触发BFC效果 BFC block format content：块即格式化上下文格式化父级元素所在的区域，格式化之后，对周边的元素不会产生影响；

1、position：absolute；
2、display：inline-block;
3、float：left；
4、overflow：hidden；

##三、css定位

1、绝对定位

完全脱离文档流，，相对定位父级（没有定位父级，相对于body），改变元素类型，用于小图片、小图标、运动

2、相对定位

半脱离文档流，相对本身，不会改变元素类型，当定位父级

3、固定定位

完全脱离文档流，相对于窗口可视区，改变元素类型，用于弹框、广告

4、粘性定位：固定定位和其他定位的结合

div{
    width:100px;
    height:100px;
    background:red;
    position:sticky;
    top:0px;
    margin-top：300px；（最终定位的目标）
    left:300px'
}
<body style="height:3000px">
    <div></div>
</body>

（*父级分为结构父级与定位父级）两者以上为null；结构父级：最高级为document

<div>
<span></span>
</div>

定位父级,比如：元素的定位父级为

,没有div则为body 定位的最高级为body；

<div>
    <p>
        <span></span>
    </p>
</div>

##四、响应式布局

ul{height:30}
li{
list-style:none;
width:25%;height:30px;
background:red;
text-align:center;
float:left
border:1px soild blue;
}
<ul>
 <li></li>

#盒子模型：内容宽高 border padding margin 1、盒子模型的大小是由内容宽高+border+padding，margin决定盒子的位置；（大小向外扩展）； 2、在css3中新增了一种盒子模型（向内扩展）bix-sizing:border-box;

div{
    width:calc（25% - 2px）;
    /*注意：运算符号左右要空格，样式里面“-”有连字符的作用；*/
    height:100px;
    background:red;
    border:10px soild blue;
    padding：10px；
    box-sizing:content-box;（border-box）
}
<body>
    <div></div>
</body>

##五、弹性布局：flex布局特点：需要一个父元素或者一个容器元素；分为子元素（一）、给父元素加display：flex；

 <style>
    #box{
        width: 400px;
        height: 400px;
        border: 1px solid red;
        display: flex;
        flex-direction: row;
    }
    #box div{
        width: 100px;
        height: 100px;
        background: red;
        margin: 2px;
    }
    </style>
</head>
<body>
    <div id="box"> 
        <div>11</div>
        <div></div>
        <div></div>
    </div>
</body>

1、flex-direction：row；默认为横方向；

column：竖方向； flex-direction: column-reverse;（reverse为翻转）

2、换行：flex-wrap：wrap

默认不换行；flex-wrap：nowrap flex-wrap：nowrap-reverse；翻转；第一行在下面；

3、flex-flow

是flex-direction和flex-wrap的简写，默认row nowrap；

4、justify-content

flex-start默认左对齐；flex-end：右对齐；center：居中； spase-between子元素中间距离相同;space-around左右两边间隔相等；

5、竖直方向

（1）align-items：flex-start默认上对齐 align-items: flex-end;下对齐； center：居中； align-content：只有换行时用（二）、子元素 flex 分配双飞翼布局圣杯布局两边定宽，中间自适应；

<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        height: 30px;
        display: flex;
    }
    li{
        list-style:none;
        width: 30px;
        height: 50px;
        background: red;
        text-align: center;
        border: 1px solid blue;
        flex:1;
    }
    .last{
        flex: 2;
    }
    </style>
</head>
<body>
   <ul>
       <li>111</li>
       <li>222</li>
       <li>333</li>
       <li class="last">444</li>
   </ul>
</body>

六、单位

相对单位： 1.px：像素，相对单位，相对的是屏幕分辨率； 2、%：相对父级的宽高字体大小。没有父级则继承浏览器默认大小 2、em：相对于父级字体大小。需要看父级的字体大小 3、rem 根字体大小用rem实现自适应：现在多用布局：弹性盒子+rem；

<style>
    html{
        font-size: 20px;
    }
    div{
        width: 20rem;
        height: 20rem;
        background: red;
    }

    </style>
    <script>
        window.onload=function(){
            document.documentElement.style.fontSize=document.documentElement.clientWidth*20/320+'px'
        }
    </script>
</head>
<body>
    <div>
    </div>
    
</body>
</html>

前端基础知识