写点什么

CSS 知识框架(一)

作者:默默的成长
  • 2022-11-14
    山东
  • 本文字数:810 字

    阅读完需:约 3 分钟

CSS 知识框架

标签模式

块级元素

特点:


  1. 总是从新行开始

  2. 高度、行高、外边距,内边距都可以控制

  3. 宽度默认是容器的 100%

  4. 可以容纳内联元素和其他块元素 </br>常见:


<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
复制代码

行内元素

特点:


  1. 和相邻行内元素在一行上,但是之间会有缝隙

  2. 高、宽无效,但水平方向的 padding 和 margin 可以设置,垂直方向的无效。

  3. 默认宽度就是它本身内容的宽度

  4. 行内元素只能容纳文本或则其他行内元素。(a 特殊) </br>常见:


常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,其中<span>标签最典型的行内元素
复制代码

标签转化

块转行:


display:inline;
复制代码


块转行:


display:block;
复制代码

特性

层叠:就近原则,进行重叠</br>继承:子承父业</br>优先:


  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 文档中

发布于: 刚刚阅读数: 3
用户头像

还未添加个人签名 2022-10-11 加入

还未添加个人简介

评论

发布
暂无评论
CSS知识框架(一)_CSS_默默的成长_InfoQ写作社区