web本质(二)

2021-04-28 16:29:13 阅读：136 来源： 互联网

CSS3

1、CSS3是什么

CSS3就是css语言，数字3是该语言的版本号；css语言开发的文件是以.css为后缀，通过在html文件中引入该css文件来控制html代码的样式（css语言代码也可以直接写在html文件中），采用的语言是级联样式表（Cascading Style Sheet），也属于标记语言。

2、CSS3如何学习

学习方向：从css代码书写位置、css选择器和css具体样式设置三部分进行学习

学习目的：完成页面样式布局和位置布局

3、css代码书写位置

css是来控制页面标签的样式，但是可以根据实际情况书写在不同的位置，放在不同位置有不同的专业叫法，可以分为行间式、内联式和外联式三种。

3-1 行间式

css样式书写在标签的style全局属性中，一条样式格式为样式名: 样式值单位;，可以同时出现多条样式

Copy<!-- 关键代码 -->
<!-- 给div标签设置宽高背景颜色 -->
<div style="width: 200px; height: 200px; background-color: orange;"></div>

3-2 内联式

css样式书写在head标签内的style标签中，样式格式为 css选择器 { 样式块 }，样式块由一条条样式组成

Copy<!-- 关键代码 -->
<head>
    <style>
        /* css语法下的注释语法 */
        /* 设置页面中所有h2标签宽高背景颜色 */
        h2 {
            width: 50px; 
            height: 50px; 
            background-color: orange;
        }
        /* 设置页面中所有h3标签宽高背景颜色 */
        h3 {
            width: 100px; 
            height: 100px; 
            background-color: red;
        }
    </style>
</head>
<body>
    <h2></h2>
    <h2></h2>
    <h3></h3>
    <h3></h3>
</body>

3-3 外联式

css样式的写法同内联式，但样式书写在css文件中，在html页面中用link标签引入css文件（建议在head标签中引入）

css文件夹下的my.css

Copy/* html文件会引入该css文件，设置所有引入了html文件中的所有p标签宽高背景颜色 */
p {
    width: 50px; 
    height: 50px; 
    background-color: orange;
}

Copy<!-- 关键代码 -->
<head>
    <!--
	rel="stylesheet"：引入的是层级样式表，也就是css文件
	type="text/css"：引入文件采用的是css语法书写文本类型代码
	href="css/my.css"：采用相当路径引入目标css文件
	-->
    <link rel="stylesheet" type="text/css" href="css/my.css">
</head>
<body>
    <!-- 该页面中的p标签样式都被my.css文件控制 -->
    <p></p>
    <p></p>
</body>

Copy<head>
    <link rel="stylesheet" type="text/css" href="css/my.css">
</head>
<body>
    <!-- 该页面中的p标签样式也都被my.css文件控制 -->
    <p></p>
    <p></p>
</body>

总结：

行间式控制样式最直接，但是样式多了直接导致页面可读性变差，且样式相同的标签样式也需要各自设置，复用性差；

内联式可以用一套样式块同时控制多个标签，具有样式的复用性，但是css样式代码还是写在html文件中，在项目开发下，代码量剧增，导致html文件变得臃肿，不利于代码维护；

外联式将css样式移到外部css文件中，不仅避免项目开发下html文件的臃肿问题，同时具有一套代码块控制多个标签，一个css样式文件服务于多个html两种复用性的好处，但是在学习阶段代码量不大时，样式不需要服务于多个html页面时，前面两种方式显然显得更便利。

在行间式中，写在标签内部的样式自然是用来控制该标签的样式，那写在内联式和外联式中的样式又是通过什么样的联系来控制对应页面中标签的样式呢？答案就是用于建立css与html之间联系的css选择器。

css选择器

css选择器本质就是css与html两种语法建立关联的特定标识符：

就是在css语法中，通过html中标签的某种名字，与html具体的标签建立关联，从而使写在对应css选择器后的css样式能控制html中关联的标签或标签们

而表示标签名字的方式有多种，每一种名字在css语法中都对应这一种特定标识符，下面我们就来详细介绍：

1、基础选择器

1-1 通配选择器

