HTML和CSS基础知识

Posted on

Web前端技术

  • HTML 结构标准：负责页面内容。
  • CSS 样式标准/表现标准：负责页面美化。
  • js 行为标准：负责网页行为动作、表单验证、数据交互。

html

超文本（带符号的文本）标记语言。

html 发展历史

  • html-1.0 —1993年起草了一个草案，纯文本格式，灵感来源于报纸。
  • html-2.0 — 没有发生太大的改动。
  • html-3.0 — 没有发生太大的改动。
  • html-4.0 — 意识到之前的版本问题：语法松散 Aa(大小写不统一)。
  • 后来就出现了—xhtml-1.0(严格型的 html-相对严格：兼容之前的版本)。
  • html-5.0 — 是由浏览器厂商提出的构想，最终w3c研发。

html 标记语法

  • <标记名字></标记名字> — 双标记
  • <标记名字> — 单标记

默认代码作用

  • html — 作用：表示整个网页文档。
  • head — 网页头部 作用：存放所有需要浏览器渲染的代码、css、js。
  • body — 网页主题 作用：存放所有给用户看的信息。
  • title — 网页标题。
  • < DOCTYPE html>：文档声明，规定文档DTD格式：规定好所有浏览器都取一个html版本解决接下来的所有代码 — 为了解决兼容性。
  • < mate> 标签基本上是给seo：搜索引擎优化用的。

常用的布局标签

html属性：

html属性：键值对规则 k=“v” 一个标签可以写多个键值对，用空格隔开

常用标签：

  • < h1 > 标题
  • < p > 段落
  • < div > 布局常用的标签：划分模块划分区域的地方都是布局 – 都用div标签：里面可以放任何内容任何标

以下标签不自动换行：

  • < span > span不字段换行，放一些小的图标，存放特殊的效果文字
  • < b > 字体加粗
  • < i > 字体倾斜
  • < u > 字体添加下划线
  • < s > 删除线

强调语气的标签 —搜索引擎优先抓取这种带有强调语义标签的内容：

  • < strong > 加粗带有强调语义
  • < em > 倾斜带有强调语义
  • < ins > 下划线带有强调语义
  • < del > 删除线带有强调语义

####图片标签：
< img src=“icon.jpg” alt=“替换文本，图片无法显示的时候显示的文字” title=“提示文本”>

  • src：放在项目中保存图片的路径
  • alt：1、替换文本；2、支持盲人读屏软件
  • title：1、提示信息；2、seo放搜索关键字

超链接标签：

< a href=“在本地项目目录中存储的文件.html” target=”_blank” >跳转到本地文件

  • target=”_blank” 新窗口打开页面
  • href=’#’ 不知道跳转地址，假连接

在html标签中写尺寸不需要加px(像素)：

  • 比如：border = “1”
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
<!-- 标题标签  标记 == 标签  共6级 h1 -- h6 -->
<!-- 经验： 一个网页只能出现一次h1，h1是主标题，这个h1用来放网页的logo -->
    <h1>h1标题</h1>
    <h2>h2标题</h2>
    <h3>h3标题</h3>
    <h4>h4标题</h4>
    <h5>h5</h5>
    <h6>h6</h6>

    <p>段落</p>
 
    <div>布局常用的标签：划分模块划分区域的地方都是布局 -- 都用div标签：里面可以放任何内容任何标</div>

    <!-- span作用：存放特殊效果的文字、小图片  这个标签不自动换行-->
    <span>span</span>
    <span>span</span>
	
    <!-- 这些标签不自动换行 -->
	<b>加粗</b>
    <i>倾斜</i>
    <u>下划线</u>
    <s>删除线</s>
    <!-- 所有标签都自带语义 -->
    <!-- 带有强调语义  搜索引擎优先抓取这种带有强调语义标签的内容 -->
    <strong>加粗带有强调语义</strong>
    <em>倾斜带有强调语义</em>
    <ins>下划线带有强调语义</ins>
    <del>删除线带有强调语义</del>

    <!-- html属性 键值对规则 k="v" 一个标签可以写多个键值对，用空格隔开 -->
	<!-- src：放在项目中保存图片的路径 -->
    <!-- alt：1、替换文本；2、支持盲人读屏软件 -->
    <!-- title：1、提示信息；2、seo放搜索关键字 -->
    <img src="icon.jpg" alt="替换文本，图片无法显示的时候显示的文字" title="提示文本">

	<!-- 超链接标签的作用 -->
	<a href="http://www.baidu.com">百度</a>
    <a href="在本地项目目录中存储的文件.html">跳转到本地文件</a>
    <a href="#">不知道跳转地址 假链接</a>
    <!-- target="_blank" 新窗口打开页面 -->
    <a href="http://www.taobao.com" target="_blank"><img src="1.jpg" alt="图片无法显示的img"></a>

