当前位置 : 首页 » 文章分类 :  开发  »  CSS-基础

CSS-基础

css笔记

CSS 盒模型

box-sizing: content-box 标准盒模型(默认)

box-sizing: content-box; 默认，标准盒模型
总宽度​​ = 内容width + 左右padding + 左右border + 左右margin
​​总高度​​ = 内容height + 上下padding + 上下border + 上下margin
width 和 height 仅表示​​内容区域​​的大小
内边距（padding）、边框（border）和外边距（margin）​​额外增加​​到总尺寸中。

例如：

.box {
  box-sizing: content-box; /* 默认值，可省略 */
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 5px solid black;
  margin: 15px;
}

最终占位宽度​​ = 100px (内容宽度) + 20px (左+右padding) + 10px (左+右边框) + 30px (左+右margin) = 160px

box-sizing: border-box 替代盒模型(推荐)

box-sizing: border-box; 替代盒模型/IE盒模型，推荐
​​总宽度​​ = 内容width（已含 padding + border） + margin
​​总高度​​ = 内容height（已含 padding + border） + margin
width 和 height 表示 ​​『内容 + 内边距 + 边框』​ 的总和
内边距（padding）和边框（border）​​不会增加​​元素的总尺寸（包含在width/height内）。

border-box 告诉浏览器：元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制
这样设置的好处是，当我们设置一个元素的宽度为100%时，如果还有内边距或边框，不会导致元素超出父容器（因为内边距和边框都在宽度内部）。

例如：

.box {
  box-sizing: border-box; /* 显式启用 */
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 5px solid black;
  margin: 15px;
}

实际内容区域宽度​​ = 100px (内容宽度) - 20px (左+右padding) - 10px (左+右border) = 70px
最终占位宽度​​ = 100px (内容宽度，内含 padding+border) + 30px (左+右margin) = 130px

推荐全局启用替代盒模型​​，避免布局意外溢出

* {
  box-sizing: border-box; /* 所有元素使用替代盒模型 */
}

盒模型组成

在 CSS 中，每个元素都被表示为一个矩形的盒子（box）。这个盒子由四部分组成，从内到外依次是：

  • 内容区域（content）
  • 内边距（padding）
  • 边框（border）
  • 外边距（margin）

图示如下：

|-------------------------------|
|             margin            |  🠕 外部空间（透明）
|   |-----------------------|   |
|   |        border         |   |  🠕 边框（可见边界）
|   |   |---------------|   |   |
|   |   |    padding    |   |   |  🠕 内部缓冲（受背景色影响）
|   |   |  |---------|  |   |   |
|   |   |  | content |  |   |   |  🠕 内容区域
|   |   |  |---------|  |   |   |
|   |   |---------------|   |   |
|   |-----------------------|   |
|-------------------------------|

​​Content 内容区域

元素的实际内容（文本、图像等）
控制属性​​：width 和 height

div { width: 200px; height: 100px; } /* 内容区域尺寸 */

Padding 内边距

内容与边框之间的缓冲空间，​​在元素内部​​。
继承元素的背景色/背景图
单方向属性：padding-top、padding-right、padding-bottom、padding-left
或统一设置：

/* 统一值 */
padding: 20px;                /* 上下左右均为 20px */

/* 上下 | 左右 */
padding: 10px 20px;           /* 上下10px，左右20px */

/* 上 | 左右 | 下 */
padding: 10px 15px 5px;       /* 上10px，左右15px，下5px */

/* 上 | 右 | 下 | 左（顺时针） */
padding: 10px 20px 5px 15px;  /* 分别设置四个方向 */

Border 边框

包裹内边距和内容的可见边界线。
默认不显示（需设置样式）
支持圆角 border-radius

border: 3px solid #ff0000; /* 宽度 | 样式 | 颜色 */

分属性设置：
border-width：边框厚度（如 2px）
border-style：样式（solid（实线）、dashed（虚线）、dotted（点线）等）
border-color：颜色（支持 RGB、HEX、HSL）
单方向属性：border-top、border-right、border-bottom、border-left

Margin 外边距

元素与其他元素之间的透明间隔，​​在元素外部​​。
完全透明（不继承背景）
支持负值（margin: -10px 可重叠元素）
单方向属性：margin-top、margin-right、margin-bottom、margin-left

margin: 10px;        /* 统一值 */
margin: 5% 10%;      /* 上下5% | 左右10% */
margin: 0 auto;      /* 水平居中常用技巧 */

CSS padding/margin 边距写法

1、单值写法，所有方向（上、右、下、左）的 padding 相同：

padding: 10px;

等价于：

padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;

2、双值写法，第一个值​​上下边距，第二个值​​左右边距

padding: 10px 20px;

等价于

padding-top: 10px;
padding-bottom: 10px;
padding-right: 20px;
padding-left: 20px;

