CSS

发表于 | 分类于


CSS 介绍

  • CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。
  • 当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。
  • HTML定义了页面的框架，CSS样式表用来装饰页面。
  • 思维导图: https://www.processon.com/mindmap/5a2f4ec4e4b0abb143af4a08

CSS 语法

  • CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
  • 声明又包括属性和属性值。每个声明之后用分号结束。
  • 选择器 {样式1;样式2}
  • h1 {color:red; font-size:14px;}

CSS引入方式

行内样式

  • 行内式是在标记的style属性中设定CSS样式,不推荐大规模使用。
1
<p style="color: blue">杰尼龟</p>

内部样式

  • 嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：
1
2
3
4
5
6
7
8
9
10
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
    <style>
        p {
            color: green;
        }
    </style>
</head>

外部样式(推荐)

  • 外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。
1
2
3
4
5
6
7
8
9
### link语句在<head></head>>下使用
<link rel="stylesheet" href="index.css">

### index.css
/* 标签选择器 */
p {
    color: red;
    font-size: 48px;
}

CSS 选择器

  • CSS选择器的作用: 查找标签

基本选择器

标签选择器

1
2
3
/* 标签选择器 */
/*适用于：批量、统一、默认的样式*/
p { color: red;}

ID选择器

1
2
3
/* ID选择器 # */
/*适用于：给特定标签设置特定样式*/
#p2 {color: blue;}

类选择器

1
2
3
/* 类选择器 . */
/*适用于：给某一些标签摄者相同的样式*/
.c1 {color: yellow;}
1
2
3
# 注意:
# 样式类名不要用数字开头（有的浏览器不认）。
# 标签中的class属性如果有多个，要用空格分隔。

通用选择器

  • 通配选择器 * 会找到body里面所有的标签，包括body标签，所以页面整体都会被找到
1
2
/* 类选择器 */
* {color: pink;}

组合选择器

后代选择器

  • 空格分割
1
2
3
4
/* d1下的所有p标签被找到 */
#d1 p {
    color: red;
}

子代选择器

  • > 只找儿子
1
2
3
4
/* id是d1标签 所有儿子是p标签 */
#d1>p{
    color: green;
}

毗邻选择器

  • + 找紧挨着的兄弟标签 只往下找
1
2
3
4
/* 选择所有紧接着div元素之后的p标签 */
div+p{
    color: yellow;
}

弟弟选择器

  • 只要是兄弟标签
    1
    2
    3
    4
    /* div后面的所有的p标签 */
    div~p{
        color: blue;
    }

分组和嵌套

分组

  • 当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，
    可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
  • , 代表 或 
1
2
3
div, p{
    color: red;
}
  • 上面的代码为div标签和p标签统一设置字体为红色。
    通常，我们会分两行来写，更清晰,但是别忘记加上逗号:
1
2
3
4
div, 
p{
    color: red;
}

嵌套

  • 多种选择器可以混合起来使用，比如：.d1类内部所有p标签设置字体颜色为红色。
  • . 代表 且
1
2
3
.c1 p {
  color: red;
}
  • 找一个class = d1 的span标签
1
2
3
span.d1{
    color: pink;
}

属性选择器

1
2
3
<p cid="leo">我是一个P标签</p>
<p cid="lex">我也是一个P标签</p>
<p>我还是一个P标签</p>
  • 用于选取带有指定属性的元素
1
2
3
[cid]{
    color: pink;
}
  • 用于选取带有指定属性和值的元素
1
2
3
[cid='lex']{
    color: green;
}

伪类选择器

  • a：link（从未访问过的链接的崭新状态），用于定义了链接的常规状态。
  • a:hover（鼠标移动到链接上时未点击的悬浮状态），用于产生视觉效果。
  • a:visited（已访问过的链接的状态）用于阅读文章，能清楚的判断已经访问过的链接。
  • a:active（在链接上按下鼠标时的状态），用于表现鼠标按下时的链接激活状态。
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
/* 所有没有访问过的a标签 */
a:link {
    color: deeppink;
}

/* 所有访问过的a标签 */
a:visited {
    color: green;
}