Copy/* 特定标识符 星号(*) -- 可以表示页面所有标签的名字 */
/* 通配选择器控制页面中所有的标签(不建议使用) */
* {
    /* 样式块 */
}
Copy<!-- 页面中所有标签都能被匹配 -->
<html></html>
<body></body>
<div></div>
<p></p>
<i></i>

1-2 标签选择器

Copy/* 特定标识符 标签名 */
/* 标签选择器控制页面中标签名为标签选择器名的所有标签*/
div { /* 控制页面中所有div标签的样式 */
    /* 样式块 */
}
Copy<!-- 页面中所有的div标签都能被匹配 -->
<div></div>
<div class="sup">
	<div id='inner'></div>
</div>

1-3 class选择器（提倡使用）

Copy/* 特定标识符 点(.) */
/* class选择器控制页面中标签全局属性class值为class择器名的所有标签*/
.box { /* 控制页面中所有标签全局属性class值为box标签的样式 */
    /* 样式块 */
}
Copy<!-- 页面中class属性值为box的标签都能被匹配 -->
<div class="box"></div>
<p class="box">
	<i class="box"></i>
</p>

1-4 id选择器

Copy/* 特定标识符 井号(#) */
/* id选择器控制页面中标签全局属性id值为id择器名的唯一标签*/
#box { /* 控制页面中唯一标签全局属性id值为box标签的样式 */
    /* 样式块 */
}
Copy<!-- 页面中id属性值为box的唯一标签备匹配，id具有唯一性：一个页面中所有标签的id属性值不能重名 -->
<div id="box"></div>

1-5 基础选择器优先级

在一个页面中，难免会出现页面中的某一个标签的某一个样式被不同的选择器下的样式同时控制，也就是出现了多种方式下对目标标签的同一样式出现了重复控制，那到底是哪种选择器下的样式最终控制了目标标签，一定会有一套由弱到强的控制级别规则，这种规则就叫做优先级，下面的例子就很好的解释了各种基础选择器的优先级关系：

Copy<head>
    <style>
        * {
            width: 50px;
            height: 50px;
            background-color: red;
            color: pink;
        }
        div {
            width: 60px;
            height: 60px;
            background-color: orange;
        }
        .box {
            width: 70px;
            height: 70px;
        }
        #ele {
            width: 80px;
        }
    </style>
</head>
<body>
    <div class="box" id="ele">文字内容</div>
</body>
<!--
1. 四种选择器都控制目标标签的宽度，最终目标标签宽度为80px，所以id选择器优先级最高
2. 三种选择器都控制目标标签的高度，最终目标标签宽度为70px，所以class选择器优先级其次
3. 二种选择器都控制目标标签的背景颜色，最终目标标签背景颜色为orange，所以标签选择器优先级再次
4. 只有一种选择器控制目标标签的字体颜色，目标标签字体颜色一定为pink
优先级：通配选择器 < 标签选择器 < class选择器 < id选择器
-->

2、复杂选择器

2-1 群组选择器

Copy/* 连接标识符 逗号(,) */
/* 群组选择器就是一套样式块同时控制用逗号连接(,)的所有目标标签 */
div, p, .box, #ele {
    /* 样式块 */
}
Copy<!-- 页面中所有div标签、所有p标签、所有class属性值为box、唯一id属性值为ele的标签都能被匹配 -->
<div>
	<div></div>
</div>
<p></p>
<p></p>
<i class="box"></i>
<span class="box"></span>
<b id="ele"></b>

2-2 后代选择器

Copy/* 连接标识符 空格( ) */
/* 后代选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */
body .box i { /*最后置位的选择器为i标签选择器，前置位body标签选择器、class值为box的class选择器都是修饰*/
    /* 样式块 */
}
Copy<!-- body标签内部的class属性值为box内部的i标签们都能被匹配，所以只匹配i标签，其他都是修饰 -->
<body>
    <div class='box'>
        <span><i></i></span><!-- body与.box是直接父子关系，.box与i是间接父子关系，能被匹配 -->
    </div>
    <div>
        <span class='box'><i></i></span><!-- body与.box是间接父子关系，.box与i是直接父子关系，能被匹配 -->
    </div>
