长度单位

像素px
像素是我们在网页中使用得最多的一个单位
一个像素就相当于屏幕中的一个小点
我们的屏幕实际上就是由这些像素点构成的
但是这些像素点是不能直接看见的
- 不同显示器一个像素的大小也不相同
显示效果越好、越清晰，像素就越小，反之像素越大
百分比%
- 也可以将单位设置为一个百分比的形式
这样浏览器将会根据其父元素的样式来计算该值
- 使用百分比的好处是，当父元素的属性值发生变化时，子元素也会按照比例发生改变
- 在我们创建一个自适应的页面时，经常使用百分比作为单位
em
- em和百分比类似，它是相对于当前元素的字体大小来计算的
- 1em = 1font-size
- 使用em时，当字体大小发生改变时，em也会随之改变

- 当设置字体相关的样式时，经常会使用em

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   <title>单位</title>
     <style type="text/css">
    .box{

        width: 200px;
        height: 200px;
        background-color: red;
    }
    .box1{
        font-size: 20px;
        width: 2em;
        height: 50%;
        background-color: yellow;
    }

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

  </body>
 </html>

内联元素

盒模型分成内容区、内边距、边框、外边距四个部分
内联元素不能设置width和height
设置水平内边距,内联元素可以设置水平方向的内边距
垂直方向内边距，内联元素可以设置垂直方向内边距，但是不会影响页面的布局
为元素设置边框,内联元素可以设置边框，但是垂直的边框不会影响到页面的布局
水平外边距，内联元素支持水平方向的外边距
为右边的元素设置一个左外边距
水平方向的相邻外边距不会重叠，而是求和
内联元素不支持垂直外边距

 <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>内联元素的盒模型</title>
<style type="text/css">
    span{
        background-color: #bfa;
    }
    .box1{
        width: 100px;
        height: 100px;
        background-color: red;
    }
    .s1{
        padding-left: 100px;
        padding-right: 100px;
                  border: 1px blue solid;

        
        margin-left:100px;
        margin-right: 100px;
    }
    .s2{
    
         
        margin-left: 10px
        margin-bottom: 200px;*/
    }
</style>
</head>
<body>
<span class="s1">我是一个span</span>
<span class="s2">我是一个span</span>
<span>我是一个span</span>

<div class="box1"></div>
 </body>
</html>

浮动

块元素在文档流中默认垂直排列，所以这个三个div自上至下依次排开
如果希望块元素在页面中水平排列，可以使块元素脱离文档流
使用float来使元素浮动，从而脱离文档流
可选值：
none，默认值，元素默认在文档流中排列
left，元素会立即脱离文档流，向页面的左侧浮动
right，元素会立即脱离文档流，向页面的右侧浮动
当为一个元素设置浮动以后（float属性是一个非none的值），元素会立即脱离文档流，元素脱离文档流以后，它下边的元素会立即向上移动
元素浮动以后，会尽量向页面的左上或这是右上漂浮，直到遇到父元素的边框或者其他的浮动元素
如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素

<!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>浮动</title>
  <style type="text/css">
      .box1{
              width: 600px;
              height: 200px;
              background-color: red;
             float: left;
    }
       .box2{
              width: 200px;
              height: 200px;
              background-color: yellow;
             float: left;
    }
    

 </style>
 </head>
 <body>
<div class="box1"></div>
<div class="box2"></div>

 </body>
 </html>