CSS

css 定义和语法

层叠样式表,对 html 写出来的内容进行美化

选择器{
	样式规则
	属性名1:属性1;
	属性名2:属性2;
	属性名3:属性3;
}

css 引入方式

行内式

直接在标签的 style 属性中添加 css 样式
方便直观,缺乏可重复使用性

<div style="width:100px; height:100px; background:read ">hello</div>

内嵌式(内部样式)

在<head>标签内添加<style>标签,在<style>标签内写 css 代码
便于一个页面的维护,多个页面间可重复使用性不高

<head>
  <style type="text/css">
    h3 {
      color: red;
    }
  </style>
</head>

外链式

将 css 写入单独的 css 文件里面,在<head>标签中使用<link>标签引入
css 样式与 html 页面分离,便于整个页面系统的规划和维护,可重复性高,css 代码分离单独文件,容易出现 css 代码过于集中,引起混乱

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

选择器

类选择器

根据类名来选择标签，以 . 开始，类选择器作用在多个标签，多个选择器使用空格分隔，可复用

<style type="text/css">
  .blue {
    color: blue;
  }
  .big {
    font-size: 20px;
  }
  .box {
    width: 100px;
    height: 100px;
    background: gold;
  }
</style>
<div class="blue">这是个div</div>
<h3 class="blue big box">这是一个标题</h3>
<p class="blue box">这是一个段落</p>

层级选择器

根据层级关系选择后代标签，以选择器 1 选择器 2 开头，应用在多级嵌套结构中，减少命名

<style type="text/css">
  div p {
    color: red;
  }
  .con {
    width: 300px;
    height: 80px;
    background: green;
  }
  .con span {
    color: red;
  }
  .con .pink {
    color: pink;
  }
  .con .gold {
    color: gold;
  }
</style>
<div>
  <p>hello</p>
</div>
<div class="con">
  <span>哈哈</span>
  <a href="#" class="pink">百度</a>
  <a href="#" class="gold">百度</a>
</div>
<span>你好</span>
<a href="#" class="pink">新浪</a>

id 选择器

根据 id 选择标签，以#开头,id 名称建议不重复，id 一般给程序作为使用

<style type="text/css">
  #box {
    color: red;
  }
</style>
<p id="box">这是一个段落标签</p>
<p>这是第二个段落标签</p>
<p>这是第三个段落标签</p>

组选择器

<style type="text/css">
  .box1,
  .box2,
  .box3 {
    width: 100px;
    height: 100px;
  }
  .box1 {
    background: red;
  }
  .box2 {
    background: pink;
  }
  .box3 {
    background: gold;
  }
</style>
<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>

伪类选择器

用于向选择器提供特殊的效果，以:分割开，使用伪类选择器可以改变网页的显示效果
通常是

动态伪类

  1. a 标签特有的:
    1. link 超链接未被访问
    2. visited 超链接被访问
  2. 所有标签都有的
    1. hover 悬浮
    2. active 激活
  3. 表单标签特有的
    1. focus 聚焦
<style type="text/css">
  .box1 {
    width: 100px;
    height: 100px;
    background: gold;
  }
  .box1:hover {
    width: 300px;
  }
</style>
<div class="box1">这是一个div</div>

结构伪类

  1. 按照所有兄弟计算的
    1. :first-child 第一个子元素
    2. :last-child 最后一个子元素
    3. :nth-child(n) 第 n 个子元素,n=odd 奇数子元素,n=even 偶数子元素
  2. 按照所有同类计算的
    1. :first-of-type 第一个同类子元素
    2. :last-of-type 最后一个同类子元素
    3. :nth-of-type(n) 第 n 个同类子元素,n=odd 奇数子元素,n=even 偶数子元素
  3. 倒数计算
    1. :nth-last-child(n) 倒数第 n 个子元素
    2. :nth-last-of-type(n) 倒数第 n 个同类子元素
  4. 唯一元素
    1. :only-child 唯一子元素
    2. :only-of-type 唯一同类子元素
  5. 根元素
    1. :root 根元素
  6. 空元素
    1. :empty 空元素
