江小月不上頭

有容乃大，无欲则刚

0%

H5C3基础大全一

发表于 分类于 ，

一、HTML基础

1.1 基础网页结构

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>day01</title>
    </head>
    <body>
        
    </body>
</html>

1.1.1 结构

  • 头部：<header>
  • 主体：<main>
  • 底部：<footer>

1.1.2 内容区

  • 导航：<nav>
  • 侧边栏：<aside>
  • 文章区：<artical>
  • 读取区块：<section>

1.1.3 注意

  • 1.1.1和1.1.2的标签是h5新增的标签，使用的不多，一般使用div和span
  • div没有语义，就用来表示一个区域，目前来讲div还是我们主要的布局元素
  • span是一个行内元素，没有任何的语义，一般用于在网页中选中文字

1.2 实体符号

实体符 含义
\&nbsp 表示空格
\&gt 大于号
&lt 小于号
&copy 版权符号

1.3 块元素与行内元素

1.3.1 块元素（block element）

  • 在页面中独占一行的元素
  • 块元素基本上什么都能放

1.3.2 行内元素（inline element）

  • 在页面中不会独占一行的元素，且该元素的宽高由其内容撑开
  • 行内元素主要用来包裹文字
  • 一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
  • 浏览器对网页进行解析时，会自动对网页中不符合规范的内容进行修正

二、CSS

2.1 网页组成部分

  • 结构（HTML）
  • 表现（CSS）
  • 行为（JS）

2.2 CSS介绍

  • 网页实际上是一个多层的结构，通过CSS可以分别为网页的每一层来设置样式
  • 而最终我们能看到的知识网页的最上边一层
  • 总之一句话，CSS用来设置网页中元素的样式

2.3 使用方式

2.3.1 第一种：内联样式，行内样式

1
2
3
4
5
6
7
<!--在标签内部通过style属性来设置元素的样式
问题：
    1. 使用内联样式，样式只能对一个标签生效
    2. 如果希望影响到多个元素必须在每个元素中都复制一遍
    3. 并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便
注意：开发时绝对不要使用内联样式-->
<p style="color: red;font-size: 20px;">少小离家老大回，乡音无改鬓毛衰</p>

2.3.2 第二种：内部样式表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 
    第二种方式（内部样式表）
        将样式编写到head钟的style标签里
            然后通过CSS的选择器来选中元素并为其设置各种样式
            可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用
        内部样式表更加方便对样式进行复用
        问题：
            我们的内部样式表只能对一个网页起作用
                它里面的样式不能跨页面进行复用
 -->
 <style>
     p{
         color: aqua;
         font-size: 50px;
     }
 </style>

2.3.3 第三种：外部样式表（推荐）

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 
    第三种方式（外部样式表）推荐方式
        可以将CSS样式编写到一个外部的CSS文件中
            然后通过link标签来引入外部的CSS文件
        外部样式表需要通过link标签进行引入
            意味着只要想使用这些样式的网页都可以对其进行引用
            使样式可以在不同页面之间进行复用
        将样式编写到外部的CSS文件中，可以最大限度的使用到浏览器的缓存机制
            从而加快网页的加载速度，提高用户的体验

 -->

 <link rel="stylesheet" href="./style.css">

2.4 基本语法

1
2
3
4
5
选择器{
    样式:样式值;
    样式:样式值;
    ...
}

2.5 样式的继承

2.5.1 概念

  • 样式的继承：我们为一个元素设置的样式同时也会应用到它的后代元素上
  • 继承是发生在祖先和后代之间的

2.5.2 作用

  • 继承的设计是为了方便我们的开发，
  • 利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，
  • 这样只需要设置一次即可让所有的元素都具有该样式

2.5.3 注意

  • 注意：并不是所有的样式都会被继承
  • 比如 背景相关的，布局相关等的这些样式都不会被继承
