HTML+CSS

92 阅读2分钟

语义化标签

做移动端开发使用,HTML5新增,特征和div一致,但是多了语义

image.png

字符实体

image.png

字体样式

  • font-style:控制字体倾斜(normal/italic)
  • font-family:设置字体,可以设置多个值,用逗号隔开,一个一个找,找到用户电脑上有的字体显示
  • font(复合属性):font:style weight size family
    • 只能省略前面两个,如果省略了相当于设置了默认值

image.png

文本样式

  • 文本缩进:text-indent
    • px
    • em,一个单位表示一个字大小
  • 文本水平对齐方式:text-align
    • 可以使用在span,a,input,img的父元素
  • 文本修饰:text-decoration

image.png

  • line-height行高
    • font:style weight size/line-height family
    • 网页精准布局时,会设置line-height:1可以取消上下间距行高

交集选择器

选择器1选择器2{css}

伪类选择器

每个标签都可以用

background和img的区别

background需要给div设置宽高,不然就没有显示 img不设置就会默认显示

块,行内,行内块

div p h1 ul li dt dd form

  • 独占一行
  • 宽度默认父元素宽度,高度默认由内容撑开
  • 可以设置宽高

行内 a span strong

  • 一行可以显示多个
  • 宽度和高度默认由内容撑开
  • 不可以设置宽高

行内块 img input textarea button select

  • 一行可以显示多个
  • 可以设置宽高

优先级

继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

权重计算

(行内样式的个数,id选择器的个数,类选择器的个数,标签选择器的个数)

  1. 先比较第一级数字,如果比较出来了,之后统统不看
  2. 如果第一级数字相同,此时再去比较第二级数字,如果比较出来了,之后统统不看
  3. 如果最终所有数字都相同,表示优先级相同,则比较层叠性

盒子模型