一、选择器
作用：选择页面上的某一个后者某一类元素
基本选择器
1.标签选择器
格式：标签{}
666
1 2 3 4 5 6 7 2.类选择器 格式：.类名{}666
1 2 3 4 5 6 3.id选择器 格式：#名称{}666
1 2 3 4 5 6 高级选择器（只说一个id+class组合） 格式：id
淘宝
链接
网页
png
jpg
链2
pdf
pdf2
doc
doc2
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
二、美化
1.字体 font
font-family：字体
font-size：字体大小
font-weight：字体粗细
color：字体颜色
2.文本样式 text
文本对齐方式：text-align：center
首行缩进: text-indent：2em
行高: line-height：300px
下划线:text-decoration
text-decoration:underline /下划线/
text-decoration:line-through /中划线/
text-decoration:overline /上划线/
text-decoration:none /超链接去下划线/
图片、文字水平对齐 （行内元素对齐）
img,span{
vertical-align: middle;
}
1
2
3
6.文本阴影
文本阴影效果！
1
2
3
4
5
6
7
3.超链接伪类
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
列表 ui li
有序 ui li
无序 ol li
list-style-type: circle
list-style-type: square
list-style-type: upper-roman
list-style-type: lower-alpha
背景
1.背景颜色 background-color
2.透明度 opacity
3.背景图片 background-image: url("name.jpg")
三、盒子模型
布局三大核心：盒子模型、浮动、定位
1.元素的显示模式
1.块元素（block）
又称：块级元素 特点：
在页面中独占一行，不会与任何元素共用一行，是从上到下排列的。
默认宽度：撑满父元素。
默认高度：由内容撑开。
可以通过 CSS 设置宽高。
主体结构标签：
排版标签：
~
、
、
、
、
列表标签：
- 、
- 、
- 、
- 、
- 、
-
表格相关标签：、
2.行内元素（inline）
又称：内联元素 特点:
在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排 列。
默认宽度：由内容撑开。
默认高度：由内容撑开。
无法通过 CSS 设置宽高。
文本标签：
、 、 、 、 、 、
、 、、
3.行内块元素（inline-block）
又称：内联块元素 特点：
在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排 列。
默认宽度：由内容撑开。
默认高度：由内容撑开。
可以通过 CSS 设置宽高。
图片：
单元格：
表单控件： 、 <select> 、 <button><br>框架标签： <iframe><br>2.盒子模型</p> <p>网页布局过程：</p> <p>先准备好相关的网页元素，网页元素基本都是盒子 Box 。<br>利用 CSS 设置好盒子样式，然后摆放到相应位置。 （难点）<br>往盒子里面装内容<br>3.盒子模型（Box Model）组成</p> <p>1.边框<br> border : border-width || border-style || border-color;<br>1</p> <p>边框样式 border-style 可以设置如下值：</p> <p>none：没有边框即忽略所有边框的宽度（默认值）<br>solid：边框为单实线(最为常用的)<br>dashed：边框为虚线<br>dotted：边框为点线<br>2.内边距（padding）<br>和写属性</p> <p>分写属性</p> <p>3.外边距（margin）</p> <p>margin 注意事项：</p> <p>子元素的 margin ，是参考父元素的 content 计算的。（因为是父亲的 content 中承装着 子元素）<br>上 margin 、左 margin ：影响自己的位置；下 margin 、右 margin ：影响后面兄弟元素 的位置。<br>块级元素、行内块元素，均可以完美地设置四个方向的 margin ；但行内元素，左右 margin 可以完美设置，上下 margin 设置无效。<br>margin 的值也可以是 auto ，如果给一个块级元素设置左右 margin 都为 auto ，该块级 元素会在父元素中水平居中。<br>margin 的值可以是负值<br>4.处理内容溢出</p> <p>注意：</p> <p>overflow-x 、 overflow-y 不能一个是 hidden ，一个是 visible ，是实验性属性，不 建议使用。<br>overflow 常用的值是 hidden 和 auto ，除了能处理溢出的显示方式，还可以解决很多 疑难杂症。<br>5.布局小技巧（重点）<br>行内元素、行内块元素，可以被父元素当做文本处理。<br>即：可以像处理文本对齐一样，去处理：行内、行内块在父元素中的对齐。<br>例如： text-align 、 line-height 、 text-indent 等。</p> <p>如何让子元素，在父亲中 水平居中：<br>若子元素为块元素，给子元素加上： margin:0 auto<br>若子元素为行内元素、行内块元素，给父元素加上：text-align:center</p> <p>如何让子元素，在父亲中 垂直居中：<br>若子元素为块元素，给子元素加上： margin-top ，值为：父元素 content －子元素盒子(margin+border+padding) / 2。<br>若子元素为行内元素、行内块元素： 让父元素的 line-height=height（父元素高度），每个子元素都加上： vertical-align:middle 。<br>补充：若想绝对垂直居中，父元素 font-size 设置为 0 。</p> <p>不知到父元素高度，子元素在父元素垂直居中<br>通过数学计算calc()，计算出父元素高度 ：用100%视口高度-已经占用的高度 100vh - height 然后同上</p> <p>height: calc(100vh - 70px);<br>1<br>6.常用布局练习<br>块元素水平垂直居中</p> <pre><code> <style> .outer{ height: 400px; width: 400px; background-color: gray; overflow: hidden; } .inner{ height: 100px; width: 200px; padding: 10px; border: 10px solid red; background-color: orange; margin: 130px auto 0; text-align: center; line-height: 100px; } </style> <div class="outer"> <div class="inner"> inner </div> </div> </code></pre><p>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>行内元素水平垂直居中</p> <pre><code><style> .outer{ height: 400px; width: 400px; background-color: pink; text-align: center; line-height: 400px; } </style> <div class="outer"> <span style="background-color: salmon;height: 20px">出来玩</span> </div> </code></pre><p>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>行元素、行内块绝对居中</p> <pre><code><style> .outer{ height: 400px; width: 400px; background-color: salmon; text-align: center; line-height: 400px; font-size: 0; } .outer img{ vertical-align: middle; height: 100px; width: 100px; } .outer span{ background-color: #35BAF6; vertical-align: middle; font-size: 40px; } </style> <div class="outer"> <span style="">头像：</span> <img src="../image/小姐姐.gif"> </div> </code></pre><p>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>背景图片铺满<br> html, body{<br> width: 100%;<br> height: 100%;<br> }<br> body{<br> background: url("../image/bg.jpg");<br> background-repeat: no-repeat; /<em>图片不重复</em>/<br> background-size: cover; /<em>图片铺满整个视口</em>/<br> }<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>四、浮动 float<br>场景：布局</p> <p>1.简介<br>在最初，浮动是用来实现文字环绕图片效果的，现在浮动是主流的页面布局方式之一。</p> <p>2.元素浮动后的特点<br>🤢脱离文档流。<br>😊不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽<br>高。<br>😊不会独占一行，可以与其他元素共用一行。<br>😊不会 margin 合并，也不会 margin 塌陷，能够完美的设置四个方向的 margin 和 padding 。<br>😊不会像行内块一样被当做文本处理（没有行内块的空白问题）。<br>3.解决浮动产生的影响<br>3.1元素浮动后会有哪些影响<br>对兄弟元素的影响： 后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟 无影响。<br>对父元素的影响： 不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。</p> <p>3.2 解决浮动产生的影响（清除浮动）<br>解决方案：</p> <p>方案一： 给父元素指定高度。<br>方案二： 给父元素也设置浮动，带来其他影响。<br>方案三： 给父元素设置 overflow:hidden 。<br>方案四： 在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置 clear:both 。<br>方案五： 给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同。===> 推荐使用<br>.parent::after {<br>content: "";<br>display: block;<br>clear:both;<br>}<br>1<br>2<br>3<br>4<br>5<br>布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动。</p> <p>3.3 浮动小练习<br>整体效果如下：</p> <p>盒子分析</p> <pre><code><style> * { margin: 0; padding: 0; } .float-left { float: left; } .float-right{ float: right; } .clear-float::after{ content: ''; display: block; clear: both; } .container { text-align: center; width: 960px; margin: 0 auto; } .header { height: 80px; width: 960px; text-align: center; line-height: 80px; } .log{ width: 200px; margin-right: 10px; } .banner1{ width: 540px; margin-right: 10px; } .banner2{ width: 200px; } .log,.banner1,.banner2{ background-color: #ccc; height: 80px; } .menu{ margin-top: 10px; background-color: #CCC; line-height: 30px; } .content{ width: 960px; } .item1,.item2{ width: 368px; height: 198px; border: 1px solid black; margin-top: 10px; margin-right: 10px; line-height: 198px; } .item3,.item4,.item5,.item6{ height: 198px; width: 178px; margin-right: 10px; margin-top: 10px; border: 1px solid black; line-height: 198px; } .item7,.item8,.item9{ border: 1px solid black; height: 128px; width: 198px; margin-top: 10px; line-height: 128px; } .footer{ background-color: #ccc; width: 960px; height: 60px; margin-top: 10px; line-height: 60px; } </style> <div class="container"> <!--头--> <div class="header clear-float"> <div class="log float-left">log</div> <div class="banner1 float-left">banner</div> <div class="banner2 float-left">banner</div> </div> <!--菜单--> <div class="menu">菜单</div> <!--内容--> <div class="content clear-float"> <!--左--> <div class="content-left float-left"> <!--上--> <div class="left-up clear-float"> <div class="item1 float-left">栏目一</div> <div class="item2 float-left">栏目二</div> </div> <!--下--> <div class="left-down clear-float"> <div class="item3 float-left">栏目三</div> <div class="item4 float-left">栏目四</div> <div class="item5 float-left">栏目五</div> <div class="item6 float-left">栏目六</div> </div> </div> <!--右--> <div class="content-right clear-float"> <div class="item7 float-left">栏目七</div> <div class="item8 float-left">栏目八</div> <div class="item9 float-left">栏目九</div> </div> </div> <!--页脚--> <div class="footer">页脚</div> </div> </code></pre><p>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>31<br>32<br>33<br>34<br>35<br>36<br>37<br>38<br>39<br>40<br>41<br>42<br>43<br>44<br>45<br>46<br>47<br>48<br>49<br>50<br>51<br>52<br>53<br>54<br>55<br>56<br>57<br>58<br>59<br>60<br>61<br>62<br>63<br>64<br>65<br>66<br>67<br>68<br>69<br>70<br>71<br>72<br>73<br>74<br>75<br>76<br>77<br>78<br>79<br>80<br>81<br>82<br>83<br>84<br>85<br>86<br>87<br>88<br>89<br>90<br>91<br>92<br>93<br>94<br>95<br>96<br>97<br>98<br>99<br>100<br>101<br>102<br>103<br>104<br>105<br>106<br>107<br>108<br>109<br>110<br>111<br>112<br>113<br>114<br>115<br>116<br>117<br>118<br>119<br>五、定位 position<br>1.相对定位<br>1.1 如何设置相对定位？<br>给元素设置 position:relative 即可实现相对定位。<br>可以使用 left 、 right 、 top 、 bottom四个属性调整位置<br>1.2 相对定位的参考点在哪里？<br>相对自己原来的位置<br>1.3 相对定位的特点：<br>1.不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。</p> <ol> <li>定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。</li> </ol> <p>默认规则是：<br>定位的元素会盖在普通元素之上。<br>都发生定位的两个元素，后写的元素会盖在先写的元素之上。<br>3.left 不能和 right 一起设置， top 和 bottom 不能一起设置。</p> <ol> <li>相对定位的元素，也能继续浮动，但不推荐这样做。</li> <li>相对行为的元素，也能通过 margin 调整位置，但不推荐这样做。</li> </ol> <p>注意：绝大多数情况下，相对定位，会与绝对定位配合使用。 （子元素绝对定位，父元素相对定位——子绝父相）</p> <p>2.绝对定位<br>2.1 如何设置绝对定位？<br>给元素设置 position: absolute 即可实现绝对定位。<br>可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。<br>2.2 绝对定位的参考点在哪里？<br>参考它的包含块。<br>什么是包含块？</p> <p>对于没有脱离文档流的元素：包含块就是父元素；<br>对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都 没定位，那包含块就是整个页面）<br>2.3 绝对定位元素的特点：<br>脱离文档流，会对后面的兄弟元素、父元素有影响。<br>left 不能和 right 一起设置， top 和 bottom 不能一起设置。<br>绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主。<br>绝对定位的元素，也能通过 margin 调整位置，但不推荐这样做。<br>无论是什么元素（行内、行内块、块级）设置为绝对定位之后，都变成了定位元素。<br>何为定位元素？ —— 默认宽、高都被内容所撑开，且能自由设置宽高。</p> <p>3.固定定位<br>3.1 如何设置为固定定位？<br>给元素设置 position: fixed 即可实现固定定位。<br>可以使用 left 、 right 、 top 、 bottom四个属性调整位置。<br>3.2 固定定位的参考点在哪里？<br>参考它的视口<br>什么是视口？—— 对于 PC 浏览器来说，视口就是我们看网页的那扇“窗户”。</p> <p>3.3 固定定位元素的特点<br>脱离文档流，会对后面的兄弟元素、父元素有影响。<br>left 不能和 right 一起设置， top 和 bottom 不能一起设置。<br>固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主。<br>固定定位的元素，也能通过 margin 调整位置，但不推荐这样做。<br>无论是什么元素（行内、行内块、块级）设置为固定定位之后，都变成了定位元素。</p> <ol> <li>粘性定位<br>4.1 如何设置为粘性定<br>给元素设置 position:sticky 即可实现粘性定位。<br>可以使用 left 、 right 、 top 、 bottom 四个属性调整位置，不过最常用的是 top 值。<br>4.2 粘性定位的参考点在哪里？<br>离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先。</li> </ol> <p>4.3 粘性定位元素的特点<br>不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。<br>最常用的值是 top 值。<br>粘性定位和浮动可以同时设置，但不推荐这样做。<br>粘性定位的元素，也能通过 margin 调整位置，但不推荐这样做。<br>粘性定位和相对定位的特点基本一致，不同的是：粘性定位可以在元素到达某个位置时将其固定。</p> <p>5.定位层级<br>定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。<br>如果位置发生重叠，默认情况是：后面的元素，会显示在前面元素之上。<br>可以通过 css 属性 z-index 调整元素的显示层级。<br>z-index 的属性值是数字，没有单位，值越大显示层级越高。<br>只有定位的元素设置 z-index 才有效。<br>如果 z-index 值大的元素，依然没有覆盖掉 z-index 值小的元素，那么请检查其包含块的层级。</p> <ol> <li>定位的特殊应用<br>注意：</li> </ol> <p>发生固定定位、绝对定位后，元素都变成了定位元素，默认宽高被内容撑开，且依然可以设 置宽高。<br>发生相对定位后，元素依然是之前的显示模式。<br>以下所说的特殊应用，只针对 绝对定位 和 固定定位 的元素，不包括相对定位的元素。<br>让定位元素的宽充满包含块<br>块宽想与包含块一致，可以给定位元素同时设置 left 和 right 为 0 。<br>高度想与包含块一致， top 和 bottom 设置为 0 。<br>让定位元素在包含块中居中<br>方案一：<br>left:0;<br>right:0;<br>top:0;<br>bottom:0;<br>margin:auto;<br>1<br>2<br>3<br>4<br>5<br>方案二：</p> <p>left: 50%;<br>top: 50%;<br>margin-left: 负的宽度一半;<br>margin-top: 负的高度一半;<br>1<br>2<br>3<br>4<br>注意：该定位的元素必须设置宽高！！！</p> <p>七、布局<br>1.版心<br>在 PC 端网页中，一般都会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这是网页 的版心。<br>版心的宽度一般是 960 ~1200 像素之间。<br>版心可以是一个，也可以是多个。</p> <ol> <li>常用布局名词<br>位置 名词<br>顶部导航条 topbar<br>页头 header 、 page-header<br>导航 nav 、 navigator 、 navbar<br>搜索框 search 、 search-box<br>横幅、广告、宣传图 banner<br>主要内容 content 、 main<br>侧边栏 aside 、 sidebar<br>页脚 footer 、 page-footer<br>八、伸缩盒模型 （display：flex布局）<br>1.伸缩容器、伸缩项目<br>伸缩容器： 开启了 flex 的元素，就是：伸缩容器。<br>给元素设置： display:flex 或 display:inline-flex ，该元素就变为了伸缩容器。<br>display:inline-flex 很少使用，因为可以给多个伸缩容器的父容器，也设置为伸缩 容器。<br>一个元素可以同时是：伸缩容器、伸缩项目。<br>伸缩项目：伸缩容器所有子元素自动成为了：伸缩项目。<br>仅伸缩容器的子元素成为了伸缩项目，孙子元素、重孙子元素等后代，不是伸缩项目。<br>无论原来是哪种元素（块、行内块、行内），一旦成为了伸缩项目，全都会“块状化”。<br>2.主轴与侧轴<br>主轴： 伸缩项目沿着主轴排列，主轴默认是水平的，默认方向是：从左到右（左边是起点，右边 是终点）。<br>侧轴： 与主轴垂直的就是侧轴，侧轴默认是垂直的，默认方向是：从上到下（上边是起点，下边<br>是终点）。<br>3.主轴方向<br>属性名： flex-direction<br>常用值如下：<br>1.row ：主轴方向水平从左到右 —— 默认值<br>2.row-reverse ：主轴方向水平从右到左。<br>3.column ：主轴方向垂直从上到下。<br>4.column-reverse ：主轴方向垂直从下到上。</li> </ol> <p>注意：改变了主轴的方向，侧轴方向也随之改变。</p> <p>4.主轴的换行方式<br>属性名： flex-wrap</p> <p>常用值如下：</p> <p>nowrap ：默认值，不换行。</p> <p>wrap ：自动换行，伸缩容器不够自动换行。</p> <p>wrap-reverse ：反向换行。</p> <p>5.flex-flow<br>flex-flow 是一个复合属性，复合了 flex-direction 和 flex-wrap 两个属性。 值没有顺序要求<br>flex-flow: row wrap;<br>1<br>6.主轴对齐方式<br>属性名： justify-content</p> <p>常用值如下：</p> <p>flex-start ：主轴起点对齐。—— 默认值<br>flex-end ：主轴终点对齐。<br>center ：居中对齐<br>space-between ：均匀分布，两端对齐（最常用）。<br>space-around ：均匀分布，两端距离是中间距离的一半。<br>space-evenly ：均匀分布，两端距离与中间距离一致。</p> <p>7.侧轴对齐方式<br>7.1 一行的情况<br>所需属性： align-items<br>常用值如下：<br>flex-start ：侧轴的起点对齐。<br>flex-end ：侧轴的终点对齐。<br>center ：侧轴的中点对齐。<br>baseline : 伸缩项目的第一行文字的基线对齐。<br>stretch ：如果伸缩项目未设置高度，将占满整个容器的高度。—— （默认值）</p> <p>7.2 多行的情况<br>所需属性： align-content<br>常用值如下：<br>flex-start ：与侧轴的起点对齐。<br>flex-end ：与侧轴的终点对齐。<br>center ：与侧轴的中点对齐。<br>space-between ：与侧轴两端对齐，中间平均分布。<br>space-around ：伸缩项目间的距离相等，比距边缘大一倍。<br>space-evenly : 在侧轴上完全平分。<br>stretch ：占满整个侧轴。—— 默认值</p> <ol> <li>flex 实现水平垂直居中<br>方法一：父容器开启 flex 布局，随后使用 justify-content 和 align-items 实现水平垂直居中</li> </ol> <p>.outer {<br> width: 400px;<br> height: 400px;<br> background-color: #888;<br> display: flex;<br> justify-content: center;<br> align-items: center;<br>}<br>.inner {<br> width: 100px;<br> height: 100px;<br> background-color: orange;<br>}<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>方法二：父容器开启 flex 布局，随后子元素 margin: auto</p> <p>.outer {<br> width: 400px;<br> height: 400px;<br> background-color: #888;<br> display: flex;<br>}<br>.inner {<br> width: 100px;<br> height: 100px;<br> background-color: orange;<br> margin: auto;<br>}<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>九、H5布局简介<br>新增布局标签<br>标签名 语义 单/双标签<br>header 整个页面，或部分区域的头部 双<br>footer 整个页面，或部分区域的底部 双<br>nav 导航 双<br>article 文章、帖子、杂志、新闻、博客、评论等。 双<br>section 页面中的某段文字，或文章中的某段文字（里面文字通常里面会包含标题）。 双<br>aside 侧边栏 双<br>main 文档的主要内容 ( WHATWG 没有语义， IE 不支持)，几乎不用。 双<br>hgroup 包裹连续的标题，如文章主标题、副标题的组合 （ W3C 将其删除） 双<br>关于 article 和 section ：</p> <p>artical 里面可以有多个 section 。<br>section 强调的是分段或分块，如果你想将一块内容分成几段的时候，可使用 section 元素。<br>article 比 section 更强调独立性，一块内容如果比较独立、比较完整，应该使用<br>article 元素。</p>