/* 鼠标移上去 变色 */
a:hover {
    color: blueviolet;
}

#d1:hover {
    color: darksalmon;
}


/* 被选定 鼠标按下去变色 */
a:active{
    color: deeppink;
}

/*input获取光标时*/
input:focus{
    outline: 0;
    background-color: deeppink;
}

伪元素选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*常用的给首字母设置特殊样式：*/
p:first-letter{
    font-size: 48px;
    color: deeppink;
}

/*在标签内容开头操作*/
.p1:before{
    content: "*";
    color: red;
}

/*在标签内容最后操作*/
.p1:after{
    content: "[?]";
    color: blue;
}

选择器优先级

  • 所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。
  • 1.内联样式表的权值最高 嵌套引入 style=”” －－－ 1000
  • 2.统计选择符中的ID属性个数。 #id －－－ 100
  • 3.统计选择符中的CLASS属性个数。 .class －－－ 10
  • 4.统计选择符中的HTML标签名个数。 p －－－ 1
  • 5.选择器都一样的情况下，谁靠近标签，谁的优先级高
  • 6.万不得已可以使用!important

CSS 常用属性

宽和高

  • width 属性可以为元素设置宽度。
  • height 属性可以为元素设置高度。
  • 只有块级标签才能设置宽和高，内联标签的宽度由内容的长度来决定 
1
2
3
4
.d1 {
    width: 300px;
    height: 200px;
}

字体属性

文字字体

  • font-family 可以把多个字体名称作为一个“回退”系统来保存。
  • 如果浏览器不支持第一个字体，则会尝试下一个。
  • 浏览器会使用它可识别的第一个值。
1
2
3
4
/*全局样式*/
*{
    font-family: "幼圆","Microsoft YaHei" ,"Arial";
}

字体大小

1
2
3
.d1 {
    font-size: 32px;
}

字重（粗细）

1
2
3
.d1 {
    font-weight: bold;
}

文本颜色

  • 颜色属性被用来设置文字的颜色。
  • 颜色是通过CSS最经常的指定：
    • 十六进制值 - 如: ＃FF0000
    • 一个RGB值 - 如: RGB(255,0,0)
    • 颜色的名称 - 如: red
  • 还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。
  • 可以通过浏览器工具获取颜色的十六进制值,然后用到自己的样式中
1
2
3
4
5
.d1 {
    color: deeppink;
    /*color: #FF1493;*/
    /*color: rgba(255,0,0,0.3);*/
}

文字对齐

  • text-align 属性规定元素中的文本的水平对齐方式。
1
2
3
.p1{
    text-align: justify;
}

文字装饰

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

  • 常用方法:

1
2
3
4
/* 去掉a标签默认的自划线：*/
a{
    text-decoration: none;
}

首行缩进

  • 首行缩进 字体像素的两倍就相当于是首行缩进两个字:
1
2
3
4
5
.p1{
    font-size: 32px;
    text-indent: 32px;

}

文本其它属性

  • font-style: oblique; 斜体
  • letter-spacing: 10px; 字母间距
  • word-spacing: 20px; 单词间距
  • text-transform: capitalize/uppercase/lowercase ; 文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大写
  • line-height: 200px; 文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比
  • vertical-align:－4px 设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效

背景属性

背景颜色

1
2
3
.d1{
    background-color: deeppink;
}

背景图片

  • 设置背景图片如:200 X 200像素
  • 如果设置的div层宽和高 与图片的像素一致，则直接铺满
  • 如果设置的div层宽和高 大于图片的像素 如 600 X 600 ，如下图，就要进行背景调整
    1
    2
    3
    4
    5
    .d1{
        width: 600px;
        height: 600px;
        background-image: url("xiaoxin.jpg");
    }

  • 背景重复
    • repeat(默认):背景图片平铺排满整个网页
    • repeat-x：背景图片只在水平方向上平铺
    • repeat-y：背景图片只在垂直方向上平铺
    • no-repeat：背景图片不平铺
1
2
3
4
5
6
7
.d1{
    width: 600px;
    height: 600px;
    background-image: url("xiaoxin.jpg");
    /*图片超出后不重复(平铺)*/
    background-repeat: no-repeat;
}

  • 调整背景位置
