前端之css入门基础知识

css初体验

一.什么叫css

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 [2]

二.为什么要使用css

为了修饰html等文件样式,让网页变得花里胡哨的......

三.怎么使用css

css的学习流程

先学会找标签
学习基本选择器

和学html一样,了解css之前先了解注释怎么写,注释是代码之母

1)css注释

 1 单行注释
 2 /*单行注释*/
 3 
 4 
 5 多行注释
 6 /*
 7 第一行注释
 8 第二行注释
 9 */
10 
11 注释的使用
12 css应该是一个独立的文件
13 /*这是某网页首页的css样式文件*/
14 /*页面通用样式*/
15 /*顶部导航条样式*/
16 /*侧边菜单栏样式*/
17

css注释

2)css的三种引入方式

 1 1.在文件外部再写一个css文件,然后通过link标签将其导入即可(这是最正规的写法)
 2         举例:先写一个mucss.css文件
 3         /*内容如下*/
 4 p {
 5     color: blue;
 6 }
 7 
 8 <!-- 再写一个html文件-->
 9 <!DOCTYPE html>
10 <html lang="en">
11 <head>
12     <meta charset="UTF-8">
13     <title>Title</title>
14     
15  <!--导入css文件-->
16     
17     <link rel="stylesheet" href="mycss.css">
18 </head>
19 <body>
20 <p>前端之从入门到放弃的艰辛历程</p>
21 </body>
22 </html>
23 
24 
25 2.head内style标签内部直接书写css代码
26 <!DOCTYPE html>
27 <html lang="en">
28 <head>
29     <meta charset="UTF-8">
30     <title>Title</title>
31     
32     <!--通过style标签来写入css代码-->
33     
34     <style>
35         p {
36             color: brown;
37         }
38     </style>
39 </head>
40 <body>
41 <p>前端之从入门到放弃的艰辛历程</p>
42 </body>
43 </html>
44 
45 
46 3)在标签内部通过style属性直接书写对应的样式(这个不推荐使用)
47 <!DOCTYPE html>
48 <html lang="en">
49 <head>
50     <meta charset="UTF-8">
51     <title>Title</title>
52 </head>
53 <body>
54     
55 <!--在标签内直接修改-->    
56 <p style="color: chartreuse">前端之从入门到放弃的艰辛历程</p>
57     
58 </body>
59 </html>

引用方式

3)css的语法结构

css的语法结构非常简单

选择器 {属性名:属性值;属性名1,属性值1;属性名2,属性值2}

4)选择器

1.基本选择器

基本选择器包括标签选择器(标签名):该标签都会被修改样式

, 类选择器(.类名):继承该类的标签样式都会被修改

id选择器(#id):有此id号的标签都会被修改样式

通用选择器(*):全部标签都被修改样式

举例

 1 标签选择器
 2 
 3 <!DOCTYPE html>
 4 <html lang="en">
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>Title</title>
 8     <style>
 9         /*通用选择器*/
10         * {
11             color: chocolate;
12         }
13         /*标签选择器*/
14         span {
15             color: deeppink;
16         }
17         /*标签选择器*/
18         p {
19             color: aquamarine;
20         }
21         /*id选择器*/
22         #d1 {
23             color: black;
24         }
25         /*类选择器*/
26         .c1 {
27             color: blue;
28         }
29         
30     </style>
31 </head>
32 <body>
33 <div>
34     <span class="c1">
35         <p>好好学习,天天向上,</p>
36     </span>
37 </div>
38 
39 <div>
40     <span>
41         <p id="d1">不忘初心,牢记使命</p>
42     </span>
43 </div>
44 <div>
45     <span>
46         <p class="c1">人生苦短,我学python</p>
47     </span>
48 </div>
49 </body>
50 </html>

基本选择器

2.组合选择器

后代选择器(选择器a 选择器b):两个标签中间有一个空格,表示前一个选择器a标签内包裹的所有的后一个选择器b标签的样式都被修改,没有层级限制,只要存在即被修改

儿子选择器(选择器a > 选择器b):选择器a内的所有与之直接连系在一起的选择器b都会被修改样式,即存在层级限制