<style>
  /* 结构体1 div第一个子元素是p元素则选中 */
  .structure1 div > p:first-child {
    color: red;
  }
  /* 结构体2 div第一个子元素是p元素则选中，否则不选择 */
  .structure2 div > p:first-child {
    color: red;
  }
  /* 结构体3 只选择div中的第一个子元素是p元素则选中，否则不选择 */
  .structure3 div > p:first-child {
    color: red;
  }
  /* 结构体4 div中的后代元素是p的元素，必须是其父元素的第一个子元素 */
  .structure4 div p:first-child {
    color: red;
  }
  /* 结构体5 选择必须为div中的后代元素中是p的元素，必须是其父元素的第一个子元素 */
  .structure5 div p:first-child {
    color: red;
  }
  /* 结构体6 选择p元素，必须是其父元素的第一个子元素 */
  .structure6 p:first-child {
    color: red;
  }
</style>
<ul>
  <li class="structure1">
    <div>
      <p>张三</p>
      <p>李四</p>
      <p>王五</p>
      <p>赵六</p>
    </div>
  </li>
  <li class="structure2">
    <div>
      <span>张三</span>
      <p>李四</p>
      <p>王五</p>
      <p>赵六</p>
    </div>
  </li>
  <li clas="structure3">
    <div>
      <span>
        <p>张三</p>
      </span>
      <p>李四</p>
      <p>王五</p>
      <p>赵六</p>
    </div>
  </li>
  <li class="structure4">
    <div>
      <span>
        <p>张三</p>
      </span>
      <p>李四</p>
      <p>王五</p>
      <p>赵六</p>
    </div>
  </li>
  <li class="structure5">
    <p>测试1</p>
    <div>
      <span>
        <p>测试2</p>
        <p>张三</p>
      </span>
      <p>李四</p>
      <p>王五</p>
      <p>赵六</p>
    </div>
  </li>
  <li class="structure6">
    <p>测试1</p>
    <div>
      <p>测试2</p>
      <span>
        <p>测试3</p>
        <p>张三</p>
      </span>
      <p>李四</p>
      <p>王五</p>
      <p>赵六</p>
    </div>
  </li>
</ul>

否定伪类

  1. :not(选择器) 选中所有不满足选择器的元素
<style>
  /* 选择类名为box1下的p元素，但是排除类名为red的，可以是class,id,:first-child */
  .box1 p:not(.red) {
    color: red;
  }
</style>
<div class="box1">
  <p class="red">这是第一个段落</p>
  <p>这是第二个段落</p>
  <p>这是第三个段落</p>
</div>

表单伪类

  1. :enabled 选中所有可用元素
  2. :disabled 选中所有不可用元素
  3. :checked 选中所有被选中的元素
<style>
  /* 选中所有可用元素 */
  input:enabled {
    background: red;
  }
  /* 选中所有不可用元素 */
  input:disabled {
    background: pink;
  }
  /* 选中所有被选中的元素 */
  input:checked {
    width: 100px;
    height: 100px;
    background: gold; /* 这里不可用，不能修改颜色 */
  }
</style>
<form>
  <input type="text" value="可用" />
  <input type="text" value="不可用" disabled />
  <input type="checkbox" value="选中" checked />
  <input type="checkbox" value="未选中" />
</form>

语言选择

  1. :lang(值) 选中指定语言的元素
<html lang="zh-CN">
  <style>
    /* 选中所有中文的元素 */
    p:lang(zh-CN) {
      color: red;
    }
    p:lang(en) {
      color: blue;
    }
  </style>
  <p>你好</p>
  <p lang="en">Hello</p>
</html>

伪元素选择器

选中元素中的特殊位置

  1. ::before 在元素内部的前面插入内容
  2. ::after 在元素内部的后面插入内容
  3. ::first-letter 选中元素中的第一个字符
  4. ::first-line 选中元素中的第一行
  5. ::selection 选中元素中被用户选中的内容
  6. ::placeholder 选中元素中的占位符
<style>
  /* 选中a标签的文本 */
  a::before {
    content: "百度";
  }
  /* 选中a标签的文本 */
  a::after {
    content: "新浪";
  }
</style>
<div>
  <a href="#">百度</a>
</div>

选择器优先级

  1. 内联样式
  2. id 选择器
  3. 类选择器、伪类选择器、属性选择器
  4. 元素选择器、伪元素选择器
  5. 通配符选择器

优先级计算公式： (a, b, c)
a 为 id 选择器数量
b 为类选择器、伪类选择器、属性选择器数量
c 为元素选择器、伪元素选择器数量

强调：!important 可以提高选择器的优先级，但是不推荐使用