1
2
3
4
5
6
7
8
9
10
11
.d1{
    width: 600px;
    height: 600px;
    background-image: url("xiaoxin.jpg");
    /*图片超出后不重复(平铺)*/
    background-repeat: no-repeat;
    /*background-position: center;*/
    background-position: center;
    /*x轴 -> 200，y轴100*/
    /*background-position: 200px 100px;*/
}

  • 支持简写：
    background:#ffffff url('1.png') no-repeat right top;

  • 使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。
    http://www.w3school.com.cn/css/css_background.asp

  • 鼠标滚动背景不动

1
2
3
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.c1{
    height: 500px;
    background-color: red;
}

.c2{
    height: 500px;
    background: url("CSS 属性/img23.jpg") no-repeat center;
    background-attachment: fixed;
}

.c3{
    height: 500px;
    background-color: green;
}

边框属性

设置边框

  • border-width 粗细
  • border-style 样式
  • border-color 颜色
1
2
3
4
5
6
7
8
.d1{
    height: 200px;
    width: 300px;
    background-color: deeppink;
    border-width: 5px;
    border-style: solid;
    background-color: green;
}
1
2
3
4
5

/*通常使用简写方式：*/
.d1{
    border: 5px solid green;
}

  • 除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示：
1
2
3
4
5
6
7
.d1{
    border-top-style:dotted;
    border-top-color: red;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:none;
}

圆角边框

1
2
3
4
5
6
.d1{
    height: 200px;
    width: 200px;
    border-radius: 100px 100px;
    background-color: deeppink;
}

列表属性

1
2
3
4
1、list-style-type     设置列表项标志的类型。
2、list-style-image    将图象设置为列表项标志。
3、list-style-position 设置列表中列表项标志的位置。
4、list-style          简写属性。用于把所有用于列表的属性设置于一个声明中
1
2
3
4
/*使用图像来替换列表项的标记:*/
ul {
     list-style-image: url('图片');
}

display 属性

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

none(隐藏某标签)

  • display: none 与 visibility: hidden的区别
    • visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
    • display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
    • display: none不占位，visibility: hidden占位
1
2
3
4
5
.d1{
    height: 100px;
    color: red;
    display: none;
    /*visibility: hidden;*/

block (内联标签设置为块级标签)

1
2
3
4
.s1{
    display: block;
    background-color: green;
}

inline(块级标签设置为内联标签)

1
2
3
4
5
6
<ul class="u1">
    <li><a href="">新闻</a></li>
    <li><a href="">体育</a></li>
    <li><a href="">娱乐</a></li>
    <li class="last"><a href="">天气</a></li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
li{
    display: inline;
    border-right: 1px solid black;
    padding: 1px 10px;
}

li a{
    text-decoration: none;
}

li.last{
    border-right: none;
}

inline-block

  • display:inline-block可做列表布局，其中的类似于图片间的间隙小bug可以通过如下设置解决：
1
2
3
4
#outer{
    border: 3px dashed;
    word-spacing: -5px;
}

CSS 盒子模型

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

