刘流的博客

CSS3基础(第二周内容)

CSS
Word count: 3.2kReading time: 13 min
2020/12/11 Share

这是学习 CSS3 第二周内容的笔记。内容有：

  1. 浮动的基本概念

  2. 使用浮动实现网页布局

  3. BFC规范和浏览器差异

  4. 清除浮动

  5. 相对定位

  6. 绝对定位

  7. 固定定位

一. 浮动与定位

1. 浮动的基本概念和使用

  1. 浮动用来实现并排。
  2. 浮动使用要点：要浮动，并排的盒子都要设置浮动。
  3. 父盒子要有足够的宽度，否则子盒子会掉下去。
  4. 浮动的顺序贴靠特性：子盒子会按照顺序进行贴靠，如果没有足够空间，则会寻找在前一个兄弟元素。
  5. 浮动的元素一定能设置宽高：浮动的元素不再区分块级元素，行内元素，已经脱离了标准文档流，一律能够设置宽高，即使它是span或者a标签。

2.使用浮动实现网页布局

注意事项：

  1. 垂直显示的盒子，不要设置浮动，只有并排显示的盒子才要设置浮动！
  2. “大盒子带着小盒子跑”，一个大盒子中，又是一个小天地，内部可以继续使用浮动。
  3. 不要节约盒子（div）的使用。

3.BFC规范和浏览器差异

BFC（Box Formatting Context，块级格式化上下文）是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。

3.1 从一个现象说起

  1. 一个盒子不设置 height,当内容子元素都浮动时，无法撑起自身。
  2. 这个盒子没有形成 BFC

3.2 如何创建 BFC

  1. float 的值不是 none
  2. position 的值不是 static 或者 relative
  3. display 的值是 inline-block，flex或者inline-flex
  4. overflow: hidden

3.3 什么是 overflow: hidden

  1. overflow: hidden; 表示溢出隐藏，溢出盒子边框的内容会将被隐藏。
  2. overflow: hidden; 是非常好用的让盒子形成 BFC 的方法。
  3. 溢出盒子边框的内容将会被隐藏，但是盒子的 padding 部分的溢出还在。

3.4 BFC 的其他作用

  1. BFC 可以取消盒子 margin 塌陷
  2. BFC 可以阻止元素被浮动元素覆盖

3.5 浏览器差异

  1. IE6，7浏览器使用 haslayout 机制，让 BFC 规范略有差异，比如 IE浏览器可以使用 zoom: 1 属性,” 让盒子拥有 layout“
  2. 如果要制作兼容到 IE6，7 的网页时，尽量让网页布局变得简单，内部有浮动的盒子要设置height属性，规范编程。

4. 清除浮动

清除浮动，浮动一定要封闭到一个盒子里面，否则就会对页面后续元素产生影响。

4.1 清除浮动的方法

  1. 让内部有浮动的父盒子形成 BFC，它就能关闭住内部的浮动。此时最好的方法就是 overflow: hidden 属性。

  2. 给后面的父盒子设置 clear: both; 属性 。clear 表示清除浮动对自身的影响， both 表示左右浮动都清除。

  3. 使用 ::after伪元素 给盒子添加最后一个子元素，并且给::after设置clear:both

  4. 在两个父盒子之间“隔墙”,隔一个携带 clear:both; 的盒子。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        * {
          margin: 0;
          padding: 0;
        }
        p {
          float: left;
          height: 100px;
          width: 100px;
          background-color: darkseagreen;
          margin-left: 10px;
        }
        /* 1. 给元素设置 BFC */
        /* div {
          overflow: hidden;
          margin-bottom: 10px;
        }
         */

         /* 2.给下一个 div 设置 clear: both这个方式不是很好，因为 div 的高度仍然是 0，此时margin-bottom: 10px;该样式不生效 */ 
        /* .div2 {
          clear: both;
          margin-bottom: 10px;
        }  */

        /* 3.利用伪元素。 */
        /* .clearfix::after {
          content: '';
          clear: both;
          display: block;
        }
        div {
          margin-bottom: 10px;
        } */

        /* 4.在两个 div 之间增加一个 div */
        .temp {
          clear: both;
        }

        div {
          margin-bottom: 10px;
        }

      </style>
    </head>
    <body>
      <div class="clearfix">
        <p></p>
        <p></p>
      </div>
      <div class="temp"></div>
      <div class="div2 class="clearfix"">
        <p></p>
        <p></p>
      </div>
    </body>
    </html>

