CSS之我不会

非常推荐html-css学习视频：尚硅谷html-css

一、选择器

作用：选择页面上的某一个后者某一类元素

基本选择器

1.标签选择器

格式：标签{}

 <h1>666</h1>
 
<style>
 	h1{
 		css语法
 	}
</style>复制

2.类选择器

格式：.类名{}

 <h1 class="name">666</h1>
<style>
	.name{
		css语法
	}
</style>复制

3.id选择器

格式：#名称{}

 <h1 id="name">666</h1>
<style>
	#name{
		css语法
	}
</style>复制

高级选择器（只说一个`id+class`组合）

格式：id

 <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: aquamarine;
            text-align: center;
            color: gray;
            text-decoration: none;
            margin-right: 5px;
            line-height:50px;
            font: bold 20px/50px Arial;
        }
        /*
        属性名,属性名 = 属性值（正则）
              = 表示绝对等于
             *= 表示包含
             ^= 表示以...开头
             $= 表示以...结尾
             存在id属性的元素
                a[]{}
         */
        a[id]{
        /*
        a标签使用id的元素
        */
            background: deeppink;
        }
        a[id=first]{
            /*
            id=first的元素
            */
            background: greenyellow;
        }
 
        a[class*="links"]{
            /*
            class 中有links的元素
            */
            background: green;
        }
 
        a[href^=http]{
            /*
            选中href中以http开头的元素
            */
            background: aquamarine;
        }
        a[href$=pdf]{
            /*
            选中href中以http开头的元素
            */
            background: aquamarine;
        }
</style>
 
<p class="demo">
    <a href="https://www.taobao.com/" class="links item first" id="first">淘宝</a>
    <a href="" class="links item active" target="_blank " title="test">链接</a>
    <a href="img/hello.html" class="links item">网页</a>
    <a href="img/str1.png" class="links item">png</a>
    <a href="img/str2.jpg" class="links item">jpg</a>
    <a href="abc" class="links item">链2</a>
    <a href="/fy.pdf" class="links item">pdf</a>
    <a href="/quit.pdf" class="links item">pdf2</a>
    <a href="dump.doc" class="links item">doc</a>
    <a href="kiko.doc" class="links item last">doc2</a>
</p>   复制

二、美化

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;
}复制

6.文本阴影

 <style>
h1 {
  text-shadow: 2px 2px 5px red;
}
</style>
 
<h1>文本阴影效果！</h1>复制

在这里插入图片描述

3.超链接伪类

 	<style>
        /*超链接有默认的颜色*/
        a{
            text-decoration: hotpink;
            color: #000000;
        }
        /*鼠标悬浮的状态*/
        a:hover{
            color: dodgerblue;
        }
        /*鼠标按住未释放的状态*/
        a:active{
            color:green
        }
        /*点击之后的状态*/
        a:visited{
            color:mediumpurple;
        }
    </style>复制

列表 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 设置宽高。

主体结构标签： <html> 、 <body>
排版标签： <h1> ~ <h6> 、 <hr> 、 <p> 、 <pre> 、 <div>
列表标签： <ul> 、 <ol> 、 <li> 、 <dl> 、 <dt> 、 <dd>
表格相关标签： <table> 、 <tbody> 、 <thead> 、 <tfoot> 、 <tr> 、 <caption>
<form> 与 <option>

2.行内元素（inline）

又称：内联元素特点:

在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
默认宽度：由内容撑开。
默认高度：由内容撑开。
无法通过 CSS 设置宽高。

文本标签： <br> 、 <em> 、 <strong> 、 <sup> 、 <sub> 、 <del> 、 <ins>
<a> 、 <label>、<span>、<input>

3.行内块元素（inline-block）

又称：内联块元素特点：

在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
默认宽度：由内容撑开。
默认高度：由内容撑开。
可以通过 CSS 设置宽高。

图片： <img>
单元格： <td> 、 <th>
表单控件： <textarea> 、 <select> 、 <button>
框架标签： <iframe>

2.盒子模型

在这里插入图片描述

网页布局过程：

先准备好相关的网页元素，网页元素基本都是盒子 Box 。
利用 CSS 设置好盒子样式，然后摆放到相应位置。 （难点）
往盒子里面装内容

3.盒子模型（Box Model）组成

在这里插入图片描述

1.边框

  border : border-width || border-style || border-color;   复制

在这里插入图片描述
边框样式 border-style 可以设置如下值：

none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线

2.内边距（padding）

和写属性
在这里插入图片描述
分写属性