3、三值写法​，第一个值​​上边距，第二个值​​左右边距，第三个值​​下边距

padding: 10px 20px 15px;

等价于：

padding-top: 10px;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 15px;

4、四值写法（顺时针方向）​，分别设置 ​​上、右、下、左​​ 的边距（顺时针顺序）：

padding: 10px 20px 15px 5px;

等价于：

padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 5px;

5、其他写法

  • padding: auto; 浏览器自动计算，通常无
  • padding: inherit; 继承父元素的 padding
  • padding: initial; 重置为默认值，通常是 0
  • padding: unset; 根据上下文重置为 inherit 或 initial

CSS position 属性

position 属性用于控制元素在文档流中的定位方式

static 默认值​

元素遵循正常的文档流。
忽略 top、right、bottom、left 和 z-index 属性。
元素按 HTML 顺序自然排列。

relative 相对定位

元素仍在文档流中占据空间，但可通过偏移量​​相对自身原始位置​​移动。
使用 top、right、bottom、left 设置偏移（可为负值）。
不影响其他元素位置（移动后原始空间保留）。

div {
  position: relative;
  top: 20px;   /* 向下移动 20px */
  left: 30px;  /* 向右移动 30px */
}

absolute 绝对定位

元素脱离文档流，​​不占据空间​​，并相对于​​最近的非 static 祖先元素​​定位。
若无非 static 祖先，则相对于​​初始包含块​​（通常是视口或 <html>）。
需配合 top、right、bottom、left 定位。

.parent {
  position: relative; /* 作为定位参考 */
}
.child {
  position: absolute;
  top: 0;
  right: 0;
}

fixed 固定定位

元素脱离文档流，​​相对于浏览器视口​​定位，滚动页面时位置不变。
常用于导航栏、悬浮按钮等需要固定的元素。
受 transform 属性影响（若祖先设置了 transform，可能破坏固定行为）。

nav {
  position: fixed;
  top: 0;
  width: 100%;
}

sticky 粘性定位）

元素在滚动到特定阈值前表现为 relative，之后表现为 fixed。
需指定 top、right、bottom 或 left 作为触发阈值。
相对于​​最近的滚动祖先​​定位。

.header {
  position: sticky;
  top: 10px; /* 当元素距视口顶部 ≤10px 时固定 */
}

CSS Flex 布局

​​Flex 容器（Container）​​
设置为 display: flex; 或 display: inline-flex; 的元素，其直接子元素自动成为 Flex 项目。

Flex 项目（Items）​​
Flex 容器内的直接子元素（不包含孙子元素）。

​​主轴（Main Axis）​​
默认​​水平方向​​（左→右），由 flex-direction 属性控制方向。

交叉轴（Cross Axis）​
与主轴​​垂直的方向​​（默认垂直），随主轴方向变化。

容器属性
flex-direction 主轴方向，row（默认）/ row-reverse / column / column-reverse
flex-wrap 是否换行，nowrap（默认） / wrap / wrap-reverse
flex-flow direction + wrap 简写，row wrap（常见组合）
justify-content 主轴​​对齐方式，flex-start / center / flex-end / space-around / space-between
align-items 交叉轴​​对齐方式，stretch（默认拉伸） / center / flex-start / flex-end / baseline
align-content 多行时交叉轴空间分配，同 justify-content（需启用 flex-wrap: wrap）
例如

.container {
  display: flex; /* 关键：激活Flex布局 */
  flex-direction: row; /* 主轴方向 (row | row-reverse | column | column-reverse) */
  justify-content: center; /* 主轴对齐方式 */
  align-items: stretch; /* 交叉轴对齐 */
  flex-wrap: wrap; /* 是否换行 */
}

项目属性
order 项目排序顺序，整数（默认为0，值小排前面）
flex-grow 放大比例​，数值（默认为0，不放大）
flex-shrink 缩小比例，数值（默认为1，空间不足时等比缩小）
flex-basis 分配空间前的初始尺寸，auto（默认） / 长度（如 200px / 30%）
flex flex-grow, flex-shrink, 和 flex-basis 的简写， 1（相当于 1 1 0%） / auto（1 1 auto）
flex: 1 表示：
flex-grow: 1：如果存在剩余空间，该项目会放大以占据剩余空间。
flex-shrink: 1：如果空间不足，该项目会缩小（默认值为1，所以这里也是1）。
flex-basis: 0%：在分配多余空间之前，项目占据的主轴空间为0%（注意：这里因为只写了一个无单位数，所以flex-basis被设为0%）。

align-self 覆盖容器的 align-items，auto / center / flex-start / flex-end
例如

.item {
  flex: 1; /* 常见！项目等比分配剩余空间 */
  align-self: center; /* 单独控制垂直居中 */
  order: 2; /* 调整显示顺序（无需改HTML结构） */
}