5.相对定位

盒子可以相对自己原来的位置进行位置调整，称为相对定位。

1
2
3
4
5
height: 100px;
width: 100px;
/* 给元素设置 position: relative; 的时候，该元素不会脱离文档流，仍会保留其的初始位置 */
position: relative;
left: 500px;

5.1位置描述词

属性值 意义
left 向右移动
right 向左移动
top 向下移动
bottom 向上移动

值可以为负数，即往规定方向的相反移动。

5.2 相对定位的性质

相对定位的元素，会在“老家留坑”,本质上仍然是在原来的位置，只不过渲染在新的地方而已，渲染的图形可以比喻成影子,不会对页面其他元素产生任何影响。

5.3 相对定位的用途

  1. 相对定位用来微调元素位置。
  2. 相对定位的元素，可以当作绝对定位的参考盒子。

6.绝对定位

盒子可以在浏览器中以坐标进行位置精准描述，拥有自己的位置。

1
2
3
position: absolute;
left: 100px;
top: 200px;

6.1位置描述词

属性值 意义
left 到左边的距离
right 到右边的距离
top 到上边的距离
bottom 到下边的距离

6.2 绝对定位脱离标准文档流

  1. 绝对定位的元素脱离标准文档流，将释放自己的位置，对其他元素不会产生任何干扰，而是对他们进行压盖。
  2. 脱离标准文档流的方法：浮动，绝对定位，固定定位。

6.3 绝对定位的参考盒子

  1. 绝对定位的盒子并不是永远以浏览器作为基准点。
  2. 绝对定位的盒子会以自己祖先元素中，离自己最近的拥有定位属性的盒子，当作基准点。这个盒子通常是相对定位的，所以这个性质也叫做“子绝父相”。

6.4 绝对定位的盒子垂直居中

绝对定位的盒子垂直居中是一个非常实用的技术。

1
2
3
position: absolute;
top: 50%;
margin-top: -自己高度的一半

6.5 堆叠顺序 z-index 属性

z-index 属性是一个没有单位的正整数，数值大的能够压住数值小的。

6.6 绝对定位的用途

  1. 绝对定位用来制作“压盖”，“遮罩” 效果。
  2. 绝对定位用来结合 CSS 精灵使用。
  3. 绝对定位可以结合 JS 实现动画。

7. 固定定位

固定定位：不管页面如何转动，它永远固定在那里。

1
2
3
position: fixed;
top: 100px;
left: 100px;

7.1 固定定位注意事项

  1. 固定定位只能以页面为参考点，没有子固父这个性质。
  2. 固定定位脱离标准文档流。

7.1 固定定位的用途

固定定位的用途：“返回顶部”，“楼层导航”。

二. 边框与圆角

1.border 属性

1. border 属性需要三个要素

1
2
border: 1px solid red;
1px 线宽度，solid线性，red线颜色

1.2 线型

线型值 意义
solid 实线
dashed 虚线
dotted 点状线

1.3 边框的三要素小属性

边框三要素可以拆分为小属性

小属性 意义
border-width 线宽
border-style 线型
border-color 线颜色

1.4 四个方向的边框

属性 意义
border-top 上边框
border-right 右边框
border-bottom 下边框
border-left 左边框

1.5 四个方向边框的三要素小属性

属性 意义 属性 意义
border-top-width 上边框宽度 border-bottom-width 下边框宽度
border-top-style 上边框线型 border-bottom-style 下边框线型
border-top-color 上边框颜色 border-bottom-color 下边框颜色
border-right-width 右边框宽度 border-left-width 左边框宽度
border-right-style 右边框线型 border-left-style 左边框线型
border-right-color 右边框颜色 border-left-color 左边框颜色

1.6去掉边框

border: none; 属性即可去掉左边框，以此类推。

1.7 利用边框制作三角形

1
2
3
4
5
6
7
8
9
10
11
12
13
 <style>
    .area {
      box-sizing: border-box;
      height: 0px;
      width: 0px;
      border: 200px solid transparent;
      border-top-color:  darkblue;
      border-left-color:  darkblue;
    }
  </style>
</head>
<body>
  <div class="area"></div>

2.圆角

2.1 border-radius 属性

border-radius 属性的值通常为 px 单位，表示圆角的半径

1
border-radius: 10px;

2.2 单独设置四个圆角

border-radius 属性可以单独设置四个圆角

