CSS知识框架(一)

广告位

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

本文来自网络,不代表技术学习分享_一航技术立场,转载请注明出处。

作者: 一航技术

上一篇
下一篇
广告位

发表回复

返回顶部