CSS学习

最新推荐文章于 2024-05-05 01:51:58 发布

@1932

最新推荐文章于 2024-05-05 01:51:58 发布

阅读量1.7k

点赞数 2

本文链接：https://blog.csdn.net/Hermione_m/article/details/121701234

版权

CSS学习

CSS样式规则和基本选择器

CSS样式规则

选择器{属性:属性值; 属性:属性值;}
      ---------
        声明

在上面的样式规则中:

1.选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。

2.属性和属性值以“键值对”的形式出现。

3.属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等。

4.属性和属性值之间用英文“:”连接。

5.多个“键值对”之间用英文“;”进行区分。

可以用段落和表格的对齐的演示。

css的优先级不是选择器的，而是声明的

基本选择器

通配符 *
id选择器 #id名称 （id 不可以重复使用）
类选择器 .类名称 （class可以重复使用）
元素选择器（以标签名作为选择器）元素一个标签里面不能写多个class但是一个class里面可以写多个类名类似：class="font14 pink"
后代
分组选择器

1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_”下划线来命名CSS选择器。
3.不要纯数字、中文等命名，尽量 使用英文字母来表示。

伪类选择器：用于向某些选择器添加特殊的效果 :标签名{}
- 链接伪类选择器：
  - :link /未访问的链接/
  - :visited /已访问的链接/
  - :hover /鼠标移动到链接上/
  - :active /选定的链接/
    
    注意：写的时候，他们的顺序尽量不要颠倒按照 lvha 的顺序。
  例:
  
  伪类选择器中的链接伪类选择器主要针对于 a
  抢购秒抢
- 结构伪类选择器：
  - :first-child :选取属于其父元素的首个子元素的指定选择器
  - :last-child :选取属于其父元素的最后r -个子元素的指定选择器
  - :nth-child(n) :匹配属于其父元素的第N个子元素，不论元素的类型even 偶数odd奇数n从0开始 (后面的n 还可以用公式替代例如3n)
  - :nth-last-child(n): 选择器匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n可以是数字、关键词或公式
- 目标伪类选择器：
  - :target目标为类选择器：选择器可用于选取当前活动的目标元素

:target{
    color:red;
    font-size: 30px;
}

CSS文本属性及font综合

[文本属性及font综合写法脑图] http://note.youdao.com/noteshare?id=a4abe63ab20c9cba1ef3f4b4c4bda27f&sub=ABDB54E4CBC84B038782CB961374BC11

css的注释：/* 文本 */

font:综合设置字体样式（重点）

选择器{font:font-style font-weight font-size/line-height font-family;}
使用font属性时，必须按上面语法格式中的顺序书写,不能更换顺序，各个属性以空格隔开。
注意:其中不需要设置的属性可以省略( 取默认值)，但必须保留font-size和font -family属性,否则font属性将不起作用。

引入CSS样式表（书写位置）

内部样式表

内嵌式是将CSS代码集中写在HTML文档的head头部标篷中，并且用style标签定义，其基本语法格式如下:
```
<head>
    <style type="text/css">  
        选择器{属性1:属性值; 属性2:属性值;}
    </style>
</head>
```
语法中，style标签- 般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。 type="text/CSS"在html5中可以省略，写上也比较符合规范，所以这个地方可以写也可以省略。

行内式（内联样式）

内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下:（这种方式适合样式比较少的情况）
```
<标签名 style="属性1:属性值1; 属性2:属性值2;">内容</标签名>
```
语法中style是标签的属性,实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。

外部样式表（外链式）

链入式是将所有的样式放在- -个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下:
```
<head>
    <link href="css文件的路径" type="text/css" rel="stylesheet"
</head>
```
- 注意: link 是个单标签哦!!! 该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下:
  - href:定义所链接外部样式表文件的URL,可以是相对路径，也可以是绝对路径。
  - type:定义所链接文档的类型，在这里需要指定为“text/CSS",表示链接的外部文件为CSS样式表。
  - rel:定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet",表示被链接的文档是一-个样式表文件。

标签显示模式

块级元素（block-level）

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

常见的会计元素有<h1>~<h6>、<p>、<div>、<ol>、<ul>、<li>等，其中<div>标签是最典型的块元素

块级元素的特点: (1)总是从新行开始 (2)高度，行高、外边距以及内边距都可以控制。 (3)宽度默认是容器的100% (4)可以容纳内联元素和其他块元素。

行内元素（inline-level）

行内元素（内联元素），不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

常见的行内元素有<a>、<strong>、<b>、 <em>、 <i>、 <del>、<s>、 <ins>、 <u>、<span>等,其中<span>标签最典型的行内元素。

行内元素的特点: (1)和相邻行内元素在-行上。 (2)高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。 (3)默认宽度就是它本身内容的宽度。 (4)行内元素只能容纳文本或则其他行内元素。( a特殊)

注意：

1.只有文字才能组成段落因此p里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
2.链接里面不能再放链接。

行内块元素（inline-block）

在行内元素中有几个特殊的标签-- <img />、 <input />、 <td>,可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。行内块元素的特点: (1)和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。 (2)默认宽度就是它本身内容的宽度。 (3)高度，行高、外边距以及内边距都可以控制。

标签显示模式的转换 display