</body>
<!-- 标签的嵌套结构形成父子代标签，后代选择器可以匹配直接父子关系或间距父子关系形成的层次，所以两个i标签均能被匹配 -->

2-3 子代选择器

Copy/* 连接标识符 大于号(>) */
/* 子代选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */
body>.box>i { /*最后置位的选择器为i标签选择器，前置位body标签选择器、class值为box的class选择器都是修饰*/
    /* 样式块 */
}
Copy<!-- body>.box>i：同理body和.box都是修饰位，i才是目标匹配位 -->
<body>
    <div class='box'>
        <span><i></i></span><!-- body与.box是直接父子关系，.box与i是间接父子关系，不能被匹配 -->
    </div>
    <div>
        <span class='box'><i></i></span><!-- body与.box是间接父子关系，.box与i是直接父子关系，不能被匹配 -->
    </div>
    <div class='box'>
        <i></i><!-- body与.box是直接父子关系，.box与i是直接父子关系，能被匹配 -->
    </div>
</body>
<!-- 子代选择器只能匹配直接父子关系，所以只能匹配最后一个i标签 -->

2-4 兄弟选择器

Copy/* 连接标识符 波浪号(~) */
/* 兄弟选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */
#ele~div~i { /*最后置位的选择器为i标签选择器，前置位id值为ele的id选择器、div标签选择器都是修饰*/
    /* 样式块 */
}
Copy<!-- #ele~div~i：同理#ele和div都是修饰位，i才是目标匹配位 -->
<h3 id="ele"></h3>
<div></div><!-- #ele与div是直接兄弟关系 -->
<i></i><!-- div与i是直接兄弟关系，能被匹配 -->
<div></div><!-- #ele与div是间距兄弟关系 -->
<i></i><!-- div与i是直接兄弟关系，能被匹配 -->
<!-- 标签的上下结构形成兄弟标签，兄弟选择器可以匹配直接兄弟关系或间距兄弟关系形成的层次，所以两个i标签均能被匹配 -->

2-5 相邻选择器

Copy/* 连接标识符 加号(+) */
/* 相邻选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */
#ele+div+i { /*最后置位的选择器为i标签选择器，前置位id值为ele的id选择器、div标签选择器都是修饰*/
    /* 样式块 */
}
Copy<!-- #ele+div+i：同理#ele和div都是修饰位，i才是目标匹配位 -->
<h3 id="ele"></h3>
<div></div><!-- #ele与div是直接兄弟关系 -->
<i></i><!-- div与i是直接兄弟关系，能被匹配 -->
<div></div><!-- #ele与div是间距兄弟关系 -->
<i></i><!-- div与i是直接兄弟关系，不能被匹配 -->
<!-- 相邻选择器只能匹配直接兄弟关系，所以只能匹配第一个i标签 -->

2-6 交叉选择器

Copy/* 连接标识符 紧挨着(没有任何连接符) */
/* 交叉选择器本质上是对一个目标标签的多个名字的同时表示 */
div.box#ele.tag { /*div是标签名，box和tag都是class属性值，ele是id属性值*/
    /* 样式块 */
}
Copy<!-- 标签名div、class名box及tag和id名ele都是对一个目标标签的修饰空格隔开
<!-- class属性拥有多个值时，多个值之间用空格隔开 -->
<div class="box tag" id="ele"></div>

2=7 基础选择器优先级

简单选择器存在优先级，优先级的前提就是不同选择器同时控制同一标签的同一属性，那么在复杂选择器下，一定会出现这种同时控制同一标签的同一属性情况，那复杂选择器的优先级又是如何来规定的呢？

Copy1. 复杂选择器的种类并不会影响优先级
	-- 后代：div #ele  |  兄弟：div~#ele  |  交叉：div#ele  优先级一样
2. 复杂选择器本质是通过同类型(简单选择器)的个数来确定优先级
	-- 三层标签选择器后代：body div i  大于  两层标签选择器后代：div i  |  body i
