盒子模型轻松掌握 盒子模型制作

提示：点击上方"蓝色字体"↑ 可以订阅噢！

盒模型

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设计自学平台》