毗邻选择器(选择器a + 选择器b):表示选择器a结束后紧挨的第一个选择器b标签会被修改样式

弟弟选择器(选择器a ~ 选择器b): 表示同一级别的选择器a标签下的所有选择器b标签的样式都被修改,但是注意存在层级限制

 1 举例:
 2 <!DOCTYPE html>
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <style>
 8         /*后代选择器*/
 9         /*空格表示div标签内的所有p标签都会被更改样式,不会有层级限制*/
10         div p {
11             color: blue;
12         }
13 
14         /*儿子选择器*/
15         /*大于号表示div标签内部的所有直接连系的span标签都会被修改样式,有层级限制*/
16         div > span {
17             color: gold;
18         }
19 
20         /*毗邻选择器*/
21         /*表示div标签紧挨着的下一个span标签的样式被修改,上一个则不会*/
22         div + span {
23             color: aqua;
24         }
25 
26         /*弟弟选择器*/
27         /*同一级别的div标签下的所有span标签都被修改样式*/
28         div ~ span {
29             color: blueviolet;
30         }
31     </style>
32 </head>
33 <body>
34 <span>第一个div标签上面的第一个span标签</span>
35 <span>第一个div标签上面的第二个span标签</span>
36 <div>
37     <span>第一个div标签内的第一个span标签</span>
38     <p>
39         <span>第一个p标签内的第一个span标签</span>
40     </p>
41     <span>第一个div标签内的最后一个span标签</span>
42 </div>
43 <span>第一个div标签后的第一个span标签</span>
44 <span>第一个div标签后的第二个span标签</span>
45 <span>第一个div标签后的第三个span标签</span>
46 <div>第二个div标签
47     <p>第二个div标签后的第一个p标签</p>
48 </div>
49 <p>第二个div标签后的第一个p标签</p>
50 <span>第二个div标签后的最后一个span标签</span>
51 </body>
52 </html>

组合选择器

3.属性选择器

补充：html标签可以有默认的属性值，也可以自定义属性值，并且支持多个

[ ]:属性选择器的标志符就是中括弧,里面放标签的属性,可以精确指到某一个属性所在标签的,对此标签所有的内容进行修改

 1 举例:
 2 <!DOCTYPE html>
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <style>
 8             /*属性选择器  []*/
 9             /*用[]将属性包起来,会找到页面上所有的具有该属性的标签,将这些标签全部修改样式*/
10         [username] {
11             color: yellowgreen;
12         }
13         /*会进一步精确到username='张飞'这个属性所在的标签位置,然后修改样式*/
14         [username='张飞'] {color: blue}
15             
16         /*再进一步精确到标签内的username='李四'这个属性所在标签位置,然后修改修改样式*/
17         input[username="李四"] {
18             background-color: aqua;
19         }
20 
21     </style>
22 
23 </head>
24 <body>
25 <input type="text"  username="张三" >
26 <input type="text" username="李四">
27 <input type="text" username="王五">
28 <p username="张飞">大河向东流啊</p>
29 <div username="关羽">天上的星星参北斗啊</div>
30 <span username="李四">说走咱就走啊</span>
31 </body>
32 </html>

属性选择器

4.分组与嵌套

将一些选择器相互嵌套和分组使用,怎加查询效率

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7             /*属性选择器  []*/
 8             /*用[]将属性包起来,会找到页面上所有的具有该属性的标签,将这些标签全部修改样式*/
 9         [username] {
10             color: yellowgreen;
11         }
12         /*会进一步精确到username='张飞'这个属性所在的标签位置,然后修改样式*/
13         [username='张飞'] {color: blue}
14             
15         /*再进一步精确到标签内的username='李四'这个属性所在标签位置,然后修改修改样式*/
16         input[username="李四"] {
17             background-color: aqua;
18         }
19 
20     </style>
21 
22 </head>
23 <body>
24 <input type="text"  username="张三" >
25 <input type="text" username="李四">
26 <input type="text" username="王五">
27 <p username="张飞">大河向东流啊</p>
28 <div username="关羽">天上的星星参北斗啊</div>
29 <span username="李四">说走咱就走啊</span>
30 </body>
31 </html>

