这是我参与【第四届青训营】笔记创作活动的第5天。
今天复习一下盒子模型中的几个知识点；
知识点1：圆角边框；
- border-radius 属性用于设置元素的外边框圆角。
- 语法： border-radius:length; (参数值可以为数值或百分比的形式)
- 四个边可以同时设置也可以分开设置，也可以设置成一个圆形（数值修改为高度或者宽度的一半即可）
- 设置各边的方法：
- 方法1：border-radius可以跟四个值，分别代表左上角、右上角、右下角、左下角
- 方法2：分开设置。border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius 例子：.one { width: 300px; height: 50px; background-color: lightskyblue; border-radius: 25px; margin: 30px auto; }
知识点2：盒子阴影；
- h-shadow-----水平阴影位置
- v-shadow-----垂直阴影位置
- blur-----模糊距离
- spread-----阴影尺寸
- color-----阴影颜色
- inset-----将外部阴影改为内部阴影
知识点3：浮动
传统网页布局有三种方式，分别是：普通流，浮动，定位；
- 标准流：就是标签按规定默认方式排序
- float 属性用于创建浮动框，就是将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘
- 语法：选择器{float：属性值；}属性值包括：nane,left,right;
- 特点：
- 脱离标准普通流的控制 移动到指定位置(脱标）
- 浮动的盒子不再保留原先的位置
- 如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。
- 浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子， 多出的盒子会另起一行对齐