块转行内: display;nline; 行内转块: display:block; 块、行内元素转换为行内块: display: inline-block; 此阶段，我们只需关心这三个，其他的是我们后面的工作。

CSS复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。

交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器 ,两个选择器之间不能有空格，如h3.special.
记忆技巧：
- 交集选择器是并且的意思，即...又...的意思
  
  比如：p.one 选择的是：类名为 .one 的段落标签。
  
  用的相对来说较少，不太建议使用

并集选择器

并集选择器(CSS选择器分组)是各个选择器通过逗号连接而成的，任何形式的选择器(包括标签选择器、class类选择器id选择器等)，都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。
记忆技巧：
- 并集选择器和的意思，就是说，只要逗号隔开的，所有选择器都会执行后面样式
  
  比如 .one, p, #text {color: #F00} 表示 .one 和 p 和 #text 这三个选择器都会执行颜色为红色，通常用于集体声名。

后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。

子元素选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个>进行连接，注意，符号左右两侧各保留一个空格。
白话：这里的子指的是亲儿子不包含孙子重孙子之类。

比如： .demo > h3{color:red;} 说明 h3 一定是 demo亲儿子。 demo元素包含着h3。

测试题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="01-test.css">
</head>
<body>
    <div class="nav">  <!--主导航栏-->
        <ul>
            <li><a href="#">公司首页</a></li>
            <li><a href="#">公司简介</a></li>
            <li><a href="#">公司产品</a></li>
            <li>
                <a href="#">联系我们</a>
                <ul>
                    <li><a href="#">公司邮箱</a></li>
                    <li><a href="#">公司电话</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="sitenav">   <!--测导航栏-->
        <div class="site-1">左侧侧导航栏</div>
        <div class="site-r"><a href="#">登录</a></div>
    </div>
</body>
</html>

.site-r a{
    color:red;
}
.nav ul li a{
    color:blue;
}
.nav, .sitenav{
font-size: 14px;
font-family: Microsoft YaHei;
}
.nav > ul > li > a{
    color:green;
}

属性选择器

属性选择器用中括号例:a[属性] {样式}

选择器选择器选择器选择器	**示例	**含义
E[attr]		存在attr属性即可
E[attr=val]		属性值完全等于val
E[attr*=val]		属性值里包含val字符并且在"任意"位置
E[attr^=val]		属性值里包含val字符并且在"开始”位置
E[attr$=val]		属性值里包含val字符并且在”结束"位置

获取到拥有该属性的元素

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div[class]{
            color:red;
        }
        div[class=font]{
            color:orange;
        }
        div[class*=font]{
            color:green;
        }
        div[class^=font]{
            color:blue;
        }
        div[class$=font]{
            color:rgb(230, 8, 230);
        }

    </style>
</head>
<body>
    <div class="font">属性选择器</div>
    <div class="font-shu">属性选择器</div>
    <div class="font-shu">属性选择器</div>
    <div class="font-shu_footer">属性选择器</div>
    <div class="font-shu_footer">属性选择器</div>
    <div class="head-font-shu">属性选择器</div>
    <div class="head-font-shu">属性选择器</div>
   
</body>
</html>

伪元素选择器

E::first-letter 文本的第一个单词或字(如中文、日文、韩文等)
E::first-line 文本第一行;
E::selection 可改变选中文本的样式;
E::before 和 E::after 在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

(再盒子的内部前面插入或者后面插入)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪元素选择器</title>
    <style>
        h1::first-letter, p::first-letter{
            color:red;
        }
        p::first-line{
            color:green;
        }
        p::selection{
            color:hotpink;
        }
        div::before{
            content: "以后";
            color:blue;
        }
        div::after{
            content: "一定会大火的";
            color:crimson;
        }
    </style>
</head>
<body>
    <h1>free</h1>
    <p>努力没用要刻苦。2、因为有想要追逐的光，所以即使是迷茫痛苦的时刻，也是幸福的。3、你再低落和沮丧，人生还是会被各种各样的事情改变包围着。就像是站在一台你没办法控制的跑步机上时间速度都不是你能控制的，那我就选择跑得更从容一点更帅一点。尽我所能的在这个被动的人生里，争取一些主动。4、遇见喜欢的就多吃两口，不喜欢就换个口味，别等吃不到的时候后悔。5、想让别人喜欢你：你得先喜欢你自己。想让别人接受你，你得先接受你自己。</p>
    <div>时代少年团</div>
</body>
</html>

CSS背景

背景颜色

background-color	背景颜色
background-image	背景图片地址
background-repeat	是否平铺
background-position	背景位置
background-attachment	背景固定还是滚动
背景的合写(复合属性)
background:背景颜色背景图片地址背景平铺背景滚动背景位置

背景位置（position）

利用方位名词top bottom 来更改背景图片的位置（left, right,center）

background-position: left top; /*默认是左上角*/
- 方位名词没有顺序，谁在前面都可以
- 如果方位名词只写一个，默认另一个是center
精确单位第一个一定是x轴，第二个一定是y轴
混搭也可

背景附着（固定）

语法：

background-attachment: scroll | fixed

scroll : 背景图像是随对象内容滚动 fixed : 背景图像固定
说明: . 设置或检索背景图像是随对象内容滚动还是固定的。

背景简写（综合写法）

background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写: background: 背景颜色背景图片地址背景平铺背景滚动背景位置

背景透明

