2020.8.26前端css盒子模型|边框|内边距|外边距|
##盒子模型
》》包括了元素内容、内边距padding、外边距margin、边框border
##边框
边框有3个属性:边框大小(需要带单位px)、边框样式、边框颜色
边框样式有:solid实线、dashed虚线、dotted点线、none没有边框
border:1px solid pink;
边框又分为border-left|right|bottom|top
****表格的细线边框
表格的边框通过cellspacing=0来取消边框,其中相邻的边框存在合并导致边框变粗,可以通过table td{border-collapse:collapse;}解决
##内边距padding
内边距是内容和边框之间的距离,存在padding-left/right/bottom/top 四个内边距
当给盒子加了内边距后,盒子就被撑大了,可以通过加减计算盒子所需要的大小,来维持原盒子的大小
盒子的实际高度/宽度=内容的高度/宽度+padding+dorder
内边距值的个数:
1个值:上下左右内边距
2个值:上下边距 左右边距
3个值 : 上 左右 下
4个值 : 上右下左
##外边距margin
外边距就是盒子和盒子之间的距离
和内边距padding的写法一致
外边距容易出现的问题:
1.当垂直方向上上面的盒子写了下外边距,下面的盒子写了上内边距,会发生外边距塌陷,其中2个盒子的间距不是外边距的和,而是其中的较大者,解决办法就是只给其中一个加外边距
2.在子元素和父元素的嵌套关系里面,当父元素没有内边距或者边框的时候,容易发生外边距合并,取其中的较大值,解决方案就是给父元素加上边框,加上内边距,再或者给父元素加overflow:hidden
盒子居中
1.必须指定盒子的宽度
2.给左右设置auto
margin:0 auto
margin:auto
margin-left:auto;margin-right:auto;
##补充知识点
1.去掉列表的默认样式
li {
list-style:none;
}
2.圆角边框border-radius
正方形变圆圈 border-radius:50%
槽形 border-radius:矩形高的一半px
3.盒子阴影box-shadow
参数
水平阴影和垂直阴影必须写,带单位px
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 inset 内阴影
4.css书写规范
选择器和{}中间要有空格
属性名和“ : ”之间没有空格 “ : ”和属性值之间要有空格
并集选择器每个选择器独占一行
选择器的嵌套最好不要超过三个
属性的定义另起一行
属性的末尾加分号