margin 外边距

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.d1{
    height: 300px;
    width: 300px;
    background-color: deeppink;
    
    /*margin-top:10px;*/
    /*margin-right:20px;*/
    /*margin-bottom:10px;*/
    /*margin-left:20px;*/

    /*顺序：上右下左*/
    margin: 10px 20px 10px 20px;

    /*常见居中*/
    margin: 0 auto;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
### 简写属性
margin:10px 20px 20px 10px；
        上边距为10px
        右边距为20px
        下边距为20px
        左边距为10px

margin:10px 20px 10px;
        上边距为10px
        左右边距为20px
        下边距为10px

margin:10px 20px;
        上下边距为10px
        左右边距为20px

margin:25px;
        所有的4个边距都是25px

padding内填充

1
2
3
4
5
6
.padding-test {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}
1
2
3
.padding-test {
  padding: 5px 10px 15px 20px;
}
1
2
3
4
5
6
顺序：上右下左
补充padding的常用简写方式：
1、提供一个，用于四边；
2、提供两个，第一个用于上－下，第二个用于左－右；
3、如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
4、提供四个参数值，将按上－右－下－左的顺序作用于四边；
1
2
3
4
5
6
7
8
.d1{
    height: 200px;
    width: 300px;
    background-color: deeppink;
    margin: 20px 30px;
    padding: 20px 30px;
    border: 10px solid black;
}

body标签的外边距

  • 有时候div的宽度我们设置为100%,依然发现不能占满整个页面的宽度，这是由于body存在8px的外边距(不同的浏览器分辨率有所区别可能),

  • 通用初始化,浏览器不设置外边距,解决屏幕铺满问题
1
2
3
4
*{
    margin: 0;
    padding: 0;
}

float 浮动

  • 浮动:div 配合 float浮动 来做 页面的布局
  • 在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
  • 关于浮动的两个特点：
    • 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
    • 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

浮动标签

  • left：向左浮动
  • right：向右浮动
  • none：默认值，不浮动 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
*{
    margin: 0;
    padding: 0;
}

.d1{
    height: 600px;
    width: 20%;
    background-color: red;
    float: left;
}

.d2{
    height: 600px;
    width: 80%;
    background-color: green;
    float: left;
}
1
2
3
4
5
a{
    /*内联标签设置float就会变成块级标签，可以设置长和宽*/
    width: 1000px;
    float: left;
}

clear 清除浮动

  • 重要，主要解决清除浮动的副作用（父标签塌陷问题）
  • clear属性规定元素的哪一侧不允许其他浮动元素。

出现塌陷演示

1
2
3
4
<div id="d0">
    <div class="d1">c1</div>
    <div class="d2">c2</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
*{
    margin: 0;
    padding: 0;
}

#d0{
    border: 1px solid black;
}

.d1,
.d2{
    /*如果父标签没有高度，float浮动会脱离父标签;*/
    float: left;
    height: 100px;
    width: 100px;
}

  • 标签塌陷：浮动的标签脱离文档流，不在原来的位置，通过清除浮动即左边不能有标签，在浮动标签下撑起整个父标签
  • 为什么父标签没有高度,因为父标签里没有内容
    1、因为里面儿子的div 都是浮动的 不能撑起父标签
    2、浮动元素 脱离文档流，不在原来的位置上
    3、在父标签的最后增加一个没有高度的设置，撑起整个父标签。

伪元素 撑起父标签

1
2
3
4
5
6
7
8
9
10
#d0:after{
    /*伪元素，在父标签上内部的最后,增加一个空内容,他的左边不能有浮动*/
    /*父标签就会被撑起来*/
    /*不浮动的元素在浮动元素的下面*/
    content: "";
    clear: left;
    display: block;
    /*左右都不能有浮动元素*/
    /*clear: both;*/
}

业界通用版

1
2
3
4
5
6
7
8
9
<div id="d1" class="clearfix">
    <div class="d2"></div>
    <div class="d2"></div>
    <div class="d2"></div>
    <div class="d2"></div>
    <!--<div class="d3"></div>-->
</div>

<div class="d4">我是正常的内容块</div>
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
*{
    margin: 0;
    padding: 0;
}

#d1{
    /*父div没有高度*/
    border: 1px solid black;
}

.d2{
    height: 50px;
    width: 50px;
    background-color: blue;
    border: 1px solid red;
    /*display: inline;*/
    /*向左浮动left*/
    float: left;
}

.d4{
    height: 200px;
    background-color: darkgreen;
}

/*业界规定清除浮动类*/
.clearfix:after{
    content: "";
    clear: both;
    display: block;
}

overflow 溢出属性

1
2
3
4
5
6
7
8
<div class="d1">
    国安国安北京国安
    国安国安北京国安
    国安国安北京国安
    国安国安北京国安国安国安北京国安
    国安国安北京国安国安国安北京国安国安国安北京国安国安国安北京国安国安国安北京国安国安国安北京国安
    国安国安北京国安国安国安北京国安
