css盒子模型
1概念----页面布局的时候我们要学习三大核心:盒子模型、浮动和定位
2盒子模型的组成
1边框(border)
border-width border-style border- color
border-style
1 solid 实线边框
2 dotted 电线边框
3 dashed 虚线边框
给表格设置细线边框 border-collapse:collapse
2 外边距
*{
maring:0
padding:0
}
3 内边距(padding)
padding不会撑开盒子的情况
1 如果盒子没有指定宽度就不会撑开盒子,如果指定了宽度就会撑开盒子
2 如果不想被padding撑开盒子 将宽度和高度减去padding的二倍即可
css圆角边框( border-radius )
border -radius 像素值/百分比
他是圆的半径
如果想画一个圆 先设置一个正方行 在用 border-radius设置边长的一
半即可 或者写为50%
css盒子阴影(box-shadow)
h-shadow 必须值 水平阴影的位置 允许有负值
v-shadow 必须值 垂直阴影的位置 允许有复制
blur 可选 模糊距离
apread 可选 阴影的尺寸
color 可选 阴影的颜色
inset 可选 外部阴影是outset 但是不可以子在 box-shadow写这个词语 否则造成阴影失效 盒子阴影不占有空间不会影响其他阴影的排序
|