1
2
border-radius: 10px 20px 30px 40px;
				左上 右上  右下  左下

2.3 也可以使用小属性

属性 意义
border-top-left-radius 左上角
border-top-right-radius 右上角
border-bottom-left-radius 左下角
border-bottom-right-radius 右下角

2.4 正圆形和椭圆

  1. 正方形盒子如果设置的 border-radius 属性为 50%, 就是正圆形

    1
    border-radius: 50%;

  2. 长方形盒子如果设置的 border-radius 属性为 50% ，就是椭圆形。

    1
    2
    3
    4
    height: 300px;
    width: 500px;
    /* 设置椭圆 */
    border-radius: 50%;

3.阴影（box-shadow）

3.1 box-shadow 的使用

1
2
box-shadow: 10px 20px 30px rgba(0,0,0,.4);
		/*	x偏移 y偏移 模糊量 颜色 */

3.2 阴影延展

1
2
box-shadow: 10px 20px 30px 40px rgba(0,0,0,.4);
		/*	x偏移 y偏移 模糊量 阴影延展 颜色 */

3.3 内阴影

box-shadow 属性值前加 inset 单词，表示内阴影。

1
2
box-shadow: inset 10px 20px 30px rgba(0,0,0,.4);
			内阴影

3.4 多阴影

box-shadow 属性值可以用逗号隔开多个，表示携带多个阴影。

1
box-shadow: 20px 20px 10px darkcyan, 10px 10px 10px darkblue,20px 20px 10px darkgoldenrod;

三. 背景与渐变

背景

background-color 属性：

  1. background-color 属性表示背景颜色
  2. 背景颜色可以用十六进制，rgb(), rgba() 表示法表示
  3. padding 区域是有背景颜色的。

background-image 属性

background-image 属性是用来设置背景图片，图片路径要写到 url() 里去，可以是相对路径也可以是绝对路径。

1
background-image: url(images/01.jpg);

background-repeat 属性

background-repeat 属性用来设置背景的重复模式

值 意义
repeat; x,y 均平埔（默认）
repeat-x; x平埔
repeat-y; y平埔
no-repeat; 不平铺

background-size 属性

background-size 属性用来设置背景图片的尺寸， 兼容到IE9。该属性值可以用百分数来设置，表示为盒子宽，高的百分比之多少。需要等比例设置的值，写 auto。

1
background-size:100px 200px;/*100px 表示宽度，200px表示高度*/

contain 和 cover

  1. contain 和 cover 是两个特殊的background-size的值
  2. contain表示将背景图片智能改变尺寸以容纳到盒子里
  3. cover 表示将背景图片智能改变尺寸以撑满盒子

background-clip 属性

background-clip 属性用来设置元素的背景裁切到哪个盒子，兼容到 IE9.

值 意义
border-box 背景延伸到边框（默认值）
padding-box 背景延申至内边（padding），不会绘制到边框处，（仅在 dotted，dashed边框可察觉）
content-box 背景被裁剪到内容区

背景固定 background-attachment 属性

background-attachment 属性决定背景图像的位置在视口内固定，或者随着包含他的区块滚动。

值 意义
fixed 自己滚动条不动，外部滚动条不动。
local 自己滚动条动，外部滚动条动。
scroll 自己滚动条不动，外部滚动条动。（默认值）

背景图片位置 background-position 属性

background-position 属性可以设置背景图片出现在盒子的什么位置，可以用top, bottom,center ,left right 描述图片出现的位置

1
background-position:100px 200px

CSS 精灵

CSS 精灵：将多个小图标合并制作到一个图片上，使用background-position属性单独显示其中一个，这样的技术叫做CSS 精灵技术，也叫做CSS雪碧图。CSS 精灵可以减少 HTTP 请求数，加快网页显示速度。缺点也很明显：不方便测量，后期改动麻烦。

background 综合属性

一些常用的背景相关小属性，可以合写到一条background属性上面：

1
2
3
4
5
6
7
background: white url(images/01.jpg) no-repeat center center;
/*
	white 背景颜色
	url(images/01.jpg) 背景图片
	no-repeat 背景重复
	center center 背景位置
*/

渐变

线性渐变

盒子的 background-image 属性可以用 linear-gradient() 形式创建线性渐变背景。

1
2
3
4
5
6
background-image: lineaer-gradient(to right, blue, red);
/*
	to right 渐变方向（向右）
	blue 开始颜色
	red 结束颜色
*/