1
2
3
4
5
6
7
8
9
10
11
12
<style>
/*p元素设置的颜色也会作用到子元素span上*/
p{
    color: red;
}
</style>

<p>
    我是一个p元素
    <span>我是p元素中的span</span>
</p>
<span>我是p元素外的span</span>

三、CSS选择器

3.1 基本选择器

  • 元素选择器：标签名{}
  • id选择器：#id值{}
  • 类选择器：.类名{}
  • 通配选择器：*{}

3.2 复合选择器

3.2.1 交集选择器

  • 作用：选中同时符合多个条件的元素
  • 语法：选择器1 选择器2 … 选择器n{}
  • 注意点：
    • 交集选择器中如果有元素选择器， 必须使用元素选择器开头
1
2
3
4
5
6
7
8
9
10
11
12
<style>
/* 要求带有class为red的div */
div.red{
    color: red;
    font-size: 30px;
}

/* 要求同时具有a b c三个类 */
.a.b.c{
    color: aqua;
}
</style>

3.2.2 并集选择器

  • 作用：同时选择多个选择器对应的元素
  • 语法：选择器1,选择器2,…,选择器n{}
    1
    2
    3
    4
    5
    <style>
    h1, span{
        color: blueviolet;
    }
    </style>

3.3 关系选择器

3.3.1 元素关系

  • 父元素：直接包含子元素的元素叫父元素
  • 子元素：直接被父元素包含的元素是子元素
  • 祖先元素：直接或简介包含后代元素的元素叫做祖先元素
    • 一个元素的父元素也是它的祖先元素
  • 后代元素：直接或间接被祖先元素包含的元素
    • 子元素也是后代元素
  • 兄弟元素：拥有相同父元素的元素是兄弟元素

3.3.2 子元素选择器

  • 作用：选中指定父元素的指定子元素
  • 语法：父元素>子元素
    1
    2
    3
    4
    5
    <style>
    div > span{
        color: red;
    }
    </style>

3.3.3 后代选择器

  • 作用：选中指定元素内的指定后代元素
  • 语法：祖先 后代
    1
    2
    3
    4
    5
    <style>
    div span{
         color: aqua;
     }
    </style>

3.3.4 兄弟选择器：选择下一个兄弟

  • 语法：前一个 + 下一个
  • 只对下一个兄弟起作用，其他兄弟不起作用
    1
    2
    3
    4
    5
    <style>
    p + span{
        color:red;
    }
    </style>

3.3.5 兄弟选择器：选择下面所有兄弟

  • 语法：前一个 ~ 下一个
  • 只对下面所有的兄弟起作用，前面的兄弟不起作用
    1
    2
    3
    4
    5
    <style>
    p ~ span{
        color:red;
    }
    </style>

3.4 属性选择器

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
<style>
/*[属性名]    选择含有指定属性的元素*/

/*[属性名=属性值] 选择含有指定属性和属性值的元素*/
p[title=abc]{
    color: orange;
} 

/*[属性名^=属性值]    选择属性值以指定值开头的元素*/
p[title^=abc]{
    color: orange;
}

/*[属性名$=属性值]    选择属性值以指定值结尾的元素*/
p[title$=abc]{
    color: orange;
}

/*[属性名*=属性值]    选择属性值中含有某值的元素*/
p[title*=e]{
    color: orange;
}

<!-- title表示鼠标悬停时显示的文字 -->
<p title="abc">少小离家老大回</p>
<p title="abcdef">乡音无改鬓毛衰</p>
<p title="helloabc">乡音无改鬓毛衰</p>
<p title="hello">儿童相见不相识</p>
<p>秋水共长天一色</p>  
<p> 落霞与孤鹜齐飞</p>
</style>

3.5 伪类选择器

3.5.1 概念

  • 伪类（不存在的类，特殊的类）
  • 伪类用来描述一个元素的特殊状态
  • 比如：第一个子元素，被点击的元素、鼠标移入的元素