3.外边距（margin）

在这里插入图片描述

margin 注意事项：

子元素的 margin ，是参考父元素的 content 计算的。（因为是父亲的 content 中承装着子元素）
上 margin 、左 margin ：影响自己的位置；下 margin 、右 margin ：影响后面兄弟元素的位置。
块级元素、行内块元素，均可以完美地设置四个方向的 margin ；但行内元素，左右 margin 可以完美设置，上下 margin 设置无效。
margin 的值也可以是 auto ，如果给一个块级元素设置左右 margin 都为 auto ，该块级元素会在父元素中水平居中。
margin 的值可以是负值

4.处理内容溢出

在这里插入图片描述

注意：

overflow-x 、 overflow-y 不能一个是 hidden ，一个是 visible ，是实验性属性，不建议使用。
overflow 常用的值是 hidden 和 auto ，除了能处理溢出的显示方式，还可以解决很多疑难杂症。

5.布局小技巧（重点）

行内元素、行内块元素，可以被父元素当做文本处理。

即：可以像处理文本对齐一样，去处理：行内、行内块在父元素中的对齐。
例如： text-align 、 line-height 、 text-indent 等。

如何让子元素，在父亲中 水平居中：

若子元素为块元素，给子元素加上： margin:0 auto
若子元素为行内元素、行内块元素，给父元素加上：text-align:center

如何让子元素，在父亲中 垂直居中：

若子元素为块元素，给子元素加上： margin-top ，值为：父元素 content －子元素盒子(margin+border+padding) / 2。
若子元素为行内元素、行内块元素：让父元素的 line-height=height（父元素高度），每个子元素都加上： vertical-align:middle 。
补充：若想绝对垂直居中，父元素 font-size 设置为 0 。

不知到父元素高度，子元素在父元素垂直居中

通过数学计算calc()，计算出父元素高度：用100%视口高度-已经占用的高度 100vh - height 然后同上

 height: calc(100vh - 70px);复制

6.常用布局练习

块元素水平垂直居中

  	<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>复制

行内元素水平垂直居中

 	<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>复制

行元素、行内块绝对居中

 	<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>复制

背景图片铺满

 		html, body{
            width: 100%;
            height: 100%;
        }
        body{
            background: url("../image/bg.jpg");
            background-repeat: no-repeat; /*图片不重复*/
            background-size: cover;  /*图片铺满整个视口*/
        }复制

四、浮动 float

场景：布局

1.简介

在最初，浮动是用来实现文字环绕图片效果的，现在浮动是主流的页面布局方式之一。
在这里插入图片描述

2.元素浮动后的特点

🤢脱离文档流。
😊不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽
高。
😊不会独占一行，可以与其他元素共用一行。
😊不会 margin 合并，也不会 margin 塌陷，能够完美的设置四个方向的 margin 和 padding 。
😊不会像行内块一样被当做文本处理（没有行内块的空白问题）。

3.解决浮动产生的影响

3.1元素浮动后会有哪些影响

对兄弟元素的影响： 后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。
对父元素的影响： 不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。

3.2 解决浮动产生的影响（清除浮动）

解决方案：

方案一：给父元素指定高度。
方案二：给父元素也设置浮动，带来其他影响。
方案三：给父元素设置 overflow:hidden 。
方案四：在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置 clear:both 。
方案五： 给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同。===> 推荐使用

 .parent::after {
content: "";
display: block;
clear:both;
}复制

布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动。

3.3 浮动小练习

整体效果如下：
在这里插入图片描述

盒子分析
在这里插入图片描述

 	<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>
 复制

五、定位 position

1.相对定位

1.1 如何设置相对定位？

给元素设置 position:relative 即可实现相对定位。
可以使用 left 、 right 、 top 、 bottom四个属性调整位置

1.2 相对定位的参考点在哪里？

相对自己原来的位置

1.3 相对定位的特点：

1.不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。
2. 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。

默认规则是：
定位的元素会盖在普通元素之上。
都发生定位的两个元素，后写的元素会盖在先写的元素之上。
3.left 不能和 right 一起设置， top 和 bottom 不能一起设置。
4. 相对定位的元素，也能继续浮动，但不推荐这样做。
5. 相对行为的元素，也能通过 margin 调整位置，但不推荐这样做。

注意：绝大多数情况下，相对定位，会与绝对定位配合使用。（子元素绝对定位，父元素相对定位——子绝父相）

2.绝对定位

2.1 如何设置绝对定位？

给元素设置 position: absolute 即可实现绝对定位。
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。

