今天开始我们的浮动部分之前,先对前面盒子部分做一些补充。
对于盒子的大小默认情况下:盒子可见宽的大小由内容区,内边距,边框共同决定的
box-sizing 用来设置盒子尺寸的计算方式 width/height 指的是谁
可选值:
content-box 内容区 默认值
border-box 宽度和高度用来设置整个盒子可见框的大小,包括边框,padding,以及内容。
盒子周围阴影的设置。
box-shadow
用来设置元素的阴影效果,不会影响到页面布局
第一个值:水平偏移量 正->左 负->右
第二个值:垂直偏移量 正->下 负->上
第三个值:模糊半径
第四个值:颜色 默认是黑色
border-radius 可以用来设置圆角
borde-top-right-radius
border-top-left-radius
border-bottom-left-radius
border-bottom-right-radius
border-radius: 50%;
我们都知道块元素在文档流中,会独占一行。那么如何让块元素脱离文档流呢?今天我们就开始介绍其中一种方法。浮动(float)
float可以设置元素的浮动。浮动方向可以选值有 none right left
float none 不浮动
float right 右浮动
float left 左浮动
他它是一种水平布局方法(另外一种方式是定位后面会说到)
设置浮动后的特点:
第一种:是脱离文档流,不在独占一行。原有的位置会空出后面的元素会“上浮”。
第二种:浮动的元素浮动范围不会脱离它的父元素的范围。
第三种:元素浮动以后,元素会尽量向页面的左上或页面右上漂浮。
第四种:浮动元素默认不会从父元素中移出。
第五种:浮动的元素不会超过他上边的兄弟元素,最多最多一边齐。
第六种:如果浮动元素的上边是一个没有浮动的块元素,则浮动元素无法上移。
总结:浮动可以将一些元素水平分布,以满足一些水平的布局要求。