CSS(Cascading Style Sheet)

Circle in Circle

已于 2024-10-05 15:22:19 修改

阅读量1.3k

点赞数 20

文章标签： css 前端

于 2024-09-30 22:15:41 首次发布

本文链接：https://blog.csdn.net/weixin_43731078/article/details/142663219

版权

CSS相关知识

1 基本概念
2 CSS 的三种位置
- 2.1 CSS行内样式
- 2.2 CSS内部样式
- 2.3 CSS外部样式
- 2.4 关于优先级
3 常用选择器速查
4 CSS常用值
5 背景图处理
6 元素的显示模式
7 字体处理
8 盒子模型
- 8.1 外间距(margin)
- - 外间距的写法：
  - 外间距指的元素外部与其它元素之间的距离
- 8.2 边框(border)
- 8.3 内间距(padding)
9 CSS优先级
10 流与文档流
11 浮动
12 CSS定位
- 12.1 静态定位（默认值） position:static；
- 12.2 相对定位 position:relative；
- 12.3 绝对定位 position:absolute；
- 12.4 固定定位 position:fixed；
- 12.5 布局方式总结
13 元素的放大与过渡
14 页面版心
15 元素阴影效果
16 元素溢出
17 垂直方向的对齐方式
18 单行文本溢出替换为省略号
19 完整的学子代码

1 基本概念

CSS（Cascading Style Sheet）级联样式表，用来控制页面布局与页面样式
比如可以修改颜色、大小、位置、层级、动画等等

2 CSS 的三种位置

2.1 CSS行内样式

写在 HTML 元素的开始标签里，只对当前行生效
特点：复用性差

<h4 style="color:red;">我是标题</h4>

2.2 CSS内部样式

写在 head 标签中的 style 标签里，对当前页面所有元素生效
特点：加载速度快，首页常用

<head>
  <style>
     h1 {
          color:red;
        }
  </style>
</head>

2.3 CSS外部样式

写在独立的.css 文件中，在html 文件中引入外部的.css 文件

rel：必写属性，表示引入文件是什么类型 stylesheet 样式表
href：要引入 CSS 文件的路径

特点：可以被多个页面共享，复用性强，常用于二三级页面

<html>
        <head>
                <link rel="stylesheet" href="Demo.css">
        </head>
</html>

2.4 关于优先级

渲染同一个元素，样式不同会叠加生效,比如背景色和文字颜色会同时生效
如果渲染的样式相同，按照如下优先级排序：
!important>行内样式>（内部样式=外部样式）
内部样式与外部样式优先级一样，后写的样式会把之前的样式覆盖掉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的三种位置</title>
    <!-- 2.CSS内部样式,在head标签中加style标签,对当前页面所有被选中的元素生效 -->
    <style>
        p {
            color: blue;
        }
        h4 {
            background-color: yellow;
            color: green !important;
        }
    </style>
    <!-- 3.CSS外部样式
    rel="stylesheet"必写属性,表示当前引入的文件类型是CSS样式文件  -->
    <link rel="stylesheet" href="Demo.css">
</head>
<body>
    <div>我是div</div>
    <div>我是div</div>
    <div>我是div</div>
    <hr>
    <h4>我是标题</h4>
    <!--1.CSS行内样式 加在当前行元素上并且只对当前行元素生效 -->
    <h4 style="color: red;">我是标题</h4>
    <h4>我是标题</h4>
    <hr>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
</body>
</html>

Demo.css

div {
    width: 100px;
    height: 100px;
    border: 5px solid red;
}
h4 {
    color: blue;
}

3 常用选择器速查

标签名选择器：选中指定标签的所有元素，写法：标签名 { CSS 样式 }
类选择器：选中指定的一类元素，写法： .class 值 { CSS 样式 }
id 选择器：选中指定的一个元素，写法： #id 值 { CSS 样式 }
伪类选择器：
- 选中超链接未被访问时时的状态，写法：a:link{ CSS 样式 }
- 选中超链接已被访问时的状态，写法：a:visited{ CSS 样式 }
- 选中元素的悬停状态（非超链接独有），写法： div:hover{ CSS 样式 }
- 选中超链接激活时的状态，写法：a:active{ CSS 样式 }
- 注意：a 标签伪类的顺序： :link :visited :hover :active
群组选择器：选中多种不同的元素，写法： #id 值，.class 值，标签名{ CSS 样式 }
通用选择器：选中所有元素，写法： *{ CSS 样式 }
属性选择器：选中指定属性与属性值的元素，写法： [type=“text”]{ CSS 样式 }
后代选择器：选中祖先元素中包含的所有后代元素，写法： div span{ CSS 样式 }
子代选择器：选中父元素中下的直接子元素，写法： div>span{ CSS 样式 }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style>
        /* 标签名选择器 */
        h4 {
            color: red;
        }
        div {
            width: 120px;
            height: 120px;
            background-color: cyan;
        }
        /* id选择器 */
        #d2 {
            color: red;
        }
        /* 类选择器 */
        .error {
            background-color: red;
            color: white;
        }
        .success {
            background-color: green;
            color: white;
        }
        /* 伪类选择器 :hover选中元素的悬停状态*/
        /* 紧挨着写 #d2与:hover 是与的关系,只有同时满足才可以被选中 */
        #d2:hover {
            background-color: pink;
        }
        /*群组选择器 只要满足其中一个,就可以被选中*/
        #d2,h4,.error {
            text-decoration: underline;
        }
        /* 通配选择器 匹配所有元素*/
        * {
            font-style: italic;
        }
        a:link { /* 选中超链接未被访问过的状态 */
            color: gray;
        }
        a:visited { /* 选中超链接已经被访问过的状态 */
            color: green;
        }
        a:hover { /* 选中元素悬停时的状态(不是超链接独有的) */
            color: red;
        }
        a:active { /* 选中超链接激活时的状态 */
            color: orange;
        }
        /* 属性选择器 */
        input[type="text"] {
            background-color: yellow;
        }
        /* 后代选择器 选中包含在内的所有后代元素 子元素 孙元素...*/
        #d1 span {
            background-color: magenta;
        }
        /* 子代选择器 大于号,选中本元素的直接子元素 可以逐级向下写多层  */
        #d1>div>span {
            color: yellow;
        }
    </style>
