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书写规范

选择器和{}中间要有空格

属性名和“ : ”之间没有空格  “ : ”和属性值之间要有空格

并集选择器每个选择器独占一行

选择器的嵌套最好不要超过三个

属性的定义另起一行

属性的末尾加分号

posted @ 2020-08-27 00:51  20201124  阅读(184)  评论(0)    收藏  举报