第二章：HTML、CSS、JavaScript晋级篇

第二章：HTML、CSS、JavaScript晋级篇

盒子模型

任何的标签都有盒子模型

比喻:
    盒子模型类似于快递盒
    	1.快递盒与快递盒之间的距离(外边距 margin)
        2.快递盒盒子的厚度(边框 border)
        3.盒子内部物体距离盒子内部外壳的距离(内边距/内填充 padding)
        4.内部物体的大小(content 文本内容)
        
实际:
    1.外边距其实就是标签与标签之间的距离
    2.标签的边框厚度
    3.标签内文本与标签边框之间的距离
    4.标签内填写的内容
    
注意:
    body标签默认有8px的外边距，我们在构建网页的时候基本上都会将改外边距去除
        body {
   
                margin-top: 0;
                margin-left: 0;
                margin-right: 0;
                margin-bottom: 0;
            }
   	可以简写
        body {
   
			  margin:0 0 0 0;
        }
        
    顺序
    	/*1.上右下左 顺时针*/
        /*margin: 1px  2px  3px  4px;*/
        /*2.上  左右   下*/
        /*margin: 1px  2px  3px;*/
        /*3.上下  左右*/
       /*margin: 1px  2px;*/
        /*4.影响四边*/
        margin: 10px;
     
    /*padding规律跟marigin一致 也有四种写法 也是以用的顺序影响*/
     padding: 10px;

浮动

主要用于前期的页面布局
#d1 {
   
          /*使用频率不高*/
          /*display: inline-block;*/
          float: left;
        }

浮动的影响

浮动的元素是脱离正常文档流，会造成父标签塌陷的问题
1.方式1(推导)
	再加一个专门用来撑的div
		#d3 {
   
            height: 100px;
        }
    <div id="d4">
        <div id="d1"></div>
        <div id="d2"></div>
        <div id="d3"></div>
	</div>
2.方式2(推导)
	利用clear参数
    #d3 {
   
            clear: both;
        }
3.方式3(结论)
	无论你是业余前端还是专业前端基本上都是用方式3
    你只需要提前写好固定的解决浮动带来的负面影响的效果，之后
    """谁塌陷了就给谁加上clearfix类属性即可"""
    .clearfix:after {
   
            content: '';
            display: block;
            clear: both;
        }
    <div id="d4" class="clearfix">
        <div id="d1"></div>
        <div id="d2"></div>
	</div>

溢出属性

p {
   
            /*overflow: hidden;*/
            /*overflow: scroll;*/
            overflow: auto;
        }
利用溢出属性制作圆形头像

#d1 {
   
            height: 200px;
            width: 200px;
            border: 5px solid white;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4);
        }
img {
   
            /*max-width: 100%;*/
            width: 100%;
        }

<div id="d1">
        <img src="111.jpg" alt="">
</div>

定位

1.static静态定位
	所有的标签默认都是静态定位，意思