背景属性

  • 背景颜色: background-color 默认值 transparent
    背景颜色,撑不开盒子的宽高,需要设置背景,盒子需要有宽高
  • 背景图片: background-image.url(背景图片路径)
  • 背景平铺: background-repeat
    • repeat 默认值:默认水平垂直平铺
    • no-repeat 默认值:不平铺
    • repeat-x x轴平铺
    • repeat-y y轴平铺
  • 背景定位:background-position
    • top bottom,写两个方位名词,left right center top bottom
    • 30px 5px 写两个具体的值 第一个值是x轴移动的距离,第二个值是y轴移动的距离
    • 方位名词和具体的数值混用,如果是一个方位名词 只能写水平方向 left right center 如果第二个是方位名词,只能写垂直方向 top bottom center
    • 只写一个值,另外一个值默认center
  • 背景属性连写,没有顺序要求 尽量按照 background:color url() repeat position (背景颜色 背景图片 背景平铺 背景位置) 来写

元素的显示模式

  • 块元素(block)
    • 常见代表 div,p,h1~h6,ul,ol,li,dl,dt,dd,form
    • 特点:
      1. 独占一行
      2. 可以设置宽高
      3. 不设置宽,默认父元素的宽,不设置高度的时候,默认高度为0,内容会撑开8高度
  • 行内元素
    • 常见代表 a,span,em,i,strong,b,del,s,ins,u
    • 特点
      1. 一行显示多个
      2. 不能设置宽高
      3. 默认跨高为0,内容会撑开宽高,代码换行会生成缝隙
  • 行内块元素
    • 常见代表 img,input,button,textarea…
    • 特点:
      1. 一行显示多个
      2. 可以设置宽高
      3. 有默认宽高,代码换行会生成缝隙

块元素水平居中,设置宽度,给自己添加 margin: 0 auto;
文字,行内元素,行内块元素,水平居中,给他们的父元素设置 text-align: center;

  • 显示模式转换
    • 行内元素 ,行内块元素转块元素 display:block
    • 行内元素转行块 display:inline-block
  • css的三大特性之二
    • 层叠性 样式冲突的时候,后边的样式会覆盖前边的样式,就近原则
    • 继承性 子元素会继承父元素的某些样式 color,font-,text-,line-height
      1. a标签不会继承父元素的文字颜色
      2. h1~h6不会继承父元素的文字大小
    • 继承性的特殊情况
      1. 继续性,子元素会继承父元素的某些样式,
      font-,text-,color,line-height 这些可以继承的
      2. a标签不会继承父元素的文字颜色,
      h1~h6不会继承父元素的文字大小
  • 行高的小技巧
    • 一行文字,行高和盒子高度相等的时候,这行文字垂直居中
    • 行高小于盒子高度的时候,这行文字偏上显示
    • 行高大于盒子高度的时候,这行文字偏下显示
  • 标签的嵌套规范
    • 块元素里边可以嵌套文字,块元素,行内元素,行内块元素
    • 行内元素里边只能嵌套文本和行内元素,不能嵌套块元素和行内块元素,

如果行内元素非要嵌套块元素,最好把行内元素转为块元素,

a里边不能嵌套a标签

注意:p和h1~h6里边不要嵌套块元素,
div可以嵌套任意标签

继承的权重为0

  • 继承的权重为0,子元素和父元素继承过来的样式,发生冲突,永远执行子元素自身的样式