2.2 绝对定位的参考点在哪里？

参考它的包含块。

什么是包含块？

对于没有脱离文档流的元素：包含块就是父元素；
对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都没定位，那包含块就是整个页面）

2.3 绝对定位元素的特点：

脱离文档流，会对后面的兄弟元素、父元素有影响。
left 不能和 right 一起设置， top 和 bottom 不能一起设置。
绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主。
绝对定位的元素，也能通过 margin 调整位置，但不推荐这样做。
无论是什么元素（行内、行内块、块级）设置为绝对定位之后，都变成了定位元素。

何为定位元素？ —— 默认宽、高都被内容所撑开，且能自由设置宽高。

3.固定定位

3.1 如何设置为固定定位？

给元素设置 position: fixed 即可实现固定定位。
可以使用 left 、 right 、 top 、 bottom四个属性调整位置。

3.2 固定定位的参考点在哪里？

参考它的视口

什么是视口？—— 对于 PC 浏览器来说，视口就是我们看网页的那扇“窗户”。

3.3 固定定位元素的特点

脱离文档流，会对后面的兄弟元素、父元素有影响。
left 不能和 right 一起设置， top 和 bottom 不能一起设置。
固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主。
固定定位的元素，也能通过 margin 调整位置，但不推荐这样做。
无论是什么元素（行内、行内块、块级）设置为固定定位之后，都变成了定位元素。

4. 粘性定位

4.1 如何设置为粘性定

给元素设置 position:sticky 即可实现粘性定位。
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置，不过最常用的是 top 值。

4.2 粘性定位的参考点在哪里？

离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先。

4.3 粘性定位元素的特点

不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。
最常用的值是 top 值。
粘性定位和浮动可以同时设置，但不推荐这样做。
粘性定位的元素，也能通过 margin 调整位置，但不推荐这样做。

粘性定位和相对定位的特点基本一致，不同的是：粘性定位可以在元素到达某个位置时将其固定。

5.定位层级

定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
如果位置发生重叠，默认情况是：后面的元素，会显示在前面元素之上。
可以通过 css 属性 z-index 调整元素的显示层级。
z-index 的属性值是数字，没有单位，值越大显示层级越高。
只有定位的元素设置 z-index 才有效。
如果 z-index 值大的元素，依然没有覆盖掉 z-index 值小的元素，那么请检查其包含块的层级。

6. 定位的特殊应用

注意：

发生固定定位、绝对定位后，元素都变成了定位元素，默认宽高被内容撑开，且依然可以设置宽高。
发生相对定位后，元素依然是之前的显示模式。
以下所说的特殊应用，只针对绝对定位和固定定位的元素，不包括相对定位的元素。

让定位元素的宽充满包含块

块宽想与包含块一致，可以给定位元素同时设置 left 和 right 为 0 。
高度想与包含块一致， top 和 bottom 设置为 0 。

让定位元素在包含块中居中

方案一：

 left:0;
right:0;
top:0;
bottom:0;
margin:auto;复制

方案二：

 left: 50%;
top: 50%;
margin-left: 负的宽度一半;
margin-top: 负的高度一半;复制

注意：该定位的元素必须设置宽高！！！

七、布局

1.版心

在 PC 端网页中，一般都会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这是网页的版心。
版心的宽度一般是 960 ~1200 像素之间。
版心可以是一个，也可以是多个。

2. 常用布局名词

位置	名词
顶部导航条	`topbar`
页头	`header` 、 `page-header`
导航	`nav` 、 `navigator` 、 `navbar`
搜索框	`search` 、 `search-box`
横幅、广告、宣传图	`banner`
主要内容	`content` 、 `main`
侧边栏	`aside` 、 `sidebar`
页脚	`footer` 、 `page-footer`

八、伸缩盒模型（display：flex布局）

1.伸缩容器、伸缩项目

伸缩容器：开启了 flex 的元素，就是：伸缩容器。

给元素设置： display:flex 或 display:inline-flex ，该元素就变为了伸缩容器。
display:inline-flex 很少使用，因为可以给多个伸缩容器的父容器，也设置为伸缩容器。
一个元素可以同时是：伸缩容器、伸缩项目。

伸缩项目：伸缩容器所有子元素自动成为了：伸缩项目。

仅伸缩容器的子元素成为了伸缩项目，孙子元素、重孙子元素等后代，不是伸缩项目。
无论原来是哪种元素（块、行内块、行内），一旦成为了伸缩项目，全都会“块状化”。