3. 简单选择器的优先级起关键性作用，也就是一个id选择器要大于无限个class选择器，一个class选择器要大于无限个标签选择器
	-- id选择器：#i 大于 n层class选择器：.box .i
	-- class选择器：.box 大于 n层标签选择器：body div

3、总结

选择器是一个庞大的家族，还有很多css选择器等待大家自己去挖掘，掌握已上选择器也已足够帮助我们完成简单前端开发了

我们有了css与html建立联系的选择器基础，那么建立联系后，css语言除了控制标签的宽高背景颜色字体颜色外，还有哪些丰富的样式控制呢？下面我们就一起来学习一下具体的样式设置。

css基础样式

1、文字样式

文字样式是用来控制字体或文本的显示方式的。

Copy/*字族：STSong作为首选字体, 微软雅黑作为备用字体*/
font-family: "STSong", "微软雅黑";
/*字体大小*/
font-size: 40px;
/*字重：100、200、300、400、500、600、700、800、900，值越大字越粗*/
font-weight: 900;
/*行高: 字体文本默认在行高中垂直居中显示*/
line-height: 200px;
/*字划线: overline(上划线) | line-through(中划线) | underline(下划线) | none(取消划线)  */
text-decoration: overline;
/*字间距*/
letter-spacing: 2px;
/*词间距*/
word-spacing: 5px;
/*首行缩进：1em相当于一个字的宽度*/
text-indent: 2em;
/*字体颜色*/
color: red;
/* 文本水平排列方式：left(水平居左) | center(水平居中) | right(水平居右) */
text-align: center;

2、背景样式

标签的背景除了背景颜色还可以有背景图片，而背景图片又有很多相关设置。

Copy/*背景图片：url函数可以链接网络或本地图片*/
background-image: url('https://www.baidu.com/favicon.ico');
/*平铺:repeat-x(x轴平铺) | repeat-y(y轴平铺) | repeat(双轴平铺) | no-repeat*/(不平铺)
background-repeat: no-repeat;
/*x轴背景图片位置偏移：正值往右偏移，负值往左偏移*/
background-position-x: 10px;
/*y轴背景图片位置偏移：正值往下偏移，负值往上偏移*/
background-position-y: 10px;

3、显示样式

HTML5预定义了很多系统标签，大家学习了html标签部分的时候，肯定注意到了，不同的标签在页面中的显示效果是不一样的，比如两个div之间默认会换行显示，而两个span标签却在一行来显示，到底是什么样式控制着标签这种显示效果呢，那就是显示样式display来控制的。

display: block;

Copy<div style="display: block;"></div>
<span style="display: block;"></span>
<i style="display: block;"></i>
<!--
1. 任意标签的display样式值均可以设置为block，那么该标签就会以block方式来显示
2. block方式显示的标签，默认会换行
3. block方式显示的标签，支持所有的css样式
4. block方式显示的标签，可以嵌套所有显示方式的标签
注：标题标签和段落标签虽然也是block显示类标签，但不建议嵌套block显示类标签
-->

display: inline;

Copy<div style="display: inline;"></div>
<span style="display: inline;"></span>
<i style="display: inline;"></i>
<!--
1. 任意标签的display样式值均可以设置为inline，那么该标签就会以inline方式来显示
2. inline方式显示的标签，默认不会换行
3. inline方式显示的标签，不支持所有css样式(如：不支持手动设置该标签的宽高)
4. inline方式显示的标签，建议只用来嵌套所有inline显示方式的标签
-->

display: inline-block;

Copy<div style="display: inline-block;"></div>
<span style="display: inline-block;"></span>
<i style="display: inline-block;"></i>
<!--
1. 任意标签的display样式值均可以设置为inline-block，那么该标签就会以inline-block方式来显示
2. inline-block方式显示的标签，具有inline特性，默认不换行
3. inline-block方式显示的标签，也具备block特征，支持所有css样式
4. inline-block方式显示的标签，不建议嵌套任意显示方式的标签
-->

css基础布局

1、布局相关的标签

