长度单位
像素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>