css 属性样式

尺寸样式

  1. px 像素
  2. em 相对单位，按照字体的大小进行计算的n em=font-size * n没有设置 font-size 则向父辈找
  3. rem 相对单位，相对于根元素的字体大小计算公式同上
  4. vw 相对单位，相对于视口宽度的百分比
  5. vh 相对单位，相对于视口高度的百分比
  6. vmin 相对单位，相对于视口宽度和高度中较小的那个百分比
  7. vmax 相对单位，相对于视口宽度和高度中较大的那个百分比
  8. % 相对单位，相对于父元素的百分比
  9. cm 厘米
  10. mm 毫米

文本样式

设置的文本样式通常可以继承

  1. font-size:
    • 设置文字大小(最好使用body{font-size:16px}来设置基础)
  2. font-family:
    • 设置文字字体 设置完成后应该加上 sans-serif(非衬线) 或 serif(衬线) 作为结尾
  3. font-style:
    • 设置文字样式，通常使用 normal(正常)和 italic(斜体)
  4. font-weight:
    • 设置文字是否加粗，100-300(细体)，400-500(正常)和 600-(加粗)
  5. color:
    • 设置文字颜色
  6. letter-spacing:
    • 设置文字间距，有负值
  7. word-spacing:
    • 设置单词间距，识别空格，有负值
  8. font:
    • 复合属性设置，顺序为 font-style font-weight font-size font-family,其中 font-size 和 font-family 是必须的，其他可以省略
  9. text-decoration:
    • 设置文字下划线，通常用 underline(下划线)， line-through(删除线)和 none(无下划线)
  10. text-indent:
    • 设置文字首行缩进，通常用 px，em，rem，%等
  11. text-align:
    • 设置文字水平对齐方式，通常用 left(左对齐)，center(居中对齐)，right(右对齐)和 justify(两端对齐)
  12. line-height:
    • 设置文字行高，盒子 height 未设置时height=line-height \* n
    • 单行文字时 line-height=height 设置垂直居中
  13. vertical-align:
    • 设置文字垂直对齐方式，通常用 top(顶部对齐)，middle(居中对齐)，bottom(底部对齐)和 baseline(基线对齐)
  14. text-shadow:
    • 设置文字阴影，通常用 水平偏移 垂直偏移 模糊半径 阴影颜色，有负值
  15. white-space:
    • 设置文字换行方式，通常用 normal(正常)，nowrap(不换行)，pre(保留空白和换行)，pre-wrap(保留空白和换行，自动换行)和pre-line(保留换行，自动换行)
  16. text-overflow:
    • 设置文字溢出方式，通常用 clip(裁剪)，ellipsis(省略号)和 string(自定义字符串)。需要overflow:hidden.
  17. text-decoration:
    • 设置文字下划线，通常用 underline(下划线)，overline(上划线) line-through(删除线)和 none(无下划线)
    • text-decoration-style 设置下划线样式，通常用 solid(实线)，double(双线)，dotted(点线)，dashed(虚线)和 wavy(波浪线)
    • text-decoration-color 设置下划线颜色
  18. @font-face{}
    • 设置自定义字体，通常用 font-family:字体名称; src:url(字体路径);，其中 font-family 是必须的，其他可以省略
    • 这样引入字体，然后后续使用字体font-family:字体名称;
  19. 矢量图标字体阿里图标库使用
    • unicode 实现 使用 @font-face 引入字体，然后使用 font-family:导入，使用 unicode 编码写入
    • font class 实现 使用 <link rel="stylesheet" href="./iconfont.css"> 引入字体，然后使用 class:导入，使用 class 编码写入，调整时要用类选择器(常用)
    • symbol 实现 使用 <script src="./iconfont.js"></script> 引入字体，然后使用 <svg class="icon" aria-hidden="true"><use xlink:href="#icon-xxx"></use></svg> 导入
    • 在线使用 将上述三种方式中的 src 设置成网络链接即可使用

列表样式

  1. list-style
    • 复合属性设置，顺序为 list-style-type list-style-position list-style-image,其中 list-style-type 是必须的，其他可以省略
  2. list-style-type
    • 设置列表项标记的类型，通常用 disc(实心圆)，circle(空心圆)，square(实心方块)和 none(无标记)
  3. list-style-position
    • 设置列表项标记的位置，通常用 inside(标记在文本内部)，outside(标记在文本外部)和 inherit(继承父元素的值)
  4. list-style-image
    • 设置列表项标记的图片，通常用 url(图片路径)，none(无标记)

