前端CSS元素显示模式及三大特性

#博学谷IT学习技术支持#

• 元素显示模式

• 块级元素display：block

1. 特点：独占一行；宽度默认占满一行，高度默认由内容撑开；可以设置宽高
2. 代表标签：div；p；h系列标签

• 行内元素display：inline

1. 特点：一行可以显示多个；宽度和高度默认都是由内容撑开；不可以设置宽高
2. 代表标签：a；span

• 行内块元素display：inline-block

1. 特点：一行可以显示多个；可以设置宽高
2. 代表标签：input；特殊情况：img标签有行内块元素的特点，但是调试工具中显示默认显示模式为inline

• 三种显示方式的转换display：块级元素block；行内元素inline；行内块元素inline-block
• html的嵌套规范：1、a标签中不能嵌套a标签；2、p标签中不能嵌套div、h系列标签常见的块级元素
• 居中方法再总结

      水平居中

1. text-align：center；1、文本；2、行内元素；3、行内块元素；注意点：如果需要让以上元素水平居中，此时直接以上元素的父元素设置即可
2. margin：0 auto；1、块级元素；注意点：直接给当前元素设置的

垂直居中line-height单行文本

• CSS 三大特性

• 继承性：子承父业：子元素有默认继承父元素样式的效果

1. 常见的样式可以继承：color；font-相关的属性；text-相关的属性；line-height：行高
2. 继承的小应用：去除列表默认的样式（小圆点）ul { list-style：none； }；统一不同浏览器默认文字大小，谷歌浏览器默认文字大小：16px，不同浏览器可能显示的默认字体大小不一致，开发的时候通常会给body标签设置统一的font-size保证不同浏览器效果一致
3. 继承失效的特殊情况：a标签的颜色会继承失效；h系列标签的font-size会继承失效；div的高度不能继承，但是宽度有继承的效果

• 层叠性：（前提：只有当优先级相同是，此时才会比较层叠性）

1. 给同一个标签设置了相同的属性，此时样式会覆盖，最后写在下面的会生效
2. 给同一个标签设置了不同的样式，此时样式会叠加，最后会共同作用在标签上

• 优先级：（特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式）

1. 优先级公式：

   继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器< 行内样式 < !Important

2. 注意点：

   （1） !important写在属性值的后面，分号的前面！

   （2）!important不能提升继承的优先级，只要是继承优先级最低！

   （3）实际开发中不建议使用 !important 。

• 总结

    今日分享到这，这是今天复习的内容。学习就是一个不断接触新知识，不断巩固老知识的过程，加油！