学习回顾No.1

学习回顾No.1

box-sizing

• 这个属性实际上是 CSS3 时期才出现的
• 首先需要知道两种盒模型，这个属性其实做的事情就是切换这两种盒模型
  • content-box（默认值）如果设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边框的宽度都会被增加到最后绘制的元素宽度中，也就是说默认的盒子模型只规定了内容的宽度。
  • border-box 则告诉浏览器：我想要设置的宽度是包含边框和内边框在内的，也就是说，如果我设置了一个元素的宽度为100px，那么这100px里面包含了它的border和padding，内容区的实际宽度并不是100px，而是宽度减去边框和内边框的宽度。大多数情况下，这样的盒子模型更符合我们想要设置的一个宽度。
• 两种盒模型的区别
  • 在于宽高的界定范围（高度跟宽度是一个道理）

rgba

• 这个其实也是 CSS3 才推出的
• 后面的 a 代表的是 alpha ，指的是透明度
• 扩展：HSL、HSLA
• opacity 也是设置透明度，那么这个 opacity 和 rgba 有什么区别?
• 其中opacity设置的透明度对文字也起相同的作用，文字也会变得透明，而rgba对背景设置的透明度并不会对其他元素产生相同的影响，只对背景产生透明度效果。

表单进阶

• 新的表单控件
  • 下拉列表（select元素）
  • 文本域（textarea元素）
  • button（默认为提交，可设置type=“button”，即为普通按钮）
    • button 如果在 form 元素里面，默认是提交功能，等同于 submit
  • reset（重置按钮，将表单中的内容进行重置）
  • label（关联，可以形成比较友好的勾选效果，点击文字或者图片都能起到相应的勾选作用）
    • 非常常用，本质上是拿来关联表单控件，现在经常会拿这个 label 去和复选框、单选框配合起来做一些好看的点击效果
• 伪元素选择器：两个冒号
• 伪类选择器：一个冒号
  • 一个冒号和两个冒号的写法实际上也是从 CSS3 开始正式进行区分
  • 伪类选择器和伪元素选择器还有语义上面的区别，伪类代表选择元素的特殊状态（:hover、:avtive、:link）
  • 伪元素表示选择元素的特定部分（::placeholder、::first-line、::first-letter、::before、::after）

精灵图

• 名字很多：雪碧图、图片拼合技术、图片整合技术
• 搞清楚原理
  • 为什么当时诞生了这个技术，为了解决什么问题
  • 解决了过多小图标的问题，将所有的小图标汇总到一张大图中。
  • 这个技术具体的实现细节
  • 通过对大图进行偏移，得到想要的小图标，将其显示出来。
    • background-position

绝对定位

​ 下面条件满足任何一个，使用绝对定位：

1. 元素出现在一个天马行空的位置上。
2. 元素是否存在，不影响其他元素的排列。
3. 单个元素在某个区域内水平垂直居中。

• 子绝父相

fixed 和 absolute 的区别

fixed是绝对定位的一种特殊情况，它们的参考系不一样

• absolute 参考有定位的父元素。
• fixed参考视口。
• 所有的绝对定位、固定定位、浮动都会将元素自动变为display:block；

属性值的计算过程

• 每个元素实际上都有所有的属性
• 从无属性值到每个属性都有值：
  1. 确定声明值：参考样式表中没有冲突的声明，作为css属性值。
  2. 层叠冲突：对样式表有冲突的声明使用层叠规则，确定css属性值。比较重要性、特殊性和源次序。
  3. 使用继承：对仍然没有值的属性，若可以继承，则继承父元素的值。
  4. 使用默认值：对仍然没有值的属性，使用默认值。
• 最终结果并不是写的声明值，而是需要通过计算出来的
• 开发中经常使用a { text-decoration: none; color: inherit; }
• 使a元素强制继承父元素的颜色，因为a元素有默认样式表，不写无法修改颜色。

清除浮动

• 最常用的方法：
• .left { float: left; }
• .right { float: right; }
• .clearfix:after { content: “”; display: block; clear: both; }
• 把高度塌陷的父元素增加一个伪类元素，重新把父元素撑开，恢复浮动元素的高度。

伪类选择器

css伪类选择器大全：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes

• :link 选中未访问过的超链接
• :visited 选中已访问过的超链接
• :hover 选中鼠标移入的元素
• :active 选中鼠标按下的元素
• :focus 选中聚焦的表单元素
• :disabled 选中被禁用的表单元素
• :checked 选中被选中的表单元素
• :first-child 选中第一个子元素
• :last-child 选中最后一个子元素
• :nth-child(an+b) 选中第an+b个子元素，a和b是常量，n的值会从0开始依次递增
• :first-of-type 选中第一个指定类型的子元素
• :last-of-type 选中最后一个指定类型的子元素
• :nth-of-type(an+b) 选中第an+b个指定类型的子元素，a和b是常量，n的值会从0开始依次递增
• 爱恨法则：LOVE HATE => LVHA
• :link :visited :hover :active 覆盖

Contenteditable属性

• 该属性是一个布尔属性，可以设置到任何元素上，它可以让该元素变为可编辑的状态。在实际开发中，通常用于制作富文本框。
• 离我们比较远，制作富文本框有现成的框架可以套用

table元素

• table元素用于表达一个表格，受CSS3的影响，现在已经很少使用了
• 效率太低，浏览器的渲染效率
• 前台给用户用的，后台是给公司内部使用的
• 后台还可能使用table元素，而前台不怎么使用了
• 后台的更新速度越大于前台，后台系统中很多情况下都可以用已封装的现成工具