分组与嵌套

5.伪类选择器

a链接标签默认链接是蓝色的,但是只要点击过一次这个链接就会变成紫色,浏览器会记住你是否点击过这个网址,这些都可以自定义的

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         /*未点击时的初始状态*/
 8         a:link {
 9 
10             color: blue;
11         }
12         /*鼠标悬浮时的状态*/
13         a:hover {
14             color: aqua;
15         }
16         /*鼠标点击时的状态*/
17         a:active {
18             color: yellow;
19         }
20         /*点击过后的状态*/
21         a:visited {
22             color: deeppink;
23         }
24     </style>
25 </head>
26 <body>
27 <a href="https://edu.51cto.com/">点击跳转1</a>
28 <a href="https://www.souhu.com/">点击跳转1</a>
29 
30 </body>
31 </html>

伪类选择器

6.伪元素选择器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>伪元素选择器</title>
 6     <style>
 7         /*设置p标签的第一个字符的颜色和大小*/
 8         p:first-letter {
 9             color: deeppink;
10             font-size:480px ;
11         }
12         /*在p标签语句的前面加上指定语句,这些语句不可被指定*/
13         p:before {
14             content: '这么帅的我';
15             color: blue;
16         }
17 
18         p:after {
19             content: '?';
20             color: chocolate;
21         }
22     </style>
23 </head>
24 <body>
25 <p>无敌的我是多么的寂寞</p>
26 </body>
27 </html>

伪元素选择器

7.选择器优先级

css继承

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6         <style>
 7                body {
 8                 color: red;
 9                 }
10                 </style>
11 </head>
12 <body>
13 <p>锄禾日当午</p>
14 </body>

css继承

此时页面上所有标签都会继承body的字体颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。

我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式

1 p { 2 color: green; 3 }

此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等

优先级

1.选择器相同

就近原则

2.选择器不同

行内标签 > id 选择器 >类选择器 > 标签选择器

补充：除此之外还可以通过添加！impotrant 的方式来强制让样式生效，但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护。

万不得已可以使用!important

五.css属性设置

1）长和宽的设置

width属性可以为元素设置宽度。

height属性可以为元素设置高度。

块级标签才能设置长宽度，行内标签的宽度由内容来决定，无法设置

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div {
 8             width:200px;
 9             height:300px;
10         }
11         span {
12             width:300px;
13             heigth:500px;
14         }
15     </style>
16 </head>
17 <body>
18 <div>
19     老子天下第一
20 </div>
21 <span>
22     前端有啥难的
23 </span>
24 </body>

设置长宽

2）文字的字体，大小，粗细属性

文字字体

font-family

可以把多个字体名称作为一个 “回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。

字体大小

font-size

可以设置字体的大小

font-weight

用来设置字体的体重（即粗细）

值	描述
normal	默认值，标准粗细
bold	粗体
bolder	更粗
lighter	更细
100~900	设置具体粗细，400等同于normal，而700等同于bold
inherit	继承父元素字体的粗细值

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         p {
 8             font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
 9 
10             font-weight: bold;
11             /*font-size: 30px;*/
12             font-size: inherit;
13         }
14 
15     </style>
16 </head>
17 <body>
18 <p>
19     学好数理化，走遍天下都不怕
20 </p>
21 </body>
22 </html>

设置字体

3）文本颜色

可以用来设置文字的颜色

设定颜色有四种方式

颜色的名称：如red，yello等
一个RGB值（三基色红绿蓝）：如rgb(81,195,50)指的就是绿色
十六进制值：#51C332也表示绿色
rgba：rgba（81,195,50,0.9）这个0.3指定了色彩的透明度，范围在0.0~1.o之间

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         p {
 8             color: green;
 9             color: rgb(81,195,50);
10             color: #51C332;
11             color: rgba(81,195,50,0.9);
12 
13 
14         }
15 
16     </style>
17 </head>
18 <body>
19 <p>
20     学好数理化，走遍天下都不怕
21 </p>
22 </body>

设置文本颜色

4)文字对齐，装饰，缩进属性

文字对齐