表格样式

  1. border
    • 设置边框样式复合属性，顺序为border-width border-style border-color这三个都要写，不只是表格能用
  2. border-readius
    • 设置边框圆角，通常用 px，em，rem，%等
  3. border-collapse
    • 设置表格边框合并方式，通常用 collapse(合并边框)，separate(分开边框)
  4. border-spacing
    • 设置表格边框间距，通常用 px，em，rem，%等，生效前提是不能合并边框
  5. table-layout
    • 设置表格布局方式，通常用 auto(自动布局)，fixed(固定布局)
  6. caption-side
    • 设置表格标题位置，通常用 top(顶部)，bottom(底部)
  7. empty-cells
    • 设置表格空单元格显示方式，通常用 show(显示)，hide(隐藏)，生效前提是不能合并边框
  8. outline
    • 设置外边框样式，通常用 outline-width outline-style outline-color这三个都要写，不只是表格能用
  9. outline-offset
    • 设置外边框偏移量，通常用 px，em，rem，%等，生效前提是不能合并边框

背景样式

  1. background-color:
    • 设置背景颜色
  2. background-image:
    • 设置背景图片，通常用 url(图片路径)，none(无背景图片)
  3. background-repeat:
    • 设置背景图片是否重复，通常用 repeat(重复)，no-repeat(不重复)，repeat-x(水平重复)，repeat-y(垂直重复)
  4. background-position:
    • 设置背景图片位置，通常用 top(顶部)，bottom(底部)，left(左边)，right(右边)，center(居中)
  5. background-origin:
    • 设置背景图片定位区域，通常用 padding-box(从 padding 区域开始)，border-box(从 border 区域开始)，content-box(从 content 区域开始)
  6. background-clip:
    • 设置背景图片裁剪区域，通常用 padding-box(从 padding 区域开始)，border-box(从 border 区域开始)，content-box(从 content 区域开始)
  7. background-size:
    • 设置背景图片大小，通常用 cover(覆盖)，contain(包含)，px，em，rem，%等
  8. background:
    • 复合属性设置，顺序为 background-color background-image background-repeat background-position background-attachment，其中 background-color 和 background-image 是必须的，其他可以省略
  9. background: 这样可以设置多个图片，background: background-image background-repaeat top/bottom/left/right

鼠标样式

  1. cursor
    • 设置鼠标样式，url("path")

显示模式

  1. 块级元素display:block
    • 主题标签<html><body>
    • 排版元素<h1><h6><hr><p><pre><div>
    • 列表元素<ol><ul><li>
    • 表格元素<table><tbody><thead><tfoot><tr>
    • <form><option>
  2. 行内元素display:inline
    • 文本标签<br><em><strong><sup><sub>
    • <a><lable>
  3. 行内块元素display:inline-block
    • 图片<img>
    • 单元格<td><th>
    • 表单控件<input><textarea><select><button>
    • 框架标签<iframe>
  4. 隐藏元素display:none隐藏并占据空间

盒子模型

  1. margin 外边距，影响盒子位置，不影响盒子大小
    • 子元素的 margin 是根据父元素的 content 计算的
    • margin-top 上边距 影响自己位置
    • margin-left 左边距 影响自己位置
    • margin-right 右边距 影响后续兄弟位置
    • margin-bottom 下边距 影响后续兄弟位置
    • margin 复合属性设置，顺序为 margin-top margin-right margin-bottom margin-left，可以是负值
    • 第一个子元素设置 margin-top 会传递到父元素 margin-top 上，最后一个子元素设置 margin-bottom 会传递到父元素 margin-bottom 上，设置边框或设置 overflow:hidden 可解决
    • 兄弟间设置 margin 时，会取最大值
  2. border 边框
  3. padding 内边距
  4. content 内容
    • width 盒子宽度,min-width最小宽度,max-width最大宽度,
    • height 盒子高度,min-height最小高度,max-height最大高度
    • overflow 内容溢出，visible可见，hidden隐藏，scroll滚动(一般不用)，auto自动
    • visibility 隐藏，visible可见，hidden隐藏并占据空间

