CSS知识框架（一）

时间：2022-11-14 11:01:38

CSS知识框架

标签模式

块级元素

特点：

  1. 总是从新行开始
  2. 高度、行高、外边距，内边距都可以控制
  3. 宽度默认是容器的100%
  4. 可以容纳内联元素和其他块元素　
    常见：
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
行内元素

特点：

  1. 和相邻行内元素在一行上，但是之间会有缝隙
  2. 高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
  3. 默认宽度就是它本身内容的宽度
  4. 行内元素只能容纳文本或则其他行内元素。（a特殊）　
    常见：
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素
标签转化

块转行：

display:inline;

块转行：

display:block;

特性

层叠：就近原则，进行重叠
继承：子承父业
优先:

  1. 每个元素（标签）贡献值为0,0,0,1
  2. 每个类，伪类贡献值为0,0,1,0
  3. 每个ID贡献值为0,1,0,0
  4. 每个行内样式贡献值1,0,0,0
  5. 值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

盒子模型

边框

功能点：

  1. none：没有边框即忽略所有边框的宽度（默认值）
  2. 边框为单实线 solid
  3. 边框为虚线 dashed
  4. 边框为点线 dotted
  5. 边框为双实线 double
  6. 边框圆角 border-radius: 左上角 右上角 右下角 左下角;
边距

内边距：

  1. 是指 边框与内容之间的距离
  2. padding 外边距：margin
盒子居中

用法：margin: 0 auto;

清楚内外边距

用法：margin:0，padding:0

css3盒模型

用法：

  1. box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的
  2. box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode
盒子阴影

box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；

CSS样式

内部样式

内嵌式是将CSS代码集中写在HTML文档的head头部标签中

行内式

标签的style属性来设置元素的样式

外部样式表

链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中

标签：

相关文章