text-align 属性规定元素中的文本的水平对齐方式。

值描述

left 左边对齐默认值

right 右对齐

center 居中对齐

justify 两端对齐

值	描述
left	左边对齐默认值
right	右对齐
center	居中对齐
justify	两端对齐

文字装饰

text-decoration 属性用来给文字添加特殊效果。

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
inherit	继承父元素的text-decoration属性的值。

当我设置a标签的时候会默认有一条下划线，可以通过设置

text-decoration: None;的方式来去掉下划线

首行缩进

text-indent：可以设置段落的第一行缩进值

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #d1 {
 8             text-indent: 32px;
 9             text-align: left;
10             text-decoration: underline;
11         }
12         #d2 {
13             text-align: right;
14             text-decoration: overline;
15         }
16         #d3 {
17             text-align: center;
18             text-decoration: line-through;
19         }
20         #d4 {
21             text-align: justify;
22             text-decoration: none;
23         }
24     </style>
25 </head>
26 <body>
27 <p id="d1">大家好</p>
28 <p id="d2">大家下午好</p>
29 <p id="d3">大家早上好</p>
30 <p id="d4">晚上好</p>
31 </body>
32 </html>

设置文本属性

5）背景属性（background）

line-height: 1.5; orphans: 4; margin-top: 1rem; margin-bottom: 1rem; font-size: 1.125rem; white-space: pre-wrap; position: relative; color: rgb(51, 51, 51); font-family: Merriweather, "PT Serif", Georgia, "Times New Roman", STSong, serif;">注意：background-color只改变背景的颜色，不改变文本颜色，而color可以改变文本颜色
- background-img: url('1.jpg');可以放本地文件也可以放链接
背景重复

background-repeat: repeat;
- repeat(默认)：背景图片平铺排满整个网页
- repeat-x：背景图片只在水平方向上平铺
- repeat-y：背景图片只在垂直方向上平铺
- no-repeat：背景图片不平铺
背景位置

background-position: left top;

background-position: 200px 200px;

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div {
 8              background-image: url("111.jpg");
 9             /*background-color: yellow;*/
10             /*color: green;*/
11             background-repeat: repeat;
12             width: 800px;
13             height: 1000px;
14         }
15     </style>
16 </head>
17 <body>
18 <div>书中自有颜如玉</div>
19 </body>
20 </html>

设置背景

1 background:#336699 url('1.png') no-repeat left top;

支持简写

6)背景图片的应用

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #d1 {
 8             background-image: url("111.jpg");
 9             background-attachment: fixed;
10         }
11         #d2 {
12             background-image: url("32.jpg");
13             background-attachment: fixed;
14         }
15     </style>
16 </head>
17 <body>
18 <div style="height: 600px; background-color:red" ></div>
19 <div style="height: 600px;" id="d2"  ></div>
20 <div style="height: 600px; background-color:green" ></div>
21 <div style="height: 600px;" id="d1"></div>
22 <div style="height: 600px; background-color:blue" ></div>
23 </body>

背景图片

7)边框

边框属性

border-width 边框宽
border-style 样式
border-color 颜色

#i1 {
  border-width: 2px;
  border-style: solid;
  border-color: red;
}

通常使用简写方式：

#i1 {
  border: 2px solid red;
}

边框样式

值	描述
none	无边框。
dotted	点状虚线边框。
dashed	矩形虚线边框。
solid	实线边框

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         p {
 8             border-style: dashed;/*边框样式*/
 9             border-color: red ; /*边框颜色*/
10             border-width: 5px;/*边框粗细*/
11             border-left:  dotted #ff744e;/*左边框线修改颜色样式*/
12             border-right:  dashed green;
13             border-top: solid blue;
14             border-bottom: dashed deeppink;/*下边框线修改颜色样式*/
15         }
16   /*当方向边框只出现一个的时候会同时表示相对应的另一个边框样式*/
17 
18     </style>
19 </head>
20 <body>
21 <p>
22     好好学习，天天向上
23 </p>
24 </body>
25 </html>

边框

8）画圆