CSS3支持背景半透明的写法语法格式是: background: rgba(0,0,0,0.3);

最后一个参数是alpha透明度取值范围0~1之间
注意:背景半透明是指盒子背景半透明，盒子里面的内容不收影响。同样，可以给文字和边框透明都是rgba的格式来写。

背景缩放

通过background-size设置背景图片的尺寸，就像我们设置img的尺寸- -样，在移动Web开发中做屏幕适配应用非常广泛。
其参数设置如下:
- a)可以设置长度单位(px)或百分比(设置百分比时，参照盒子的宽高)
- b)设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。
- c)设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。
我们插入的图片 img 直接通过width 和 height 设置就可

背景图片设置大小用：background-size

background-size: 数值; 一般我们尽量只改一个值，防止照片失真

background-size: 50%; 写成这种形式的数据也是可以的（将背景缩放为原来的一半）

多背景图片

以逗号分隔可以设置多背景，可用于自适应布局做法就是用逗号隔开就好了。一个元素可以设置多重背景图像。每组属性间使用逗号分隔。如果设置的多重背景图之间存在着交集(即存在着重叠关系)，前面的背景图会覆盖在后面的背景图之上。为了避免背景色将图像盖住，背景色通常都定义在最后一组中。

凹凸文字（阴影）

文字阴影：text-shadow：水平距离垂直距离模糊阴影颜色

导航栏装饰

CSS三大特征

CSS层叠性
- CSS最后的执行口诀: 长江后浪推前浪，前浪死在沙滩上。
CSS继承性
- 简单的理解就是:子承父业。 CSS最后的执行口诀: 龙生龙，凤生凤，老鼠生的孩子会打洞。

CSS的优先级

继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。 行内样式优先。应用style属性的元素，其行内样式的权重非常高,可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。 权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。 CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，! important都具有最大优先级。

CSS特殊性（权重）

继承或者*的贡献值	0，0，0，0
每个元素(标签)贡献值为	0，0，0，1
每个类，属性，伪类贡献值为	0，0，1，0
每个ID贡献值为	0，1，0，0
每个行内样式贡献值	1，0，0，0
每个important贡献值	无穷大

! important用法：放在属性栏里面

div{
color:orange !important;  /*important 就是最终要的  级别最高*/
}

权重时可以进行叠加的例如：nav ul li{}这个模式权重大于li{}

总结:权重是优先级的算法，层叠是优先级的表现

盒子模型（CSS重点）

盒子模型

内边距：padding
外边距：Margin

盒子边框

边框属性： border-width || border-style || borer-color
边框风格，常用属性值：（可以单独设置上边框风格或者下边框风格top或bottom）
- none:没有边框即忽略所有边框的宽度(默认值)
- solid:边框为单实线(最为常用的)
- dashed:边框为虚线
- dotted:边框为点线
- double:边框为双实线
综合写法：顺序上，右，下，左

border:四边宽度（上右下左）四边样式四边颜色

合并细线表格

border-collapse:collapse; 表示边框合并在一起。

圆角边框

radius(半径距离，弧度)

语法格式：border-radius:左上角右上角右下角左下角
- 只填一个数值时，表示这四个角都是相同的弧度
- 写两个数值时，按对角线分配

内边距（padding）

padding属性用于设置内边距。是指边框与内容之间的距离。
- padding-top:上内边距
- padding-right:右内边距
- padding-bottom:下内边距
- padding-left:左内边距
  - 一个值：上右下左都一样
  - 两个值：上下一样，左右一样
  - 三个：上左右下

文字垂直居中：

height:41px; line-height:41px;

fireworks工具

外边距（margin）

margin属性用于设置外边距。设置外边距会在元素之间创建"空白”，这段空白通常不能放置其他内容。
- margin-top:上外边距
- margin-right:右外边距
- margin-bottom:下外边距
- margin-left:.上外边距
- margin:上外边距右外边距下外边距左外边
- 取值顺序跟内边距相同。

外边距实现盒子居中对齐

可以让一-个盒子实现水平居中，需要满足一下两个条件:
1. 必须是块级元素。
2. 盒子必须指定了宽度(width)
然后就给左右的外边距都设置为auto,就可使块级元素水平居中。实际工作中常用这种方式进行网页布局，示例代码如下:

.header{width:960px; margin:0 auto;}

清除元素的默认内外边距

*{
	matgin:0;
	padding:0;
}

注意：行内元素是只有左右外边距的，是没有上下外边距的

外边距合并

使用margin 定义块元素的垂直外边距时，可能回出现外边距的合并

相邻块元素垂直外边距的合并
- 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)。
嵌套元素垂直外边距的合并
- 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
- 解决方案:
  - 1.可以为父元素定义1像素的上边框或上内边距。
  - 2.可以为父元素添加overflow:hidden。

当一个盒子没有给定宽度/高度时，或者继承父亲的宽度。高度时，则padding 不会影响盒子的大小

盒子模型布局稳定性

width > padding > margin

原因:

margin会有外边距合并还有ie6下面margin加倍的bug (讨厌)所以最后使用。
padding会影响盒子大小，需要进行加减计算(麻烦)其次使用。
width没有问题(嗨皮)我们经常使用宽度剩余法高度剩余法来做。

文字盒子居中区别，图片和背景的区别

