盒子模型
边框(border)
border:border-width border-style border-color
border-style常用值:solid(实线)、dashed(虚线)、dotted(点线)
边框会影响盒子的宽度
表格细线边框(将相邻的边框合并在一起):border-collapse:collapse
内边距(padding)
padding-left:
padding-right:
padding-top:
padding-bottom:
padding:5px
padding:5px 10px
padding:5px 10px 20px
padding:5px 10px 30px
写1个值,代表上下左右都是5px
写2个值,代表上下是5px,左右是10px
写3个值,代表上是5px,左右是10px,下是20px
写4个值,代表(顺时针)上5px右10px下20px左30px
如果盒子没有指定宽度,就不会被padding撑开,指定了宽度就会被撑开
如果不想被撑开,将高和宽减去padding值即可
外边距(margin)
分开写和简写逻辑同内边距
典型应用:将块级元素水平居中
必须满足:
1、盒子必须有宽度
2、左右外边距设置为auto(自动)
如果行内盒子水平居中:
给父元素加text-algin:center
外边距合并:
margin定义块元素垂直外边距时可能会出现
相邻块元素垂直外边距合并
嵌套块元素垂直外边距塌陷
1、给父元素定义上边框
2、给父元素添加上内边距
3、给父元素添加 overflow:hidden
清除内外边距:
*{padding:0;
margin:0;}
CSS的圆角边框
(border-radius:像素值/百分比)
border-top-left-radius:
border-top-right-radius:
border-bottom-right-radius:
border-bottom-left-radius:
简写borer-radius:顺时针
CSS盒子的阴影
box-shadow:
h-shadow
必须,水平阴影位置,可有负值
v-shadow
必须,垂直阴影位置,可有负值
blur
模糊距离
spread
阴影尺寸
color
阴影颜色
inset
内部阴影;默认outset不过不要写会造成阴影失效
|