计算机二级Web前端知识点总结（三）思维导图
计算机二级Web前端知识点总结（三）
树图思维导图提供 计算机二级Web前端知识点总结（三） 在线思维导图免费制作，点击“编辑”按钮，可对 计算机二级Web前端知识点总结（三） 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：fd8ec602ae55120e167ab289be546642
思维导图大纲
计算机二级Web前端知识点总结（三）思维导图模板大纲
元素定位
盒子模型
通过设置标签的内外边距从而改变元素的位置，没有脱离标准文档流
相关属性
marging-top
外上边距
margin-right
外右边距
margin-bottom
外下边距
margin-left
外左边距
margin
同时设置上右下左四个外边距 (顺时针)
padding-top
内上边距
padding-right
内右边距
padding- bottom
内下边距
padding-left
内左边距
padding
同时设置上右下左四个内边距
border-top
设置上边线的粗细,颜色,线型
border-right
设置右边线的粗细,颜色,线型
border-bottom
设置下边线的粗细,颜色,线型
border- left
设置左边线的粗细,颜色,线型
border
同时设置四个边线的粗细,颜色,线型
border-width
只设置4个边线的宽度(粗细)
border-color
只设置4个边框的边框颜色
border-style
只设置4个边框的边框线型
绝对定位
2套坐标系统
如果该元素所有父标签都没有设置相对定位，那么浏览器左上角为坐标原点，根据left与top值确定元素的位置
第一个设置相对定位的父标签左上角为坐标原点，根据left与top值确定元素的位置
相关属性
position: absolute;
//表示绝对地址定位,通过绝对定位,元素可以放置到页面上的任何位置
left:100px
//绝对定位时表示与浏览器左边框距离
top:100px
//绝对定位时表示与浏览器上边框距离。
z-index:
//在绝对定位层改变各元素层叠顺序 属性值是整数 越大越在上方
相对定位
元素原位置(标准文档流的位置)左上角为坐标原点，根据left与top值改变位置。没有脱离标准文档流
相关属性
position: relative;
//表示相对地址定位,通过相对定位；元素可以放置到页面上的任何位置
left:100px
//相对定位时表示与元素原始位置的左边距离
top:100px
//相对定位时表示与元素原始位置的上边距离
相关思维导图模板
树图思维导图提供 计算机二级Web前端知识点总结（十） 在线思维导图免费制作，点击“编辑”按钮，可对 计算机二级Web前端知识点总结（十） 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：9763062ad06ccdcc68003d41908f3088
树图思维导图提供 计算机二级Web前端知识点总结（九） 在线思维导图免费制作，点击“编辑”按钮，可对 计算机二级Web前端知识点总结（九） 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：83ceba5e40f69b0ba3cd9152e77ed608
沪公网安备 31011502019485号
上海工商