盒子模型轻松掌握_盒子模型怎么画
提示：点击上方"蓝色字体"↑ 可以订阅噢！
盒模型
content=width×height
padding
border
margin
width：<length> | <percentage> | auto | inherit
width:50%;/*父元素的50%宽度*/
height：<length> | <percentage> | auto | inherit
/×高度默认高度为内容高度×/
max-height与min-width，
padding:[<length>|<percentage>]{1,4} | inherit
padding:20px;
padding:20px 30px 10px 15px; 上右下左
padding:20px 30px 10px；上 左右 下
padding:20px 30px；上下左右
规律，对面相等后者省略，4面相等，只设置一个
padding:[<length>|<percentage> | auto ]{1,4} | inherit
与padding稍微有不同，/×百分比父元素为参照物×/
margin合并：相邻元素margin值合并，取最大值。
父元素与第一个/最后一个子元素
margin：0 auto； 元素水平居中/auto浏览器自动分配多余空间
border:[<border-width>||<border-style>||<border-color>];
border-width:[<length>]{1,4}
border-style:[solid | dashad | dotted ]{1,4}
border-color:[<color> | tansparent]{1,4}
圆角
border-radius:[<length>|<percentage>]{1,4}[/[<length> | <percentage>]{1,4}]?
border-radius:10px;/*四个角水平垂直半径为10px*/
border-radius:0px 5px 10px 15px / 20px 15px 10px 5px;
/*/前面表示水平半径，/后面为垂直半径*/
border-radius:50%;/×正圆×/；
隐藏内容
overflow：visible | hidden | scroll | auto
visible:默认，超出部分显示 hidden:超出部分隐藏 scroll：滚动条一直显示
auto:内容多超出的时候显示滚动条
overflow-x 与overflow-y；分别设置水平垂直方向滚动条
box-sizing:content-box | border-box
content-box :默认 内容区域高宽
border-box:包括border和padding
box-shadow:none | <shadow> [,<shadow>]*
<shadow>:inset?&&<length>{2,4}&&<color>?
box-shadow:4px 2px 3px 4px red;/*第一个水平偏移，第二个设置垂直偏移，第三个设置模糊半径， 第四个设置阴影大小 参考Photoshop的投影*/
box-shadow:4px 2px 3px 4px ；/*默认颜色为文字颜色*/
box-shadow:inset 4px 2px 3px 4px ；/*内阴影*/
box-shadow:3px 6px 1px 3px , inset 4px 2px 3px 4px ；/*内外阴影，阴影不占空间*/
outline:[<outline-width> || <outline-style> || <outline-cocolr>]
outline-width:<length>
outline-style:solid | dashed | dotted
outline-cocolr:<color> | invert
/*不占空间，boder以外*/
想认识志同道合的朋友一起学习web
加入我们的学习QQ群 19066743
丰富的学习资源，周一到周四免费直播公开课
长按图片，识别二维码即可入群
你可能感兴趣的精彩内容
长按关注：《UI设计自学平台》