css 序

盒模型

1.属性:width :内容的宽度 书写内容的宽度

height:内容的高度 书写内容的宽度

padding:内边框 内容到边框的距离  可以有  background-color

border:边框 可以显示颜色 就是比作一个门框  border: 10px solid green;

margin:外边框 另一个边到另一个变的距离

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         .box{
             width: 50px;
             height: 50px;
             background: aqua;
             border: 50px solid red;
             padding: 50px ;

         }
     </style>
 </head>
 <body>
 <div class="box"></div>

 </body>
 </html>

展示盒模型

2.关于移动

padding 是关于父子的移动  就是是本身在整个内容下进行整体的上下左右

用padding-left.top,right,buttom 来进行移动

margin 是关于兄弟之间的移动 可以通过margin-left... 移动像素

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         .box{
             width: 100px;
             height: 100px;
             background: blue;
             padding-left: 100px;
             border: 1px solid red ;

         }
         span{
             background: crimson;

         }
         .qqq{
             margin-left: 50px;
         }

     </style>
 </head>
 <body>
 <div class="box">
     <span>zq</span>
         <span class="qqq">zq</span>
 </div>
 <div class="box">
     <span>zq</span>

 </div>

 </body>
 </html>

margin 移动

盒模型的计算：
   总结：如果保证盒模型的大小不变，加padding 就一定要减width或者减height
   前提是：在标准文档流
         padding：父子之间调整位置
         margin: 兄弟之间调整位置

3.浮动
在一个盒子上,包含了许多了不同的div  要是能在一个界面上显示多种不同的颜色就需要颜色划分,但是在一个
已经分配好的布局上怎么加入其他的颜色呢,这就需要浮动,使其变成不标准的界面
float 

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         *{
             padding: 0;
             margin: 0;
         }
         .top-Bar{
             width: 100%;
             height: 40px;
             background: lightslategrey;
         }
         /*将这和区域居中*/
         .container{
             width: 1624px;
             height: 40px;
             background: red;
             padding: auto;
             margin: auto;
         }
         /*将这片区域用嵌套的方式并排掺入,因为引用了浮点,不再是标准的*/
         .top-Bar .top-1{
             width: 700px;
             height: 40px;
             background: darkslateblue;
             float: left;
         }
         /*将这片区域以右对的方式,同上*/
         .top-Bar .top-shop{

             width: 150px;
             height: 40px;
             background: darkolivegreen;
             float: right;

         }
         .top-Bar .top-info{
             width: 100px;
             height: 40px;
             background: sandybrown;
             float: right;
             margin-right: 20px;
         }
     </style>
 </head>
 <body>
     <div class="top-Bar">
         <div class="container">
             <div class="top-1">
             </div>
             <!--这里注意是包含在container里面 -->
             <div class="top-shop"></div>
             <div class="top-info"></div>

         </div>
     </div>
 </body>
 </html>

浮动