前端开发之CSS(盒模型)

width

width:200px
width:50%

height

height:100px
height:50%

50%继承于父元素
适用于块级元素

padding

padding:40px 20px 20px 10px
padding:40px 20px
padding:40px 20px 20px
padding:40px

缩写 写了右填充等价于设置左填充
缩写 写了上填充等价于设置下填充

margin外边距

margin会合并

• 相邻元素
• 父元素和第一个/最后一个子元素

水平居中

margin:0,auto;

border

border:[<border-width>|<border-style>|<border-color>]
border-width:[<length>]
border-style:[solid|dashed|dotted]
border-color:[<color>|transparent]

border-radius角度设置

border-radius:<length>|<percentage>
border-radius:10px；
border-radius:0px 5px 10px 15px/
                      20px 15px 10px 5px;

border-radius:50%是一个圆

overflow:visible|hidden|scroll|auto
超出部分可见 隐藏 滚动 超出时滚动
可单独设置方向滚动条

box-sizing

box-shadow

outline

不占据空间