渐变方向也可以写成度数:

1
background-image: lineaer-gradient(45deg, blue, red);

可以有多个颜色值，并且可以用百分数定义他们出现的位置：

1
2
3
4
background-image: lineaer-gradient(to right, blue, yellow 20%, red);
/*
yellow 20% 中间色
*/

浏览器私有前缀

不同浏览器有不同的私有前缀，用来对实验性质的CSS属性加以标识。

品牌 前缀
Chrome -webkit-
Firefox -moz-
IE, Edge -ms-
欧鹏 -o-

径向渐变

盒子的 background-image 属性可以用 radial-gradient() 形式创建径向渐变背景。

1
2
3
4
5
background-image: radial-gradient(50% 50%, red, blue);
/*
	50% 50%
	圆心坐标
*/

Author：John Doe

原文链接：http://example.com/2020/12/11/2020-12-11-CSS3-basic-2/

发表日期：December 11th 2020, 12:00:00 am

更新日期：December 16th 2020, 7:36:31 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. 一. 浮动与定位
    1. 1.1. 1. 浮动的基本概念和使用
    2. 1.2. 2.使用浮动实现网页布局
    3. 1.3. 3.BFC规范和浏览器差异
      1. 1.3.1. 3.1 从一个现象说起
      2. 1.3.2. 3.2 如何创建 BFC
      3. 1.3.3. 3.3 什么是 overflow: hidden
      4. 1.3.4. 3.4 BFC 的其他作用
      5. 1.3.5. 3.5 浏览器差异
    4. 1.4. 4. 清除浮动
      1. 1.4.1. 4.1 清除浮动的方法
    5. 1.5. 5.相对定位
      1. 1.5.1. 5.1位置描述词
      2. 1.5.2. 5.2 相对定位的性质
      3. 1.5.3. 5.3 相对定位的用途
    6. 1.6. 6.绝对定位
      1. 1.6.1. 6.1位置描述词
      2. 1.6.2. 6.2 绝对定位脱离标准文档流
      3. 1.6.3. 6.3 绝对定位的参考盒子
      4. 1.6.4. 6.4 绝对定位的盒子垂直居中
      5. 1.6.5. 6.5 堆叠顺序 z-index 属性
      6. 1.6.6. 6.6 绝对定位的用途
    7. 1.7. 7. 固定定位
      1. 1.7.1. 7.1 固定定位注意事项
      2. 1.7.2. 7.1 固定定位的用途
  2. 2. 二. 边框与圆角
    1. 2.1. 1.border 属性
      1. 2.1.1. 1. border 属性需要三个要素
      2. 2.1.2. 1.2 线型
      3. 2.1.3. 1.3 边框的三要素小属性
      4. 2.1.4. 1.4 四个方向的边框
      5. 2.1.5. 1.5 四个方向边框的三要素小属性
      6. 2.1.6. 1.6去掉边框
      7. 2.1.7. 1.7 利用边框制作三角形
    2. 2.2. 2.圆角
      1. 2.2.1. 2.1 border-radius 属性
      2. 2.2.2. 2.2 单独设置四个圆角
      3. 2.2.3. 2.3 也可以使用小属性
      4. 2.2.4. 2.4 正圆形和椭圆
    3. 2.3. 3.阴影（box-shadow）
      1. 2.3.1. 3.1 box-shadow 的使用
      2. 2.3.2. 3.2 阴影延展
      3. 2.3.3. 3.3 内阴影
      4. 2.3.4. 3.4 多阴影
  3. 3. 三. 背景与渐变
    1. 3.1. 背景
      1. 3.1.1. background-color 属性：
      2. 3.1.2. background-image 属性
      3. 3.1.3. background-repeat 属性
      4. 3.1.4. background-size 属性
      5. 3.1.5. contain 和 cover
      6. 3.1.6. background-clip 属性
      7. 3.1.7. 背景固定 background-attachment 属性
      8. 3.1.8. 背景图片位置 background-position 属性
      9. 3.1.9. CSS 精灵
      10. 3.1.10. background 综合属性
    2. 3.2. 渐变
      1. 3.2.1. 线性渐变
      2. 3.2.2. 浏览器私有前缀
      3. 3.2.3. 径向渐变
Total : 16
2020
小程序 NodeJS ES6 杂记 HTML CSS JavaScript
CSS 小程序 Node JavaScript 杂记 HTML 前端