CSS样式（边框边距）

来源：互联网发布：淘宝买女鞋哪家店好编辑：程序博客网时间：2024/06/11 02:03

CSS样式（边框边距）

1.边框
2.边距

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>body {text-align: center;background-color: gainsboro;}.box {width: 960px;height: 600px;background-color: bisque;margin: 0px auto;/* * 边框 * border-top-style: solid 实线dotted 点线  dashed  虚线; * border-top-color:   边框颜色 * border-top-width:   边框粗细 */border-top-style: dashed;border-top-color: royalblue;border-top-width: 5px;/* * 边框属性连写  * 特点：没有顺序要求 线形不能少 */border: royalblue solid 5px;/* * 内边距属性：(内边距会撑大盒子) * padding-left: 10px; 左内边距 * padding-right: 20px;右内边距 * padding-top: 30px;上内边距 * padding-bottom: 40px;下内边距 *  * 内边距属性连写 * padding连写: 20px;   上右下左内边距都是20px * padding连写: 20px 30px;   上下20px   左右30px * padding连写: 20px  30px  40px;   上内边距为20px  左右内边距为30px   下内边距为40 * padding连写:  20px  30px   40px  50px;   上20px 右30px  下40px  左  50px * * 内边距撑大盒子的问题 *  * 影响盒子宽度的因素 * 内边距影响盒子的宽度 * 边框影响盒子的宽度 * 盒子的宽度=定义的宽度+边框宽度+左右内边距 *  * 继承的盒子一般不会被撑大 * 包含（嵌套）的盒子，如果子盒子没有定义宽度，给子盒子设置左右内边距，一般不会撑大盒子, * 只有当你的内边距宽度大于父元素的宽度才会撑大。 */padding-left: 10px;padding-right: 20px;padding-top: 30px;padding-bottom: 40px;padding: 10px;/* * 外边距 * magin-left: 10px; 左外边距 * magin-right: 20px;右外边距 * magin-top: 30px;上外边距 * magin-bottom: 40px;下外边距 *  * 外边距连写 * magin: 20px;   上右下左外边距都是20px * magin: 20px 30px;   上下20px   左右30px * magin: 20px  30px  40px;   上外边距为20px  左右外边距为30px   下外边距为40 * magin:  20px  30px   40px  50px;   上20px 右30px  下40px  左  50px *   * 垂直方向外边距合并 * 两个盒子垂直一个设置上外边距，一个设置下外边距，取的设置较大的值。 *  * 嵌套的盒子外边距塌陷:给垂直方向的内嵌盒子设置外边距的时候，会出现父盒子塌陷的现象。 * 解决方法：1  给父盒子设置边框            *2给父盒子overflow:hidden;   bfc   格式化上下文 * */magin-left: 10px;magin-right: 20px;magin-top: 30px;magin-bottom: 40px;magin: 10px;}</style></head><body><div class="box"></div></body></html>

阅读全文

0 0

CSS样式（边框边距）

CSS样式（边框边距）

1.边框2.边距

1.边框
2.边距