3.5.2 常用的伪类选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
:first-child    第一个子元素
:last-child     最后一个子元素
:nth-child()    选中第n个子元素
特殊值：
        n   第n个 n的范围0到正无穷
        2n 或 even  选中偶数位的元素
        2n+1 或 odd     都表示奇数位元素
以上这些伪类都是根据所有子元素进行排序

:first-of-type 
:last-of-type
:nth-of-type()
这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序
                
:not()  否定伪类
        将符合条件的元素从选择器中去除

3.5.3 使用

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
<style>
ul>li:first-child{
    color: red;
}

ul>li:last-child{
    color: red;
}

/* 选中所有元素*/
ul>li:nth-child(n){  
    color: red;
} 

/* 选中偶数位元素元素*/
ul>li:nth-child(2n){  
    color: red;
} 

/* 如果要选择li中的第三个需要用:nth-of-type(3) */
ul > li:not(:nth-child(3)){
    color: orange;
}
</style>

<ul>
    <!-- 
        <span>我是span</span>   
        加上这句话，first-child就不能选中第一个li，
        可以使用first-of-type
    -->
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
    <li>第四个</li>
    <li>第五个</li>
</ul>

3.5.4 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
43
44
45
46
<style>
/* 
    :link   用来表示没访问过的链接（正常的链接）
 */
a:link{
    color: red;
}

/* 
    :visited    用来表示访问过的链接
    
    由于隐私的原因，所以visited这个伪类只能修改链接的颜色
*/

a:visited{
    color: orange;
}

/* 
    :hover  用来表示鼠标移入的状态
*/

a:hover{
 font-size: 30px;
 color: aqua;
}

/* 
    :active 用来表示鼠标点击的状态
*/

a:active{
  color: yellowgreen;
}

/* hover和active    别的标签也能使用 */
</style>
<!-- 
    1. 没有访问过的链接
    2. 访问过的链接
 -->
<a href="https://www.baidu.com">Baidu</a>

<br/>

<a href="https://www.baidu.com"></a>

3.6 伪元素选择器

3.6.1 概念

  • 表示页面中一些并不真实的存在的元素（特殊的位置）
  • 位元素使用 :: 开头
  • ::first-letter 表示第一个字母
  • ::first-line 表示第一行
  • ::selection 表示鼠标拖动选中的内容
  • ::before 表示元素的开始位置
  • ::after 表示元素结尾的位置
    • before和after必须结合content属性来使用
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
<style>
    p::first-letter{
        font-size: 30px;
    }
    
    p::first-line{
        background-color: yellow;
    }
    
    p::selection{
        background-color: greenyellow;
    }
    
    div::before{
        content: 'abc';
        color: red;
    }
    
    div::after{
        content: '123';
        color: blue;
    }
</style>
<div>Hello How are you</div>
<p>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur necessitatibus eaque cupiditate! Eum fuga eos nam placeat magnam libero quia suscipit? Provident natus iste perspiciatis voluptas animi impedit sint? Eius.
</p>

3.7 选择器的权重

3.7.1 样式的冲突

  • 当我们通过不同的选择器，选中一个相同的元素，并且为相同的样式设置不同的值，此时就发生了样式的冲突
  • 发生样式冲突时，应用哪个样式由选择器的优先级（权重）决定

3.7.2 权重

样式 权重
内联样式 1,0,0,0
id选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器 0,0,0,1
通配选择器 0,0,0,0
继承的样式 没有优先级

3.7.3 注意

  • 比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示
  • 分组选择器是单独计算
    • 选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器
    • 如果优先级计算后相同，则优先使用靠下的样式
  • 可以再某一个样式的后边添加!important，则此时该样式获取到最高的优先级，甚至超过内联样式
    • 注意：在开发中一定要慎用
1
2
3
4
5
6
7
8
9
10
11
12
<style>
*{
    font-size: 50px;
}

div{
    font-size: 20px;
}
</style>