border-radius：用这个属性能实现圆角边框的效果，将border-radius设置为长或高的一半即可得到一个圆形。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div {
 8             height: 200px;
 9             width: 200px;
10             border-radius: 50%; 
11             background-image: url("111.png");
12             background-repeat: no-repeat;
13         }
14     </style>
15 </head>
16 <body>
17 <div></div>
18 </body>
19 </html>

画圆

9).display属性

用于控制HTML元素的显示效果。

值	意义
display:"none"	HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block"	默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline"	按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block"	使元素同时具有行内元素和块级元素的特点。

display:"none"与visibility:hidden的区别：

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #d1 {
 8             height: 100px;
 9             /*width: 50px;*/
10             background-color: blue;
11             display: block;
12         }
13         #d4 {
14             height: 100px;
15             width: 100px;
16             background-color: deeppink;
17             display: block;
18         }
19         #d2 {
20             height: 100px;
21             width: 100px;
22             background-color: green;
23 
24             display: none;
25         }
26         #d6 {
27             height: 100px;
28             width: 100px;
29             background-color: brown;
30 
31             display: inline; /*有疑问*/
32         }
33          #d5 {
34             height: 100px;
35             width: 100px;
36             background-color: green;
37 
38             visibility: hidden;
39         }
40         #d3 {
41             height: 50px;
42             width: 100px;
43             background-color: yellow;
44             display: inline-block;
45         }
46 
47 
48     </style>
49 </head>
50 <body>
51 <div id="d1">
52     第一句话
53 </div>
54 <span id="d4">
55     第四句话
56 </span>
57 <div id="d2">
58     第二句话
59 </div>
60 <div id="d3">
61     第三句话
62 </div>
63 <div id="d5">
64     第三句话
65 </div>
66 <div id="d6">
67     第三句话
68 </div>
69 
70 </body>
71 </html>

举例

10.盒子模型

margin: 用于标签与标签之间的距离；margin的最基本用途就是控制标签周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding: 用于控制标签内部文本内容到边框之间的距离；
Border(边框): 围绕在内边距和内容外的边框。
Content(内容): 标签内的内容，显示文本和图像。

margin:

body标签默认自带8px的距离，可以通过

body { margin: 0; /*取消body标签自带的8px的外边距*/}

.margin-test {
  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;
}

推荐使用
.margin-test {
  margin: 5px 10px 15px 20px;
}
顺序：上右下左

常用居中方式
margin: 0 auto;

padding

内填充，控制标签内文件到标签的距离

