宽：width

  • 写法：
    （1）width：200px;
    （2）width：50%;(百分比，表示是父元素宽度的百分之几)

高度：height

  • 写法：
    （1）height:300px;
    （2）hetght：auto：（高度没有百分比的写法，高度由内容撑高）

提示：

  1. 紧贴内容的左上角是宽高的起点。（清除浏览器默认样式后）
  2. 行内元素设置width、height无效，除非用display:block转换为块元素，或用display：inline-block转为行内块元素。

边框属性

  1. border：1px solid red（由宽度px，边框样式，颜色组成，）
  • 线条样式

solid实线
dotted点状线
dashed虚线
double双实线（想要设置双实线必须边框的宽度大于3px）

  1. 拆分：
  • border-top：上边框
  • border-left：左边框
  • border-right：右边框
  • border-bottom:下边框
  1. border属性制作三角形：
  1. div{
  2.     width:0;
  3.     height:0;
  4.     border:100px solid transparent;
  5.     border-top-color:red;
  6. }

padding

  1. 设置盒子的内补白
    （padding：1px 2px 3px 4px）
  • 一个值：四个方向都有填充
  • 两个值：上下 左右
  • 三个值：上 左右 下
  • 四个值：上 右 下 左（顺时针方向）
  1. 特点
  • 如果盒子有宽度和高度，再加padding值，则盒子一定会变大
  • 如果盒子没有设置宽度，且默认宽度等于是父亲的宽度，则这个盒子，加padding并不影响盒子的宽度,只影响高度。
  • 行内元素不支持上下的padding（能撑开高度但是不占位置)
  1. 拆分
    方向：
    padding-top:上填充
    padding-right:右填充
    padding-bottom：下填充
    padding-left：左填充

margin

  1. 设置盒子的外边距：
    一个值：四个方向
    两个值：上下 左右
    三个值：上 左右 下
    四个值：上 右 下 左
  2. 行内元素不支持上下的margin
  3. 拆分
    margin-top:上填充
    margin-right：右填充
    margin-bottom：下填充
    margin-left：左填充