<!-- 因为span是继承div的，没有优先级，所有span使用的是通配中的样式 -->
<div id="box" class="red" style="color: blue;">我是一个div <span>我是div中的span</span></div>

四、CSS单位与颜色

4.1 长度单位

4.1.1 像素与百分比

  • 像素：同样的200px在不同的设备下显示效果不一样
  • 百分比：也可以将属性值设置为相对于其父元素属性的百分比
    ；可以使子元素跟随父元素的改变而改变
1
2
3
4
5
6
7
8
9
10
11
12
<style>
.box1{
        width: 200px;
        height: 200px;
        background-color: orange;
    }
.box2{
        width: 50%;
        height: 50%;
        background-color: aqua;
    }
</style>

4.1.2 em和rem

  • em：em是相对于元素的字体大小来计算的；
    • 1em=1font-size
    • em会根据字体大小的改变而改变
  • rem：rem是相对于根元素的字体大小来计算
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
    .box1{
        font-size: 10px;
        width: 10em;
        height: 10em;
        background-color: yellow;
    }
    
    .box1{
        width: 10rem;
        height: 10rem;
        background-color: yellow;
    }
</style>

4.1.3 颜色单位

  • RGB值：RGB通过三种颜色的不同浓度来调配出不同的颜色
    • 语法:rgb(红色,绿色,蓝色)
  • RGBA：A表示透明度
    • 值为1表示不透明
    • 值为0表示透明
    • 值为.5表示半透明
  • 十六进制RGB值：
    • 语法：#红色绿色蓝色
    • 如：#FFFFFF 表示白色
  • HSL/HSLA值：
    • H：色相 （0 - 360）
    • S：饱和度（0 - 100%）
    • L：亮度（0 - 100%）

五、CSS盒子模型

5.1 文档流（normal flow）

网页是一个多层的结构
通过css可以分别为每一层来设置样式
作为用户只能看到最顶上一层
这些层中，最底下的一层称为文档流，文档流是网页的基础

5.1.2 元素的状态

在文档流中
不在文档流中（脱离文档流）

5.1.3 元素在文档流的特点

  • 块元素：
    • 块元素会在页面中独占一行（自上向下垂直排列）
    • 默认宽度是父元素的全部（会把父元素撑满）
    • 默认高度是被内容撑开（子元素）
  • 行内元素：
    • 行内元素不会独占页面的一行，只占自身的大小
    • 行内元素在页面中自左向右水平排列，如果一行之中不能容纳下所有的行内元素，则元素会换到第二行继续自左向右排列（书写习惯一致）
    • 行内元素的默认宽度和高度都是被内容撑开

5.2 盒模型

5.2.1 概念

  • CSS将页面中的所有元素都设置为了一个矩形的盒子
  • 将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置
  • 每一个盒子都由以下几个部分组成：
    • 内容区（content）
    • 内边距（padding）
    • 边框（border）
    • 外边距（margin）

5.2.2 内容区

  • 内容区（content），元素中的所有的子元素和文本内容都在内容区中排列
  • 内容区的大小由width和height两个属性来设置
    • width 设置内容去的宽度
    • height 设置内容区的高度

5.2.3 边框border

  • 边框（border），边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部
  • 边框的大小会影响到整个盒子的大小
  • 要设置边框，需要至少设置三个样式：
    • 边框的宽度：border-widht
    • 边框的颜色：border-color
    • 边框的风格：border-style
  • 属性值设置：见附录

5.2.4 内边距padding

  • 内边距：内容区和边框之间的距离是内边距
  • 一共有四个方向的内边距：
    • padding-top
    • padding-right
    • padding-bottom
    • padding-left
  • 内边距的设置会影响到盒子的大小
  • 背景颜色会延伸到内边距上
  • 一共盒子的可见框的大小，由内容区、内边距 和 边框共同决定
  • padding 内边距的简写属性，可以同时指定四个方向的内边距，规则和border-width一样