- 文字居中：text-align: center;
- 盒子居中：margin: 10px auto; /*盒子水平据中，左右margin改为auto*/
- 插入图片更改位置可以使用margin 或者padding 盒模型
  - （插入当图片也是一个盒子）
- 背景图片更改位置时，用background-position
一般情况下背景图片适合做一些小图标使用

CSS3盒模型

CSS3中可以通过box-sizing来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况: 1、box-sizing: content-box盒子大小为width + padding + border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode（不论是改变padding还是border 都会撑大盒子） 2、box-sizing: border-box盒子大小为width就是说padding 和border是包含到width里面的（不论是改变padding还是border，盒子大小都不会发生改变）注:上面的标注的width指的是CSS属性里设置的width: length, content的值是会自动调整的。

盒子阴影

语法格式：

box-shadow:水平位置垂直位置模糊距离阴影尺寸（影子的大小）阴影颜色内/外阴影

1.前两个属性是必须写的。其余的可以省略。 2.外阴影(outset)但是不能写默认想要内阴影inset

浮动

CSS的定位机制有3种：普通流（标准流），浮动和定位

浮动的定义

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

在CSS中，通过float属性来定义浮动，其基本语法格式如下:

选择器(float:属性值;)

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动（默认值）

浮动特征

如果两个盒子都不加浮动，就是标准流会计元素自上而下显示
添加浮动首先要添加标准流父级（占用当前浮动的位置，以防其他的浮动移上来）

浮动首先创建包含块的概念(包裹)。就是说，浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。

浮动的元素排列位置，跟上一-个元素(块级)有关系。如果上一个元素有浮动，则A元素顶部会和上一-个元素的顶部对齐;如果上-个元素是标准流，则A元素的顶部会和上一-个元素的底部对齐。

由此可得：
```
- 一个父盒子里面的子盒子，如果期中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对其显示
- 元素加浮动后，元素就会具有行内块元素特征。元素的大小完全取决于定义的大小或者默认的内容的多少
- 浮动式根据元素书写位置来显示相应浮动
```
总结:浮动--> 浮漏特

一句话总结浮动:浮动的主要目的就是为了让多个块级元素- -行内显示。

浮: 加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面。

漏: 加了浮动的盒子，不占位置的，它浮起来了，它原来的位置漏给了标准流的盒子。

特: 特别注意，首先浮动的盒子需要和标准流的腹肌搭配使用，其次特别的注意浮动可以使元素的显示模式体现为行内块元素特征，这是特殊的使用，有很多的不好处，使用要谨慎。
浮动回影响盒子的显示模式

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      
        div {
            width: 200px;
            height: 200px;
            background-color:pink;
            /* display: inline-block; */
            float: left;
        }
        .zhu {
            width: 900px;
            height: 300px;
            background-color: #fff;
        }
        div:nth-child(2) {
            background-color: hotpink;
        }
        div:last-child {
            background-color:deeppink;
        }
    </style>
</head>
<body>
<div class="zhu">
    <div></div>
    <div></div>
    <div></div>
</div>
    
  
    
</body>
</html>

版心和布局流程

布局流程
- 为了提高网页制作的效率，布局时通常需要遵守--定的布局流程，具体如下: 1、确定页面的版心(可视区) 2、分析页面中的行模块，以及每个行模块中的列模块。 3、制作HTML结构。 4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>版心布局</title>
    <style>
        * {
            margin:0;
            padding:0;
        }
        .top,
        .banner,
        .main,
        .footer {
            width: 960px;
            text-align: center;
            margin:0 auto;
            margin-bottom: 10px;
            border: 1px dashed #ccc;
        }
        .top {
            height: 80px;
            background-color:pink;
        }
        .banner {
            height: 80px;
            background-color:hotpink;
        }
        .main {
            height: 500px;
            background-color:deeppink;
        }
        .footer {
            height: 120px;
            background-color:purple;
        }
    </style>
</head>
<body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="main">main</div>
    <div class="footer">footer</div>
</body>
</html>

清除浮动

清除浮动的本质
- 清除浮动主要是为了解决父级因为子级浮动引起的内部高度为0的问题
清除浮动的办法
- 其实本质叫做闭合浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。
- 在CSS中，clear属性用于清除浮动，其基本语法格式如下:

选择器{clear:属性值;}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动）
right	不允许右侧有浮动元素（清除右侧浮动）
both	同时清除左右两侧浮动的影响

额外标签法（不提议）

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如<div style="clear :both”></div>,或则其他标签br等亦可（仅仅相当于在浮动后面添加一个空盒子）优点:通俗易懂，书写方便缺点:添加许多无意义的标签，结构化较差。我只能说， w3c你推荐的方法我不接受，你不值得拥有。。。

父级添加overflow属性方法

可以给父级添加: overflow为 hidden|auto |scroll都可以实现。

优点：代码简洁

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

用after伪元素清除浮动

after方式是空标签的升级版，好处是不用再单独加标签了

使用方法：

.clearfix:after{
    content:".";     /*里面尽量不要给空，防止旧版本浏览器有空隙*/ 
    display:block;  /*转换为块级元素*/
    height:0;      /*高度为0*/
    clear:both;    /*清除浮动*/
    visibility:hidden;  /*隐藏盒子*/
}
.clearfix {
    *zoom:1;
}