.padding-test {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;

.padding-test {
  padding: 5px 10px 15px 20px;
}
顺序：上右下左

补充padding的常用简写方式：

提供一个，用于四边；
提供两个，第一个用于上－下，第二个用于左－右；
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数值，将按上－右－下－左的顺序作用于四边；

11.浮动（float）

在 CSS 中，任何元素都可以浮动。

浮动元素会生成一个块级框，而不论它本身是何种元素,另外浮动的元素是脱离正常文档流的自身多大就会占多大不再有独占一行的概念

关于浮动的两个特点：

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

三种取值

left：向左浮动

right：向右浮动

none：默认值，不浮动

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         body {
 8             margin: 0;
 9         }
10         .c1 {
11             height: 100px;
12             width: 100px;
13             background-color: red;
14             float: left;
15         }
16         .c2 {
17             height: 100px;
18             width: 100px;
19             background-color: green;
20             float: right;
21         }
22     </style>
23 </head>
24 <body>
25 <div class="c1"></div>
26 <div class="c2"></div>
27 </body>
28 </html>

View Code

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .left-menu {
 8             background-color: #4e4e4e;
 9             width: 20%;
10             height: 1000px;
11             float: left;
12         }
13         .right-menu {
14             background-color: wheat;
15             width: 80%;
16             height: 2000px;
17             float: right;
18         }
19     </style>
20 </head>
21 <body>
22 <div class="left-menu"></div>
23 <div class="right-menu"></div>
24 </body>
25 </html>

举例应用

clear：

clear属性规定元素的哪一侧不允许其他浮动元素。

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

注意：clear属性只会对自身起作用，而不会影响其他元素。

清除浮动的副作用（父标签塌陷问题）

主要有三种方式：

固定高度
伪元素清除法
overflow:hidden

伪元素清除法（使用较多）：

1 .clearfix:after {
2   content: "";   /*设置一个空的内容标签*/
3   display: block;
4   clear: both;
5 }

View Code

12.overflow溢出属性

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

overflow（水平和垂直均设置）
overflow-x（设置水平方向）
overflow-y（设置垂直方向）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .c1 {
 8             height: 50px;
 9             width: 50px;
10             border: 1px solid black;
11             overflow: auto;
12         }
13     </style>
14 </head>
15 <body>
16 <div class="c1">
17     遵循社会主义核心价值观
18     遵循社会主义核心价值观
19     遵循社会主义核心价值观
20     遵循社会主义核心价值观
21     遵循社会主义核心价值观
22     遵循社会主义核心价值观
23     遵循社会主义核心价值观
24 </div>
25 </body>
26 </html>

举例

13.圆形头像示例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <!DOCTYPE html>
 5 <html lang="en">
 6 <head>
 7     <meta charset="UTF-8">
 8     <title>Title</title>
 9     <style>
10         body {
11             margin: 0;
12             background-color: antiquewhite;
13         }
14         .c1 {
15             height: 100px;
16             width: 100px;
17             border-radius: 50%;
18             border: 5px solid white;
19             /*background-image: url("111.png");*/
20             /*background-repeat: no-repeat;*/
21             overflow: hidden;
22         }
23         img {
24             max-width: 100%;
25         }
26     </style>
27 </head>
28 <body>
29 <div class="c1">
30     <img src="111.jpg" alt="">
31 </div>
32 </body>
33 </html>

View Code

14.定位（position）

static

static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。

relative（相对定位）

相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。

absolute（绝对定位）

定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。

另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>绝对定位</title>
 6     <style>
 7         .c1 {
 8             height: 100px;
 9             width: 100px;
10             background-color: red;
11             float: left;
12         }
13         .c2 {
14             height: 50px;
15             width: 50px;
16             background-color: #ff6700;
17             float: right;
18             margin-right: 400px;
19             position: relative;
20 
21         }
22         .c3 {
23             height: 200px;
24             width: 200px;
25             background-color: green;
26             position: absolute;
27             top: 50px;
28         }
29     </style>
30 </head>
31 <body>
32 <div class="c1"></div>
33 <div class="c2">
34     <div class="c3"></div>
35 </div>
36 
37 </body>
38 </html>

View Code

fixed（固定）

fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。注意点：一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta http-equiv="x-ua-compatible" content="IE=edge">
 6   <meta name="viewport" content="width=device-width, initial-scale=1">
 7   <title>返回顶部示例</title>
 8   <style>
 9     * {
10       margin: 0;
11     }
12 
13     .d1 {
14       height: 1000px;
15       background-color: red;
16     }
17 
18     .scrollTop {
19       background-color: blue;
20       padding: 10px;
21       text-align: center;
22       position: fixed;
23       right: 10px;
24       bottom: 20px;
25     }
26   </style>
27 </head>
28 <body>
29 <div class="d1">111</div>
30 <div class="scrollTop">返回顶部</div>
31 </body>
32 </html>

返回顶部按钮样式示例

是否脱离文档流

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <style>
 8         .c1 {
 9              height: 50px;
10             width: 100px;
11             background-color: dodgerblue;
12         }
13         .c2 {
14              height: 100px;
15             width: 50px;
16             background-color: orange;
17             position: relative;
18             left: 100px;
19         }
20     </style>
21 </head>
22 <body>
23 <div class="c1"></div>
24 <div class="c2"></div>
25 <div style="height: 100px;width: 200px;background-color: black"></div>
26 </body>
27 </html>

相对定位

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <style>
 8         .c1 {
 9             height: 50px;
10             width: 100px;
11             background-color: red;
12             position: relative;
13         }
14         .c2 {
15             height: 50px;
16             width: 200px;
17             background-color: green;
18             position: absolute;
19             left: 50px;
20         }
21     </style>
22 </head>
23 <body>
24 <div class="c1">购物车
25     <div class="c2">空空如也~</div>
26     <div style="height: 50px;width: 100px;background-color: deeppink"></div>
27 </div>
28 
29 </body>
30 </html>

绝对定位

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 </head>
 8 <body>
 9 <div class="c1" style="height: 50px;width: 500px;background-color: black"></div>
10 <div class="c2" style="height: 50px;width: 100px;background-color: deeppink;position: fixed;right: 10px;bottom: 20px"></div>
11 <div class="c3" style="height: 10px;width: 100px;background-color: green"></div>
12 
13 </body>
14 </html>

固定定位

上述例子可知：

脱离文档流：

　　绝对定位

　　固定定位

不脱离文档流：

　　相对定位

15.控制z轴的距离（z-index）

#i2 {
  z-index: 999;
}

