盒模型精要padding,border,margin边框,就是环绕在标签宽度和高度周围的线条内外边距的四条边的宽度都叫做

padding, border, margin

边框, 就是环绕在标签宽度和高度周围的线条
内外边距的四条边的宽度都叫做边框宽度,这跟矩形的宽高的宽不一样嗷,这一点要注意
通过设置外边框能得到三角形! 创意十足服气服气

边框 border

width, style, color

边框三要素:

宽度 | border-width
样式 | border-style (连写时唯一不可省略的属性)
颜色 | border-color

offsetwidth 只包括“内容+padding+border”, offsetheight 同理

/* 1. 非连写:分开设置,每个属性名都是"方向+样式". 非常费代码量,企业中几乎不用 */
/* 1.1 分开设置各边宽度 */
blockElement{
  border-top-width: top (right) (bottom) (left);
  border-right-width: ;
  border-bottom-width: ;
  border-left-width: ;
}
/* 1.2 分开设置各边样式 */
blockElement{
  border-top-style: top (right) (bottom) (left);
  border-right-style: ;
  border-bottom-style: ;
  border-left-style: ;
}
/* 1.3 分开设置各边颜色 */
blockElement{
  border-top-color: top (right) (bottom) (left);
  border-right-color: ;
  border-bottom-color: ;
  border-left-color: ;
}

/* 2. 连写:一条设所有 */
/* 2.1 属性名只有方向 */
blockElement{
  /* 值为 none 时就没了对应的外边框 */
  border-top: (width) style (color); /* 样式不可省略. 颜色和宽度可省略,颜色默认为黑. */
  border-right: ;
  border-bottom: ;
  border-left: ;
}
/* 2.2 属性名只有样式 */
blockElement{
  /*
  任一个属性都可省略.
  属性值从顶部按顺时针取值,可省略,被省略的值取对边边框相应属性值.
  只设上边的值时则上右下左相应属性取值都一样.
  */
  border-width: top (right) (bottom) (left);
  border-style: top (right) (bottom) (left);
  border-color: top (right) (bottom) (left);
}
/* 2.3 属性名非常不具体,灵活性就小一些 */
blockElement{
  /* 宽度可省略倒是有点出乎意料 */
  border: (width) style (color);
}

/*
小记录:
1. style 中文可以是样式
2. 我们称 width style color 是边框的样式
3. 这就造成了歧义,很烦
*/

radius

边框圆角的作用: 将原始的直角变为圆角

格式:

border-radius: 左上右上右下左下; (设置每个角边框是半径为指定数值的四分之一圆, 单位是 px)
border-radius: 左上右上&左下右下; (只写三个的话, 第二个既是右上角的又是左下角的)
border-radius: 左上&右下右上&左下; (只写两个的话, 第一个值负责主对角线, 第二个值负责副对角线)
border-radius: 四个角; (只写一个就负责四个角)
border-radius: 50%; (做个圆)
所以想只设置某角的话, 应该四个都写, 不设圆角的写 0 或者这样写单独设置左上角(其余角同理): border-top-left-radius: 水平垂直; (这是专门设置某角的属性, 第一个值是圆心离左边框距离, 第二个值是圆心距离顶部边框距离, 这样可以设椭圆) border-top-left-radius: 水平&垂直; (这个属性的简写)

此外有个规律: 如果边框的宽度小于圆角的半径, 那么内圆和外圆都是圆弧形状如果边框的宽度大于或者等于圆角的半径, 那么内圆就会变成直角而不是圆角

box-shadow & text-shadow

给盒子添加阴影 box-shadow: h-shadow v-shadow blur spread color inset; 盒子阴影: 水平偏移垂直偏移模糊度阴影扩展阴影颜色内外阴影; 注意点:
1. 盒子的阴影分为内外阴影, 默认情况下就是外阴影
2. 快速添加阴影只需要编写三个参数即可
3. box-shadow: 水平偏移垂直偏移模糊度
4. 默认情况下阴影的颜色和盒子内容的颜色一致
给文字添加阴影文字阴影: text-shadow: h-shadow v-shadow blur-radius color; 水平偏移垂直偏移模糊度阴影颜色 ;

selector{
	box-shadow: h-shadow v-shadow blur spread color inset;
}

selector{
	text-shadow: h-shadow v-shadow blur-radius color;    
}

border-image (花里胡哨)

border-image-source: url(“文件路径”); (指定作为边框的图片, 若只有这个属性, 图片会被放到边框四个点上, 边框图片的优先级高于边框颜色且不共存)
border-image-slice: 距上距右距底距左 (fill); (不需要单位, 作用是把作为边框的图片切成了九块, 一般写一个)
border-image-width: ; (设置这个后边框宽度 border-width 还是原来的数值(浏览器调试可见)但不生效)
border-image-repeat: ; (指定除四角外的边框位置被图片如何填充, 值有 stretch, repeat, round, 作用见名知意)
border-image-outset: 往上往右往下往左; (指定边往外移动多少, 单位是 px)

连写:

border-image: 资源地址切割方式填充模式;

作用: 替代之前的滑动门方案, 实现拉伸不变性的效果

内边距 padding

边框和内容之间的距离就是内边距
给标签设置内边距之后,标签占有的宽度发生变化 (设置了 box-sizing: border-box; 就不会了)
内边距也会有背景颜色

/* 1. 内边距 padding */
/* 1.1 非连写: 分别设置各边内边距 */
blockElement{
  padding-top: ;
  padding-right: ;
  padding-bottom: ;
  padding-left: ;
}
/* 1.2 连写: 一条设所有 */
blockElement{
  /* 省略的效果同边框 */
  padding: top (right) (bottom) (left);
}

外边距 margin

标签与标签之间的距离就是外边距
外边距没有背景颜色

/* 2. 外边距 margin */
/* 2.1 非连写: 分别设置各边外边距 */
blockElement{
  margin-top: ;
  margin-right: ;
  margin-bottom: ;
  margin-left: ;
}
/* 1.2 连写: 一条设所有 */
blockElement{
  /* 省略的效果同边框 */
  margin: top (right) (bottom) (left);
}

外边距合并(塌陷)现象 collapse

垂直方向上相邻的 margin 会合并, 结果是只有 margin 值大的才生效
- 注意: 只有垂直方向才有外边距合并现象, 水平方向没有