</div>
1
2
3
4
5
6
7
8
9
.d1{
    width: 120px;
    height: 120px;
    border: 1px solid red;
    /*给溢出的内容一个滚动条*/
    overflow: auto;
    /*超出的隐藏*/
    /*overflow: hidden;*/
}

制作圆形头像

1
2
3
<div class="header-img">
    <img src="xiaoxin.jpg">
</div>
1
2
3
4
5
6
7
8
9
10
11
12
.header-img{
    height: 120px;
    width: 120px;
    border: 2px solid antiquewhite;
    border-radius: 100%;
    /*内容溢出隐藏*/
    overflow: hidden;
}
img{
    /*max直到父标签的100%*/
    max-height: 100px;
}

position 定位

  • static:默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。
  • relative:相对定位相对于原来的位置来说
  • 绝对定位相对于最近的一个被定位过的祖宗标签，一直没有就是body,默认来说走左上角

relative 相对定位

  • 相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。
    有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。
    对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
  • 注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。
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
*{
    margin: 0;
    padding: 0;
}

.c1,
.c2,
.c3{
    height: 150px;
    width: 150px;
}

.c1{
    background-color: red;
}

.c2{
    background-color: green;
    /*相对定位，相对的是原来在的位置*/
    /*左边0,上面是c1的高*/
    position: relative;
    left: 400px;
    top:  150px;
}

.c3{
    background-color: blue;
}
1
2
3
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>

absolute 绝对定位

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

  • 重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。
    这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，
    那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。
    另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。

  • 父节点没有定位

1
2
3
4
5
<!-- 绝对定位，父节点没有定位，所有对照body -->
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
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
*{
    margin: 0;
    padding: 0;
}

.c1,
.c2,
.c3,
.c4{
    height: 150px;
    width: 150px;
}

.c1{
    background-color: red;
}

.c2{
    background-color: green;
    /*相对定位，相对的是原来在的位置*/
    /*左边0,上面是c1的高*/
    position: relative;
    left: 400px;
    top:  150px;
}

.c3{
    background-color: blue;
}

.c4{
    background-color: deeppink;
    position: absolute;
    top:  150px;
    left: 400px;
}

  • 父节点有定位
1
2
3
4
5
6
7
8
<!-- 绝对定位，父节点有定位，对照父节点 -->
<!-- 加了一父节点div class=c4-father -->
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4-father">
    <div class="c4"></div>
</div>
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
*{
    margin: 0;
    padding: 0;
}

.c1,
.c2,
.c3,
.c4,
.c4-father{
    height: 150px;
    width: 150px;
}

.c1{
    background-color: red;
}

.c2{
    background-color: green;
    /*相对定位，相对的是原来在的位置*/
    /*左边0,上面是c1的高*/
    position: relative;
    left: 400px;
    top:  150px;
}

.c3{
    background-color: blue;
}

.c4{
    background-color: deeppink;
    position: absolute;
    top:  150px;
    left: 400px;
}

.c4-father{
    position: relative;
    left: 150px;
    background-color: darkgoldenrod;
}

fixed固定

  • 经常用于返回顶部按钮

图片制作

  • 输入网址 图片大小 背景颜色 文字颜色 格式 最后文字内容
    https://dummyimage.com/600X400/695151/fff.png&text=leo

CSS 知识补充

小米导航条

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
*{
    margin: 0;
    padding: 0;
}

ul{
    list-style-type: none;

}

.nav-left li{
    float: left;
    color: white;
    padding: 10px;
}

.nav-right{
    float: right;
    padding: 10px;
}

.nav{
    background-color: black;
    padding: 5px 0;
}

/*清理左右两边浮动*/
.clearfix:after{
    content: "";
    display: block;
    clear: both;
}

.oa{
    width: 80%;
    margin: 0 auto;
}

