css盒子模型
盒子模型由内容,边框(border),内边距(padding),外边距(margain)组成
边框(border):
属性:边框粗细(border-width),边框样式(border-style),边框颜色(border-color)
border : border-width border-style border-color
例如:border-top:1px dashed pink;
内边距(padding):
内边距指盒子内部的距离,有padding-top,padding-bottom,padding-left,padding-right
内边距简写的写法
- padding:10px; 指4个内边距上下左右都是10
- padding:10px 20px; 指上下内边距为10,左右为20
- padding:10px 20px 30px; 指上边距为10,左右边距为20,下边距为30
- padding:10px 20px 30px 40px:其次序以此为上,右,下,左,呈顺时针
另外需要注意的是padding可能会撑大盒子,所以为保证盒子确切的大小,我们需要用width和height 减去多出的padding。但当一个盒子在没有规定宽度的情况下,padding不会撑大盒子。
所以盒子的实际大小=内容的宽度,高度 + 内边距 + 边框
外边距(margain):
外边距margain是指盒子与盒子之间的距离 或 盒子与边框之间的距离 ,其简写方式与padding一样。
此外margin可以让块级盒子居中对齐,方式有二:
- margin:0 auto;
- margin:auto;
当上下两个边框垂直放置并都有外边距时,其二者的距离是其两个外边距最大的那个,而不是二者相加。
嵌套块元素
当子盒子在父盒子中想要移动位置并且父类盒子不动时,解决方案:
1.给父类元素定义一个上边框 border-top:1px solid transparent;
2.给父类元素指定一个 上padding值 padding-top:1px;
3.overflow:hidden;
块级盒子水平居中:
其前提是盒子必须指定了宽度,并且左右的外边距都设置为auto
写法一
margin-left: auto; margin-right: auto;
写法二 margin: auto;
写法三 margin: 0 auto;
清除元素的默认内外边距
*{ margin: 0;
padding: 0;
}
该语块在以后的网页设计中都要写
注意:行内元素尽量只设置左右内外边距,不设置上下内边距
圆角边框(将边框设为圆形或椭圆形)
border-radius:length;
其值可以是数值或百分比
若想将一个矩形变成椭圆,只需将圆的半径设为矩形高的一半
盒子阴影
box-shadow:水平阴影 垂直阴影 模糊程度 影子大小 阴影颜色 内/外阴影
其默认为外阴影,阴影颜色也可省略不写
例如 box-shadow: 20px 20px 50px 20px rgba(0,0,0,.1);