2020年4月29日总结(二)

一、CSS特性

1.1.继承

• CSS中有些属性是可继承的，何为属性继承？
  • 一个元素如果没有设置某属性的值，就会跟随父元素的值
  • 当然，一个元素如果有设置某属性的值，就使用自己设置的值
  • 比如color、font-size等
  • 继承的注意事项：
    • CSS属性继承的是计算值，不是当初编写属性的指定值(字面值)

1.2.层叠

• CSS允许多个相同名字的CSS属性层叠到同一个元素上
  • 层叠的最后结果是：只有一个CSS属性会生效
  • 哪个CSS属性会生效，取决于CSS属性所处环境的优先级(权重)高低
    • 在优先级(权重)上规定：id>class>元素
    • !important:10000
    • 内联样式:1000
    • id选择器:100
    • 类选择器、属性选择器、伪类:10
    • 元素选择器、伪元素:1
    • 通配符:0
  • 比较优先级的严谨方法:
    • 从权值最大的开始比较每一种权值的数量多少，数量多的则优先级高，即可约束比较
    • 如果数量相同，比较下一个较小的权值，以此类推
    • 如果所有权值比较完毕后，发现数量都相同，就采取"就近原则"

1.3.CSS属性使用经验

• 为何有时候编写的CSS属性不好使没有可能是因为：
  • 选择器的优先级太低
  • 选择器没选中对应的元素
  • CSS属性的使用形式不对
    • 元素不支持此CSS属性，比如span默认是不支持width和height的
    • 浏览器不支持此CSS属性，比如旧版本的浏览器不支持CSS3的某些属性
    • 被同类型的CSS属性覆盖掉了，比如font覆盖font-size
• 建议：
  • 充分利用浏览器的开发者工具调试(增加、修改样式)、查错

二、HTML-列表元素

2.1.列表元素

• HTML提供了3组常用的用来展示列表的元素
  • 有序列表：ol、li
  • 无序列表：ul、li
  • 定义列表：dl、dt、dd
• 有序列表-ol、li
  • ol(ordered list)
  • 有序列表，直接子元素只能是li
  • li(list item)
  • 列表里的每一项
• 无序列表ul、li
  • ul(unordered list)
  • 无序列表，直接子元素只能是li
  • li(list item)
  • 列表里的每一项
• 定义列表dl、dt、dd
  • dl(definition list)
  • 定义列表，直接子元素只能是dt、dd
  • dt(definition term)
  • 列表中每一项的项目名
  • dd(definition description)
  • 列表中每一项的具体描述，是对dt的描述、解释、补充
  • 一个dt后面一般紧跟着1个或者多个dd
  • dt、dd常见的组合
    • 事物的名称、事物的描述
    • 问题、答案
    • 类别名、归属于这类的各种事物

2.2.列表相关的CSS属性

• 列表相关的常见CSS属性有4个：list-style-type、list-style-image、list-style-position、list-style
  • 它们都可以被继承，所以设置给ol、ul元素，默认也会应用到li元素
  • list-style-type：设置li元素前面标记的样式
    • disc(实心圆)，circle(空心圆)，square(实心方块)
    • decimal(阿拉伯数字)，lower-roman(小写罗马数字)，upper-roman(大写罗马数字)
    • lower-alpha(小写英文字母)，upper-alpha(大写英文字母)
    • none(什么都没有)
  • list-style-image：设置某张图片为li元素前面的标记，会覆盖list-style-type的设置
  • list-style-position：设置li元素前面标记的位置，可以取outside、inside2个值
  • list-style：是list-style-type、list-style-image、list-style-position的缩写属性
    • 一般情况下都是设置为none

三、HTML-表格元素

3.1.常见元素

• table(表格)
• tr(表格中的行)
• td(行中的单元格)

3.2.实现细线表格

• table{border-collapse: collapse;}：将边框合并

3.3.其他元素

• tbody
  • 表格的主体
• caption
  • 表格的标题
• thead
  • 表格的表头
• tfoot
  • 表格的页脚
• th
  • 表格的表头单元格

3.4.单元格的合并

• 合并要领
  • 合并方向是向右、向下
  • 覆盖删除的单元格
  • colspan="2" rowspan="2"

3.5.CSS属性-border-spacing

• border-spacing用于设置单元格之间水平、垂直间距
  • table {border-spacing: 10px 20px;}
  • 2个值分别是cell之间的水平垂直间距
  • 如果只设置1个值，同时代表水平和垂直间距

四、HTML-表单元素

4.1.常用元素

• form
  • 表单
  • 一般情况下，其他表单相关元素都是它的后代元素
• input
  • 单行文本输入框、单选框、复选框、按钮等元素
  • text 文本
  • password 密码
  • button 按钮
  • radio 单选框
  • checkbox 复选框
  • file 文件上传
• textarea
  • 多行文本框
• select、option
  • 下拉选择框
• button
  • 按钮
• label
  • 表单元素的标题
• fieldset
  • 表单元素组
• legend
  • fieldset的标题