<div></div> 定义文档中的分区或节
<span></span> 这是一个行内元素，没有任何意义
<header></header> HTML5新增 定义 section 或 page 的页眉
<footer></footer> HTML5新增 定义 section 或 page 的页脚
<main></main> HTML5新增 标签规定文档的主要内容。<main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。IE都不识别
<nav></nav> HTML5新增 表示链接导航部分如果文档中有“前后”按钮，则应该把它放到元素中
<section></section> HTML5新增 定义文档中的节通常不推荐那些没有标题的内容使用section
<article></article> HTML5新增 定义文章论坛帖子报纸文章博客条目用户评论
<aside></aside> HTML5新增 相关内容，相关辅助信息，如侧边栏

2、盒子模型

2-1 什么是盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

Margin(外边距) 清除边框外的区域，外边距是透明的。
Border(边框) 围绕在内边距和内容外的边框。
Padding(内边距) 清除内容周围的区域，内边距是透明的。
Content(内容) 盒子的内容，显示文本和图像。

2-2 块级元素和内联元素(行内元素)

块级元素

总是在新行上开始，占据一整行；
高度，行高以及外边距和内边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度
它可以容纳内联元素和其他块元素。

内联元素

和其他元素都在一行上；
高，行高及外边距和内边距部分可改变；
宽度只与内容有关；
行内元素只能容纳文本或者其他行内元素。
外边界只能对左右起作用，内边距都起作用

块级元素和内联元素的转换

Copydisplay: block | inline | inline-block

2-3 盒子模型之间的关系

document树

父元素子元素后代元素祖先元素兄弟元素

标准文档流

行内元素不占据单独的空间，依附于块级元素，行内元素没有自己的区域。它同样是DOM树中的一个节点，在这一点上行内元素和块级元素是没有区别的。
块级元素总是以块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右自动伸展，直到包含它的元素的边界，在水平方向不能并排。

盒子在标准流中的定位原则

行内元素之间的水平margin
块级元素之间的竖直margin (margin的塌陷)
嵌套盒子之间的margin, (子元素父元素margin合并)
将margin设置为负值

盒子模型相关CSS属性

布局属性

display

Copy| 值           | 描述                                                 |
| ------------ | ---------------------------------------------------- |
| none         | 此元素不会被显示。                                   |
| block        | 此元素将显示为块级元素，此元素前后会带有换行符。     |
| inline       | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| inline-block | 行内块元素。（CSS2.1 新增的值）                      |

float

Copy| 值      | 描述                                                 |
| ------- | ---------------------------------------------------- |
| left    | 元素向左浮动。                                       |
| right   | 元素向右浮动。                                       |
| none    | 默认值。元素不浮动，并会显示在其在文本中出现的位置。 |
| inherit | 规定应该从父元素继承 float 属性的值。                |

clear

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

visibility

Copy| 值       | 描述                                                         |
| -------- | ------------------------------------------------------------ |
| visible  | 默认值。元素是可见的。                                       |
| hidden   | 元素是不可见的。                                             |
| collapse | 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。 |
| inherit  | 规定应该从父元素继承 visibility 属性的值。                   |

overflow

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

overflow-x
overflow-y

尺寸

width / max-width / min-width
height / max-height / min-height

内补白

padding / padding-left / padding-right / padding-top / padding-bottom

外边距

margin
margin-left
margin-right
margin-top
margin-bottom

3、浮动

3-1 什么是浮动

CSS的Float(浮动)，元素可以围绕其他元素向左或向右被推动
设置浮动，脱离普通文档流
浮动元素都会变为块级元素
如果不设置宽度，会尽可能的窄
浮动元素之后的元素将围绕它浮动元素之前的元素将不会受到影响。

3-2 设置浮动

Copy.item {
    float:left
}
.item {
    float:right
}
/*float 属性的默认值是 none  表示没有浮动*/

3-3 清除浮动

浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。

因此，创建浮动框可以使文本围绕图像：

要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。

Copyclear: both
clear: left
clear: right

3-4 浮动实验

实现以下实现

设置第一浮动的div
设置第2个浮动div
设置第3个浮动div
改变第三个浮动方向
改变第二个浮动方向
全部向左浮动,增加第一个的高度
使用clear属性清楚浮动的影响
扩展盒子的高度 (元素高度和浮动的元素)
段落首字母浮动
图片浮动
简单浮动布局