设置盒子大小时，最好使用 box-sizing:border-box，这样设置的宽高就是盒子的宽高，而不是内容的宽高。
默认的是 content-box，设置的宽高就是内容的宽高，盒子的宽高需要加上边框和内边距。

设置盒子宽时可以用resize:horizontal;overflow:auto，这样盒子就可以拖动改变宽度了。
设置盒子高时可以用resize:vertical;overflow:auto，这样盒子就可以拖动改变高度了。
设置盒子宽高时可以用resize:both;overflow:auto，这样盒子就可以拖动改变宽高了。

盒子阴影box-shadow:水平偏移 垂直偏移 模糊半径 阴影大小 阴影颜色 内阴影（inset）

盒子透明opacity:0-1

浮动

浮动后脱离文档流；
文字环绕；
对前面兄弟元素无影响；
对后续兄弟元素会占据浮动元素的位置，在浮动元素的下面；
不能支撑父元素高度，导致高度塌陷，父元素宽度仍然会束缚浮动元素。

  1. float 浮动，left左浮动，right右浮动，none不浮动
  2. clear 清除浮动，left清除左浮动，right清除右浮动，both清除左右浮动，使用者不能浮动，且为块元素，一般情况下一个布局中兄弟间要么全浮动要么全不浮动。
  3. overflow 内容溢出，visible可见，hidden隐藏，scroll滚动(一般不用)，auto自动

定位

相对定位

开启相对定位position: relative;
相对于发生之前的位置进行定位，使用left``right``top``bottom进行移动。
相对定位后，元素不脱离文档流，但仍然占据原来的位置，可以超出父容器，不会影响其他元素的位置。
开启定位后元素层级提升。

绝对定位

开启绝对定位position: absolute;,元素变成行内块元素
相对于包含块元素进行定位，使用left``right``top``bottom进行移动。
绝对定位后，元素会脱离文档流，不占据原来的位置，可以超出父容器，会影响其他元素的位置。
一定要使用子绝父相来进行定位。
想要充满不固定的父元素，可以使用top:0;bottom:0;（上下充满）和right:0;left:0;（左右充满）
想要居中，使用left:0;right:0;top:0;bottom:0;margin:auto;

固定定位

开启固定定位position:fixed,元素变成行内块元素
相对于浏览器窗口进行定位，使用left``right``top``bottom进行移动。
固定定位后，元素会脱离文档流，不占据原来的位置，可以超出父容器，会影响其他元素的位置。

粘性定位

开启粘性定位position:sticky,元素变成行内块元素
相对于可滚动祖先进行定位，使用left``right``top``bottom设置生效位置。
粘性定位后，元素不会脱离文档流，占据原来的位置，不可以超出父容器，不会影响其他元素的位置。

定位的层级

z-index 属性可以设置元素的层级，值越大，层级越高，默认值为 0，可以为负值。
只有定位元素才能设置层级，非定位元素设置层级无效。
兄弟元素之间设置层级，层级高的元素会覆盖层级低的元素。
父子元素之间设置层级，层级高的元素会覆盖层级低的元素。

渐变

线性渐变

background: linear-gradient(方向, 颜色1, 颜色2, 颜色3, ...);
方向: to right，to left，to top，to bottom，角度deg;
颜色后面填px可设置颜色过渡范围

径向渐变

background: radial-gradient(形状 大小 at 位置, 颜色1, 颜色2, 颜色3, ...);
形状:ellipse(椭圆) circle(圆形)
大小:closest-side(最近边) closest-corner(最近角) farthest-side(最远边) farthest-corner(最远角)
位置:top left bottom right 10px
颜色后面填px可设置颜色过渡范围

重复渐变

在没有渐变的区域重复渐变

background: repeating-linear-gradient(方向, 颜色1, 颜色2, 颜色3, ...);
background: repeating-radial-gradient(
  形状 大小 at 位置,
  颜色1,
  颜色2,
  颜色3,
  ...
);

变换

2D 变换

  1. 位移transform:translate(x,y) 对行内元素无效
  2. 缩放transform:scale(x,y) 块内文字也会缩放；负数会翻转；可以只写一个值，表示等比例缩放；对行内元素无效
  3. 旋转transform:rotate(角度deg) 一个值默认按 Z 轴旋转（盒子中心），对行内元素无效
  4. 扭曲transform:skew(x,y) 可以只写一个值，表示等比例扭曲；对行内元素无效
  5. 组合transform:translate(x,y) scale(x,y) rotate(角度deg) skew(x,y) 一般旋转写到最后，因为旋转会影响其他变换的基准点
  6. 变换原点transform-origin:x y 对位移没有影响，对缩放/旋转/扭曲有影响，默认为盒子中心，可以写百分比，也可以写像素，也可以写方位词

