目录
圆角边框
盒子阴影
文字阴影
传统网页布局的三种方式
浮动
浮动特性
浮动元素经常和标准流父级搭配使用
常见的网页布局案例
浮动布局注意点
圆角边框
语法：border-radius: 半径;
radius是圆的半径
参数值可以是精确数值或百分比 50%为宽度和高度的一半
可以设置不同的圆角
border-radius: 10px 20px 30px 40px; 左上 右上 右下 左下 顺时针
两个值 是对角线 10px 20px 左上右下是10 右上左下是20
三个数值 左上 右上左下 右下
也可以单独设置border-top（bottom）-left（right）-radius
top和left不能颠倒
盒子阴影
box-shadow: h-shadow v-shadow blur spread color (inset)
h-shadow 必需 水平阴影 允许负值
v-shadow 必需 垂直阴影 允许负值
blur 可选 模糊距离
spread 可选 阴影尺寸
color 可选 阴影颜色
inset 可选 将外部阴影改为内部阴影 (不可以写outset）
影子不占用盒子空间
鼠标悬停显示阴影用 div:hover
<style>div {width: 200px;height: 200px;background-color: pink;margin: 100px auto;/* box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); *//* 水平 垂直 模糊 尺寸 颜色 */}div:hover {box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, 0.3);}</style>
文字阴影
text-shadow:h-shadowv-shadowblur color
传统网页布局的三种方式
网页布局的本质——用CSS来摆放盒子，把盒子摆放到相应的位置
标准流（普通流）：标签按照规定好的默认方式排列块级元素独占一行 从上向下顺序排列：div hr p h1-h6 ul ol dl form table行内元素从左到右顺序排列，碰到父元素边缘则自动换行：span a i em等浮动定位
浮动
浮动可以改变元素标签默认的排列方式
可以让多个块级元素一行内排列显示
多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
float属性用于创建浮动框，将其移动到一边，直到左边缘或者右边缘触及包含块或另一个浮动的边缘
float：
none 不浮动
left向左浮动
right向右浮动
浮动特性
浮动元素会脱离标准流（脱标）的控制，移动到指定位置，浮动的盒子不再保留原先的位置浮动元素会在一行内显示并且元素顶部对齐（装不下会另起一行）浮动的元素会具有行内块元素的特性（行内元素加了浮动就有宽高了）块级元素不定义宽度默认和父元素一样宽，但如果加了浮动，宽度由内容决定
浮动的盒子中间是没有缝隙的是紧挨着一起的
行内元素同理
浮动元素经常和标准流父级搭配使用
为了约束浮动元素的位置，网页布局一般采取的策略是
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则
常见的网页布局案例
包含通栏
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.top {height: 50px;background-color: gray;}.banner {width: 980px;height: 150px;background-color: gray;margin: 10px auto;}.box {width: 980px;margin: 0 auto;height: 300px;}.box li {width: 237px;height: 300px;background-color: gray;float: left;margin-right: 10px;}.box .last {margin-right: 0;}li {list-style: none;}.footer {height: 200px;background-color: gray;margin-top: 10px;}</style></head><body><div class="top"></div><div class="banner"></div><div class="box"><ul><li></li><li></li><li></li><li class="last"></li></ul></div><div class="footer"></div></body></html>
