CSS

选择器

基础选择器

选择器名字 示例
标签选择器 p{color: green;}
类选择器 .red {color: red;}
ID选择器 #red {color: red;}
通配符选择器 * {color: red;}

复合选择器

选择器 作用 描述
后台选择器 a b{color: green;} b是孩子
子代选择器 a> b{color: green;} b是儿子
并集选择器 a , b{color: green;} 一次选中多个元素

伪类选择器

  • :link 未被访问的连接
  • :visited 已经访问的连接
  • :hover 鼠标放在上面的连接
  • :active 鼠标按下没有谈起的连接

focus伪类选择器

获取焦点的表单选择器

字体属性

文本属性

盒子模型

边框

还有个表格边框合并的属性:border-collapse:两条边合并成一条边

内边距

  • 内边距也会影响盒子的实际大小
  • padding 值得顺序是 上 右 下 左
  • 没有指定width,加了padding就不会改变盒子宽度

外边距

margin的语法跟padding用法一样

外边距应用-盒子居中

让盒子居中的前提条件是:

  • 盒子必须指定了宽度
  • 盒子左右的外边距都设置为auto

嵌套外边距塌陷

  • 解决方法1: 给父元素定义上边框,坏处就是撑大了盒子
    border-top: 1px solid transparent;
  • 解决方法2:指定一个上内边距,坏处就是撑大了盒子
    padding: 1px;
  • 解决方法三:为父元素添加 overflow
    overflow: hidden;

浮动,固定,绝对定位的盒子就不会有塌陷问题

元素显示模式

块元素

  • div ,h1 p ul ol li 一个占一行
  • 高度,宽度,外边距,内边距都可以控制
  • 宽度默认是容器的100%
  • 是一个容器及盒子,里面可以放行内或者块元素
  • <p><h1> 等用于存放文字的标签里面不能放<div>

行内元素

  • span a strong b em i
  • 一行可以用多个
  • 宽高,设置无效,背景颜色设置有效
  • 默认宽度就是它本身内容的宽度
  • 行内元素只能放文本或者其他行内元素

特殊情况

链接里面不能再放连接,<a>里面可以放块级元素

<input> <img>是行内款,一行可以给多个,也能设置宽高

元素显示模式的转换