使用before和after双伪元素清除浮动

.clearfix:before, .clearfix:after {
    content:" ";
    display: table;  /*触发bfc防止外边距合并的问题*/
}

ps

ctrl+G 图层建组

ctrl+j 复制图层

CTRL+E 合并图层

CTRL+D 取消选区

alt+delete 填充前景色

CTRL+delete 填充背景色

CTRL+shift+i 选区反选

钢笔工具选择选区后 ctrl+回车键生成选区按住alt 键点击点取消之后的弧度选区

按shift键等比例缩放

定位

元素的定位属性

边偏移

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

定位模式 (position)

选择器{position:属性值;}

值	描述
static	自动定位(默认定位方式)
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

静态定位（static）

静态定位对于边偏移是无效

相对定位（relative）

注意：
1. 相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。
2. 其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置
  - 就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。(相对定位不脱标)
  - 如果说浮动的主要目的是让多个块级元素一行显示，那么定位的主要价值就是移动位置，让盒子到我们想要的位置上去。

绝对定位（absolute）

[注意]如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某-部分定位。
- 当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。
- 注意:
  
  绝对定位最重要的一-点是，它可以通过边偏移移动位置， 但是它完全脱标，完全不占位置。
- 父级没有定位
  - 绝对定位时，若所有父级没有定位，以浏览器为准对齐
- 父级有定位
  - 绝对定位是将元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位。
    
    常用定位模式：子绝父相

绝对定位水平垂直居中
- 加了绝对定位的盒子，mragin 左右auto 就无效了
- 定位的盒子也可以水平或者垂直居中，有一-个算法。
  1. 首先left 50% ,父盒子宽度的一半
  2. 然后走自己外边距负的一半值就可以了。margin-left
```
例如：
```
```
.arr {
    position:absolute;
    width:24px;
    height:36px;
   	top:50%;       /*这个%时按照父级高度的来进行计算*/
    margin-top:-18px;    /*往上走是负值，走自己高度的一半*/
}
```

固定定位 fixed

固定定位有两点:
1. 固定定位的元素跟父亲没有任何关系，只认浏览器。（它以浏览器为参照物，无论浏览器滚动条如何滚动，也不论浏览器窗口大小如何变化，该元素都会始终显示在浏览器窗口的固定位置，且无论父级有无定位，元素都以浏览器为准对齐）
2. 固定定位完全脱标，不占有位置，不随着滚动条滚动。
3. 固定定位的盒子一定要写宽和高，除非有内容撑开不用写
叠放次序（z-index）
- 当对多个元素同时设置定位时，定位元素之间有可能会发生重叠
  
  在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。
  
  比如：z-index:2;
- 注意：
  1. z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
  2. 如果取值相同，则根据书写顺序，后来居上。
  3. 后面数字一定不能加单位。
  4. 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。

四种定位模式总结

定位模式	是否脱标占有位置	是否可以使用边偏移	移动位置基准
静态static	不脱标，正常模式	不可以	正常模式
相对定位relative	不脱标，占有位置	可以	置
绝对定位absolute	完全脱标，不占有位置	可以	相对于定位父级移动位置
固定定位fixed	完全脱标，不占有位置	可以	相对于浏览器移动位置

元素的显示与隐藏

元素的显示与隐藏

（他们的主要目的是让-个元素在页面中消失，但是不在文档源码中删除。最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现和你玩躲猫猫! !）

display 显示

display 设置或检索对象是否及如何显示
display: none 隐藏对象与它相反的是display: block 除了转换为块级元素外，同时还有显示元素的意思
特点：隐藏之后不再保留位置

visibility 可见性

（设置或检索是否显示对象）

visible ; 对象可视
hidden; 对象隐藏
特点：隐藏之后，继续保留原有位置。（类似停职留薪）

overflow 溢出

（检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。）

visible:不剪切内容也不添加滚动条。（默认处理）
auto : 超出自动显示滚动条，不超出不显示滚动条
hidden:不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll:不管超出内容否，总是显示滚动条

CSS高级-用户界面

鼠标样式 cursor

设置或检索在对象上移动的鼠指针采用何种系统预定的光标形状

cursor: default  小白 | pointer 小手 | move 移动 | text 文本

例：

<ul>
    <li style="cursor:default">我是小白</li>
    <li style="cursor:pointer">我是小手</li>
    <li style="cursor:move">我是移动</li>
    <li style="cursor:text">我是文本</li>
</ul>

轮廓 outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

outline: outline-color || outline-style || outline-width

一般不关心可以设置多少，平时都是去掉的

最直接的写法：outline:0;

<input type="text" style="outline:0;"/>

防止拖拽文本域 resize

resize: none 这个单词可以防止火狐谷歌等浏览器随意的拖动文本域。

右下角可以拖拽:

右下角不可以拖拽:

vertical-align 垂直对齐

（对块级元素无效）

vertical-align:  top  | middle  | baseline | bottom

设置或检索对象内容的垂直对齐方式
- vertical-align不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，特别是行内块元素，通常用来控制图片和表单与文字的对齐。
- 一般情况下，图片和文字默认基线对齐，但我们想要中线对齐
去除图片底侧空白缝隙
- 有个很重要特性你要记住:图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。这样会造成- -个问题，就是图片底侧会有一个空白缝隙。
- 解决方法：
  1. 给img vertical-align:middle | top; 等等。让图片不要和基线对齐
  2. 给 img 添加display: block; 转换为块级元素就不会存在问题了。