CSS 嵌入式写法

< style >标签的作用：

< style type=“text/css” > 写css样式的标签

  • 格式：纯文本的css
  • type: 属性可有可无
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
    /* 格式：纯文本的css  type属性可有可无 */
    /* logo文字变红色  -- h1的文字颜色是红色  */
    h1{
        /* css键值对 k:v; */
        color:red;
    }
    </style>
</head>
<body>
    <!--  -->
    <h1>fe_cow嵌入式测试</h1>
</body>
</html>

CSS 外链式写法

  • 创建一个.css的文件，将css的样式写入里面，然后在html 通过< link >把.css文件导入到html中。
  • 简单的解释就是html和css分开单独文件存放。
  • < meta >标签大多数都是seo在做搜索引擎需要的多一些
  • < link rel=“stylesheet” href=“mycss.css” > :
    • href 写css文件在本地的地址
    • rel:html和css文件的关系：stylesheet 样式表、样式单
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="mycss.css">
    <!-- href 写css文件在本地的地址 -->
    <!-- rel:html和css文件的关系：stylesheet 样式表、样式单 -->
</head>
<body>
    <!-- html和css分开单独文件存放 -->
    <div>fe_cow外链式测试</div>
</body>
</html>

CSS 行内式写法

  • 将css属性 直接写入< 标签中 style=‘xx:xx’ >这个写法不好，会出现重复代码，而且易读性较差。加载速度慢。
  • css键值对中允许一个k对应多个v，各个值之间用空格隔开。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 标签身上加style=“css键值对” html属性 -->
    <p style="color:blue;">fe_cow行内式</p>
 
    <!-- 嵌入式：提高加载速度 -->
</body>
</html>

常用文字控制属性（写在CSS的式样里面）

  • P{} ：
    • p就是代表标签名，这里指的是p标签
    • {} 里面写css的代码
  • 字号大小：
    • font-size: 30px;
    • px是像素 css尺寸必须带单位
  • 字体类型（中文得加””双引号）：font-family: “宋体”
  • 字体是否加粗：font-weight: bold;
  • 取消字体的加粗状态：font-weight: normal;
  • 字体是否倾斜：font-style: italic;
  • 取消字体的倾斜状态：font-style: normal;
  • 文字修饰线：text-decoration: underline;
  • 行间距、行高：line-height: 100px;
  • 首行缩进：text-indent: 2em;
  • 取消超链接字体下面的_横线：text-decoration: none;
  • 给超文本字体加删除线：text-decoration: line-through
  • 给一个标签框描边：
    • border: red 1px solid
    • border: 颜色 粗细 线段种类（值不分顺序）
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    p{
        color: blue;
        /* px是像素 css尺寸必须带单位 */
        /* 字号大小 */
        font-size: 30px;
        /* 字体类型（中文得加""双引号） */
        font-family: "宋体";
        /* 字体是否加粗 */
        font-weight: bold;
        /* 字体是否倾斜 */
        font-style: italic;
        /* 文字修饰线 */
        text-decoration: underline;
        /* 行间距  行高 */
        line-height: 100px;
        /* em 一个字的大小 */
        /* 首行缩进 */
        text-indent: 2em;
    }
    b{
        /* 取消字体的加粗状态 */
        font-weight: normal;
    }
    i{
        /* 取消字体的倾斜状态 */
        font-style: normal;
    }
    a{
        /* 取消超链接字体下面的_横线 */
        text-decoration: none;
        /* 给超文本字体加删除线 */
        /* text-decoration: line-through; */
        /* 给超文本字体上面添加横线 一般用不到 */
        /* text-decoration: overline; */
    }
    </style>