其他

CSS 实现聊天对话框一左一右排列

关键点：
1、默认是靠左排列的，所以接收消息 div 不用特别设置，增加一个 margin-right: 20%; 限制对话框宽度，右侧留白 20%。
2、发送的消息 div 需要靠右，通过 margin-left:auto; 实现，margin 不设置的话默认是0（就是紧挨着），设置为 auto 会占据全部剩余空间。所以 margin-left 设为 auto 就实现了左外边框将左侧剩余空间全部占满，也就靠右显示了。
3、height 设为 auto，可以实现 div 高度根据内部文字多少自动撑开。
4、width 设为 fit-content 可实现每个对话框宽度也有内部文字自动撑开。

<style type="text/css">
  .div-received-single-msg {
    /* 接收到的消息靠左显示，右margin留出20% */
    margin-right: 20%; 
    height:auto;
    width:fit-content;
    margin-top: 3px;
    margin-left: 2px;
    text-align: left;
    border:1px solid #000;
    border-radius: 5px;
  }

  .div-send-single-msg {
    /* 发送的消息靠右显示，margin-left设为auto，自动占据剩余全部宽度*/
    margin-left:auto;
    height:auto;
    width:fit-content;
    margin-top: 3px;
    margin-right: 2px;
    text-align: right;
    border:1px solid #000;
    border-radius: 5px;
  }
</style>

iframe 自适应宽高

<div class="div-iframe">
  <iframe src="http://grafana.masikkk.com/d/xfpJB9FGz/node-exporter-dashboard-en-20201010-starsl-cn?orgId=1&refresh=30s&theme=light&kiosk" 
  frameborder="0" class="iframe-grafana" >    
  </iframe>
</div>

<style type="text/css">
  .div-iframe {
    position: relative; 
    width: 100%; 
    padding-top: calc(100% * 720 / 1280); 
    border: 1px rgb(77, 197, 240) solid;
  }
  .iframe-grafana {
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0;
  }
</style>

优雅的实现 iframe 高宽度自适应
https://youwu.today/skill/web/how-to-make-the-iframe-responsive/

CSS 隐藏元素

visibility:hidden

visibility:hidden 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none

display:none 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

aria-hidden

现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了避免 屏幕识读设备抓取非故意的和可能产生混淆的输出内容（尤其是当图标纯粹作为装饰用途时），我们为这些图标设置了 aria-hidden="true" 属性。

换行

word-wrap:break-word;自动换行

自动换行
p { word-wrap:break-word; }

word-break:break-all;强制换行

强制英文单词断行
p { word-break:break-all; }

注意：设置强制将英文单词断行，需要将行内元素设置为块级元素。

white-space:nowrap强制不换行

强制不换行
p { white-space:nowrap; }

page-break-after 强制分页

page-break-after 用于在指定元素后面插入分页符。
在想要分页的地方插入一个指定了强制分页的 div 即可。

<div style="page-break-after: always;"></div>

border-radius 圆角边框

border-radius 用于向 div 元素添加圆角边框
border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。

border-radius:2em;

等价于

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

CSS首字母大写text-transform

有的时候需要让英文单词或拼音首个字母大写;有的时候需要让全文中英文单词全大写或小写。这时候我们就需要text-transform属性了。

/*首字母大写*/
.a {text-transform:capitalize;}
/*全都是大写*/
.b {text-transform:uppercase;}
/*全都是小写*/
.c {text-transform:lowercase;}

float属性

定义和用法
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

<div style="float:left;text-align:center;"><img src="https://www.zybuluo.com/static/img/logo.png" alt="提示语"><br/>Markdown Logo</div>
<div style="float:left;text-align:center;"><img src="https://www.zybuluo.com/static/img/logo.png" alt="提示语"><br/>Markdown Logo</div>
<div style="clear:both;"></div>
提示语
Markdown Logo
提示语
Markdown Logo
**使用完float:left后必须clear:both来清楚float`
`，否则后续的内容还会继续浮动到前一行**

CSS float 属性
http://www.w3school.com.cn/cssref/pr_class_float.asp

DIV设置浮动float以后下一个DIV要换行的方法
http://www.cnblogs.com/mq0036/p/4604443.html

@media 媒体查询

媒体查询包含一个可选的媒体类型和媒体特性表达式(0或多个)最终会被解析为true或false。
如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型，并且所有的表达式的值都是true，那么该媒体查询的结果为true。

使用方式：

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

媒体类型

  1. all 所有媒体
  2. braille 盲文触觉设备
  3. embossed 盲文打印机
  4. print 手持设备
  5. projection 打印预览
  6. screen 彩屏设备
  7. speech ‘听觉’类似的媒体类型
  8. tty 不适用像素的设备
  9. tv 电视