3D 变换

要先对父元素开启 3Dtransform-style:preserve-3d，再对父元素开启景深perspective:距离(子元素高度的70%左右往上调)，再对子元素进行变换

透视点，默认为开启 3D 元素的中心，perspective-origin:x y 可以设置透视点

  1. 位移transform:translate3d(x,y,z) z 轴不能设置百分比，对行内元素无效
  2. 旋转transform:rotate3d(x,y,z,角度deg) x,y,z 是 1 或 0，对行内元素无效
  3. 缩放transform:scale3d(x,y,z) z 设置的是景深(景深/z)，对行内元素无效
  4. 背部backface-visibility:hidden 隐藏背面，默认为可见

过渡

过渡效果，需要两个状态，开始状态和结束状态，中间的状态由浏览器自动计算。
过度属性必须在数字或百分比的属性基础上实现。

  1. 过渡属性transition-property 过渡的属性，默认为 all，可以写多个属性，用逗号隔开transition-property: width, height;
  2. 过渡时间transition-duration 过渡的时间，默认为 0s，可以写多个时间，用逗号隔开transition-duration: 2s, 1s;
  3. 过渡延迟transition-delay 过渡的延迟，默认为 0s，可以写多个延迟，用逗号隔开transition-delay: 2s, 1s;
  4. 过渡方式transition-timing-function 过渡的方式，默认为 ease，可以写多个方式，用逗号隔开transition-timing-function: ease[慢，快，慢], linear[匀速], ease-in[慢，快], ease-out[快，慢], ease-in-out[慢，快，慢], step-start[不考虑过度直接到达],step-end[不考虑过度等待到达], steps(步数,start/end)[分几步走，start/end表示开始还是结束], cubic-bezier(x1, y1, x2, y2)[贝塞尔曲线];
  5. 过渡组合transition: 过渡属性 过渡时间 过渡延迟 过渡方式

动画

帧，动画的最小单位，一般为一帧 1/60 秒。
关键帧，动画的关键部分，一般为一帧。
动画，由多个关键帧组成。

  1. 定义关键帧@keyframes 动画名称{from{初始状态}to{结束状态}}，也可以写百分比@keyframes 动画名称{0%{初始状态}100%{结束状态}}，表示动画的进度
  2. 使用动画animation:动画名称
  3. 动画时长animation-duration:时间
  4. 动画延迟animation-delay:时间
  5. 动画方式animation-timing-function:方式[同过渡]
  6. 动画次数animation-iteration-count:次数[infinite[无限次]]
  7. 动画方向animation-direction:reverse[反向播放]/alternate[交替播放]和次数一起用
  8. 动画填充模式animation-fill-mode:forwards[动画结束后保持结束状态]
  9. 动画播放状态animation-play-state:paused[暂停]
  10. 动画组合animation:动画名称 动画时长 动画延迟 动画方式 动画次数 动画方向 动画填充模式

多列布局

  1. 分列column-count:列数 分成几列
  2. 列宽column-width:列宽 计算宽度分层列
  3. 列间距column-gap:间距 列间距
  4. 列边框column-rule:边框宽度 边框样式 边框颜色
  5. 列分割线column-span:all[跨列] 要找到具体的段落进行设置

伸缩盒模型(弹性盒模型)

