CSS之定位以及圆角边框

day06定位 position

两个大布局：盒模型 浮动 定位

定位：可以放到anywhere

1、定位类型：

静态定位:static 标准流下的默认值 一动不动

相对定位:relative

绝对定位:absolute

固定定位：fixed

2、定位方位值：

left:当前定位元素距离父元素左侧边界的值

top:当前定位元素距离父元素上侧边界的值

right:当前定位元素距离父元素右侧边界的值

bottom:当前定位元素距离父元素下侧边界的值

绝对定位

绝对定位的元素 如果父元素没有定位属性 初始是以body左上角作为参考定位

如果父元素有定位属性（相对 绝对 固定）就会以父级元素左上角作为参考定位 如果想要父元素管控孩子，必须给父元素身上添加相对定位属性

父级：绝对定位元素会以离自己最近的拥有定位属性的父级别元素左上角作为参考

子绝父相（一个元素身上只能有一个定位类型）

定位类型	是否脱离标准流	参考位置	用处	坐标位置轴
static静态定位	否（默认值）	无	无	无
relative相对定位	否（保留原来位置）	自身位置左上角	微调元素（类似外边距），子绝父相	left，top，right，bottom
absolute绝对定位	是	以距离自己最近的有定位属性的父级元素左上角定位，知道body	anywhere	left，top，right，bottom
fixed固定定位	是	body左上角	滚动条动他也不动	left，top，right，bottom

大盒子小盒子并排用浮动，间距就用外间距，如有小盒子在大盒子里的放置，可以用定位，并且一般都是绝对定位

盒子居中：

盒子水平居中：margin：0 auto；

定位实现盒子水平、垂直居中发：

阴影盒子高度是百分百时，如果是绝对定位，取的是可视区域的高度，而不是父元素的高度

阴影盒子高度是百分百时，如果是固定定位，取得也是可视区域的高度，只是他不会随着滚动条滚动而移走

原因：绝对定位和固定定位可以把元素转换为行内块元素

圆角边框属性：

正方形+圆角边框属性=圆形

长方形+圆角边框属性=椭圆形（有弧度的图形）

border-radius:边框弧度  px/%/em/rem

border-right-top-radius:右上角
border-left-right-radius:左上角
border-right-bottom-radius:右下角
border-left-bottom-radius:左下角

border-radius:  10px 20px; 10代表左上和右下   20代表右上和左下
border-radius:  10px 20px 30px;  20代表右上和左下 10代表左上  30代表右下
border-radius:  1px 10px 20px 30px;1代表左上  顺时针写

border-radius:100px/110px
         水平方向弧度/垂直方向弧度
         弧度一样的时候只能写一个
border-radius:10px 20px 30px 40px/40px 20px 10px 1px;