前端基础学习笔记 盒模型 太过爱你忘了你带给我的痛 2022-04-14 03:29 224阅读 0赞 # 边框线border # **border 边框：元素边框的样式** **单样式:** * border-width 大小 * border-style 样式 * border-color 颜色 复合样式:大小 类型 颜色 * border :width style color 边框类型 ： border-style * solid 实线 * dashed 虚线 （有兼容问题） * dotted 点线 （有兼容问题） * double 双边框 边框类型： * border-top 左边框 * border-right 右边框 * border-bottom 下边框 * border-left 左边框 去除边框: border:none ; =>padding会改变盒子大小 # color颜色:的多种值 # 十六进制 （ \#00ff99 ） rgb（ 0-255,0-255,0-255 ） -三个值 r-red红 g-green绿 b-blue蓝 rgba( 0-255,0-255,0-25,0-1 ) 四个值 r-red红 g-green绿 b-blue蓝 a-透明度 # margin 外边距 # 单样式: * margin-top :顶部外距离 * margin-right :右边外距离 * margin-bottom :底部外距离 * margin-left :左边外距离 复合样式： * 四个值： margin :上 右 下 左 * 三个值： margin :上 左右 下 * 二个值： margin :上下 左右 * 一个值： margin : 四个方向相同的值； * 盒子水平居中： margin: auto || margin:top auto || margin:top auto bottom # padding 内边距 # 单样式: * padding-top :顶部内距离 * padding-right :右边内距离 * padding-bottom :底部内距离 * padding-left :左边内距离 复合样式： * 四个值： padding :上 右 下 左 * 三个值： padding :上 左右 下 * 二个值： padding :上下 左右 * 一个值： padding : 四个方向相同的值； =>padding会改变盒子大小 # 盒子模型计算公式 # **盒子宽度 = 左border+左padding+width+右padding +右border** **盒子高度 = 上border+上padding+height+下padding+下border**
还没有评论，来说两句吧...