day2-2，pxcook软件使用，box-sizing: border-box用法，清除默认样式

day2-2，pxcook软件使用，box-sizing: border-box用法，清除默认样式

pxcook软件下载：

游客，如果您要查看本帖隐藏内容请回复

1. <style>
   
2.     div {
   
3.       width: 200px;
   
4.       height: 200px;
   
5.       /* 手动减法 */
   
6.       /* width: 160px;
   
7.       height: 160px; */
   
8.       background-color: pink;
   
9. 
   
10.       padding: 20px;
    
11. 
    
12.       /* 內减模式：不需要手动减法，加padding和border不会撑大盒子 */
    
13.       box-sizing: border-box;
    
14.     }
    
15.   </style>

复制代码

清除默认样式：

1. <style>
   
2.     * {
   
3.       margin: 0;
   
4.       padding: 0;
   
5.       box-sizing: border-box;
   
6.     }
   
7. 
   
8.     /* 去掉列表的项目符号 */
   
9.     li {
   
10.       list-style: none;
    
11.     }
    
12.   </style>

复制代码

1. <style>
   
2.     div {
   
3.       width: 200px;
   
4.       height: 200px;
   
5.       background-color: pink;
   
6. 
   
7.       overflow: hidden;
   
8. 
   
9.       /* overflow: scroll; */
   
10. 
    
11.       /* overflow: auto; */
    
12.     }
    
13.   </style>

复制代码