</head>
<body>
    <p>fe_cow 希望大家多多关注我哦，我会每天都更新的。热爱技术，学无止境！</p>
    <b>加粗</b>
    <i>倾斜</i>
    <a href="#">超链接</a>
</body>
</html>

基础布局属性

  • 设置宽度：width: 300px;
  • 设置高度：height: 200px;
  • 设置背景颜色：background: green;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        width: 300px;
        height: 200px;
        background: green;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

类选择器

以点开头，后面紧跟类选择器的名字,名字自定义，满足规则：不要用特殊符号，不能数字开头，然后跟大括号写键值对。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    /* 类选择器：定义  使用 */
    /* 定义：以点开头，后面紧跟类选择器的名字,名字自定义，满足规则：不要用特殊符号，不能数字开头，然后跟大括号写键值对 */
    /* 使用：在标签身上添加html属性  class=“类选择器的名字” */
    .app{
        color: red;
    }
    </style>
</head>
<body>
        <div>Au_cow</div>
        <div class="app">Ag_cow</div>
        <div>Cu_cow</div>
        <div class="app">Fe_cow</div>
        <div>Al_cow</div>
    </body>
</html>

id选择器

  • 定义id ：要求#开头，后面紧跟名字
  • id要求：一个页面同一个id名只能使用一次：前端不用id选择器写css，用id选择器做数据交互。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    /* div{} */
    /* 定义id ：要求#开头，后面紧跟名字 */
    /* id要求：一个页面同一个id名只能使用一次：前端不用id选择器写css，用id选择器做数据交互 */
    #red{
        color: red;
    }
    </style>
</head>
<body>
        <div>au_cow</div>
        <div id="red">ag_cow</div>
        <div id="red">fe_cow</div>
    </body>
</html>

层级选择器

  • 重点：父子{} – 有空格的就是层级选择器
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    /* li{
        color: red;
    } */
    /* 重点*** ： 父  子{} -- 有空格的就是层级选择器 */
    /* ul li{
        color: red
    } */
    .box .aa{
        color: green;
    }
    div .bb{
        color: blue;
    }
    </style>
</head>
<body>
    <ul class="box">
        <li class="aa">ul li</li>
    </ul>
    <ol>
        <li>ol li</li>
    </ol>
</body>
</html>

组选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    /* body{} */
    /* *{} */
    /* *** 组选择器符号 逗号 */
    div,h1,span,p{
        color: red;
    }
    </style>
</head>
<body>
    <div>div</div>
    <h1>h1</h1>
    <span>span</span>
    <p>ppppp</p>
</body>
</html>

伪类选择器

  • 伪类表示的是状态，所有伪类选择器都是冒号开头 后面紧跟一个w3c定义好的表示状态的单词。
  • 伪类一共有4个：
    • a代表的是< a >标签
    • 点击前的颜色：a:link{color: red;}
    • 点击后的颜色：a:visited{color: green;}
    • 鼠标滑过的颜色：a:hover{color: blue;}
    • 鼠标点住不放的颜色：a:active{color: yellow;}
  • 以上4种都不是很常见，常见的如下栗子：
    • 点击前默认的颜色：a{color:red;}
    • 鼠标滑过的颜色：a:hover{color: blue;}
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    /* a的伪类一共有4个 */
    /* a:link{
        color: red;
    }
    a:visited{
        color: green;
    }
    a:hover{
        color: blue;
    }
    a:active{
        color: yellow;
    } */
    a{ color:red;}
    a:hover{
        color: blue;
    }
    </style>
</head>
<body>
    <!-- 伪类表示的是状态，所有伪类选择器都是冒号开头 后面紧跟一个w3c定义好的表示状态的单词 -->
    <a href="#">于键</a>
</body>
</html>

选择器权重

  • 标签选择器 < 类选择器 < id选择器
  • 外链式和嵌入式谁在下谁生效<行内式
  • 想让一个css样式权重最大的话，就在css样式里面，加!important 提权功能，提高权重到最高

列表

  • 无序列表、有序列表、自定义列表
  • 去掉ul(无序列表)标签中每个li前面的点:list-style: none;
  • 去掉ol(有序列表)标签中每个li前面的序号：list-style: none;
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    ul{
        /* 去掉每个li前面的点 */
        list-style: none;
    }
    ol{
        /* 去掉每个li前面的序号 */
        list-style:none;
    }
    </style>