</head>
<body>
    <h4>我是标题</h4>
    <p>我是段落</p>
    <a href="#">我是超链接</a>
    <h4>我是标题</h4>
    <div>我是div1</div>
    <div id="d2">我是div2</div>
    <div>我是div3</div>
    <hr>
    <span class="error">用户名已被占用</span>
    <span class="error">操作失败</span>
    <br>
    <span class="success">有效的手机号</span>
    <span class="success">新增成功</span>
    <hr>
    <a href="https://www.baidu.com">百度首页</a>
    <a href="abc">错误地址</a>
    <hr>
    <input type="text">
    <input type="password">
    <hr>
    <div id="d1">
        <span>1</span>
        <div>
            <span>2</span>
            <b>测试</b>
        </div>
        <span>3</span>
    </div>
</body>
</html>

4 CSS常用值

px：像素，屏幕上最小的一个发光点
颜色表示法：

单词表示，如：red
十六进制表示法，如：color：#0000FF；
- 前两位表示红色，中间两位表示绿色，最后两位表示蓝色
简写的十六进制表示法，如：color：#00F；
- 三种颜色两位数字都相同，才可以简写
rgb（red，green,blue）表示法，如：color：rgb（0,0,255）；
- 值的范围是 0～255
rgba（red，green, blue，alpha）表示法，如：color：rgba（0，0,255，0.5）；
- 不透明度，0 表示完全透明，1 表示完全不透明

自然界的颜色有几百万种，但描述颜色的单词只有几百个该怎么办呢？自然界中太阳光的三原色：红色绿色蓝色
可以通过这三种颜色调配出任意的其他颜色 RGB 24 位色表示法在计算机中，使用 8 个 bit 位存储红色，8 个 bit
位存储绿色，8 个 bit 位存储蓝色，8 个 bit 位能存 2^8=256 个值，也就是 0～255，也就是 256256256
1677 万种色彩，人眼最多识别 300～500 万种色彩，已经超过了人眼的极限，也称作 24 位真彩色，写法：rgb（255，0，0）
RGBA 32 位色表示法最后一个 A 是（alpha）表示不透明度参数最后 8 个 bit 位存储不透明度 1 完全不透明 0
完全透明 rgba（255，0，0，0.85）表示红色，透明度 0.85 注意这个小数的 0 可以省略，比如
rgba（255，0，0，0.85）；可以简写成 rgba（255 ， 0 ， 0 ， .85); 十六进制哈希表示法前/中/后
两位数值分别代表红/绿/蓝色的色谱范围。数值从 0-9 a-f
#0000FF 这里的字母大小写均可但注意此种表示法只能表示 24 位色，没有透明度十六进制缩写表示法
#00F 这里的字母大小写均可当十六进制哈希表示法的表示结果为：#0000FF 当每种颜色的两个数字相同时：可以使用十六进制缩写表示法简写成一个数字：#00F 注意：如果每种颜色的两个数字不同，则不能简写，比如#808080 就不可以简写

5 背景图处理

背景颜色：background-color:#fff；

颜色可以使用任何的色值（十六进制 rgb rgba 单词等）背景颜色会在元素的最底层

背景图片插入：background-image:url（路径）；

注意：背景图和 img 标签的图片插入是有区别的！
img 标签插入的图片在默认情况下直接就能显示图片
背景图必须给所在元素设置宽高才能显示出来

图片重复问题：background-repeat

图片被平铺到元素中会出现两种情况：
图片大于元素，图片显示不全
图片小于元素，会重复，哪个方向有空余空间，就向哪个方向重复
background-repeat: no-repeat; 背景图仅显示一次，不重复
background-repeat: repeat; 默认值，X-Y 轴都重复
background-repeat: repeat-x; 仅在 X 轴（水平方向）重复
background-repeat: repeat-y; 仅在 Y 轴（垂直方向）重复

背景图尺寸：background-size

没有设置任何尺寸时，默认使用图片本身的大小
设置尺寸时，值 1 是背景图的宽度，值 2 是背景图的高度
background-size: 600px 300px;
background-size: 100% 100%;
注意：图片比例要合适，否则会尺寸失真

background-position:left top; 默认值（左上）