外置的叫伸缩容器，内部的叫伸缩项目。

  1. 父元素设置display:flex[块级伸缩容器]/inline-flex[行内伸缩容器，不常用]，开启弹性布局；子元素会自动成为伸缩项目，自动变为块元素。
  2. 主轴方向flex-direction:row[水平方向，默认]/row-reverse[水平方向，反向]/column[垂直方向]/column-reverse[垂直方向，反向]
  3. 换行方式flex-wrap:nowrap[不换行，默认]/wrap[换行，常用]/wrap-reverse[换行，反向]
  4. 复合属性flex-flow:主轴方向 换行方式
  5. 主轴对齐方式justify-content:flex-start[左对齐]/flex-end[右对齐]/center[居中]/space-between[两端对齐，中间等间距]/space-around[两端对齐，中间等间距，两边间距是中间的一半]/space-evenly[等间距]
  6. 侧轴对齐方式单行align-items:flex-start[上对齐]/flex-end[下对齐]/center[居中]/baseline[基线对齐]/stretch[拉伸不给高度，默认]
  7. 侧轴对齐方式多行align-content:flex-start[上对齐]/flex-end[下对齐]/center[居中]/space-between[两端对齐，中间等间距]/space-around[两端对齐，中间等间距，两边间距是中间的一半]/space-evenly[等间距]/stretch[拉伸]
  8. 主轴基准长度flex-basis:宽度 设置伸缩项目在主轴上的基准长度，默认为 flex-basis:auto，即项目本身的大小。
  9. 伸缩比例flex-grow:1 设置伸缩项目在主轴上的伸缩比例，默认为 0，即项目不伸缩。分割剩余空间，按百分比分割。
  10. 伸缩比例flex-shrink:1 设置伸缩项目在主轴上的伸缩比例，默认为 1，即项目可以伸缩，使用时不能设置flex-wrap: wrap;。分割剩余空间，按百分比分割。
  11. 复合属性flex:拉伸比例 压缩比例 基准长度，默认为 flex:0 1 auto，即项目不拉伸，可以压缩，基准长度为项目本身的大小。

排序和单独对齐

  1. 顺序order:0 设置伸缩项目的顺序，默认为 0，值越小越靠前。
  2. 单独对齐align-self:auto 设置伸缩项目在侧轴上的对齐方式，默认为 auto，即继承父元素的 align-items 属性。可以单独设置某个项目的对齐方式，不影响其他项目。

实时计算

  1. 百分比calc(100% - 100px) 计算百分比
  2. 颜色calc(颜色1 + 颜色2) 计算颜色
  3. 数值calc(数值1 + 数值2) 计算数值
  4. 长度calc(长度1 + 长度2) 计算长度

媒体查询

媒体查询，根据不同的屏幕尺寸，设置不同的样式。没有提高优先级

@media 媒体类型{
  样式;
}
@media (条件) {
  样式;
}
@media 媒体类型 and (条件) and (条件){ /* 两者都满足 */
  样式;
}
@media 媒体类型 and (条件) or (条件){ /* 其中一个满足 */
  样式;
}
@media not 媒体类型{ /* 否定 */
  样式;
}
@media only 媒体类型{ /* 肯定通常用在ie兼容问题 */
  样式;
}
媒体类型：all[所有设备]/print[打印设备]/screen[电脑屏幕]
条件：[min-/max-](width[视口宽度]/height[视口高度]/device-width[设备宽度])/orientation[方向，portrait[竖屏]/landscape[横屏]]

可以使用 html 写法

<link rel="stylesheet" media="条件" href="样式表路径" />

版心

二层版心，外层盒子不给设置宽度，内层盒子设置 960-1200.

多层版心，外层盒子不设置宽度，内层盒子设置 960-1200，高度设置为 100%。

响应式版心，使用媒体查询，根据不同屏幕宽度设置不同版心宽度。

常用类名

  1. 顶部导航条topbar
  2. 页头page-header
  3. 导航nav-....
  4. 搜索框search
  5. 横幅banner
  6. 主体main
  7. 侧边栏sidebar
  8. 页脚page-footer

重置默认样式

https://necolas.github.io/normalize.css/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

BFC

  1. 开启 BFC 后，子元素不会产生margin的传递问题
  2. 开启 BFC 后，自己不会被其他浮动元素所覆盖
  3. 开启 BFC 后，就算其子元素浮动，元素自身高度不会塌陷

开启 BFC 的方式

  1. 根元素<html>自身携带
  2. 浮动元素float:left/right自动开启
  3. 绝对定位.固定定位的元素position:absolute/fixed自动开启
  4. 行内块元素display:inline-block自动开启
  5. 表格元素display:table自动开启
  6. 表格单元格display:table-cell自动开启
  7. 表格标题display:table-caption自动开启
  8. 当设置overflow:且值不为visible自动开启
  9. 伸缩项目display:flex/inline-flex自动开启
  10. 网格布局display:grid/inline-grid自动开启
  11. column-span为all的元素自动开启
  12. display:flow-root开启 BFC
posted @ 2025-03-27 13:11  *--_-  阅读(19)  评论(0)    收藏  举报