</head>
<body>
    <!-- **** 无序列表 结构：ul嵌套（包含）li，ul表示无序列表整体，li是列表的某一项 -->
    <ul>
        <li>fe_cow_01</li>
        <li>fe_cow_02</li>
        <li>fe_cow_03</li>
    </ul>
    <!-- **** 有序列表 结构：ol嵌套（包含）li，ul表示无序列表整体，li是列表的某一项 -->
    <ol>
        <li>fe_cow_01</li>
        <li>fe_cow_02</li>
        <li>fe_cow_03</li>
    </ol>
 
    <!-- 项目列表/自定义列表：dl嵌套dt和dd，dl是自定义列表整体，dt是列表的标题，dd是列表的描述  -->
    <dl>
        <dt>列表标题</dt>
        <dd>描述文字................</dd>
    </dl>
</body>
</html>

表格

  • 国内2005年互联网网站大量改变从表格(浏览器加载完所有表格才显示页面效果)，布局改成div+css浏览器读取一行代码显示一行代码的效果。
  • < table >标签：table嵌套tr，tr嵌套td，table是整个表格，tr是行，td是单元格
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    table{
        /* font-size: 30px;  k:v;
        width: 500px; */
        /* css键值对中允许一个k对应多个v，各个值之间用空格隔开 */
        /* border:颜色  粗细  线段种类;  -- 值不分顺序 */
        border: red 1px solid;
        /* 合并边框线 -- 单线表格 */
        /* border-collapse: collapse; */
    }
    td{
        border: 1px red solid;
    }
    </style>
</head>
<body>
    <!-- ******* 结构：table嵌套tr，tr嵌套td，table是整个表格，tr是行，td是单元格 -->
    <!-- th  表头 -->
    <!-- html写尺寸不加单位  border="1" -->
    <!-- cellpadding：来开内容和td边缘的距离  cellspacing：拉开td之间的距离 -->
    <table cellpadding="30" cellspacing="50">
        <tr>
            <!-- colspan 横向和格子 -->
            <th colspan="2">1</th>
            <!-- <td>2</td> -->
            <th>3</th>
        </tr>
        <tr>
            <td>1</td>
            <!-- rowspan 竖向和格子 -->
            <td rowspan="2">2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <!-- <td>2</td> -->
            <td>3</td>
        </tr>
    </table>
</body>
</html>

表单

  • 应用场景：注册、登入、搜索
  • form表单标签：收集数据（写发送地址: 表单域）：< form action=“提交地址” method=“post”>
  • 文本框：
    • < input type=“text” value=“请输入用户名” placeholder=‘’ >
    • placeholder html5.0新增
  • 密码框：< input type=“password” >
  • 单选框：< input type=“radio” name=“sex” id=“nan”>< label for=“nan”>男 < input type=“radio” name=“sex” id=“nv” checked> < label for=“nv”>女
    • 实现单选功能：添加name=“”，且取值相同
    • 扩大触发区域：文字添加< label >标签，保证label标签的for属性和input标签的id属性取值完全相同
    • 默认选中： checked=”checked”
    • html5.0，如果k和v的值相等，可以省略只保留一个单词
  • 复选框/多选：< input type=“checkbox”>读书 < input type=“checkbox”>旅游 < input type=“checkbox” checked>lol
  • 上传文件：< input type=“file” >
  • 下拉菜单：
    < select>
    < option>中国台湾
< option selected=“selected”>中国香港
< option value="">中国澳门
    < /select>
    • 默认选中：selected=”selected”
  • 文本域：
    • < textarea >< /textarea>
    • css样式：
      • 禁止任意拖拽：resize: none;
      • 去掉焦点框：outline: none;
  • 提交按钮：< input type=“submit” value=“注册” >
  • 普通按钮：< input type=“button” value=“普通按钮” >
  • 重置按钮：< input type=“reset” >
  • 按钮：< button >普通按钮
  • 换行标签：< br >
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    textarea{
        /* 禁止任意拖拽 */
        resize: none;
        width: 500px;
        height: 300px;
        /* 去掉焦点框 */
        outline: none;
    }
    </style>