第一个值表示水平方向第二个值表示垂直方向
X 轴（水平方向）的值：left 左 center 中 right 右
Y 轴（竖直方向）的值：top 上 center 中 bottom 下
center center 表示水平与竖直方向均居中，可以简写成一个 center
还可以写像素值，原点（0px 0px）就是左上角
正值向右/向下移动；负值向左/向上移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS色值与背景图</title>
    <style>
        h1 {
            /*1.单词表示法*/
            color: red;
            /*2.rgb(红,绿,蓝) 范围：0~255 */
            color: rgb(255,0,0);
            color: rgb(0,255,0);
            color: rgb(0,0,255);
            /*3.十六进制表示法 0~9 A~F
            前两位表示红色 中间两位表示绿色 最后两位表示蓝色*/
            color: #FF0000;
            color: #00FF00;
            color: #0000ff;
            /*4.十六进制简写*/
            color: #f00;
            color: #0f0;
            color: #00f;
            color: #000;
            color: #fff;
            color: #808080;
            /* 5.rgba(red,green,blue,alpha)表示法
            1完全不透明 0透明到看不见 0.5半透明 */
            color: rgba(0,0,255,0.2);
        }
        .d1 {
            /*1.插入背景图*/
            background-image: url(img/mr.png);
            /*2.背景图必须设置所在区域大小*/
            width: 50px;
            height: 100px;
            /*可以同时添加背景色，没有图的地方有颜色*/
            background-color: cyan;
            /*3.背景图尺寸 宽度 高度*/
            background-size: 50px 100px;
        }
        .d2 {
            width: 300px;
            height: 300px;
            border: 2px solid #f00;
            background-image: url(img/mr.png);
            /*4.背景图重复*/
            background-repeat: no-repeat; /*不允许重复*/
            /*5.背景图位置 水平方向 垂直方向*/
            background-position: 0px 0px; /*原点 左上角*/
            background-position: 100px 50px; /*右下 正数*/
            background-position: -50px -50px; /*左上 负数*/
            background-position: center; /*两个center简写成1个 居中*/
            background-position: 50% 50%; /*百分比 居中*/
            background-position: 100% 100%; /*右下角*/
        }
        .d3 {
            /*想要插入背景图 必须设置所在区域大小*/
            width: 611px;
            height: 376px;
            background-color: #e8e8e8;
            /*插入背景图*/
            background-image: url(img/computer1.png);
            /*设置背景图不重复*/
            background-repeat: no-repeat;
            /*背景图尺寸 宽 高*/
            background-size: 318px 319px;
            /*背景图位置 水平 垂直*/
            background-position: 90% 60%;
        }
    </style>
</head>
<body>
    <h1>测试颜色</h1>
    <hr>
    <!-- .d*3 生成3个class值为d的div   -->
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
</body>
</html>

6 元素的显示模式

块级元素：display:block；
排列方式：按照书写的顺序，从上往下依次排列
特点：独占一行，还可以设置宽高
常见标签：div h1～h6 p form table ul ol li…
行内元素：display:inline；
排列方式：按照书写顺序从左往右依次排列
特点：共占一行，不能设置宽高
常见标签：span a i b s…
行内块元素：display:inline-block；
排列方式：按照书写顺序从左往右依次排列
特点：共占一行，可以修改宽高
常见标签：input button
元素消失：display:none；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素显示模式</title>
    <style>
      /*块级元素 display:block;
      独占一行 可以设置宽高*/
      div {
        height: 100px;
        border: 2px solid #00f;
      }
      #d2 {
        width: 500px;
      }
      /*行内元素:display:inline 共处一行 无法设置宽高
      如果想具有块级元素特点，可以使用display:block切换为块级元素 */
      span {
        width: 200px;
        height: 200px;
        background-color: #f00;
        display: block;
      }
      /*3.行内块:inline-block 共处一行 可以设置大小 */
      input,button {
          width: 200px;
          height: 200px;
      }
      #d3 {
          /*4.让元素消失 */
          display: none;
      }
    </style>
</head>
<body>
  <div id="d1"></div>
  <div id="d2"></div>
  <div id="d3"></div>
  <hr>
  <span>1234567890</span>
  <span>1234567890fhoweifhwiowid</span>
  <span>1234567890</span>
  <hr>
  <input type="text">
  <input type="text">
  <input type="text">
  <button>点我提交</button>
</body>
</html>

7 字体处理

color：设置文字颜色
font-size ：设置文字的大小

谷歌浏览器默认字体大小 16px，最小 12px，低于 12px 也以 12px 显示

font-family: “幼圆”；设置文字字体

执行顺序是从前向后执行的
字体名称要使用引号包裹
商用字体要考虑到版权问题
尽量少用奇怪的字体，因为客户可能会没有

字体文件在电脑 C 盘的“Fonts”文件夹中
打开“计算机”->C 盘-> “Windows”-> “Fonts”即可看到所有已安装的字体

font: 35px “微软雅黑”；字号和字体可以一起设置
text-decoration ：设置文本修饰线

underline 下划线
none 去掉所有修饰线
line-through 添加一条删除线

line-height：设置文本行高

称为行间距，指的是行与行文本之间的距离
如果需要单行文字在元素内垂直居中，可以让行高为元素的高度即可

text-align ：设置块级元素内文本的水平对齐方式

对齐方式：left 左对齐 / center 居中对齐 / right 右对齐

text-shadow: 20px 20px 5px red;

文本阴影：X 轴偏移量 Y 轴偏移量羽化值阴影颜色

font-weight :字重（字体粗细），可取值：

normal 400 正常体
lighter 300 细体
bold 600 粗体

text-indent: 2em;用于设置内容的首行缩进

一般用于中文段落最开始，首行需要缩进两个中文字符

font-style: italic; 文字倾斜效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字处理</title>
    <style>
        p {
            /*文字大小 谷歌浏览器默认的字号是16px 最小字号12px*/
            font-size: 30px;
            /*字体 可以设置多个*/
            font-family: "幼圆uuuu","宋体";
            /*简写:字号 字体*/
            font: 35px "微软雅黑";
        }
        a {
            /*文本修饰线*/
            text-decoration: none; /*去除修饰线*/
            text-decoration: line-through;/*删除线*/
            text-decoration: underline;/*下划线*/
            text-decoration: overline;/*顶部线*/
        }
        div {
            width: 200px;
            height: 200px;
            border: 5px solid #00f;
            /*文字水平对齐方式:居中*/
            text-align: center;
            /*行高:设置行与行之间的距离
            如果单行文字的行高与div一样高，可以设置文字垂直居中效果*/
            line-height: 200px;
        }
        h1 {
            /*字体字重*/
            font-weight: bold;/*加粗*/
            font-weight: normal;/*正常体*/
            font-weight: lighter;/*细体*/
            font-style: italic;/*字体样式:斜体*/
        }
        span {
            /*文本阴影:X轴偏移量 Y轴偏移量 羽化值 阴影颜色
            水平方向:正数向右 负数向左
            垂直方向:正数向下 负数向上
            羽化值:数值越大，阴影越模糊*/
            text-shadow: 20px -50px 2px red;
        }
    </style>
