关于定位,浮动,盒模型
两个大布局: 盒模型 浮动
定位:anywhere
1:定位类型:
静态定位 static 标准流下的默认值 一动不动
相对定位 relative
绝对定位 absolute
固定定位 fixed
2:定位方位值:
left:当前定位元素距离父元素左侧边界的值
top:当前定位元素距离父元素上侧边界的值
bottom:当前定位元素距离父元素下侧边界的值
right: 当前定位元素距离父元素右侧边界的值
相对定位
绝对定位
<mark>绝对定位的元素如果父级元素没有定位属性它是以body左上角作为参考定位</mark>
<mark>如果父元素有定位属性(相对,绝对,固定)就会以父级元素左上角作为参考定位,所以如果你想要父亲管控孩子,你就必须给父元素身上添加相对定位属性</mark>
父级: 绝对定位元素会以离自己最近的拥有定位属性的父级元素左上角作为参考
<mark>子绝父相</mark>
定位类型 | 是否脱标 | 参考位置值 | 用处 | 坐标位置值 |
---|---|---|---|---|
static | 否(默认值) | 无 | 无 | 无 |
relative | 否(保留原来位置) | 自身左上角 | 微调元素(外边距),子绝父相 | left,right,bottom,top |
absolute | 是 | 以距离自己最近的拥有定位属性的父级元素左上角定位,直到找到body | anywhere | left,right,bottom,top |
fixed | 是 | body左上角 | 滚动条动它不动 | left,right,bottom,top |
<mark>大盒子并排就用浮动,间距就用外间距 ,如有小盒子在大盒子里的放置可用绝对定位</mark>
层级属性
改变层级属性 z-index:
盒子居中:
盒ZHHHHHH水平居中 margin:0 auto;
盒子水平+垂直居中
<mark>阴影盒子高度是100%时,如果是绝对定位,取得是可视区域的高度,而不是父元素的高度;如果是固定定位是高度100%就是父元素的高度</mark>
圆角边框属性
正方形+圆角边框属性=圆形(有弧度的图形)
长方形+圆角边框属性=椭圆形(有弧度的图形)
border-radius :边框的弧度 px /%/em/rem
border-top-right-radius:右上角
border-left-top-radius:左上角
der-radius :边框的弧度 px /%/em/rem
border-top-right-radius:右上角
border-left-top-radius:左上角