5.2.5 外边距margin

  • 外边距不会影响盒子可见框的大小
  • 但是外边距会影响盒子的位置
  • 一共有四个方向的外边距：
    • margin-top 上外边距，设置一个正值，元素会向下移动
    • margin-right 默认情况下设置margin-right不会产生任何效果
    • margin-bottom 下外边距，设置一个正值，下面的元素会向下移动
    • margin-left 上外边距，设置一个正值，元素会向右移动
  • margin也可以设置负值，如果是负值则元素会向相反的方向移动
  • 元素在页面中是按照自左向右顺序排列的
  • 所有默认情况下如果我们设置的左和上外边距则会移动元素自身；而设置下和右外边距会移动其他元素
  • margin的简写属性：margin 可以同时设置四个方向的外边距，用法和padding一样
  • margin会影响到盒子实际占用空间

5.3 盒子的尺寸

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
<!--box-sizing  用来设置盒子尺寸的计算方式（设置width和height的作用）
    可选值
        content-box 默认值，宽度和高度用来设置内容区的大小
        bordor-box  宽度和高度用来设置整个盒子可见框的大小
            width 和 height 指的是内容区 和 内边距 和边框的总大小-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            padding: 10px;
            border: 10px red solid;

            /* 
                默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定

                box-sizing  用来设置盒子尺寸的计算方式（设置width和height的作用）
                    可选值
                        content-box 默认值，宽度和高度用来设置内容区的大小
                        bordor-box  宽度和高度用来设置整个盒子可见框的大小
                            width 和 height 指的是内容区 和 内边距 和边框的总大小
             */

             box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

六、布局

6.1 水平布局

  • 元素在其父元素中水平方向的位置由以下几个属性共同决定
    • margin-left
    • border-left
    • padding-left
    • width
    • padding-right
    • border-right
    • margin-right
  • 一个元素在其父元素中，水平布局必须满足以下的等式
    • margin-left+border-left+padding-left+width+padding-right+border-right+margin-right等于其父元素内容区的宽度

6.1.2 过度约束

  • 0 + 0 + 0 + 200 + 0 + 0 + 0 = 800
  • 0 + 0 + 0 + 200 + 0 + 0 + 600 = 800
  • 以上等式必须满足，如果相加结果使等式不成立，则称为过度约束，则等式会自动调整
  • 调整的情况：
    • 如果这七个值中没有为 auto 的情况，则浏览器会自动调整margin-right值，以使等式满足

6.1.3 可以设置为auto的值

  • width
  • margin-left
  • margin-right
  • 如果某个值为auto，会自动调整为auto的那个值以使等式成立
  • 比如：0 + 0 + 0 + auto + 0 + 0 + 0 = 800，会让auto为800
  • 如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0
  • 如果将三个值都设置为auto，则外边距都是0，宽度最大

6.1.4 元素居中效果

  • 如果将两个外边距设置为auto，宽度值固定，则会将外边距设置为相同的值
  • 元素居中效果：auto + 0 + 0 + 200 + 0 + 0 + auto = 800
  • 所以我们经常利用这个特点来使一个元素在其父元素中水平居中
  • 示例：
    • width:xxx px;
    • margin:0 auto;
  • 如果width超过内容区，则会设置margin-right为负值，以使得等式成立
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <style>
        .outer{
            width: 800px;
            height: 200px;
            border: 10px red solid;
        }
        .inner{
            width: 200px;
            height: 200px;
            background-color: #dfa;
            margin-left: auto;
            margin-right: auto;
        }
    </style>

    <div class="outer">
        <div class="inner"></div>
    </div>