</head>
<body>
  <p>我是测试文字 123 ABC abc</p>
  <a href="#">超链接</a>
  <div>
      测试文字
  </div>
  <span>测试文字</span>
  <h1>标题字</h1>
</body>
</html>

8 盒子模型

一个 HTML 元素，需要占用页面的布局空间，这个空间由以下几个部分组成：

content 内容区域元素本身的大小
padding 内间距元素内容与边框之间的距离
border 元素的边框
margin 外间距元素与元素之间的距离

涉及到四个方向 left 左 right 右 top 上 bottom 下

8.1 外间距(margin)

外间距的写法：

margin-bottom: 50px; 设置单侧外间距（top上 / right右 / bottom下/ left左）
margin:10px; 四个方向都是 10px
margin:10px 20px; 上下 10px 左右 20px
margin:10px 20px 30px; 上 10px 左右 20px 下 30px
margin:10px 20px 30px 40px; 上 10px 右 20px 下 30px 左 40px
margin: 0 auto; 上下 0 左右居中(块级元素左右外间距计算成等值，能实现水平居中效果)

规律：按照上右下左顺时针依次赋值没有的找对门

外间距指的元素外部与其它元素之间的距离

块级与行内块元素四个方向的外间距均生效
行内元素的左右外间距可以用，上下外间距不生效
父子贴边问题：给父元素加 BFC 结界 overflow:hidden；
第 1 个子元素的上外间距与最后 1 个子元素的下外间距都会包裹在父元素范围之内
相邻兄弟间如果有重叠的外间距，取最大值显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外间距测试</title>
    <style>
        body {
            /*可以去掉body默认四个方向的8px外间距*/
            margin: 0;
        }
        /* div默认宽度为其父级宽度的100% 默认高度为0 */
        .fu {
            background-color: rgba(255,255,0,.3); /*不透明度.3 0透明 1不透明*/
            /*给父元素设置BFC结界 把首尾元素超出的外间距包裹在内*/
            overflow: hidden;
        }
        .fu>div {
            width: 100px;
            height: 100px;
            background-color: rgba(0,0,255,.6);
            border: 2px solid #00f;
            color: #fff;
        }
        /* 相邻兄弟垂直方向的外间距取大值显示,不会叠加 */
        .z1 {
            margin-bottom: 30px;
            margin-top: 50px;/*第1个子元素的上外间距会超出父元素的范围*/
        }
        .z2 {
            margin-top: 50px;
        }
        .z4 {
            margin-bottom: 50px;/*最后1个子元素的下外间距会超出父元素的范围*/
        }
        .z3 {
            /* 上 右 下 左 顺时针依次赋值 没有值就找对门的值 */
            margin: 10px 20px 30px 40px;
            margin: 10px;
            margin: 10px 20px;
            margin: 10px 20px 30px;
            /*上下0 左右auto让浏览器自动计算为相等的值 实现块级元素的水平居中 */
            margin: 0 auto;
        }
        span {
            border: 2px solid #f00;
        }
        .s2 {
            /* 行内元素垂直方向的外间距不生效,不要使用! */
            margin: 30px 20px;
        }
    </style>
</head>
<body>
<span>span1</span><span class="s2">span2</span><span>span3</span>

<!-- .fu>.z*4 -->
<div class="fu">
    <div class="z1">子元素div1</div>
    <div class="z2">子元素div2</div>
    <div class="z3">子元素div3</div>
    <div class="z4">子元素div4</div>
</div>
</body>
</html>

8.2 边框(border)

设置边框：border:1px solid #000；粗细线型颜色
设置某一个方向的边框：border-top: 1px solid #000；设置上边框的粗细线型颜色
去掉边框： border:none；或者 border:0；
线型：solid 单实线 dashed 虚线 dotted 点状线 double 双实线…
边框圆角： border-radius: 100px；

数值越大，角越圆
边框圆角为正方形高度的一半，可以切圆形

8.3 内间距(padding)

内间距的写法：

padding-top: 50px; 设置单侧内间距（top 上/right 右/bottom 下/left 左）
padding:10px; 四个方向都是 10px
padding:10px 20px; 上下 10px 左右 20px
padding:10px 20px 30px; 上 10px 左右 20px 下 30px
padding:10px 20px 30px 40px; 上 10px 右 20px 下 30px 左 40px
规律：按照上右下左顺时针依次赋值没有的找对门

内间距指的是元素内容与边框之间的距离

块级与行内块元素的四个方向的内间距均生效
行内元素的左右内间距正常生效，但上下内间距不生效

内间距使用场景

让元素内部距离外层父级元素的边有点距离，主要为了美化，如：

输入框的文字不要贴边显示
文本卡片内容不要贴边显示

切换盒子模型计算方案：

