HTML+CSS学习四

1.给盒子添加圆角边框
参数可以是数值或百分比
复合写法：border-radius:length
参数可以是数值或百分比
分开写法：左上角：border-top-left-radius:length
右上角：border-top-right-radius:length
左下角：border-bottom-left-radius:length
右下角：border-bottom-right-radius:length

2.盒子阴影：
box-shadow:h-shadow,v-shadow,blur,spread,color,inset;
h-shadow:必需值，表示水平阴影的位置
v-shadow:必需值，表示垂直阴影的位置
blur：表示模糊距离
spread:表示阴影尺寸
color:阴影颜色
inset:阴影默认是outset也就是外阴影，若想改为内阴影则设置inset
注意：不可以在这里设置outset
附一个例子链接：https://blog.csdn.net/weixin_44486539/article/details/102065206?biz_id=102&utm_term=%E7%9B%92%E5%AD%90%E9%98%B4%E5%BD%B1boxshadow&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduweb~default-0-102065206&spm=1018.2118.3001.4187

3.浮动：浮动元素具有行内块元素特性
任何元素都可以添加浮动 只要添加了浮动 都会有行内块元素特性
语法：float:left/right;
多个块级元素纵向排列找标准流 横向排列找浮动
若添加的是同侧的浮动则第二个盒子会紧挨着第一个盒子
若想两个盒子在同一行 则两个盒子都要添加浮动 让它们具有行内块元素特性

元素添加浮动后会脱标（脱离标准普通流）
浮动的盒子不再保留原先的位置
浮动盒子顶部对齐 如果一行装不下会另取一行

清除浮动：
因为浮动元素是浮在半空中，若父级元素（标准流）没有高度
则浮动元素会影响下面的标准流元素
清除浮动元素造成的影响后父级元素会根据浮动的子盒子自动检测高度
父级有了高度就不会影响下面的标准流元素
语法：选择器{clear:属性值；}
属性值：left 清除左侧浮动元素
Right 清除右侧浮动元素
Both 同时清除左右两侧浮动的影响

4.定位
定位=定位 模式+边偏移
定位模式制定了一个元素在文档中的定位方式
position:static/relative/absolute/fixed
边偏移：top/bottom/left/right:偏移量

静态定位：position:static
是元素的默认定位方式 无定位的意思
按照标准流特性摆放没有边偏移
很少使用

相对定位：position:relative
相对定位是元素在移动位置的时候相对于它原来的位置来说的
原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它

绝对定位：position:absolute
移动位置时，相对于它祖先元素
如果没有祖先元素或者祖先元素没有定位则以浏览器为准定位
如果祖先元素有定位，则以最近一级有定位的祖先元素
为参考点移动位置
绝对定位不占有原来的位置（脱标）

子绝父相：子级使用绝对定位，父级则需要相对定位
相对定位用来作为绝对定位的父级来限制子级

固定定位：position:fixed
以浏览器的可视窗口为参照点移动元素
跟父元素无关
不随滚动条滚动
固定定位不占有原先位置
固定定位也是脱标的

注意：浮动元素只会压住它下面标准流的盒子但是不会压住下面标准流盒子里面的文字或图片 绝对定位或固定定位会完全压住盒子

5.定位叠放次序：
z-index:数值;
数值可以是正整数、负整数、0默认是auto 数值越大盒子越靠上
如果属性值相同，则按照书写顺序，后来居上
数字后面不能加单位
只有定位的盒子才有z-index属性

总结：
标准流：可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局
浮动：可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动
定位：可以让多个盒子前后叠压来显示，如果元素自由在某个盒子内移动就用定位布局。