盒模型

    技术2022-07-11  95

    标准盒模型: 宽=内容的宽+左右内边距+左右外边距+左右边框 高=内容的高+上下内边距+上下外边距+上下边框

    CSS3中的弹性盒模型: 宽和高设置后,盒子中的内容想要往左或者往右移动时,用padding属性,但是盒子的大小不会发生改变。不会像标准盒模型那样被撑开。

    内边距(padding) padding-bottom: 设置元素的底部填充 padding-left: 设置元素的左部填充 padding-right: 设置元素的右部填充 padding-top: 设置元素的顶部填充 length: 规定以具体单位的填充值 % 基于父元素的宽度的百分比 inherit 从父元素继承 padding使用简写属性时,给四周设置填充属性 有一个值时(上 下 左 右) 有两个值时(上下 左右) 有三个值时(上 左右 下) 有四个值时(上 右 下 左) 注意:在标准盒模型中进行padding属性的更改,保证盒子与设置的大小一样,需要减去padding设置的值

    外边距(margin) margin-bottom 设置下外边距 margin-left 设置左外边距 margin-right 设置右外边距 margin-top 设置上外边距 length 规定以具体单位的填充值 inherit 从父元素继承 margin 使用简写属性时,给四周设置属性 有一个值时(上 下 左 右) 有两个值时(上下 左右) 有三个值时(上 左右 下) 有四个值时(上 右 下 左)

    边框(border) border-width(边框宽度): thin 细边框 medium 中等边框 thick 粗边框 length 定义宽度 inherit 从父元素继承

    border-style(边框样式) none 没有边框(默认值) solid 边框为单实线 dashed 边框为虚线 dotted 边框为点线

    border-color(边框颜色) 给边框设置颜色

    border简写属性: border:border-width border-style border-color;

    Processed: 0.017, SQL: 9