2.主轴与侧轴

主轴： 伸缩项目沿着主轴排列，主轴默认是水平的，默认方向是：从左到右（左边是起点，右边是终点）。
侧轴： 与主轴垂直的就是侧轴，侧轴默认是垂直的，默认方向是：从上到下（上边是起点，下边
是终点）。

3.主轴方向

属性名： flex-direction
常用值如下：

1.row ：主轴方向水平从左到右 —— 默认值
2.row-reverse ：主轴方向水平从右到左。
3.column ：主轴方向垂直从上到下。
4.column-reverse ：主轴方向垂直从下到上。

在这里插入图片描述

注意：改变了主轴的方向，侧轴方向也随之改变。

4.主轴的换行方式

属性名： flex-wrap
常用值如下：
1. nowrap ：默认值，不换行。
2. wrap ：自动换行，伸缩容器不够自动换行。
3. wrap-reverse ：反向换行。

5.flex-flow

flex-flow 是一个复合属性，复合了 flex-direction 和 flex-wrap 两个属性。值没有顺序要求
```
 flex-flow: row wrap;复制
```

6.主轴对齐方式

属性名： justify-content
常用值如下：
1. flex-start ：主轴起点对齐。—— 默认值
2. flex-end ：主轴终点对齐。
3. center ：居中对齐
4. space-between ：均匀分布，两端对齐（最常用）。
5. space-around ：均匀分布，两端距离是中间距离的一半。
6. space-evenly ：均匀分布，两端距离与中间距离一致。

7.侧轴对齐方式

7.1 一行的情况

所需属性： align-items
常用值如下：
1. flex-start ：侧轴的起点对齐。
2. flex-end ：侧轴的终点对齐。
3. center ：侧轴的中点对齐。
4. baseline : 伸缩项目的第一行文字的基线对齐。
5. stretch ：如果伸缩项目未设置高度，将占满整个容器的高度。—— （默认值）

7.2 多行的情况

所需属性： align-content
常用值如下：
1. flex-start ：与侧轴的起点对齐。
2. flex-end ：与侧轴的终点对齐。
3. center ：与侧轴的中点对齐。
4. space-between ：与侧轴两端对齐，中间平均分布。
5. space-around ：伸缩项目间的距离相等，比距边缘大一倍。
6. space-evenly : 在侧轴上完全平分。
7. stretch ：占满整个侧轴。—— 默认值

8. flex 实现水平垂直居中

方法一：父容器开启 flex 布局，随后使用 justify-content 和 align-items 实现水平垂直居中

 .outer {
	width: 400px;
	height: 400px;
	background-color: #888;
	display: flex;
	justify-content: center;
	align-items: center;
}
.inner {
	width: 100px;
	height: 100px;
	background-color: orange;
}复制

方法二：父容器开启 flex 布局，随后子元素 margin: auto

 .outer {
	width: 400px;
	height: 400px;
	background-color: #888;
	display: flex;
}
.inner {
	width: 100px;
	height: 100px;
	background-color: orange;
	margin: auto;
}复制

九、H5布局简介

新增布局标签

标签名	语义	单/双标签
header	整个页面，或部分区域的头部	双
footer	整个页面，或部分区域的底部	双
nav	导航	双
article	文章、帖子、杂志、新闻、博客、评论等。	双
section	页面中的某段文字，或文章中的某段文字（里面文字通常里面会包含标题）。	双
aside	侧边栏	双
main	文档的主要内容 ( WHATWG 没有语义， IE 不支持)，几乎不用。	双
hgroup	包裹连续的标题，如文章主标题、副标题的组合（ W3C 将其删除）	双

