浮动

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第14天，点击查看活动详情

控制元素移动

通过行动可以使一个素向其父元素的左侧成右侧移动

使用float属性来设置元素的浮动，float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

语法为:

选择器{float:属性值;}

属性值	含义
none	默认值，元素不浮动
left	元素向左浮动
right	元素向右浮动

font-family 设置字体系列

h2 {
    font-family： '微软雅黑'
 } 

font-size 字号大小

h2 {
    font-size： 20px
 } 

px是像素的意思

标签比较特殊 需要单独指定像素

font-weight 字体粗细

h2 {
    font-weight： 700
 } 

建议用数字 数字后不要用字母 bold 也就是加粗
normal 也就是不变粗

font-style 字体样式

一般指是否斜体

h2 {
    font-style： 
 } 
 normal 正常 italic 斜体

复合属性

div {
    font： font-style font-weight font-size font-family
}

有严格的顺序 而且必须要有 size 和 family

div {
    font italic 700 20px 微软雅黑
}

text 属性

text-align 属性用于设置文本的水平对齐方式

值	作用
center	居中
left	左对齐
right	右对齐
justify	每条线都有相等的宽度（适用于报纸）

text-decoration 属性用于设置或删除文本装饰

none 默认 没有线(适用于链接删除下划线) underline下划线 (链接自带下划线) overline上划线 line-through 删除线

text-transform 属性用于指定文本中的大写和小写字母

text-indent 属性用于指定文本第一行的缩进

div{
    text-indent: 2em;
}

em是相对当前文字大小
2em 就是当前文字2个文字大小的距离

text-shadow 属性为文本添加阴影

line-height

p{
    line-height: 20px;
}

浮动特性

1.浮动元素会脱离标准流（脱标），浮动的盒子不在保留原先的位置，就是指脱离普通流的控制移动到指定位置

2.浮动的元素会一行内显示并且元素顶部对齐

3.浮动的元素会具有行内块元素的特性