盒子模型content+border+padding+margin

颜色赋值

• 三原色 RGB Red Green Blue , 每个颜色的取值范围0-255

• 五种颜色赋值方式:

  • 颜色单词赋值: red/yellow/blue/pink....

  • 6位16进制赋值: #ff0000

  • 3位16进制赋值: #f00

  • 3位10进制赋值: rgb(255,0,0)

  • 4位10进制赋值: rgba(255,0,0,0-1) a=alpha  色彩空间：透明度

背景图片

• background-image:url("路径") ; 设置背景图片

• backgournd-size:20px 30px; 设置背景图片的尺寸

• background-repeat:no-repeat; 设置背景图片禁止重复

• background-position: 横向偏移值 纵向偏移值; 设置背景图片的位置, 还可以通过百分比控制

文本和字体相关

• text-align:left/right/center; 设置水平对齐方式

• line-height:30px; 设置行高, 多行可以设置行间距, 单行可以实现垂直居中

• text-shadow:颜色 x偏移值 y偏移 浓度; 设置阴影

• text-decoration: overline上划线/underline下划线/line-through删除线/none去掉线 文本修饰

• font-size:30px; 设置字体大小

• font-weight:bold加粗/normal去掉加粗

• font-style:italic;设置斜体

• font-family: xxxx,xxxx,xxxx; 设置字体

• font: 30px xxx,xxx,xxx; 设置字体大小+字体

• color:red; 设置字体颜色

元素的显示方式display

• block: 块级元素, 特点: 独占一行,元素可以修改宽高, 包括: h1-h6,p,div

• inline: 行内元素, 特点: 共占一行,元素不可以修改宽高, 包括: span,b,i,s,u,a

• inline-block: 行内块元素, 特点:共占一行,元素可以修改宽高, 包括: 图片img,控件input

• none: 隐藏元素

行内元素宽高是不能修改的, 如果必须修改次元素的宽高, 需要将元素的显示方式改成块级或行内块

盒子模型

• 盒子模型=content内容+margin外边距+padding内边距+border边框

• 通过盒子模型相关的样式控制元素的显示效果

  • content: 控制元素的显示尺寸

  • margin: 控制元素的显示位置

  • border: 控制元素的边框效果

  • padding:控制元素内容的位置

盒子模型之content内容

• 作用:控制元素的显示尺寸

• 通过width/height两个样式控制元素的宽高

• 两种赋值方式:

  • 像素

  • 上级元素的百分比

• 行内元素宽高是不能修改的, 如果必须修改次元素的宽高, 需要将元素的显示方式改成块级或行内块

盒子模型之margin外边距

• 作用: 控制元素的显示位置

• 赋值方式:

  • margin-left/right/top/bottom:10px; 单独某一个方向赋值

  • margin:20px; 四个方向赋值

  • margin:20px 40px; 上下20 左右40

  • margin:10px 20px 30px 40px; 上右下左顺时针赋值

• 外边距塌陷

  • 兄弟元素上下相邻,彼此添加外边距,取最大值

  • 父子元素,上边缘重叠时, 父子元素的上外边距 取最大值, 会导致父子元素粘连到一起, 如果需要解决此问题,需要在父元素里面添加overflow:hidden

盒子模型之border边框

• 赋值方式:

  • border:粗细 样式 颜色; 四个方向添加边框

  • border-left/right/bottom/top:粗细 样式 颜色; 单独某一个方向添加边框

• 设置圆角: border-radius:20px; 值越大越圆 超过宽高一半为正圆

盒子模型之内边距

• 作用: 控制元素内容的位置

• 赋值方式:(和外边距类似

  • padding-left/right/top/bottom:10px; 单独某一个方向赋值

  • padding:10px; 四个方向赋值

  • padding:10px 20px; 上下10 左右20

  • padding:10px 20px 30px 40px; 上右下左顺时针赋值

• 默认情况下给元素添加内边距会影响元素的宽高, 给元素添加 box-sizing:border-box; 样式后不再影响

CSS三大特性

• 继承: 元素可以继承上级元素文本和字体相关的样式,部分标签自带效果不受继承影响

• 层叠: 多个选择器可以选择到同一个元素, 添加的样式不同的话则所有样式全部层叠生效, 如果添加的样式相同则由优先级决定

• 优先级(指选择器的优先级): 作用范围越小优先级越高, id>class>标签名> 继承(属于间接选中) , !important关键字可以将样式的优先级提升为最高