溢出文字隐藏

word-break: 自动换行

normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。
主要处理英文单词

while-space

设置或检索对象中文本的显示方式，通常我们使用于
normal : 默认处理方式
nowrap：强制在同一行内显示所有文本，直到文本结束或者遭遇br 标签对象才换行

text-overflow 文字溢出

text-overflow : clip | ellipsis ;

设置或检索是否使用一个省略标记(..)) 标示对象内文本的溢出
clip : 不显示省略标记 (..)) ，而是简单的裁切
ellipsis : 当对象内文本溢出时显示省略标记(..)
注意一定要首先强制一行内显示，再次和overflow属性搭配使用

精灵技术

精灵技术的使用
- CSS精灵其实是将网页中的- -些背景图像整合到一张大图中(精灵图)，然而，各个网页元素通常只需要精灵图中不同位置的某个图，要想精确定位到精灵图中的某个小图，

就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。

规定盒子的背景图为一个精灵图片，然后用切片工具量出所需图片的大小和位置来规定盒子的宽高，然后通过background-position来进行精确的定位

例：
```
span {
    background:url(image/xxx.jpg) no-repead;
    float: left;
}
span {
    wigth: 108px;
    height:108px;
    background-position: 0 9px;  (X Y)
}
```
ps 制作精灵图
- 我们精灵图上放的都是小的装饰性质的背景图片。插入图片不能往上放。
- 我们精灵图的宽度取决于最宽的那个背景。
- 我们可以横向摆放也可以纵向摆放，但是每个图片之间，间隔至少隔开偶数像素合适。
- 在我们精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图。
- 新建：
  - 名称：sprite
  - 颜色：透明
  - 其他：自定

字体图标

字体图标
- 字体图标优点
  - 可以做出跟图片一样可以做的事情,改变透明度、旋转度，等..
  - 但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等...
  - 本身体积更小，但携带的信息并没有削减。
  - 几乎支持所有的浏览器
  - 移动端设备必备良药...
字体图标使用流程

总体来说，字体图标按照如下流程：
1. UI人员设计字体图标效果图（svg）
2. 前端人员上传生成兼容性字体文件包
3. 前端人员下载兼容字体文件包到本地
4. 把字体文件包引入到html页面中
字库
- icomoon 字库
  - 推荐网站：Icon Font & SVG Icon Sets ❍ IcoMoon
- 阿里iconfont字库
  - 推荐网站：iconfont-阿里巴巴矢量图标库
  - 这个是阿里妈妈M2UX的一-个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。- -个字，免费,免费!!
- fontello
  - 推荐网站：Fontello - icon fonts generator
  - 在线定制你自己的icon font字体图标字库，也可以直接从GitHub下载整个图标集，该项目也是开源的。
- Font-Awesome
  - 推荐网站：Font Awesome
  - 更新较块
- Glyphicon Halflings
  - 推荐网站：http://glyppicons.com/
  - 这个字体图标可以在Bootstrap下免费使用。自带了200多个图标。
- Icons8
  - 推荐网站：Free Icons, Clipart Illustrations, Photos, and Music
  - 提供PNG免费下载，像素大能到500PX

字体引入html

第一步：在样式里面声明字体：告诉别人我们自己定义的字体

@font-face {
	font-family: ' icomoon';
	src: url('fonts/icomoon.eot?7kkyc2' );
	src: url('fonts/icomoon.eot?7kkyC2#iefix') format('embedded-opentype'),
	url('fonts/icomoon.ttf?7kkyc2') 	format('truetype'),
	url('fonts/icomoon.woff?7kkyc2') 	format('woff'),
	url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
	font-weight:normal;
	font-style: normal;
}

第二步：给盒子使用字体
```
span {
    font-family:"icomoon";
}
```

第三步：往盒子里进行添加结构

span:: before {
    content: "\e904";
}
或者
<span></span>

滑动门技术

滑动门
- 为了使各种特殊形状的背景能够适应元素中文本内容的多少，出现了css滑动门技术。它从新的角度构建页面，使各种使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。最常见于各种导航栏的滑动门。
- 核心技术
  - 利用css精灵（主要是背景位置）和盒子padding撑开宽度，以便能适应不同字数的导航栏
    
    例子

before和after伪元素

before和after伪元素(详解) 之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素-样，可以对其使用诸如页面元素-样的Css样式，表面上看上去貌似是页面的某些元素来展现，实际上是cs样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查

注意：