关于 article 和 section ：
1. artical 里面可以有多个 section 。
2. section 强调的是分段或分块，如果你想将一块内容分成几段的时候，可使用 section 元素。
3. article 比 section 更强调独立性，一块内容如果比较独立、比较完整，应该使用
4. article 元素。

	<style>
	.demo a{
	float: left;
	display: block;
	height: 50px;
	width: 50px;
	border-radius: 10px;
	background: aquamarine;
	text-align: center;
	color: gray;
	text-decoration: none;
	margin-right: 5px;
	line-height:50px;
	font: bold 20px/50px Arial;
	}
	/*
	属性名,属性名 = 属性值（正则）
	= 表示绝对等于
	*= 表示包含
	^= 表示以...开头
	$= 表示以...结尾
	存在id属性的元素
	a[]{}
	*/
	a[id]{
	/*
	a标签使用id的元素
	*/
	background: deeppink;
	}
	a[id=first]{
	/*
	id=first的元素
	*/
	background: greenyellow;
	}

	a[class*="links"]{
	/*
	class 中有links的元素
	*/
	background: green;
	}

	a[href^=http]{
	/*
	选中href中以http开头的元素
	*/
	background: aquamarine;
	}
	a[href$=pdf]{
	/*
	选中href中以http开头的元素
	*/
	background: aquamarine;
	}
	</style>

	<p class="demo">
	<a href="https://www.taobao.com/" class="links item first" id="first">淘宝</a>
	<a href="" class="links item active" target="_blank " title="test">链接</a>
	<a href="img/hello.html" class="links item">网页</a>
	<a href="img/str1.png" class="links item">png</a>
	<a href="img/str2.jpg" class="links item">jpg</a>
	<a href="abc" class="links item">链2</a>
	<a href="/fy.pdf" class="links item">pdf</a>
	<a href="/quit.pdf" class="links item">pdf2</a>
	<a href="dump.doc" class="links item">doc</a>
	<a href="kiko.doc" class="links item last">doc2</a>
	</p>

	<style>
	h1 {
	text-shadow: 2px 2px 5px red;
	}
	</style>

	<h1>文本阴影效果！</h1>

	<style>
	/超链接有默认的颜色/
	a{
	text-decoration: hotpink;
	color: #000000;
	}
	/鼠标悬浮的状态/
	a:hover{
	color: dodgerblue;
	}
	/鼠标按住未释放的状态/
	a:active{
	color:green
	}
	/点击之后的状态/
	a:visited{
	color:mediumpurple;
	}
	</style>

	<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>

	html, body{
	width: 100%;
	height: 100%;
	}
	body{
	background: url("../image/bg.jpg");
	background-repeat: no-repeat; /图片不重复/
	background-size: cover; /图片铺满整个视口/
	}

	<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>

	left: 50%;
	top: 50%;
	margin-left: 负的宽度一半;
	margin-top: 负的高度一半;

	.outer {
	width: 400px;
	height: 400px;
	background-color: #888;
	display: flex;
	justify-content: center;
	align-items: center;
	}
	.inner {
	width: 100px;
	height: 100px;
	background-color: orange;
	}

CSS之我不会

一、选择器

基本选择器

1.标签选择器

2.类选择器

3.id选择器

高级选择器（只说一个id+class组合）

二、美化

1.字体 font

2.文本样式 text

3.超链接伪类

列表 ui li

背景

1.背景颜色 background-color

2.透明度 opacity

3.背景图片 background-image: url("name.jpg")

三、盒子模型

1.元素的显示模式

1.块元素（block）

2.行内元素（inline）

3.行内块元素（inline-block）

2.盒子模型

3.盒子模型（Box Model）组成

1.边框

2.内边距（padding）

3.外边距（margin）

4.处理内容溢出

5.布局小技巧（重点）

6.常用布局练习

四、浮动 float

1.简介

2.元素浮动后的特点

3.解决浮动产生的影响

3.1元素浮动后会有哪些影响

3.2 解决浮动产生的影响（清除浮动）

3.3 浮动小练习

五、定位 position

1.相对定位

1.1 如何设置相对定位？

1.2 相对定位的参考点在哪里？

1.3 相对定位的特点：

2.绝对定位

2.1 如何设置绝对定位？

2.2 绝对定位的参考点在哪里？

2.3 绝对定位元素的特点：

3.固定定位

3.1 如何设置为固定定位？

3.2 固定定位的参考点在哪里？

3.3 固定定位元素的特点

4. 粘性定位

4.1 如何设置为粘性定

4.2 粘性定位的参考点在哪里？

4.3 粘性定位元素的特点

5.定位层级

6. 定位的特殊应用

让定位元素的宽充满包含块

让定位元素在包含块中居中

七、布局

1.版心

2. 常用布局名词

八、伸缩盒模型 （display：flex布局）

1.伸缩容器、伸缩项目

2.主轴与侧轴

3.主轴方向

4.主轴的换行方式

5.flex-flow

6.主轴对齐方式

7.侧轴对齐方式

7.1 一行的情况

7.2 多行的情况

8. flex 实现水平垂直居中

九、H5布局简介

新增布局标签

微信扫一扫：分享

高级选择器（只说一个`id+class`组合）

1.背景颜色 `background-color`

2.透明度 `opacity`

3.背景图片 `background-image: url("name.jpg")`

八、伸缩盒模型（display：flex布局）