设置对象的层叠顺序。

z-index 值表示谁压着谁，数值大的压盖住数值小的，
只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
从父现象：父亲怂了，儿子再牛逼也没用

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .modal {
 8             background-color: #808080;
 9             position: fixed;
10             left: 0;
11             top: 0;
12             bottom: 0;
13             right: 0;
14             z-index: 999;
15             opacity: 0.4;
16         }
17         .form {
18             background-color: white;
19             height: 200px;
20             width: 100px;
21             position: fixed;
22             top: 50%;
23             left: 50%;
24             z-index: 1000;
25             margin-top: -100px;
26             margin-left: -50px;
27         }
28     </style>
29 </head>
30 <body>
31 <div>我是最底下的那个</div>
32 <div class="modal"></div>
33 <div class="form"></div>
34 </body>
35 </html><!DOCTYPE html>
36 <html lang="en">
37 <head>
38   <meta charset="UTF-8">
39   <meta http-equiv="x-ua-compatible" content="IE=edge">
40   <meta name="viewport" content="width=device-width, initial-scale=1">
41   <title>自定义模态框</title>
42   <style>
43     .cover {
44       background-color: rgba(0,0,0,0.65);
45       position: fixed;
46       top: 0;
47       right: 0;
48       bottom: 0;
49       left: 0;
50       z-index: 998;
51     }
52 
53     .modal {
54       background-color: white;
55       position: fixed;
56       width: 600px;
57       height: 400px;
58       left: 50%;
59       top: 50%;
60       margin: -200px 0 0 -300px;
61       z-index: 1000;
62     }
63   </style>
64 </head>
65 <body>
66 
67 <div class="cover"></div>
68 <div class="modal"></div>
69 </body>
70 </html>

举例

16.透明度（opacity）

用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .c1 {
 8             background-color: rgba(128,128,128,0.4);
 9         }
10         .c2 {
11             background-color: rgb(128,128,128);
12             opacity: 0.4;
13         }
14     </style>
15 </head>
16 <body>
17 <div class="c1">阿萨德撒大家都</div>
18 <div class="c2">阿萨德撒大家都</div>
19 </body>
20 </html>

View Code

6)背景图片的应用

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：

posted @ 2019-12-26 17:16 Mr江阅读(307) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Mr 江

梦不会逃走，逃走的一直都是自己。

前端之css入门基础知识

css初体验

一.什么叫css

二.为什么要使用css

三.怎么使用css

1)css注释

2)css的三种引入方式

3)css的语法结构

4)选择器

1.基本选择器

2.组合选择器

3.属性选择器

4.分组与嵌套

5.伪类选择器

6.伪元素选择器

7.选择器优先级

五.css属性设置

1）长和宽的设置

2）文字的字体，大小，粗细属性

3）文本颜色

4)文字对齐，装饰，缩进属性

5）背景属性（background）

6)背景图片的应用

7)边框

8）画圆

9).display属性

10.盒子模型

margin:

padding

11.浮动（float）

三种取值

清除浮动的副作用（父标签塌陷问题）

12.overflow溢出属性

13.圆形头像示例

14.定位（position）

static

relative（相对定位）

absolute（绝对定位）

fixed（固定）

是否脱离文档流

15.控制z轴的距离（z-index）

16.透明度（opacity）

6)背景图片的应用

公告