1.伪元素:before和:after添加的内容默认是inline元素**;这个两个伪元素的content 属性，表示伪元素的内容，设置:before和:after时必须设置其[ content属性，否则伪元素就不起作用。 2.伪元素是不占位置的。

过渡效果

我们可以在不使用Flash动画或javaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果

transition：要过渡的属性花费时间运动曲线何时开始；

如果又多组属性变化，还是用逗号隔开

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的CSS属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是"ease"。	3
transition-delay	规定过渡效果何时开始。默认是0。	3

如果想所有属性都变化过渡，写个all就可以

div {
    transition:all 0.6s;
}

2D变形

2D变形（CSS3） transform

transform是CSS3中具有颠覆性的特征之-，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。

变形转换 transform transform 变换变形的意思

移动 translate(x,y)

translate 移动平移的意思

translate(50px,50px); 使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。

translate(x,y )水平方向和垂直方向同时移动(也就是x轴和Y轴同时移动)
translateX(x)仅水平方向移动( x轴移动)
translateY(y)仅垂直方向移动( y轴移动)

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2D变形</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            transition: all 0.5s;   
        }
        div:active {
            /* 在x轴y轴上都移动 */
            /* transform: translate(50px,50px); */
            /* 只移动x轴 */
            /* transform: translateX(50px);   */
            /* 只移动y轴 */
            transform: translateY(50px);

        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

translate移动距离，如果是%不是以父级宽度为准，而是以自己的宽度为准

盒子居中对齐 （变形移动与定位结合）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位的盒子居中对齐的完美写法</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color:purple;
            position: absolute;
            left:50%;
            transform: translate(-50%);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

缩放 scale(x,y)

transform:scale(0.8,1); 对元素进行水平方向和垂直方向的缩放

scale(X, Y)使元素水平方向和垂直方向同时缩放(也就是x轴和Y轴同时缩放)
scaleX(x)元素仅水平方向缩放( x轴缩放)
scaleY(y )元素仅垂直方向缩放( Y轴缩放)

scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使- -个元素缩小; 而任何大于或等于1.01的值，作用是让元素放大

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2D变形-缩放</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 100px auto;
            transition: all 0.5s;
        }
        div:hover {
            /* x 水平缩放  y 垂直缩放 如果只写一个参数 则宽度和高度都缩放 */
            /* transform: scale(1.2,1.5);         */
            transform: scale(2);        
        }
        section {
            width: 396px;
            height: 400px;
            margin: 0 auto;
            overflow: hidden;   /* ij溢出隐藏 */
        }
        section img {
            /* 因为是图片缩放了，实际图片做动画，所以过度要给img加 ，谁做动画，谁加过渡 */
            transition: all 0.5s;
        }
        section:hover img {
            transform: scale(1.2);
        }
    </style>
</head>
<body>
    <div></div>
    <section>
        <img src="../image/2.jpg" height="400" width="396" alt="">
    </section>
</body>
</html>

旋转 rotate (deg)

可以对元素进行旋转，正值为顺时针，负值为逆时针
transform:rotate(45deg)

设置变形中心点 （旋转中心点）

transform-orign: center center ; (默认为center center)

倾斜 skew(deg,deg)

transform: skew(30deg, 0deg); 该实例通过skew方法把元素水平方向上向左倾斜30度，处置方向保持不变。可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。

3D变形

左手坐标系

伸出左手，让拇指和食指成"L形，大拇指向右，食指向上，中指指向前方。这样我们就建立了-个左手坐标系，拇指、食指和中指分别代表X、 Y、Z轴的正方向。

简单记住他们的坐标： x左边是负的，右边是正的 y上面是负的，下面是正的 z里面是负的，外面是正的

立体旋转

rotateX()

就是沿着X轴立体旋转

transform:rotateX(360deg) 沿着x轴立体旋转360度

rotateY()

就是沿着Y轴立体旋转

rotateZ()

就是沿着Z轴立体旋转

透视 (perspective) (动画效果）

透视可以将一个2D平面，在转换的过程当中，呈现3D效果。

透视原理:近大远小。
浏览器透视:把近大远小的所有图像，透视在屏幕上。
perspective: 视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置

注:并非任何情况下需要透视效果，根据开发需要进行设置。

perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            perspective: 500px; 
            /* 视距： 距离  眼睛到屏幕的距离  视距越大 效果越不明显  视距越小  透视效果越明显 */
        }
        img {
            margin:200px;
            transition:all 3s;
            transform-origin:left;
        }
        img:hover {
            transform:rotateY(80deg) ;
        }
    </style>
</head>
<body>
    <img src="../image/3.jpg" width="500" alt="">
</body>
</html>

移动

translateX(x)

transform: translateX(100px);

仅水平方向移动（x轴移动）

主要目的是实现移动效果

translateY(y)

仅y轴方向移动（y轴移动）

translateZ(z)

transformZ() 的直观表现形式就是大小变化，实质是XY平面相对于视点的远近变化(说远近就一定会说到离什么参照物远或近，在这里参照物就是perspective属性)。比如设置了perspective为200px;那么transformZ的值越接近200,就是离的越近，看上去也就越大，超过200就看不到了，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            perspective: 500px; 
            /* 视距： 距离  眼睛到屏幕的距离  视距越大 效果越不明显  视距越小  透视效果越明显 */
        }
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            transition: all 1s;
        }
        div:hover {
            transform:translateZ(200px);
        }
    </style>
</head>
<body>
<div></div>    
</body>
</html>

translate3d

transform: translate3d(x,y,z); x,y可以是px 也可以是%,但是 z 只能是px

backface-visilility

backface-visility属性定义元素不面向屏幕时是否可见（简而言之就是：当他旋转180度是它是否还可见）

动画

动画（CSS3） animation

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

语法格式：