6.2 垂直布局

  • 默认情况下父元素的高度被内容撑开
  • 子元素是在父元素的内容区中排列的
  • 如果子元素的大小超过了父元素，则子元素会从父元素中溢出
  • 使用 overflow 属性来设置父元素如何处理溢出的子元素
  • overflow属性可选值
    • visible 默认值，子元素会从父元素中溢出，在父元素外部的位置显示
    • hidden 溢出的内容将会被裁剪不会显示
    • scroll 生成两个滚动条，通过滚动条来查看完整的内容
    • auto 根据需要生成滚动条
  • overflow-x： 设置水平方向
  • overflow-y： 设置垂直方向
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
<style>
.outer{
    background-color: #bfa;
    height: 600px;
}
.inner{
    width: 100px;
    height: 200px;
    background-color: yellow;
    
}

.box1{
    width: 200px;
    height: 500px;
    background-color: #bfa;
}

.box2{
    width: 200px;
    /* height: 100px; */
    height: 400px;
    overflow: scroll;
    background-color: orange;
}
</style>
<div class="outer">
    <div class="inner"></div>
    <div class="inner"></div>
</div>

<div class="box1">
    <div class="box2"></div>
</div>

七、外边距的重叠

7.1 概念

  • 相邻的垂直方向外边距会发生重叠现象

7.2 兄弟元素

  • 兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）
  • 特殊情况：
    • 如果相邻的外边距一正一负，则取两者的和
    • 如果相邻的外边距都是负值，则取两者中绝对值较大的

7.3 父子元素

  • 父子元素间相邻外边距，子元素的会传递给父元素（上外边距）
  • 父子外边距的折叠会影响到页面的布局，必须要进行处理
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
<style>
.box1,.box2{
    width: 200px;
    height: 200px;
}

.box1{
    background-color: #bfa;

    /* 设置一个下外边距 */
    margin-bottom: 100px;
}

.box2{
    background-color: orange;

    /* 设置一个上外边距 */
    margin-top: 100px;
}

.box3{
    width: 200px;
    height: 200px;
    background-color: #bfa;
    /* padding-top: 100px; */
    border-top: 1px #bfa solid;
}

.box4{
    width: 100px;
    height: 100px;
    background-color: orange;
    margin-top: 99px;

}
</style>

<div class="box1"></div>
<div class="box2"></div>

<div class="box3">
    <div class="box4"></div>
</div>

八、行内元素的盒模型

8.1 特点

  • 行内元素不支持设置宽度和高度
  • 行内元素可以设置padding，但是垂直方向的padding不会影响页面的布局
  • 行内元素可以设置border，垂直方向的border不会影响页面的布局
  • 行内元素可以设置margin，垂直方向的margin不会影响布局

8.2 display

  • display：用来设置元素显示的类型
  • 属性可选值：
    • inline ： 将元素设置为行内元素
    • block ： 将元素设置为块元素
    • inline-block ： 将元素设置为行内块元素；行内块，既可以设置宽度和高度又不会独占一行
    • table ： 将元素设置为表格
    • none ： 元素不在页面中显示

8.3 visibility

  • visibility ： 用来设置元素的显示状态
  • 属性可选值：
    • visible ： 默认值，元素在页面中正常显示
    • 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
26
27
28
29
30
31
32
33
34
35
36
37
<style>
.s1{
    background-color: yellow;
    /* width: 100px;
     height: 100px; */

     /* padding: 100px; */

     /* border: 100px solid red; */

     margin: 100px;
}

.box1{
    width: 200px;
    height: 200px;
    background-color: #bfa;
}

a{
    /* display: inline; */
    /* display: block; */
    /* display: inline-block; */
    /* display: none; */
    visibility: hidden;
    display: block;
    width: 100px;
    height: 100px;
    background-color: orange;
}
</style>

<a href="javascript:;"></a>

<span class="s1">我是span</span>

<div class="box1"></div>

九、默认样式

9.1 概念

  • 通常情况下，浏览器都会为元素设置一些默认样式
  • 默认样式的存在会影响到页面的布局，通常情况下编写网页时必须要去除掉浏览器的默认样式（pc端的页面）

9.2 重置样式表reset.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* reset */
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;}
body{background:#fff;}
a,a:hover{color:#333;}