a{
    color: white;
    text-decoration: none;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="nav ">
    <div class="oa clearfix">
        <div class="nav-left">
        <ul>
            <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>
            <li><a href="">西瓜</a></li>
            <li><a href="">荔枝</a></li>
        </ul>
    </div>
        <div class="nav-right">
        <a href="">登录</a>
        <a href="">注册</a>
        <a href="">购物车</a>
    </div>
    </div>
</div>

脱离文档流

  • 脱离文档流的3种方式
    • 浮动 float
    • 绝对定位 position: absolute
    • 固定定位 position: fixed
1
2
3
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
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
*{
    margin: 0;
    padding: 0;
}

.d1{
    height: 100px;
    width: 100px;
    background-color: deeppink;
}

.d2{
    height: 150px;
    width: 150px;
    background-color: green;
    /*脱离文档流 让绿色的框脱离文档原来的位置 */

    /*浮动*/
    /*float: right;*/

    /*相对定位: 标签还占有原来的位置*/
    /*position: relative;*/
    /*left: 400px;*/

    /*绝对定位: 没有就找左上角 蓝色框会顶上来,绿色的框脱离了原来的位置 ，脱离了文档流*/
    /*position: absolute;*/
    /*left: 400px;*/

    /*fixed 固定 蓝色也顶上来，绿色失去了原来的位置，脱离文档流 */
    position: fixed;
    right: 100px;
    top: 100px;
}

.d3{
    height: 200px;
    width: 200px;
    background-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
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
1.伪类和伪元素
    1.伪类
        1.:link
        2.:visited
        3.:hover(重要)
        4.:active
        5.:focus(input标签获取光标焦点)

    2.伪元素
        1. :first-letter
        2. :before(重要 在内容前面添加)
        3. :after(重要 在内容后面添加)

2.CSS属性
    1.字体：
        1. font-family
        2. font-size
        3. font-weight
    2.文本:
        1. text-align 对齐
        2. text-decoration 装饰(去除a标签的下划线)
        3. text-indent 首行缩进

    3.背景
        1. background-color 颜色
        2. background-image 图片 url() no-repeat

    4.颜色
        1. red 直接写名字
        2. #FF0000
        3. rgb(255,0,0) --> rgba(255,0,0,0)透明度[0-1]
        
    5.边框
        1. border-width 宽度
        2. border-style 样式
        3. border-color 颜色
        border 1px solid red;
        
    6.CSS盒子模型 4个部分
        1. content 内容的宽度和高度
        2. padding 内填充  调整内容和边框的距离
        3. border  边框
        4. margin  外边距  调整两个标签之间的距离 (注意两个挨着的标签margin取最大值)
        5. 注意：要习惯看浏览器console 窗口的那个盒子模型

    7.display 标签的展示形式
        1. inline
        2. block 菜单里的a标签可以设置成block
        3. inline-block
        4. none 不显示隐藏，但是不占位

    8.float 浮动
        1.多用于布局效果
            1. 顶部的导航条
            2. 页面的左右分栏 blog页面 左边20% 右边80%
            3. 任何标签都可以浮动，浮动之后都会变成块级标签（可以设置高和宽）
        2.float取值:
            1. left
            2. right
            3. none 默认

    9.clear 清除浮动的副作用 （内容溢出，父标签撑不起来）
        1. 结合伪元素实现
            .clearfix:after{
                content:"",
                display:"block",
                clear:both  (左右都清除)
            }
        2.clear 取值:
            1. left
            2. right
            3. both

    10.overflow
        1.标签的内容放不下(溢出)
        2.取值:
            1. hidden 隐藏
            2. scroll 滚轮
            3. inherit 继承父标签
            4. auto   自动
            5. scroll-x
            6. scroll-y
        例子:
            圆形头像例子
                1. overflow:hidden
                2. border-radius: 50%   边框圆角
    11.position 定位
        1. static 默认
        2. relative 相对定位
            # 相对于原来的位置
        3. absolute 绝对定位
            # 相对于已经定位过的前辈标签 没有就是body
        4.fixed 固定 返回顶部按钮实例

    补充:
    12.脱离文档流的3种方式
        1 浮动 float
        2 绝对定位 position: absolute
        3 固定定位 position: fixed

    13.opacity (不透明度)
        1. 和agba的区别:
            取值0~1 1是原有,0是全透明
            opacity 能改变元素 子标签的透明度 比如背景色和文字
            rgba 给谁写才能改变

    14.z-index
        1. 数值越大，越靠近你
        2. 只能作用于 定位过的元素标签
        3. 自定义模态框示例