animation:动画名称  动画时间  何时开始  播放次数  是否反方向；

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            animation: go 5s;
        }
        /* 定义动画 */
        @keyframes go {
            0% {
                /* 起始位置  等价于from */
                transform:translate3d(0,0,0);
            }
            25% {
                transform:translate3d(800px,0,0);
            }
            50% {
                transform:translate3d(800px,500px,0);
            }
            75% {
                transform:translate3d(0,500px,0);
            }
            100% {
                transform:translate3d(0,0,0);
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

如果有多组变形并且都属于transform 那我们用空格隔开就好了

例 :(一般用在动画掉头部分)

transform:translate3d(0,0,0) rotateY(180deg);

图片无缝滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无缝滚动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        nav {
            width: 1031px;
            height: 150px;
            border: 1px solid pink;
            margin: 100px auto;
            overflow: hidden;
        }
        nav li {
            float: left;
        }
        nav ul {
            width: 200%;
            /* 引用动画 */
            animation: moving 5s linear infinite;
            /* linear  匀速运动 */
        }
        @keyframes moving {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(-882px);
            }
        }
        nav:hover ul { 
            /* 鼠标经过nav 里面的 ul 就不做动画了 */
            animation-play-state: paused;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><img src="../image/1.jpg" height="150"></li>
            <li><img src="../image/2.jpg" height="150" alt=""></li>
            <li><img src="../image/3.jpg" height="150" alt=""></li>
            <li><img src="../image/4.jpg" height="150" alt=""></li>
            <li><img src="../image/5.jpg" height="150" alt=""></li>
            <li><img src="../image/6.jpg" height="150" alt=""></li>
            <li><img src="../image/7.jpg" height="150" alt=""></li>
            <li><img src="../image/1.jpg" height="150" ></li>
            <li><img src="../image/2.jpg" height="150" alt=""></li>
            <li><img src="../image/3.jpg" height="150" alt=""></li>
            <li><img src="../image/4.jpg" height="150" alt=""></li>
            <li><img src="../image/5.jpg" height="150" alt=""></li>
            <li><img src="../image/6.jpg" height="150" alt=""></li>
            <li><img src="../image/7.jpg" height="150" alt=""></li>
        </ul>
    </nav>
</body>
</html>

伸缩布局

主轴: Flex容器的主轴主要用来配置Flex项目，默认是水平方向侧轴: 与主轴垂直的轴称作侧轴，默认是垂直方向的方向: 默认主轴从左向右，侧轴默认从上到下主轴和侧轴并不是固定不变的，通过 flex-direction 可以互换。

伸缩布局的排列方式

各属性详解

flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配 min-width最小值 min-width: 280px 最小宽度不能小于 280

flex-direction调整主轴方向(默认为水平方向)

flex-direction: column 垂直排列
flex-direction : row 水平排列

justify-content 调整主轴对齐

值	描述	白话文
flex-start	默认值。项目位于容器的开头。	让子元素从父容器的开头开始排序
flex-end	项目位于容器的结尾。	让子元素从父容器的后面开始排序
center	项目位于容器的中心。	让子元素在父容器中间显示
space-between	项目位于各行之间留有空白的容器内。	左右的盒子贴近父盒子，中间的平均分布空白间距
space-around	项目位于各行之前、之间、之后都留有空白的容器内。	相当于给每个盒子添加了左右margin外边距

justify-content:flex-start/...;

align-items调整侧轴对齐

子盒子如何在父盒子里面垂直对齐（针对一行）

值	描述	白话文
stretch	默认值。项目被拉伸以适应容器。	让子元素的高度拉伸适用父容器(子元素不给高度的前提下)
center	项目位于容器的中心。	垂直居中
flex-start	项目位于容器的开头。	垂直对齐开始位置
flex-end	项目位于容器的结尾。	垂直对齐结束位置

flex-wrap控制是否换行

当我们子盒子内容多于父盒子的时候如何处理

值	描述
nowrap	默认值。规定灵活的项目不拆行或不拆列。不换行，则收缩(压缩)显示.
wrap	规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse	规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。

flex-flow是flex-direction、 flex-wrap的简写形式

flex-flow:flex-direction flex-wrap;

align-content堆栈( 由flex-wrap产生的独立行)对齐

针对多轴（多行）的情况（多行垂直对齐方式）

必须对父元素设置自由盒属性display: flex;，并且设置排列方式为横向排列flex-direction: row;并且设置换行，flex-wrap: wrap; 这样这个属性的设置才会起作用。

section {
	display:flex;
    flex-flow:row wrap;
    align-content:center/...;
}

值	描述
stretch	默认值。项目被拉伸以适应容器。
center	项目位于容器的中心。
flex-start	项目位于容器的开头。
flex-end	项目位于容器的结尾。
space-between	项目位于各行之间留有空白的容器内。
space-around	项目位于各行之前、之间、之后都留有空白的容器内。

order控制子项目的排列顺序，正序方式排序，从小到大

用css来控制盒子的先后顺序。

用整数来定义排列顺序，数值小的排在前面。可以为负值。默认值是0。

order:0;

@1932

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS学习

CSS学习CSS样式规则和基本选择器CSS样式规则选择器{属性:属性值; 属性:属性值;} --------- 声明在上面的样式规则中:1.选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。2.属性和属性值以“键值对”的形式出现。3.属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等。4.属性和属性值之间用英文“:”连接。5.多个“键值对”之间用英文“;”进行区分。可以用段落和表格的对齐的演示。
复制链接

扫一扫