1、仅在可视区域宽度不小于700像素并在横屏时有效：

@media (min-width: 700px) and (orientation: landscape) {
}

2、仅在电视媒体上，可视区域不小于700像素宽度并且是横屏时有效：

@media tv and (min-width: 700px) and (orientation: landscape) {
}

3、最小宽度为700像素或是横屏的手持设备上：

@media (min-width: 700px), handheld and (orientation: landscape) {
}

媒体查询中使用逗号分隔效果等同于or逻辑操作符

CSS媒体查询
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries

如何使用CSS样式

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在head部分通过<style>标签定义内部样式表。

<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

层叠次序

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，从1到4优先级逐渐提高，内联样式拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表（位于 <head> 标签内部）
  4. 内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

CSS基础语法

CSS规则由两个主要的部分构成：选择器，以及一条或多条声明，每个声明的格式为：属性名:属性值。
语法：selector {property: value; ...; property: value; }
使用花括号来包围声明，每条声明以分号”;”结尾。
例如：
h1 {color:red; font-size:14px;}
上面代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。
在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。

错误声明会被自动忽略

如果在一个声明中使用了不正确的属性值，或者不正确的属性，则该条声明会被忽略掉。
举个不正确的例子：

p {
    background-color: red
    font-family: 黑体;
    wordsize: 20px;
    float: left;
}

上面的例子第一条声明漏掉了分号，以上声明块会被解析为：

p {
    background-color: red font-family: 黑体;
    wordsize: 20px;
    float: left;
}

“red font-family: 黑体” 整个会被解析为background-color的属性值，这当然不是一个合法的属性值，该条声明将会被忽略掉。另外第二条声明使用了不正确的属性名wordsize，该条声明也将会忽略掉，结果只会正确处理第三条声明，等价于：

p {float: left;}

值为多个词要加引号

如果值为若干单词，则要给值加引号：
p {font-family: "sans serif";}

多重声明用分号分隔

如果要定义不止一个声明，则需要用分号将每个声明分开。
下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么做的好处是，当你从现有的规则中增减声明时，会尽可能地减少出错的可能性。就像这样：
p {text-align:center; color:red;}
你应该在每行只描述一个属性，这样可以增强样式定义的可读性，就像这样：

p {
  text-align: center;
  color: black;
  font-family: arial;
}

空格和大小写

大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑：

body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
}

是否包含空格不会影响 CSS 在浏览器的工作效果，同样，与 XHTML 不同，CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。

CSS 颜色值写法

除了英文单词 red，我们还可以使用十六进制的颜色值 #ff0000：
p { color: #ff0000; }
为了节约字节，我们可以使用 CSS 的缩写形式：
p { color: #f00; }
我们还可以通过两种方法使用 RGB 值：

p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }

请注意，当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为 0 像素时，0 之后不需要使用 px 单位，因为 0 就是 0，无论单位是什么。

CSS 距离单位写法

em 并非 “element” 的缩写​​，起源是​​印刷排版术语，表示字母 M 的宽度（因为 M 是字母中最宽的字符）
css 中，1em = 当前元素的 font-size 计算值​

px Pixel，设备物理像素点，适用 边框、阴影、固定尺寸元素
rem Root EM，相对于根元素字体大小，适用 布局/内边距/字体/响应式设计
em EM (Typography)，当前元素字体大小，适用 按钮/图标等组件内部相对缩放
% 父元素对应尺寸的百分比，适用 流体布局/宽度/高度
vw Viewport Width，视口宽度的1%，适用 全屏元素/横向布局
vh Viewport Height，视口高度的1%，适用 全屏元素/纵向布局
vmin Viewport Minimum，取vw/vh中的​​小值​​的1%，适用 移动端旋转适配
vmax Viewport Maximum，取vw/vh中的​​大值​​的1%，适用 大屏元素适配
ch Character，当前字体”0”字符宽度，适用 文本排版/等宽布局
ex x-Height，当前字体小写字母”x”高度，适用 印刷级排版
in 英寸，1in = 2.54cm = 96px
mm/cm Millimeter/Centimeter，毫米/厘米（打印尺寸），适用 打印样式
pt/pc​ Point/Pica，印刷单位(1pt=1/72英寸，1pc=12pt)，适用 打印/传统排版，1pt ≈ 1.33px，常用于打印
calc(10px + 2em) 计算值，10px + 当前字体大小的2倍
calc(50% - 20px) 父元素宽度50%减去20px

上一篇 2017年第二季度运动记录

下一篇 Java-反射

阅读
评论
5.5k字
阅读预计22分钟
创建日期 2017-03-25
修改日期 2025-07-16
类别
标签
目录

页面信息

location:
protocol:
host:
hostname:
origin:
pathname:
href:
document:
referrer:
navigator:
platform:
userAgent:

评论

▲