css-01

1. 子元素选择器

子元素选择器只能选择作为某子元素(亲儿子)的元素

.class>h3{color:red;font-size:14px;}

2. 伪类

  • a:link 未访问的链接
  • a:visited 已访问的链接
  • a:hover 鼠标移动到链接上
  • a:active 选定的链接
    尽量按照lvha的顺序

3. 块级元素

常见的块级元素
<h1>-<h6><p><div><ul><ol><li>

特点

  1. 自己独占一行
  2. 高度,宽度,外边距,内边距都可以控制
  3. 宽度默认是容器的100%
  4. 是一个容器及盒子,里面可以放行内或者块级元素

4.行内元素

<a><em><i><span>等

特点

1.行内元素在一行上,一行可以显示多个

  1. 宽,高设置无效
  2. 默认宽度就是它本身内容的宽度
  3. 行内元素只能收容文本或其他行内元素

5. 行内块元素(inline-block)

<img /><input /><td>

特点

  1. 和相邻行内元素在一行上,但是之间会有空白缝隙,一行可以显示多个
  2. 默认宽度就是他本身的内容宽度
  3. 高度,行高,外边距以及内边距都可以控制

6. display

  • 块级转行内:display:inline
  • 行内转块级:display:block
  • 块,行内元素转换为行内块:display:inline-block

7.line-height

可以使文字在盒子中垂直居中
(令line-height等于盒子高度)

8.background-position

背景position - 副本.png

9. 背景附着
背景附着.png

10. 背景透明

背景透明.png

11.css优先级

从高到低

  • !important
  • 行内样式style
  • ID选择器
  • 类选择器(class)
  • 标签选择器
  • 继承或者*
权重叠加
权重.png

微信截图_20200915224425.png

微信截图_20200915224434.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。