3-5 浮动相关CSS属性总结

float 值: none(默认) /left /right
clear 值: none(默认) /both /left /right

3-6 浮动布局小案例

4、定位

4-1 相对定位

使用相对定位的盒子,会相对于它原来的位置,通过偏移指定的距离,到达新的位置
使用相对定位的盒子,仍在标准流中,它对父块好兄弟盒子没有任何影响

Copy.box {
    position: relative;
    top: 10px;
    left: 20px;
}

4-2 绝对定位

使用绝对定位的盒子以它"最近"的一个"已经定位"的"祖先元素"为基准进行偏移. 如果没有已经定位的"祖先元素", 那么会以浏览器窗口为基准进行定位
绝对定位的框从标准流中脱离,这意味着它们对其后的兄弟盒子的定位没有影响,其他的盒子就好像这个盒子不存在一样

Copy.box {
    position: absolute;
    top: 10px;
    left: 20px
}

4-3 固定定位

以浏览器窗口为基准
窗口滚动时,依然保持位置不变

Copy.box {
    position: fixed;
    top: 10px;
    left: 20px;
}

4-4 空间位置

使用css属性 z-index设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
z-index 仅能在定位元素上奏效

4-5 定位相关CSS属性总结

position static(默认值) /relative /position /fixed
top
left
right
bottom
对于它原来的位置,通过偏移指定的距离,到达新的位置
使用相对定位的盒子,仍在标准流中,它对父块好兄弟盒子没有任何影响

Copy.box {
    position: relative;
    top: 10px;
    left: 20px;
}

4-2 绝对定位

使用绝对定位的盒子以它"最近"的一个"已经定位"的"祖先元素"为基准进行偏移. 如果没有已经定位的"祖先元素", 那么会以浏览器窗口为基准进行定位
绝对定位的框从标准流中脱离,这意味着它们对其后的兄弟盒子的定位没有影响,其他的盒子就好像这个盒子不存在一样

Copy.box {
    position: absolute;
    top: 10px;
    left: 20px
}

4-3 固定定位

以浏览器窗口为基准
窗口滚动时,依然保持位置不变

Copy.box {
    position: fixed;
    top: 10px;
    left: 20px;
}

4-4 空间位置

使用css属性 z-index设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
z-index 仅能在定位元素上奏效

4-5 定位相关CSS属性总结

position static(默认值) /relative /position /fixed
top
left
right
bottom
z-index auto(默认值)/数字

标签：web,样式,标签,元素,本质,Copy,选择器,css
来源： https://blog.csdn.net/weixin_35688430/article/details/116236789

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

web本质(二)

CSS3

1、CSS3是什么

2、CSS3如何学习

3、css代码书写位置

3-1 行间式

3-2 内联式

3-3 外联式

总结：

css选择器

1、基础选择器

1-1 通配选择器

1-2 标签选择器

1-3 class选择器（提倡使用）

1-4 id选择器

1-5 基础选择器优先级

2、复杂选择器

2-1 群组选择器

2-2 后代选择器

2-3 子代选择器

2-4 兄弟选择器

2-5 相邻选择器

2-6 交叉选择器

2=7 基础选择器优先级

3、总结

css基础样式

1、文字样式

2、背景样式

3、显示样式

css基础布局

1、布局相关的标签

2、盒子模型

2-1 什么是盒子模型

2-2 块级元素和内联元素(行内元素)

块级元素

内联元素

块级元素和内联元素的转换

2-3 盒子模型之间的关系

document树

标准文档流

盒子在标准流中的定位原则

盒子模型相关CSS属性

布局属性

尺寸

内补白

外边距

3、浮动

3-1 什么是浮动

3-2 设置浮动

3-3 清除浮动

3-4 浮动实验

3-5 浮动相关CSS属性总结

3-6 浮动布局小案例

4、定位

4-1 相对定位

4-2 绝对定位

4-3 固定定位

4-4 空间位置

4-5 定位相关CSS属性总结

4-2 绝对定位

4-3 固定定位

4-4 空间位置

4-5 定位相关CSS属性总结