CSS盒子模型

颜色赋值

• 三原色: 红绿蓝 RGB Red Green Blue , 每个颜色的取值范围0-255
• 五种颜色赋值方式:
  • 颜色单词赋值: red/yellow/pink/purple…
  • 6位16进制赋值: #ff0000
  • 3位16进制赋值: #f00 每一位重复一次 等效ff0000
  • 3位10进制赋值: rgb(255,0,0)
  • 4位10进制赋值: rgba(255,0,0,0-1) a=alpha 设置透明度 值越小越透明

背景相关

• background-image:url(“资源路径”); 设置背景图片
• background-size: 宽度 高度; 设置背景图片尺寸
• background-repeat: no-repeat; 禁止重复
• background-position: 横向偏移值 纵向偏移值; 设置背景图片的位置,可以将偏移值换成偏移的百分比

文本和字体相关样式

• text-align:left/right/center; 设置水平对齐方式
• text-decoration:overline上划线/underline下划线/line-through删除线/none去掉文本修饰; 设置文本修饰
• text-shadow:颜色 x偏移值 y偏移值 浓度; 设置文本阴影
• line-height:20px; 设置行高,默认高度包裹文本, 可以实现垂直居中
• font-size:20px; 设置字体大小
• font-weight:bold/normal; 设置加粗和去掉加粗
• font-style:italic;设置斜体
• font-family: xxxx,xxx,xxx; 设置字体
• font: 30px xxx,xxx,xxx; 设置字体大小+字体

设置元素的显示方式 display

• block: 块级元素, 特点: 独占一行并可以修改宽高, 包括:h1-h6,p,div
• inline: 行内元素, 特点: 共占一行,不能修改宽高, 包括:span,b,i,u,s,超链接a
• inline-block:行内块元素,特点: 共占一行并可以修改宽高,包括:input,img
• none: 隐藏元素

盒子模型

• 盒子模型= content内容+margin外边距+border边框+padding内边距
• 盒子模型用来控制元素的显示效果:
  • content内容: 控制内容的显示宽高
  • margin外边距: 控制元素的显示位置
  • border边框: 控制边框效果
  • padding内边距: 控制元素内容的位置

盒子模型之Content内容

• 用来控制元素的显示宽高
• 相关样式:
  • width 设置宽度
  • height 设置高度
• 两种赋值方式: 1. 像素 2. 上级元素的百分比
• 行内元素不能修改宽高,如果必须修改则将元素改成块级或行内块

盒子模型之Margin外边距

• 作用:用来控制元素显示的位置
• 元素距上级元素或相邻兄弟元素的距离称为外边距
• 赋值方式:
  • margin-left/right/top/bottom:10px; 单独某一个方向添加外边距
  • margin:10px; 四个方向添加外边距
  • margin:10px 20px; 上下和左右赋值 左右auto时为居中
  • margin:10px 20px 30px 40px; 上右下左顺时针赋值
• 上下相邻彼此添加外边距,取最大值. 左右相邻彼此添加外边距 两者相加
• 行内元素上下外边距无效
• 粘连问题: 当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距会出现粘连问题, 给上级元素添加overflow:hidden解决此问题

盒子模型之border边框

• 作用:控制边框效果
• 赋值方式:
  • border:粗细 样式 颜色; 四个方向添加边框
  • border-left/right/top/bottom:粗细 样式 颜色; 单独某一个方向添加边框
• border-radius:10px; 设置圆角 值越大越圆

盒子模型之Padding内边距

• 作用: 控制元素内容的位置
• 赋值方式: 和外边距类似
  • padding-left/right/top/bottom:10px; 单独某个方向赋值
  • padding:10px; 四个方向赋值
  • padding:10px 20px; 上下和左右赋值
  • padding:10px 20px 30px 40px; 上右下左顺时针赋值
• 默认情况下给元素添加内边距会影响元素的宽高, 给元素添加box-sizing:border-box;后则不会影响宽高