html5 03 选择器、伪元素、盒模型、边框圆角、盒子阴影、安卓机器人案例

01-认识css3

• 什么是css3？
  CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性，弥补了CSS2的众多不足之处，使得 Web开发变得更为高效和便捷
• css3现状
  • 浏览器支持程度差，需要添加私有前缀
  • 移动端支持优于PC端
  • 不断改进中
  • 应用相对广泛
• 如何对待css3兼容问题？
  • 渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
  • 优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
  • 考虑用户群体：例如医院、银行等政府网站基本不需要c3
  • 听产品经理的
  • 听boss的

02-属性选择器

• li[style]：li标签中有style属性既满足条件
• li[class=red]：li标签中class属性的值必须是red
• li[class*=red]：li标签中只要包含red
• li[class^=blue]：li标签中以blue开头的
• li[class$=blue]：li标签中以blue结尾的

03-兄弟选择器

• .first + li：.first下面相邻的li元素，如果不是li元素就不起作用
• .first ~ li：.first下面所有的li元素会起作用

04-伪类选择器

• li:first-child：li的父元素的第一个子元素，如果第一个子元素的类型为li起作用，如果不是li，不起作用
• li:last-child：li的父元素的最后一个子元素，如果最后一个子元素的类型为li起作用，如果不是li，不起作用
• li:first-of-type：li的父元素的第一个子元素，如果第一个子元素不是li，自动跳过，继续查找，一直查找到第一个li元素
• li:last-of-type：li的父元素的最后一个子元素，如果最后一个子元素不是li，自动跳过，继续查找，一直查找到最后一个li元素
• li:nth-child(5)：查找到索引为5的（索引从1开始），如果类型不是li，索引也会计算
• li:nth-child(even)：查找到索引为偶数的，如果类型不是li，索引也会计算
• li:nth-child(odd)：查找到索引为奇数的，如果类型不是li，索引也会计算
• li:nth-of-type(even)：产找到索引为偶数的，如果类型不是li，索引不会计算
• li:nth-of-type(odd)：产找到索引为奇数的，如果类型不是li，索引不会计算
• li:nth-of-type(n):n取值0~子元素的长度，表达式最后的结果如果小于=0 无效的
• li:empty：代表li的父元素的子元素下面没有任何内容的元素，连空格都没有

05-伪元素

普通的所有标签都会有before、after，input、img但标签是没有的

• ::before：默认在普通标签的左面
• ::after：默认在普通标签的右面
• content：放置内容的，并且必须是有的
• 默认是行内元素，想设置宽高，转化为块元素，display:block;float、position

06-其他伪元素

• ::first-letter：设置首字母
• ::first-line：设置文本第一行的样式
• ::selection：设置当前选中的内容的样式

07-文本阴影的使用

• text-shadow:2px 1px 1px red;
• 第一个值：设置文本阴影横向的偏移
• 第二个值：设置文本阴影纵向的偏移
• 第三个值：设置文本阴影虚化程度
• 第四个值：设置文本阴影的颜色
• 文本阴影是可以设置多层的，用逗号隔开即可

08-盒模型

我们在给元素设置宽和高的时候，默认，宽高是内容的宽高

• box-sizing：border-box
  宽高是设置盒子的实际的宽高，不会被padding、border给撑开，并且内容，会变小，因为padding和border向里撑开
• box-sizing：content-box
  设置内容的宽高，会被padding、border给撑开，content-box也是默认状态

09-边框圆角

• border-radius：10px;这样是设置四个角都有效果
• border-radius：10px 20px;
  第一个值：左上、右下
  第二个值：右上、左下
• border-radius：10px 20px 30px;
  第一个值：左上
  第二个值：右上、左下
  第三个值：右下
• border-radius：10px 20px 30px;
  第一个值：左上
  第二个值：右上
  第三个值：右下
  第四个值：左下
• 圆：设置圆角的宽高的一般
• 半圆：高度设置一半，圆角设置，左上和右上即可

11-盒子阴影

• box-shadow:6px 4px 12px 5px #000；
• 第一个值：设置盒子阴影横向偏移
• 第二个值：设置盒子阴影纵向偏移
• 第三个值：设置盒子阴影的虚化程度
• 第四个值：设置盒子阴影的范围
• 第五个值：设置盒子阴影的颜色
• 第六个值：设置盒子的内阴影 inset
• 同样也是可以设置多层阴影，还是用逗号隔开

机器人案例

• 头
  脑袋和眼睛
  脑袋：一个半圆，高度设置为宽度的一般，圆角给左上和右上设置
  眼睛：给脑袋这个元素设置伪元素，左眼睛：before,右眼睛：after
• 身体
  胳膊和身体
  身体：长方形，左下和右下设置圆角
  胳膊：左胳膊：before，右胳膊：after
• 腿部
  准备一个元素，设置伪元素即可
  左腿：before，右腿：after