</head>
<body>
    <!-- form表单标签：收集数据写发送地址: 表单域 -->
    <!-- 支持用户输入的都得继续写功能性的标签：表单控件 -->
    <form action="提交地址" method="post">
        <!-- placeholder html5.0新增 -->
        文本框：<input type="text" value="请输入用户名">
        <br><br>
        密码框：<input type="password">
        <br><br>
        单选框：<input type="radio" name="sex" id="nan"><label for="nan">男</label>  <input type="radio" name="sex" id="nv" checked> <label for="nan">女</label>
        <!-- 
            1、实现单选功能：添加name=“”，且取值相同
            2、扩大触发区域：文字添加label标签，保证label标签的for属性和input标签的id属性取值完全相同
            3、默认选中： checked="checked"；
                html5.0，如果k和v的值相等，可以省略只保留一个单词
         -->
         <br><br>
         复选框/多选: <input type="checkbox">读书  <input type="checkbox">旅游 <input type="checkbox" checked>lol
         <br><br>
         上传文件：<input type="file">
         <br><br>
         下拉菜单：
         <select>
             <option>中国台湾</option>
             <option selected="selected">中国香港</option>
             <option value="">中国澳门</option>
         </select>
         <br><br>
         文本域: <textarea></textarea><br><br>
         <!-- submit 研发的时候就已经封装了提交功能 -->
         <input type="submit" value="注册">
         <input type="button" value="普通按钮">
         <input type="reset">
         <button>普通按钮</button>
    </form>
     
</body>
</html>

盒子模型

  • 背景颜色：
    • background: #ccc;
    • #… 十六进制颜色色值 从ps软件里面查看
  • 描边：
    • border: 1px solid black;
  • 内边距:拉开内容和盒子边缘之间的距离：
    • padding:20px;
    • 盒子实际尺寸公式：width/height值 + padding + border */
  • 启动盒子的内减模式 css3.0新增
    • box-sizing: border-box;
  • 外边距：拉开盒子之间的距离
    • margin: 50px;
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 200px;
            /* #.... 十六进制颜色色值 从ps软件里面查看 */
            background: #ccc;
            border: 1px solid black;
            /* 内边距:拉开内容和盒子边缘之间的距离 */
            /* 盒子实际尺寸公式：width/height值 + padding + border */
            padding:20px;
            /* css2.0   和  css3.0 */
            /* 启动盒子的内减模式  css3.0新增 */
            box-sizing: border-box;
            /* 外边距：拉开盒子之间的距离 */
            margin: 50px;
        }
    </style>
</head>
<body>
    <!-- ***** 盒子模型：布局  -- 比喻手法  标签比喻盒子 -->
    <div>女装</div>
</body>
</html>

文字水平垂直居中

  • 水平居中：text-align: left center right;
    • 文字在左：left
    • 文字居中: center
    • 文字在右：right
  • 垂直居中：line-height: 200px; 设置行高属性的值等于自身高度属性的值（跟height高度相等）
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        width: 300px;
        height: 200px;
        background: #ccc;
        /* text-align: left center right; */
        text-align: center;
        /* 经验：设置行高属性的值等于自身高度属性的值 */
        line-height: 200px;
    }
    p{
        line-height: 100px;
    }
    </style>
</head>
<body>
    <div>内容</div>
 
    <p>内容内容内容内容内容</p>
</body>
</html>

border属性的详解

  • left right top bottom 代表的左右上下：border-left(right、top、bottom)
  • 实线 solid：border-top: 1px solid red;
  • 虚线 dashed：border-bottom: 10px dashed green;
  • 点线 dotted：border-right: 5px blue dotted;
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        width: 200px;
        height: 200px;
        background: #ccc;
    }
    .box1{
        /* left   right  top  bottom */
        border-top: 1px solid red;
        /* dashed 虚线 */
        border-bottom: 10px dashed green;
        /* dotted 点线 */
        border-right: 5px blue dotted;
    }
    /* margin和padding的设置方法和含义完全相同 */
    </style>
</head>
<body>
    <div class="box1">box</div>
</body>
</html>

