淘宝买的999教程和你们分享之css选择器，关系选择器，属性选择器，伪类元素，外边距塌陷等

css

基本语法机构：

选择器 {
属性：值；
}

选择器作用：选中标签对齐进行样式美化
属性作用：对元素进行哪样样式美化
值作用：决定属性美化样式的程度
注意：css中的属性与html元素行内属性不是一个东西

css 选择器

• 元素选择器
• html标签；选中所有对应的html标签
• .class 选中具有 class 行内标签的属性
• #id 选中具有 id 行内标签的属性
• *选中所有选择器
• id 与 class 区别：
• id：具有唯一性 建议：不要给不同的元素命名同一个id值
• class 类选择器：可以给对各元素同一个class值

关系选择器

• 父子

• 空格 子孙
• ~普通兄弟
• +相邻兄弟

属性选择器

• 语法 元素[属性+值]
• 例如：input[name=login] 选中Input元素name=login的标签

伪类元素

• 鼠标事件 ：hover 当鼠标移动到元素时候显示什么样式
  ：active 在鼠标点击和释放之间的样式
  ：link 链接访问前的样式
  : visited 链接访问后的样式 注意：link visited 只能针对链接a标签
  不建议使用 visited link 有缓存

css属性

• 文字类：
  大小 font-size
  颜色 color
  粗细 font-weight
  形式 font-family

• 文本修饰：
  对齐方式 text-align center 居中 left 左对齐 right 右对齐
  行高 line-height 用于文本垂直方向对齐方式 值小于等于父元素高度

• text-decoration-xx:复合属性 要想出现效果 前提必须要有修饰。

• text-shadow 设置文字阴影
  四个值：
  值一 影子文字在水平方向移动的位置；大于0往右移动，小于0往左移动
  值二 影子文字在竖直方向移动位置 大于0往下移动，小于0往上移动
  值三 影子文字清晰度 大于0 值越大越模糊
  值四 设置影子文字颜色

• 注意：在css样式中 一般文字或者文本类属性是可以被继承的。

• 盒子模型
  组成元素：magin 边框与其他盒子的距离 magin 变大 盒子不会变化，盒子与盒子之间的距离会变大
  padding 是边框距离与内容区域的距离 标准盒子 padding 变大 盒子变大
  border 盒子的边框
  content 标准盒子 为 width 和 height
  IE盒子：
  content = width - padding-left - padding-right - border-left - border-right
  在IE盒子中 border 与 padding 变化不会改变盒子大小；会改变 内容大小

外边距塌陷

• 外边距塌陷问题：
  上下两个盒子；小的外边框边距被大的外边距吸收了
  针对两个上下相邻盒子，盒子距离为大的外边距
  左右相邻盒子之间的距为 外边距之和
  总结：外边距塌陷只会发生在上下盒子之间，不发生在左右盒子之间
  换句话说：上下盒子距离为大的外边距；
  左右盒子距离为两个盒子外边距之和

• 注：块元素有默认8px外边距
  为了防止浏览器外边距默认值影响页面效果；在初始化时候清空所有元素默认外边距

*{
    margin: 0;
    padding: 0;
}

补充内容

• body 标签
  默认高度为0 默认宽度百分之百 也等于视图窗口宽度
  默认外边距为8px

• 非常严重的问题， padding 会撑开 带有 widht 和height盒子

​ 1. 我们要求这个 div 就是标准的 200 * 200

​ 2. 但是我们给了padding就撑开盒子了 240

​ 3. 问我们怎样能保证盒子 不超过 200 * 200

• 在布局板块时候；如果是两个独立的盒子；非父子和子孙的盒子；想要保持距离；建议使用margin
  margin 作用；决定目标盒子与其他盒子之间的距离
  padding 决定是；里面内容与盒子之间距离，但是会撑大盒子
  如果想要让盒子里面内容与盒子保持距离；且不撑大盒子；可以给子元素添加外边距来控制