box-sizing: border-box;边框盒子
效果：加内间距与边框都不会让元素变大，都算在元素设置的 width 与 height 中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框与内间距</title>
    <style>
        .d1 {
            width: 200px;
            height: 200px;
            background-color: #0aa1ed;
            /* 设置四个方向的 粗细 线型 颜色*/
            border: 5px solid #f00;
            /* 设置单方向的边框 */
            border-top: 8px solid #ff0;
            /* 边框圆角 值越大 角越圆 值为正方形宽高的一半是圆形 */
            border-radius: 100px;
        }
        .d2 {
            width: 200px;
            height: 200px;
            border: 5px solid #f0f;
            padding-left: 50px;
            padding-top: 50px;
            /*默认的计算方案:加内间距与边框都会让元素变大*/
            /*切换成"边框盒子"计算方案后,内间距与边框都会算在预设的大小里,是固定大小*/
            box-sizing: border-box;
            margin: 50px; /*外间距不算在元素本身的大小里,但是会占据页面布局空间*/
        }
        span {
            border: 3px solid #f00;
        }
        .s2 {
            /* 行内元素垂直方向的内外间距都不能使用! 水平方向可以正常生效 */
            padding: 50px;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="d2">内间距测试</div>
    <hr>
    <span>我是span</span>
    <span class="s2">我是span</span>
    <span>我是span</span>
    <h1>我是标题</h1>
</body>
</html>

9 CSS优先级

当渲染同一个元素的不同的样式时,会叠加效果
当渲染同一个元素的相同样式时,后面的会把前面的样式覆盖掉
在CSS中,有一些属性是具有继承特性的,也就是父元素的CSS属性会传递到子元素上,使用的是就近原则,哪个近,就用哪个的样式
元素可以使用继承过来的祖先元素的样式,但如果我们给元素设定了样式,就会使用我们设定的值.也就是说,元素自设样式的优先级是要高于继承样式的
除了我们自己设定的CSS样式以外,HTML元素本身就有样式效果,只要我们指定过样式,优先级就要高于浏览器自带的样式效果

10 流与文档流

流（Stream）：车流水流多个对象有序排列称为流
文档流：网页中多个元素按照自己的特性有序排列，形成了文档流
如：块级从上到下排列，行内与行内块从左到右排列
文档流中元素的特点：

依次紧密排列
多个 div/span 在竖直/水平方向紧挨着
流中的元素绝不可能出现一个元叠摞在另外一个元素上面的情况
如果项目中需要出现堆叠的效果，就只能"脱离文档流"

三种显示模式总结

块级元素
- 代码:display:block;
- 宽度与高度:宽度默认为父级宽度的100%,高度靠内容撑开,默认为0,设置宽高有效
- 排列方式:从上到下排列
- 四个方向的内外间距:四个方向都生效
行内元素
- 代码:display:inline;
- 宽度与高度:宽高被内容撑开,设置宽高无效
- 排列方式:从左到右排列
- 四个方向的内外间距:左右生效,上下不生效
行内块元素
- 代码:display:inline-block;
- 宽度与高度:有默认样式,设置宽高有效
- 排列方式:从左到右排列
- 四个方向的内外间距:四个方向都生效

1.行内元素与行内块元素统称为内联元素
2.我们可以修改HTML元素的display属性值,切换元素的显示模式

11 浮动

浮动可以让块级元素横向排列
float 属性：

float:left; 左浮动，向父级元素的左侧边界靠拢
float:right; 右浮动，向父级元素右侧边界靠拢

浮动特点：

浮动会破坏原有的文档流布局，变为浮动布局，元素可以横向排列
浮动后的元素会脱离文档流，释放原有的布局空间
浮动后的子元素不再支撑父元素的高度
如果一个父元素中所有的子元素都浮动了，父元素会高度坍塌（失高）
解决方案：给父元素设置 overflow:hidden；
会根据子元素浮动后的实际高度给父元素自动填充高度，解决失高问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动布局</title>
    <style>
        .fu {
            background-color: #ff0;
            /*子元素都浮动走,父元素会失高
            可以给父元素设置BFC结界,此时父元素会根据子元素浮动后的实际高度自动填充高度*/
            overflow: hidden;
        }
        .fu>div {
            width: 100px;
            height: 100px;
            border: 3px solid #f00;
        }
        .z1 {
            background-color: #f00;
            /* 浮动元素会脱离文档流 不再占用文档流的布局空间 也就是不再支撑父元素的高度 */
            float: left;
        }
        .z2 {
            background-color: #0f0;
            float: left;
        }
        .z3 {
            background-color: #00f;
            float: left;
        }
    </style>
</head>
<body>
<!-- .fu>.z*3 -->
<div class="fu">
    <div class="z1"></div>
    <div class="z2"></div>
    <div class="z3"></div>
</div>
</body>
</html>

12 CSS定位

12.1 静态定位（默认值） position:static；

就是默认的文档流布局，元素处于文档流中,只能依次排列，不能随意改变自己的位置
使用其他定位属性后，可以让元素通过 top/bottom/left/right 四个属性移动
层级 z-index：使用定位后，元素发生重叠时可以调整层级

z-index 的值越大，层级越高，值大的元素会覆盖值小的元素
值为整数值，没有任何单位
默认值是 auto，可以看作是层级 0，z-index 还可以取负值

12.2 相对定位 position:relative；

移动参照物：元素自己原来的位置

不会脱离文档流并保留原有位置，还可以支撑父元素，不影响父级
与外间距 margin 的区别：margin 会影响其他元素，相对定位不会挤开兄弟元素，但可能会遮盖
常用于需要微调元素位置时使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        .fu {
            background-color: #ff0;
        }
        .fu>div {
            width: 100px;
            height: 100px;
        }
        .z1 {
            background-color: #f00;
            /* 注意!要先加position才能移动位置 调整层级 */
            position: relative;
            z-index: 10;/*整数 默认0 数值越大 层级越高 */
            left: 25px;
        }
        .z2 {
            background-color: #0f0;
            /*相对定位
            移动参照物:自己原来的位置
            不脱离文档流 不释放布局空间 也不会挤开其它元素*/
            position: relative;
            left: 50px;
            bottom: 50px;
            z-index: -1;
        }
        .z3 {
            background-color: #00f;
        }
    </style>
</head>
<body>
<div class="fu">
    <div class="z1"></div>
    <div class="z2"></div>
    <div class="z3"></div>
</div>
</body>
</html>

12.3 绝对定位 position:absolute；

移动参照物：离自己最近的使用了定位属性的上级元素
会一路向上找，终点是 html 根元素

绝对定位的元素会脱离文档流，释放布局空间
小技巧：”子绝父相”子元素使用绝对定位，父级设置相对定位后就可以变成子元素移动的参照物

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        .fu {
            background-color: #ff0;
            position: relative;
            width: 500px;
        }
        .fu>div {
            width: 100px;
            height: 100px;
        }
        .z1 {
            background-color: #f00;
        }
        .z2 {
            background-color: #0f0;
            position: absolute;
            top: 0;
            right: 0;
        }
        .z3 {
            background-color: #00f;
        }
    </style>
</head>
<body>
<div class="fu">
    <div class="z1"></div>
    <div class="z2"></div>
    <div class="z3"></div>
</div>
</body>
</html>

12.4 固定定位 position:fixed；

移动参照物：html 根元素（浏览器窗口）

固定定位也会脱离文档流
我们可以利用固定定位实现页面固定广告与撑满全屏的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style>
        .fu {
            background-color: #ff0;
        }
        .fu>div {
            width: 100px;
            height: 100px;
        }
        .z1 {
            background-color: #f00;
        }
        .z2 {
            background-color: #0f0;
            /* 固定定位 参照物为html元素 会脱离文档流 释放布局空间 */
            position: fixed;
            right: 0;
            bottom: 0;
        }
        .z3 {
            background-color: #00f;
        }
    </style>
</head>
<body>
<div class="fu">
    <div class="z1"></div>
    <div class="z2"></div>
    <div class="z3"></div>
</div>
</body>
</html>

12.5 布局方式总结

浮动布局 float:left/right;
- 元素会脱离文档流，释放布局空间
- 如果所有子元素都浮动，父元素会高度坍塌
- 浮动元素可以使用 margin 微调自己的位置
- 用途：可在页面中实现"两端对齐"或“横置”的效果
静态定位（默认文档流布局）position:static;
- 块级元素从上往下依次排列
- 行内/行内块元素从左往右依次排列，一行放不下才换行
- 文档流中的元素都是紧密排列的，没有大的空隙和元素堆叠的现象
相对定位 position:relative;
- 移动参照物：自己作为静态定位元素时原来的位置
- 不会脱离文档流、不会释放布局空间
- 可以使用 top bottom left right 调整自己的位置
- 可以使用 z-index 调整层级
- 用途：微调自己的位置，但不会挤开其它元素
- 用途：为使用绝对定位的后代元素提供定位参照物
绝对定位 position:absolute;
- 移动参照物：离自己最近的使用了非 static 定位的上级元素，终点是 html 根元素
- 会脱离文档流并且释放布局空间
- 可以使用 top bottom left right 调整自己的位置
- 可以使用 z-index 调整层级
- 用途：在页面上覆盖到其它元素上方的指定位置
固定定位 position:fixed;
- 移动参照物：html 根元素
- 会脱离文档流并且释放布局空间
- 可以使用 top bottom left right 调整自己的位置
- 可以使用 z-index 调整层级
- 用途：制作覆盖整个窗口的遮罩层、或制作页面固定广告

13 元素的放大与过渡

transform: scale(n); 变换:放大(倍数) 放大至原来的n倍
- n>1放大n倍 n=1 大小不变 0<n<1缩小n倍 0缩小到看不见
transition: 2s; 添加过渡让变换有一点过渡时间，不要一瞬间完成太突兀
注意: 过渡要加给div，而不是悬停,否则离开 div 时没有过渡,效果不好

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素放大与过渡</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: #f00;
            margin: 100px auto 0; /*外间距: 上 左右 下*/
            /*过渡时间 注意不要加在:hover中,否则不悬停时就没有过渡效果了*/
            transition: 2s;
        }
        div:hover {
            background-color: #0aa1ed;
            /*变换:缩放(n)
            n>1放大n倍  n=1 大小不变  0<n<1缩小n倍 0缩小到看不见*/
            transform: scale(2);
            border-radius: 50px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

14 页面版心

版心指的是一般在页面中定宽且居中，用来显示页面主要内容的一块区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>居中测试</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .main {
            background-color: lightgreen;
        }
        .center {
            background-color: lightblue;
            width: 1000px;
            margin: 0 auto;
        }
        .card {
            width: 200px;
            height: 300px;
            background-color: pink;
            border: 3px solid #000;
            /*让块级元素自己水平居中,要加给块级元素自己上*/
            margin: 0 auto;
            /*让块级元素内的(文字/图片)水平居中,加在块级父元素上*/
            text-align: center;
            line-height: 300px;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="center">
        <div class="card">我是内容</div>
        <div class="card">我是内容</div>
        <div class="card">我是内容</div>
        <div class="card">我是内容</div>
    </div>
</div>
</body>
</html>

15 元素阴影效果

box-shadow: 5px 5px 10px 5px lightgreen;
值 1: 水平方向偏移量正数向右负数向左
值 2: 垂直方向偏移量正数向下负数向上
值 3: 羽化值数值越大阴影越虚化最小值 0 不允许有负数
值 4: 阴影范围数值越大阴影的范围越大 0 与当前元素一样大
值 5: 阴影的颜色
值 6: 阴影的位置，默认在元素外部，也可以写 inset 改在元素内部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素阴影</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: #ff0;
            /*元素阴影
            X轴偏移量 正数向右
            Y轴偏移量 正数向下
            羽化值 数值越大 阴影越虚化 0不虚化
            阴影扩展半径 数值越大 阴影范围越大 阴影颜色*/
            box-shadow: 5px 5px 5px 5px red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

16 元素溢出

如果内容超出了预设的区域，我们称之为“溢出”，溢出一般有以下几种处理方式

overflow: visible; 默认值溢出可见
overflow: hidden; 溢出隐藏，超出部分裁掉可解决父子贴边问题与父元素失高问题
overflow: scroll; 两个方向都有滚动条
overflow: auto; 自动给溢出的方向设置滚动条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素溢出</title>
    <style>
        div {
            border: 5px solid #f00;
            width: 200px;
            height: 1500px;
            /* 溢出 */
            overflow: visible; /* 默认值 溢出可见 */
            overflow: hidden; /* 溢出隐藏 多余的部分直接裁掉 */
            overflow: scroll; /* 两个方向都显示滚动条 */
            overflow: auto; /* 溢出的方向才自动加滚动条 */
        }
    </style>
</head>
<body>
    <div>
        <img src="img/1.jpg">
        <img src="img/1.jpg">
        <img src="img/1.jpg">
    </div>
</body>
</html>

17 垂直方向的对齐方式

指的是元素自己在垂直方向上，与其左右两侧内容的对齐方式，有以下几种对齐方式：

vertical-align: top; 顶线对齐
vertical-align: bottom; 底线对齐
vertical-align: middle; 中线对齐
vertical-align: baseline; 基线对齐默认值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素垂直对齐方式</title>
    <style>
      img {
          width: 200px;
          /*元素在垂直方向上,与左右两侧元素的对齐方式*/
          vertical-align: top; /*顶线对齐*/
          vertical-align: bottom; /*底线对齐*/
          vertical-align: middle; /*基线对齐 默认值*/
          vertical-align: baseline; /*中线对齐*/
      }
    </style>
</head>
<body>
  abyj<img src="img/1.jpg">国圈<img src="img/1.jpg">
</body>
</html>

18 单行文本溢出替换为省略号

文本在父级元素中是默认会换行的,也就是一行放不下的文字会换到下一行显示
所以我们需要强制文本不换行才能实现文本溢出的效果
我们还可以把溢出的文字替换成省略号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单行文本溢出替换省略号</title>
    <style>
        div {
            background-color: yellow;
            /*限制父元素的宽度,否则文字写不下会换行,不会溢出*/
            /*且以下三句为组合代码,缺一不可!*/
            width: 200px;
            /*强制文本不换行*/
            white-space: nowrap;
            /*溢出隐藏 多余的文字直接裁掉*/
            overflow: hidden;
            /*溢出的文字替换为省略号*/
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, quo, saepe. Cum ea in numquam odio repudiandae! Aperiam, asperiores et ex in magni odit quibusdam repellat tempore temporibus ullam veniam.
    </div>
</body>
</html>

19 完整的学子代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学子页面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .main {
            background-color: #fff;
        }
        .center {
            width: 1000px;
            margin: 0 auto;
        }
        .f1 {
            overflow: hidden;
            margin-bottom: 10px;
        }
        .f1>.left {
            width: 611px;
            height: 376px;
            background-color: #e8e8e8;
            float: left;
            margin-right: 10px;
            position: relative;
        }
        .f1>.left>img {
            width: 318px;
            height: 319px;
            position: absolute;
            top: 35px;
            left: 265px;
        }
        /*给图片设置过渡时间为2s,注意不要加到:hover里!*/
        .scale {
            transition: 2s;
        }
        /*悬停时让图片放大至原来的1.1倍*/
        .scale:hover {
            transform: scale(1.1);
        }
        .f1>.left>.text {
            width: 245px;
            height: 232px;
            /*background-color: pink;*/
            margin-top: 68px;
            margin-left: 36px;
        }
        .f1 .text>.p_title {
            font-size: 32px;
            color: #333;
            font-weight: lighter;
        }
        .f1 .text>.p_intro {
            font-size: 12px;
            color: #666;
            font-weight: lighter;
            margin-top: 12px;
            margin-bottom: 24px;
        }
        .f1 .text>.p_price {
            font-size: 24px;
            color: #0aa1ed;
            font-weight: bold;
            margin-bottom: 12px;
        }
        .f1 .text>a {
            display: block;
            width: 132px;
            height: 40px;
            background-color: #0aa1ed;
            color: #fff;
            text-decoration: none;
            font-size: 20px;
            text-align: center;
            line-height: 40px;
            border-radius: 5px;
        }
        .f1>.right {
            width: 375px;
            height: 376px;
            background-color: #e8e8e8;
            float: left;
            position:relative;
        }
        .f1>.right>img {
            width: 292px;
            height: 232px;
            position:absolute;
            top: 130px;
            left:75px;
        }
        .f1>.right>.text {
            width: 245px;
            height: 232px;
            /*background-color: magenta;*/
            margin-top: 39px;
            margin-left: 25px;
            /*注意:必须先用定位属性,才能调整层级!*/
            position: relative;
            z-index: 10;
        }
        .f2 {
            overflow: hidden;
        }
        .f2>.left {
            width: 366px;
            height: 233px;
            background-color: #e8e8e8;
            float: left;
            margin-right: 20px;
            font-family: "simhei";
        }
        .f2>.left>.tit {/*设置左侧标题*/
            height: 35px;
            background-color: #0aa1ed;
            position: relative;
        }
        .f2>.left>.tit>img {/*设置图片*/
            width: 29px;
            height: 20px;
            position: absolute;
            top: 8px;
            left: 10px;
        }
        .f2>.left>.tit>span {/*标题文字*/
            color: #fff;
            position: absolute;
            left: 49px;
            line-height: 35px;
        }
        .f2>.left>.item_all {/*左侧下方内容*/
            padding-left: 12px;
        }
        .f2>.left>.item_all>.tit_p {/*导航项标题*/
            font-size: 12px;
            color: #62B5EC;
            margin-top: 17px;
            margin-bottom: 9px;
        }
        .f2>.left>.item_all>ul {
            /*去除列表项前的标识符*/
            list-style: none;
            /*防止因所有li浮动后失去高度*/
            overflow: hidden;
        }
        .f2>.left>.item_all>ul>li {
            /*所有列表导航项浮动横置*/
            float: left;
            margin-right: 10px;
        }
        .f2>.left>.item_all>ul>li>a {
            text-decoration: none;
            font-size: 12px;
            /*超链接的文字颜色需要单独设置*/
            color: #0aa1ed;
        }
        .f2>.card {
            width: 198px;
            height: 233px;
            background-color: #e8e8e8;
            float: left;
            margin-right: 8px;
            font-size: 12px;
            text-align: center;
        }
        .f2>.card>.p_intro {
            font-weight: lighter;
        }
        .f2>.card>.p_price {
            color: #0aa1ed;
            font-weight: bold;
            margin: 6px;
        }
        .f2>.card>a {
            display: block;
            width: 100px;
            height: 24px;
            background-color: #0aa1ed;
            color: #fff;
            text-decoration: none;
            text-align: center;
            line-height: 24px;
            margin: 0 auto;
        }
        .f2>.card>img {
            width: 100%;
        }
        .f2>.card3 {
            margin-right: 0;
        }
    </style>
</head>
<body>
    <!-- 设置当前功能块 也就是最外层的背景色 -->
    <div class="main">
        <!-- 版心:固定的宽度且居中 -->
        <div class="center">
            <!-- 一楼 -->
            <div class="f1">
                <!-- 一楼左侧 -->
                <div class="left">
                    <div class="text">
                        <p class="p_title">灵越 燃7000系列</p>
                        <p class="p_intro">
                            酷睿双核i5处理器|256GB SSD| 8GB内存 <br>
                            英特尔HD显卡620含共享显卡内存
                        </p>
                        <p class="p_price">￥4999.00</p>
                        <a href="#">查看详情</a>
                    </div>
                    <img src="img/computer1.png" class="scale">
                </div>
                <!-- 一楼右侧 -->
                <div class="right">
                    <div class="text">
                        <p class="p_title">颜值 框不住</p>
                        <p class="p_intro">
                            酷睿双核i5处理器|256GB SSD| 8GB内存 <br>
                            英特尔HD显卡620含共享显卡内存
                        </p>
                        <p class="p_price">￥6888.00</p>
                        <a href="#">查看详情</a>
                    </div>
                    <img src="img/computer2.png" class="scale">
                </div>
            </div>
            <!-- 二楼 -->
            <div class="f2">
                <!-- 二楼左侧-->
                <div class="left">
                    <div class="tit">
                        <img src="img/icon.png">
                        <span>电脑,办公/1F</span>
                    </div>
                    <div class="item_all">
                        <p class="tit_p">电脑整机</p>
                        <ul><!--ul>li*6>a-->
                            <li><a href="">笔记本</a></li>
                            <li><a href="">游戏机</a></li>
                            <li><a href="">台式机</a></li>
                            <li><a href="">一体机</a></li>
                            <li><a href="">服务器</a></li>
                            <li><a href="">联想</a></li>
                        </ul>
                        <p class="tit_p">电脑配件</p>
                        <ul><!--ul>li*6>a-->
                            <li><a href="">CPU</a></li>
                            <li><a href="">SSD硬盘</a></li>
                            <li><a href="">显示器</a></li>
                            <li><a href="">显卡</a></li>
                            <li><a href="">组装电脑</a></li>
                            <li><a href="">机箱</a></li>
                        </ul>
                        <p class="tit_p">外设/游戏</p>
                        <ul><!--ul>li*6>a-->
                            <li><a href="">键盘</a></li>
                            <li><a href="">鼠标</a></li>
                            <li><a href="">U盘</a></li>
                            <li><a href="">移动硬盘</a></li>
                            <li><a href="">游戏设备</a></li>
                            <li><a href="">智能单车</a></li>
                        </ul>
                    </div>
                </div>
                <!-- 二楼卡片 -->
                <div class="card">
                    <img src="img/computer3.png" alt="" class="scale">
                    <p class="p_intro">
                        戴尔(DELL)XPS13-9360-R1609 13.3英 <br>
                        寸微边框笔记本电脑
                    </p>
                    <p class="p_price">￥4600.00</p>
                    <a href="#">查看详情</a>
                </div>
                <div class="card">
                    <img src="img/computer4.png" alt="" class="scale">
                    <p class="p_intro">
                        14.8mm超轻薄笔记本电脑 航海王版 <br>
                        13.3英寸微边框笔记本电脑
                    </p>
                    <p class="p_price">￥5600.00</p>
                    <a href="#">查看详情</a>
                </div>
                <div class="card card3">
                    <img src="img/computer3.png" alt="" class="scale">
                    <p class="p_intro">
                        联想(Lenovo) YOGA900 多彩版 13.3 <br>
                        英寸微边框笔记本电脑
                    </p>
                    <p class="p_price">￥6600.00</p>
                    <a href="#">查看详情</a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>