padding属性详解

  • padding 一个k连接多个v ：语法v之间用空格隔开
  • 一个k连接多个v：
    • 四值（上 右 下 左 从上顺时针一圈）：padding: 10px 20px 40px 80px;
    • 三值（上 左右 下）：padding: 10px 40px 80px;
    • 两值（上下 左右）：padding: 10px 80px;
  • margin和padding的设置方法和含义完全相同
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        width: 200px;
        height: 200px;
        background: #ccc;
    }
    .box2{
        padding-top: 10px;
        padding-right: 20px;
        padding-bottom: 40px;
        padding-left: 80px;
    }
    /* padding 一个k连接多个v ：语法v之间用空格隔开 */
    .box3{
        /* 一个k连接多个v */
        /* 四值：上  右  下  左  从上顺时针一圈 */
        /* padding: 10px 20px 40px 80px; */
        /* 三值：上  左右  下 */
        /* padding: 10px 40px 80px; */
        /* 两值：上下  左右 */
        padding: 10px 80px;
    }
    /* margin和padding的设置方法和含义完全相同 */
    </style>
</head>
<body>
    <br><br>
    <div class="box2">box</div>
    <br><br>
    <div class="box3">box</div>
 
</body>
</html>

版心居中

  • 版心：网页有限内容的标签，其实div比较普遍一些
  • margin:0 auto;
    +auto 根据不同的浏览器，或者分配率来说，自动的设置左右的宽度。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        width: 1000px;
        height: 200px;
        background: #ccc;
        /* margin: 上下无所谓 左右一样重点; */
        margin:0 auto;
    }
    </style>
</head>
<body>
    <!-- 版心：网页有效内容的标签 -- div -->
    <div></div>
</body>
</html>

控制标签的显示和隐藏

  • 隐藏 不占位：display:none
  • 取消隐藏：display: block
  • 隐藏 占位：visibility: hidden
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        width: 300px;
        height: 300px;
        background: green;
        /* ******* display:none 隐藏:不占位 */
        /* display: block; */
        /* display: none; */
        /* 占位 */
        /* visibility: hidden; */
    }
    </style>
</head>
<body>
    <div></div>
    <p>fe_cow</p>
</body>
</html>

溢出overflow

  • overflow：解决内容超出父级如何显示的问题
  • 溢出默认值：overflow: visible
  • 超出隐藏：overflow: hidden
  • auto（自动、超出加滚动条）：overflow: auto;
  • scroll（滚动，不管内容是否超出都有滚动条的位置）：overflow: scroll
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        width: 300px;
        height: 300px;
        background: #ccc;
        /* overflow:解决内容超出父级如何显示的问题 */
        /* overflow:visible; 默认值 */
        /* ***** overflow: hidden; 超出隐藏 */
        /*  ***** auto：自动：超出加滚动条 */
        overflow: auto;
        /* scroll：滚动，不管内容是否超出都有滚动条的位置 */
        /* overflow: scroll; */
    }
    </style>
</head>
<body>
    <div>fe_cow_fe_cow_fe_cow_fe_cow_fe_cow</div>
</body>
</html>

标准流

  • 浮动跟定位都是脱离标准流
  • 浮动
    • 浮动作用：让换行的标签在一行显示
    • 让哪些标签一行显示，那么所有标签都要加float属性; 只要浮动标签都顶对齐
    • 取消浮动：float: none
    • 浮动左对齐：float: left
    • 浮动右对齐：float: right
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .box1{
        width: 100px;
        height: 100px;
        background: red;
        float: right;
    }    
    .box2{
        width: 200px;
        height: 200px;
        background: green;
        float: right;
    }
    .box3{
        width: 300px;
        height: 300px;
        background: blue;
        float: right;
    }
    </style>
</head>
<body>
    <!-- 浮动作用：让换行的标签在一行显示 -->
    <!-- float:none  left:所有标签左对齐  right：所有标签右对齐   -->
    <!-- 使用浮动的注意点：让哪些标签一行显示，那么所有标签都要加float属性; 只要浮动标签都顶对齐 -->
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

定位

  • 定位作用：让标签叠加显示
  • 相对定位：position: relative;
    • 特点：
      • 不改变换行标签的特点：宽度和父级一样大
      • 改变位置的参照物是自己
      • 占位脱离标准流
    • 所有定位形式想要改变位置，都需要配合偏移量属性k:v;
    • 方向英文单词：left top right bottom
    • 下面需要给偏移量属性
      • left:200px;
      • top: 300px;
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        /*所有默认换行的标签，不加width属性，宽度和父级宽度一样大  */
        border: 1px solid #000;
        position: relative;
        /* 所有定位形式想要改变位置，都需要配合偏移量属性k:v;：方向英文单词：left  top right bottom */
        left:200px;
        top: 300px;
    }
    /* ******* 特点：
        1、不改变换行标签的特点：宽度和父级一样大
        2、改变位置的参照物是自己
        3、占位脱离标准流
    */
    </style>
</head>
<body>
        <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
        <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
        <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
        <div><img src="icon3.jpg" alt=""></div>
        <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
        <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
        <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
        <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
        
        
    </body>
</html>
  • 绝对定位：position: absolute;
    • 特点：
      • 不具备换行标签的特点：宽度和父级宽度一样大
      • 不占位脱离标准流 – 完全脱离标准流
      • 参照物：如果满足条件：有最近的已经定位的父级，就以这个父级为参照物；否则，就以浏览器为参照物
      • 加left: 0; 和 top: 100px; 以浏览器左上角为原点
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        /*所有默认换行的标签，不加width属性，宽度和父级宽度一样大  */
        border: 1px solid #000;
        position: absolute;
        left: 0;
        top: 100px;
    }
    /* 
       ******  特点：
        1、不具备换行标签的特点：宽度和父级宽度一样大
        2、不占位脱离标准流 -- 完全脱离标准流
        3、参照物：如果满足条件：有最近的已经定位的父级，就以这个父级为参照物；否则，就以浏览器为参照物
    */
    </style>
</head>
<body>
        <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
        <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
        <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
        <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
        <div><img src="icon3.jpg" alt=""></div>
        <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
        <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
        <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
    </body>
</html>

  • 固定定位: position: fixed

    • 固定定位：标签叠加显示；固定这个标签到浏览器的某个位置，不随滚动条滚动而变化位置

    • 特点：

      • 不具备换行标签特点
      • 完全脱离标准流
      • 参照物：浏览器
      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
          <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>Document</title>
          <style>
          div{
              /*所有默认换行的标签，不加width属性，宽度和父级宽度一样大  */
              border: 1px solid #000;
              /* 固定定位：标签叠加显示；固定这个标签到浏览器的某个位置，不随滚动条滚动而变化位置 */
              position: fixed;
              left: 0;
              top: 0;
          }
          /* 
          特点：
              1、不具备换行标签特点
              2、完全脱离标准流
              3、参照物：浏览器
          */
          /* position:static  -- 静态定位，不定位  默认值 */
          </style>
       
      </head>
      <body>
              <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
              <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
              <div><img src="icon3.jpg" alt=""></div>
              <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
              <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
              <p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
       
      </html>
  • 静态定位：position:static , 不定位，默认值

水平垂直都居中的标签

  • 版心居中？版心 ：换行标签，absolute绝对定位把标签不具备换行标签特点了所有auto居中不生效了
  • 首先使用：position: absolute; 绝对定位
  • left: 50%; margin-left: -250px; top: 50%; margin-top: -150px; 这样就实现了水平和垂直都居中
  • 如果有2个块级重叠，谁在上面通过：
    • z-index: 10;
    • 改变定位标签的显示顺序：z-index属性，取值整数，取值越大显示级别越靠上
  • 背景和内容一起透明：opacity: 0.5;
  • r red g green b blue a alpha 只透明背景：background: rgba(0,0,0, 0.5); 后面的a只代表背景透明
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        width: 500px;
        height: 300px;
        background: #ccc;
        /* 版心居中？版心 ：换行标签，absolute绝对定位把标签不具备换行标签特点了所有auto居中不生效了 */
        /* margin: 0 auto; */
        position: absolute;
        left: 50%;
        margin-left: -250px;
        top: 50%;
        margin-top: -150px;
        z-index: 10;
        /* 背景和内容一起透明 */
        /* opacity: 0.5; */
        /* r  red  g  green  b blue   a alpha  只透明背景 */
        background: rgba(0,0,0, 0.5);
    }
    /* 默认定位显示标签顺序：后来者居上 */
    /* 改变定位标签的显示顺序：z-index属性，取值整数，取值越大显示级别越靠上 */
    p{
        width: 300px;
        height: 200px;
        background: #000;
        position: absolute;
        left: 500px;
        top: 400px;
    }
    </style>
</head>
<body>
    <div>文字文字阿斯兰的激发了</div>
    <p></p>
</body>
</html>