CSS笔记汇总-最全最仔细（会时刻更新）

最新推荐文章于 2024-04-23 11:10:17 发布

Ting7亭子

最新推荐文章于 2024-04-23 11:10:17 发布

阅读量887

点赞数 2

分类专栏：前端学习基础--计算机基础、HTML、CSS、JS 文章标签： css 笔记前端

本文链接：https://blog.csdn.net/qq_36932169/article/details/133123589

版权

前端学习基础--计算机基础、HTML、CSS、JS 专栏收录该内容

8 篇文章 11 订阅

订阅专栏

1 基础知识

小技巧：

HTML用于控制网页的结构，CSS用于控制网页的外观，JavaScript控制的是网页的行为。
注释：ctrl+/ Shift +alt 按住不松开鼠标左往下拉输入相同内容。 PS中 Ctrl+r调出标尺。
空格规范：属性值前面，冒号后面保留一个空格。选择器后面，大括号前面一个空格
单行文字垂直居中：文字的行高line-height=盒子的高度height

1.1 引入的三种方式

1.1.1 外部样式表

创建一个CSS文件，将所有样式放在一个或多个css外部样式表文件中，通过link标签将外部样式表链接到HTML文档中

<head>
	<link rel="stylesheet" type="text/css" href="css文件url"/>
</head>

1.1.2 内部样式表

CSS代码放在style标签内，并且style标签是放在head标签内部的。

<head>
	<style type="text/css">
        选择器{
            属性1：属性值；
            属性2：属性值；
        }
</head>

1.1.3 行内样式表

行内样式表的CSS是在“标签的style属性”中定义的。

<h1 style="color:pink;font-size:18px;"></h1>

1.1.4 三种样式总结

样式表	优点	缺点	使用情况	控制范围
行内样式	书写方便，权重高	没有实现样式和结构相分离	较少	一个标签
内部样式	部分结构和样式像分离	没有彻底分离	较多	控制一个页面
外部样式	完全实现结构和样式相分离	需要引入	最多，强烈推荐	控制整个站点

1.2 选择器

找到特定的HTML页面元素，其实就是选择标签的

1.2.1 基础选择器

1. 标签选择器
标签选择器，就是选中相同的元素，然后对相同的元素定义同一个CSS样式。
语法：
在这里插入图片描述

2. 类选择器

<p class=""></p>

<span class="blue font100"></span>
//给标签多个类名，方便标签选择多个样式，同时避免了不同选择器中相同样式的重复

.类名{
	属性：属性值；
}

3. id选择器
id选择器使用#标识后面紧跟id名

元素的id值是唯一的，只能对应域文档的某一个具体的元素
用法与类选择器基本相同
如同人可以重名也就是class，而id如同身份证对每个标签是唯一的

<p id="id名"></p>

#id{属性：属性值;}

4. 通配符选择器
*表示所有标签,会降低页面响应速度不建议随便使用

*{
属性：属性值；
}

* {
margin: 0;
padding: 0;
}

1.2.2 复合选择器

后代、子、并集、伪类选择器。

1. 后代选择器
后代选择器，就是选择元素内部中所有的某一种元素，包括子元素和其他后代元素（如“孙元素”）。
语法：
在这里插入图片描述

说明：父元素和后代元素必须要用空格隔开，从而表示选中某个元素内部的后代元素。

2. 子选择器
只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。孙子不管。
语法：元素1>元素2 表示选择元素1里面的所有直接后代（子元素）元素2. 大于号隔开，选择的是元素2。
例：div > p { } /*选择div里面所有最近一级p标签元素。*/

3. 群组选择器
用英文逗号（,）隔开。指的是同时对几个选择器进行相同的操作。
语法：
在这里插入图片描述
例如： h3, div, p, span {color:red;}
h3,div,p,span{……}表示选中所有的h3元素、div元素、p元素和span元素。

4. 伪类选择器
用于给某些选择器添加特殊效果：给链接或选第n个元素。按照lvha的顺序声明

链接伪类选择器：一般只会用到两种状态：未访问时状态和鼠标经过状态。
a:link{ } 定义a元素未访问时的样式
a:visited{ } 定义a元素访问后的样式
a:hover{ } 定义鼠标经过a元素时的样式
a:active{ } 定义鼠标点击激活时的样式
语法：对于未访问时状态，我们直接针对a元素定义就行了，没必要使用a:link。
a{…}
a:hover{…}
鼠标样式：
cursor: 取值; 一般只会用到3个：default、pointer和text。
自定义：cursor: url(图片地址), 属性值; 地址后缀名为.cur
focus伪类选择器：用于选取获得焦点的表单元素。主要针对表单元素来说。 input:focus {}

1.3 样式属性

1.3.1 字体样式属性

在这里插入图片描述
字体复合属性：

body {
	font: font-style font-weight font-size/line-height font-family;
}

不能更换顺序，每个属性以空格隔开。必须保留font-size和font-family属性。

1.3.2 文本样式属性

在这里插入图片描述

1.4 CSS的元素显示模式

1.4.1 块元素 block

块元素独占一行，排斥其他元素（包括块元素和行内元素）与其位于同一行。
高度、宽度、外边距以及内边距都可以控制。
宽度默认是容器（父级宽度）的100%。
是一个容器盒子，内部可以容纳其他块元素和行内元素。p里面不可以放div。文字类块标签只能放文字。

常见块元素标签：h1~h6标题元素；p段落元素；div div元素；hr水平线；ol有序列表；ul无序列表

1.4.2 行内元素 inline

行内元素可以与其他行内元素位于同一行。
宽、高设置无效。
默认宽度就是它本身的宽度。
行内元素内部只能容纳文本或其他行内元素，不可以容纳块元素。 a链接是特殊可以容纳块级元素。

常见行内元素标签strong粗体元素；em斜体元素；a超链接；span常用行内元素，结合CSS定义样式

1.4.3 行内块元素 inline-block

在行内元素中有几个特殊的标签-、、，它们同时具有块元素和行内元素的特点。

和相邻行内元素(行内块)在一行上，但是他们之间会有空白缝隙一行可以显示多个(行内元素特点)。
默认宽度就是它本身内容的宽度(行内元素特点)。
高度，行高、外边距以及内边距都可以控制(块级元素特点)。

1.4.4模式转换 display

转块级元素：display: block;
转为行内元素：display: inline;
转为行内块元素： display: inline-block

1.5 背景

在这里插入图片描述

背景颜色：background-color: 颜色值; 英文名或RGB
背景图片样式：background-image: url(图片路径); 路径加不加引号都可以（别忘记设置宽和高，否则为0不显示）
背景图片重复：background-repeat: 取值;
背景图片位置：background-position:
精确单位length: 百分数 | 由单位标识符组成的长度值。
Position：top | center | bottom| left |center |right 方位名词。
方位名词的right center和center right等价的；如果只指定一个，另外一个默认居中对齐。
例如，“background-position:12px 24px;”表示背景图片距离该元素左上角的水平方向距离为12px，垂直方向距离为24px。
关键值：
背景图片固定：background-attachment:取值；scroll随元素一起滚动（默认值）；fixed 固定不动
复合写法：没有规定的顺序，一般约定顺序为：
Background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置
背景半透明
Background: rgba( 0, 0, 0, 0.3);最后一个参数是alpha透明度，取值范围在0~1之间。

1.6 CSS三大特性

层叠性：样式冲突时，后来者居上。
继承性：子标签继承父标签的某些样式（主要文字相关的text- ,font- ,line- 开头的、color）。
行高：父元素里font: 12px/1.5 ‘Macrosoft YaHei’; 子元素继承父元素的行高1.5，也就是1.5子元素字体font-size大小。
可以跟单位也可以不跟。如果子元素没有设置字体大小，继承父元素的字体，行高=1.5父元素字体font-size大小。
优先级：选择器相同，执行层叠性；选择性不同，根据选择器权重执行。
继承或者* 0000<元素选择器0001<类、伪类选择器0010<id选择器0100<行内样式style 1000<!important ∞无穷大
继承的权重是0：不管父元素的权重有多高，子元素继承的权重为0. a链接不继承父亲的样式。
权重叠加：计算权重比较权重虽然有叠加，不会有进位情况。简单相加就可以。
例如：div ul li是0,0,0,3 .nav ul li---->0,0,1,2 a:hover—>0,0,1,1 .nav a—>0,0,1,1

1.7 技巧

1.7.1 emmet语法

1.生成标签直接输入标签名按tab键即可比如div然后tab 键，就可以生成<div> </div>
2.如果想要生成多个相同标签加上就可以了比如div3 就可以快速生成3个div
3.如果有父子级关系的标签，可以用>比如ul> li就可以了
4. 如果有兄弟关系的标签，用+就可以了比如div+p
5. 如果生成带有类名或者id名字的，直接写.demo或者#two tab 键就可以了
6. 如果生成的div 类名是有顺序的，可以用自增符号 $, 例 . d e m o$ *5
7.如果想要在生成的标签内部写内容可以用大括号{}表示,div{$}*5

1.7.2 快速生成css语法

1.比如w200 按下tab键可以生成width: 200px;
2.比如lh26 按下tab键可以生成line-height:26px;

1.7.3 小工具

FSC工具里面标尺量行高
下载并打开Snipaste，按下F1来开始截图，，再按F3，截图就在桌面置顶显示了

PS
常见图片格式：ipg, gif, png(透明), psd。
切图（1）图层：右击图层–>快速导出为PNG 或者先合并图层 Ctrl+e
（2）切片切图：切片工具手动划出–>文件菜单导出–>存储为web设备所用格式–>选择格式存储–>保存为选中的切片。
（3）PS插件:Cutterman

1.7.4 CSS属性书写顺序(重点)

1.布局定位属性: display/ position/ float/ clear / visibility/ overflow (建议display第一个写，毕竟关系到模式)
2.自身属性: width/ height/ margin/ padding / border/ background
3.文本属性: color/ font / text -decoration/ text align/ vertical align/ white- space / break-word
4.其他属性(CSS3) : content /cursor / border-radius/ box shadow/ text -shadow/ background:linear-gradint …

1.7.5 页面布局整体思路

必须确定页面的版心(可视区)，我们测可得知。
分析页面中的行模块，以及每个行模块中的列模块。其是页面布局第一准则。
一行中的列模块经常浮动布局，先确定每个列的大小,之后确定列的位置。页面布局第二准则。
制作HTML结构。我们还是遵循, 先有结构, 后有样式的原则。结构永远最重要。
5.所以先理清楚布局结构，再写代码尤为重要。

常见布局技巧

margin负值的运用：让每个盒子margin:-1px;左移压住相邻盒子边框。无定位加相对定位，有定位加z-index。
文字围绕浮动元素：文字p块元素，图片放div里设置左浮动。
行内块的巧妙运用：盒子添加text-align:center;里面行内元素、行内块元素水平居中对齐。
css三角强化：直角三角形：bottom和left边框宽度为0px; top更高一些和透明。

1.7.6 精灵图

（用于结构样式比较复杂的小图片）
核心：
1.精灵技术主要针对背景图片使用，移动背景图片位置，使用background-position。
2.移动的距离就是这个图片的x和y坐标，一般情况下都是往上往左移动，为负值。
3.使用精灵图时精准测量，每个小背景图片的大小和位置。

1.7.7 字体图标iconfont

展示是图标，实际是字体。（用于结构样式比较简单的小图标）

字体图标的下载
（1）icomoon字库
打开网页点击右上角iconmoon app–>点击选择图标–>点右下角generate font–>dowload下载完成解压
（2）阿里iconfont字库
字体图标的引入(引入html中)
Icomoon:
把fonts文件夹放页面根目录下–>在css中全局声明字体(复制style.css第一段)–>打开demo.html复制后面小框框到html标签中或者’\e91e’格式–>span样式中声明字体类型font-family: ‘icomoon’;
阿里：
引入iconfont.css–>html标签i或者span中添加两个类名：一个固定的是iconfont，另一个想要的图标对应类名。
字体图标的追加(以后添加新的小图标)
点击页面左上角import icons–>点压缩包里的selection.json重新上传–>选中想要的图标，重新下载替换原来fonts文件夹

1.7.8 界面样式

鼠标样式：li { curser: pointer; }
default:小白箭头默认 pointer:小手 move:移动 text:文本 not-allowed:禁止
去掉表单轮廓线：给表单input添加outline: 0;或者outline: none；样式就可以去掉默认蓝色边框。
防止文本域拖拽resize。给textarea设置resize: none;即可。textarea标签写在一行上，防止光标定位产生空格。
vertical-align属性：用于设置图片或者表单（行内块元素）和文字垂直对齐。只针对行内元素或行内块元素。
vertical-align: baseline | top |middle |bottom。
middle:图片文字居中对齐。默认行内块元素与基线对齐。
解决图片底部默认空白缝隙问题:原因默认与基线对齐.
（1）改top |middle |bottom任意一个缝隙就消失了。（常用）
（2）转为块级元素：display:block;
溢出文字省略号显示
（1）单行：先强制一行内显示文本white-space:nowrap;默认normal自动换行–>超出的部分隐藏overflow:hidden;–>文字用省略号代替超出的部分text-overflow:ellipsis;
（2）多行：有较大兼容性问题，适合于webkit浏览器或移动端。后台人员做更简单。

overflow: hidden; text-overflow: ellipsis;
display: -webkit-box; /* 弹性伸缩盒子模型显示 /
-webkit-line-clamp: 2; / 限制在一个块元素显示的文本的行数在第二行显示省略号 /
-webkit-box-orient: vertical; / 设置或检索伸缩盒对象的子元素的排列方式垂直居中 */

2 盒子模型

在这里插入图片描述

2.1 基本属性

每个元素都看成一个盒子，盒子模型是由四个属性组成的：content（内容）、padding（内边距）、margin（外边距）和border（边框）。此外，在盒子模型中，还有宽度width和高度height两大辅助性属性。记住，所有的元素都可以看成一个盒子。
在这里插入图片描述

2.1.1 width、height

宽width和高height是相对于内容而言的，不包括padding。只有块元素设置有用，行内元素没用。

2.1.2 边框border

边框border: 1px solid red;宽度、样式、颜色。
在这里插入图片描述
简写：border: 1px solid red;没有顺序要求。
局部样式：

Border-collapse: collapse;表示相邻边框合并在一起。
边框会额外增加盒子的大小：
（1）测量盒子大小的时候，不量边框。
（2）如果测量的时候包括了边框，则需要width/height减去边框宽度。

2.1.3 内边距padding

又常常被称为“补白”，它指的是内容区到边框之间的那一部分。
（1）内边距分为4个方向：padding-top、padding-right、padding-bottom、padding-left。
（2）简写：

padding: 像素值; //四个相同
padding: 像素值1 像素值2; //上下、左右
Padding:5px 10px 20px;3个值代表上内边距5px 左右内边距10px 下内边距20px;
padding: 像素值1 像素值2 像素值3 像素值4;上右下左顺时针

会影响盒子的大小。为了保证盒子和效果图片大小保持一致，让width/height减去多出来的内边距大小即可。
不指定盒子宽高的话，内边距不会撑开盒子。

2.1.4 外边距margin

指的是边框到“父元素”或“兄弟元素”之间的那一部分。
（1）margin-top、margin-right、margin-bottom、margin-left。简写跟padding一样。
（2）当只有父元素时，该元素设置的margin就是相对于父元素之间的距离。
（3）当既有父元素，也有兄弟元素时，该元素会先看看四个方向有没有兄弟元素存在。如果该方向有兄弟元素，则这个方向的margin就是相对于兄弟元素而言。如果该方向没有兄弟元素，则这个方向的margin就是相对于父元素而言。
（4）应用：外边距可以让块级盒子水平居中。（盒子必须指定宽度、左右外边距设置auto）margin:0 auto;
行内元素和行内块元素水平居中给其父元素添加text-align:center即可。

2.1.5 补充知识

1. 外边距合并
（1）相邻块元素垂直外边距的合并：取两个值得较大者，尽量只给一个盒子添加margin值。
（2）嵌套块元素垂直外边距的塌陷：两个嵌套关系(父子关系)的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
注意：”浮动的盒子不会有外边距合并的问题 “.
解决方案：可以为父元素定义上边框：border:1px solid transparent; 为父亲定义上内边距padding:1px；为父元素添加overflow:hidden;

2. 清除内外边距
css的第一行代码*{margin: 0; padding: 0;} 注意：行内元素尽量只设置左右内外边距，不要设置上下内外边距。

3. 圆角边框
border-radius: 10px;数值或半分比。以数值为半径的圆与边框四个角的交集也就是内切形成的。
（1）圆形的话让正方形radius为高或宽的一半：数值或50%;即
（2）圆角矩形：border-radius为高度的一半；
（3）设置不同的圆角：顺时针设置四个值。左上角、右上角、右下角、左下角。border-top-left-radius两个值是对角线：1和3

4. 盒子阴影
box-shadow: h-shadow v-shadow blur spread color inset; 前两个必须、不占用空间。
h-shadow 水平阴影的位置 v-shadow 垂直阴影的位置blur 模糊距离虚实spread阴影的尺寸 color阴影颜色 inset 内部阴影

5. 文字阴影
text-shadow: h-shadow v-shadow blur color;

2.2 布局方式

网页布局的本质用CSS 来摆放盒子。
传统网页布局的三种方式：普通流(标准流)、浮动、定位。
网页布局第一准则：“多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动”。

2.2.1 标准流（最基本布局方式）

（1）块级元素会独占-行，从上向下顺序排列。
常用元素: div、 hr、p、h1~h6、ul、ol、dl、form、table

（2）行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。
常用元素: span、a、i、em等

2.2.2 浮动float

在CSS中，浮动布局是最重要的布局之一。它能够让元素脱离文档流，方便实现多列布局等效果。但是，浮动布局需要注意一些问题，如高度塌陷、浮动元素相互影响等。解决这些问题可以使用清除浮动、设置margin值和clear属性等方法。

可以让多个块级元素盒子在一行排列显示。
（1）语法：选择器 { float: 属性值;} 属性值：none 默认不浮动; left左浮动; right右浮动;

（2）特性：

浮动元素会脱离标准流的控制（浮）移动到指定的位置（动）.（简称脱标）,不再保留原先的位置(让给别人)。
浮动的元素会一行内显示并且元素顶部对齐。(紧贴一起没有缝隙，父级宽度装不下，多出的则另起一行)。
浮动的元素会具有行内块的特性。(行内元素不需要转换就可以设置宽高)

（3）经常与父级搭配：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。

（4）清除浮动：父级盒子在很多情况下不方便给高度，但是子盒子浮动又不占位置，最后父盒子高度为0会影响下面标准流盒子。

本质：就是清除浮动元素造成的影响，使得父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不影响下面标准流了。
语法：选择器{clear:属性值;} 描述： left清除左侧浮动; right 清除右侧浮动; both 清除两边浮动;
策略：闭合浮动。(只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子)。
方法：

（1）额外标签法：在浮动元素末尾添加一个空标签(块元素)，<div style=”clear:both”></div>，或者其他标签<br/>等。
（2）父级添加overflow属性。溢出隐藏overflow:hidden; 属性值hidden、auto、scroll。
（3）父级添加after伪元素。 .clearfix::after{ content: ‘’ ‘’; display: block; height: 0px; clear: both; visibility:hidden; }
.clearfix{ *zoom:1; } /ie6、7专有/ 淘宝
（4）父级添加双伪元素。.clearfix:before,.clearfix:after{ content: ‘’ ‘’; display:table; }
.clearfix:after { clear:both; } .clearfix{ *zoom:1; } 小米

注意点：（标准流占一行，后面浮动浮不上来）

（1）浮动和标准流的父盒子搭配：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。
（2）一个元素浮动了，理论上其余的兄弟元素也要浮动。浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。

（5）高度塌陷
在浮动布局中，如果父元素包含浮动元素，那么就会出现高度塌陷问题。这是因为浮动元素的高度不会占据文档流中的空间，而父元素的高度是由其子元素的高度决定的。解决这个问题可以使用清除浮动或者让父元素也浮动。

2.2.3 定位position

让盒子自由的在某个盒子内移动或者固定屏幕中某个位置，并且可以压住其他盒子。”子绝父相”.
定位=定位模式+边偏移边偏移：top、bottom、left和right 像素值。
在这里插入图片描述

2.2.4 常用小技巧

1. 固定定位小技巧：固定在版心右侧位置。
（1）让固定定位的盒子left: 50%.走到浏览器可视区(也可以看做版心)的一半位置。
（2）让固定定位的盒子margin-left:版心宽度的一半距离。多走版心宽度的一半位置。

2. 粘性定位sticky: 选择器{ position:sticky; top:10px;}
（1）相对浏览器可视窗口的位置（固定定位特点）
（2）占有原先的位置（相对定位特点）
（3）必须添加top,left,right,bottom其中一个才生效。

3. 定位重叠次序z-index:1; 数字后边不加单位，只有定位的盒子才有z-index属性。
数值可以是正整数，负整数或0，默认是auto，数值越大越靠上。（没设置的话则按照书写顺序，后来居上）

4. 绝对定位的盒子水平居中：绝对定位里margin:auto ;并不能居中。
方法：水平居中1.left:50%; 父容器宽度的一半。2.margin-left:-100px;负值往左边走自己盒子宽度的一半。
垂直居中1.top:50%; 父容器高度的一半。2.margin-top:-100px;负值往上边走自己盒子高度的一半。

5. 定位特殊特性：
（1）行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
（2）块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
（3）脱标的盒子（浮动、绝对、固定定位）不会触发外边距塌陷。
（4）绝对定位（固定定位）会完全压住盒子。浮动元素只会压住它下面标准流的盒子，不会压下面标准流盒子里面的文字（图片）。

6. 元素的显示与隐藏：让一个元素在页面中隐藏或显示出来。
（1）display none: 隐藏,不占位置；block: 除了转为块元素还有显示出来的意思。
（2）visibility可见性 hidden隐藏，占有位置 ; visible可视
（3）overflow溢出的部分显示与隐藏。visible显示；hidden 多出隐藏；scroll 显示滚动条；auto 溢出时才添加滚动条；
如果有定位的盒子，请慎用overflow:hidden 因为它会隐藏多余的部分。

2.2.5 总结

一个完整的网页，是标准流、浮动、定位一起完成布局的,每个都有自己的专门用法。

标准流
可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。
浮动
可以让多个块级元素行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。
定位
定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。

2.3 盒子居中

盒子居中是相对于父元素来说的，因此我们让盒子居中时，往往采用嵌套的方式，让父盒子套着子盒子。

2.3.1 水平居中

在父子盒子嵌套下，让子盒子水平居中的方式：
第一种方法：margin-auto，使用边框，但是margin使用会影响其他盒子的使用，不太推荐使用；

margin+width方法
#father{
    width: 400px;
    height: 200px;
    border: 3px solid pink;
    margin: 30px auto; /* 让父元素相对于body居中 */
}
#son{
    width: 100px;
    height: 100px;
    border: 2px solid red;
    margin: 0 auto;/* 让子元素相对于father居中 */
}
</style>
margin:0 auto;(只适用子盒子有宽度的时候）

第二种方法：position，使用定位，子绝父相，再left:50%，margin-left:负的盒子宽度的一半

#father {
  width: 400px;
  height: 200px;
  border: 3px solid pink;
  margin: 0 auto;
  position: relative;
}
#son {
  width: 100px;
  height: 100px;
  border: 2px solid red;
  position: absolute;
  left: 50%;
  margin-left: -50px;
}

第三种方法：flex，弹性布局，让子盒子居中，但是样式要写在父盒子中，display:flex,just-content:center;

#father{
    width: 400px;
    height: 200px;
    border: 3px solid pink;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}
#son{
    width: 100px;
    height: 100px;
    border: 2px solid red;
}

第四种方法：在position基础上，把margin-left换成CSS3中的transform：translate(-50px);
第五种方法：在position的基础上，只保留子绝父相，然后在子盒子中加上margin:auto、left:0、right:0

#father{
    width: 400px;
    height: 200px;
    border: 3px solid pink;
    margin: 0 auto;
    position: relative;
}
#son{
    width: 100px;
    height: 100px;
    border: 2px solid red;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
}

2.3.2 水平垂直居中

方法一：定位：

#son{
  position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

方法二：弹性盒的方法（最简单的，推荐使用）

#father {
  display: flex;
  justify-content: center;
  align-items: center;
}

方法三：

#son {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

3 HTML5和CSS3的新特性

3.1 HTML5

1. 新的标签
（1）语义化标签：针对搜索引擎的，需要转化为块级元素

<header>:头部标签 
<nav>:导航标签 
<article>:内容标签 
<section>:定义文档某个区域 
<aside>:侧边栏标签 
<footer>:尾部标签

（2）多媒体标签：音频<audio>; 视频<video>

<video src=”文件地址” controls=”controls”></video>

常见属性：autoplay=”autoplay”自动播放; controls播放控件；loop 循环播放；src 视频地址; poster=”imgurl” 加载图片；muted 静音

2. 新的表单input类型
type=”number”数字 type=”tel”手机号码 type=”search”搜索框

3. 新的表单属性
（1）required=”required” 不能为空，必填
（2）placeholder=” 提示文本” 表单的提示信息；input::placeholder{ color:pink; }修改字体颜色。
（3）autofocus=”autofocus”自动聚焦属性，页面加载完成自动聚焦到指定表单
（4）autocomplete 历史键入的值显示，默认on显示，一般需要关闭设置off；同时加入name属性。
（5）mutiple 可以多选文件提交。

3.2 CSS3

1.新增选择器
类选择器、属性选择器、伪类选择器，权重为10。标签为1；E[att] 权重为10+1=11
（1）属性选择器

E[att] 选择具有att属性的E元素； E[att=”val”]选中具有att属性且值等于val ； E[att*=”val”]选中具有att属性且值含有val；
E[att^=”val”]选中具有att属性且以val开头； E[att$=”val”]选中具有att属性且val结尾

（2）结构伪类选择器: section div:nth-of-type(1) 权重1+1+10=12

E:first-child 匹配父元素中第一个子元素E ; E:last-child 匹配父元素中最后一个子元素E ;
E:nth-child(n) 匹配父元素中第n个子元素E ; n可以是数字(1开始)、关键字(even偶数 odd)、公式(2n偶数、2n+1奇数、5n、n+5)
nth-child(n)从0开始算的；会把所有的盒子都排列序号，执行的时候先看:nth-child(1) 之后再看前面div 是否匹配，不匹配就不选。
E:first-of-type 指定类型E的第一个; E:last-of-type 指定类型E的最后一个; E:nth-of-type(n) 指定类型E的第n个;
div:nth-of-type(1) 会把指定元素的盒子排列序号，执行时首先看div指定的元素再看nth-of-type(1)第几个孩子

（3）伪元素选择器：
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容 (行内元素、必须含有content属性)

2.盒子模型
（1）box-sizing:content-box 盒子大小为width+padding+border(以前默认的)，会撑大盒子。
（2）box-sizing:border-box 盒子大小为width 不会撑大盒子。

3.其它特性
（1）图片模糊：filter:blur(5px) blur模糊处理，数值越大越模糊。记得加单位。
（2）计算盒子宽度width:calc函数：
width:cal(100% - 30px);可以设置子盒子宽度永远比父盒子小30像素。注意：运算符±*/左右必须加空格！
（3）过渡：经常与:hover一起搭配使用。过渡写在本身上，谁做过渡给谁加。多个属性使用逗号进行分割。

transition:
要过渡的属性:width、height、all全部
花费时间:单位为s
运动曲线:默认ease
何时开始:延迟触发时间单位为s;
ease 匀速慢下来； linear 匀速； ease-in 加速； ease-out 减速； ease-in-out 先加速再减速；

4.2D转换（transform）

（1）移动:translate 可以改变元素在页面中的位置，类似定位。
语法：
x就是x轴上移动位置 y 就是y轴上移动位置中间用逗号分隔 transform: translate(x, y); transform: translate(100px, 100px);

只移动x坐标 transform: translate(100px, 0); transform: translateX(100px);
只移动y坐标 transform: translate(0, 100px); transform: translateY(100px);

重点：

①定义2D转换中的移动，沿着X和Y轴移动元素
②translate最大的优点：不会影响到其他元素的位置。
③translate中的百分比单位是相对于自身元素的translate:(50%,50%);
④对行内标签没有效果。

应用：盒子实现水平和垂直居中代码

p {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color: purple;
            /* margin-top: -100px;
            margin-left: -100px; */
            /* translate(-50%, -50%)  盒子往上走自己高度的一半   */
            transform: translate(-50%, -50%);
        }

（2）旋转:rotate 指的是让元素在2维平面内顺时针旋转或者逆时针旋转 transfoem:rotate(度数)
重点：

①rotate里面跟度数，单位是deg，比如rotate(45deg)。
②角度为正时，顺时针，负时为逆时针。
③默认旋转的中心点是元素的中心点。设置元素转换的中心点transform-origin:x y;可以设置像素或者方位名词top…

（3）缩放:scale 可以放大和缩小 transform:scale(x,y);
注意：

①其中的x和y用逗号分隔。
②里面写的数字不跟单位就是倍数的意思 1 就是1倍 2就是 2倍 /* transform: scale(2, 2); */
③修改了宽度为原来的2倍高度不变 /* transform: scale(2, 1); /
④等比例缩放同时修改宽度和高度，只写一个参数，第二个和第一个一样。 / transform: scale(2); */
⑤我们可以进行缩小小于1 就是缩放 /* transform: scale(0.5, 0.5); / / transform: scale(0.5); */
⑥scale 的优势之处：不会影响其他的盒子而且可以设置缩放的中心点。
应用：分页按钮

li {
            float: left;
            width: 30px;
            height: 30px;
            border: 1px solid pink;
            margin: 10px;
            text-align: center;
            line-height: 30px;
            list-style: none;
            border-radius: 50%;
            cursor: pointer;
            transition: all .4s;
        }
li:hover {
           transform: scale(1.2);
}

（4）2D转换综合写法 transform:translate() rotate() scale()…等等
注意：其顺序会影响转换的效果(先旋转会改变坐标轴方向)
当我们同时有位移和其他属性的时候，记得要将位移放到最前。

5. 动画animation 通过设置多个节点来精确控制一个或一组动画。
使用步骤：
（1）先定义动画：用keyframes定义动画（类似定义类选择器）

@keyframes 动画名称 {
          0% {  /* 开始状态 */
                transform: translateX(0px);
            }
          100% { /* 结束状态 */
                transform: translateX(1000px);
            }
        }

重点：
①0%是动画的开始, 100%是动画的完成。这样的规则就是动画序列。
②在 @keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果。
③动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
④用百分比来规定变化发生的时间或用关键词"from"和"to"，等同于0%和100%。百分比是整数，按照总时间划分。

（2）使用动画：

①调用动画 animation-name: 动画名称；
②持续时间 animation-duration: 持续时间；

（3）常用属性：name和duration一定要写。
在这里插入图片描述
animation: name duration timing-function delay iteration-count direction fill-mode;
animation: move 2s linear 0s 1 alternate forwards;
注意：
①　简写属性里面不包含animation-play-state
②　暂停动画: animation-play-state: puased; 经常和鼠标经过等其他配合使用
③　想要动画走回来,而不是直接跳回来: animation-direction : alternate
④　盒子动画结束后,停在结束位置: animation-fill-mode : forwards
⑤　速度曲线细节：linear、ease、ease-in、ease-out、ease-in-out、steps()指定时间函数中的间隔数量（步长）
⑥　元素可以添加多个动画，用逗号分隔。
应用：热点图案例、奔跑的北极熊。

6.3D转换
特点：近大远小；物体后面遮挡不可见。

（1）三维坐标系:
x轴:水平向右注意: x右边是正值,左边是负值
y轴:垂直向下注意: y下面是正值,上面是负值
z轴:垂直屏幕注意:往外面是正值，往里面是负值

（2）3D位移：translate3d(x,y,z)
translform:translateX(100px) :仅仅是在x轴上移动
translform:translateY(160px) :仅仅是在Y轴上移动
translform:translateZ(100px) :仅仅是在Z轴上移动(注意: translateZ-般用px单位)
transform:translate3d(x,y,z):其中x、y、z分别指要移动的轴的方向的距离,不能省略，没有就写0。

（3）3D旋转：rotate3d(x,y,z) 指可以让元素在三维平面内沿着x轴，y轴, z轴或者自定义轴进行旋转。

transform:rotateX(45deg) :沿着x轴正方向旋转45度
transform:rotateY(45deg) : 沿着y轴正方向旋转45deg
transform:rotateZ(45deg) :沿着Z轴正方向旋转45deg
transform:rotate3d(x,y,z,deg) :沿着自定义轴旋转deg为角度(了解即可) rotate3d(1,1,0,45deg)对角线

方向的判定–左手准则：
左手的手拇指指向x轴的正方向（朝右），其余手指的弯曲方向就是该元素沿着x轴旋转的方向(正值)。
左手的手拇指指向y轴的正方向（朝下），其余手指的弯曲方向就是该元素沿着y轴旋转的方向(正值)

（4）透视：perspective:350px 越小越大（透视我们也称为视距:视距就是人的眼睛到屏幕的距离）单位是像素。
①　如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)。
②　模拟人类的视觉位置,可认为安排一只眼睛去看。距离视觉点越近的在电脑平面成像越大,越远成像越小。
③　透视写在被观察元素的父盒子上面
④　d:就是视距，视距是眼睛到屏幕的距离。
⑤　Z:就是z轴，物体距离屏幕的距离，z轴越大，看到的物体越大。

在这里插入图片描述

（5）3D呈现transform-style控制子元素是否开启3维立体环境。

transform- style: flat子元素不开启3d立体空间默认的
transform- style: preserve-3d;子元素开启立体空间

代码写给父级，但是影响的是子盒子；这个属性很重要，后面必用
应用：两面翻转的盒子、3D导航栏transform: translateY(17.5px) rotateX(-90deg);、旋转木马：先旋转好了再移动距离。

7.浏览器私有前缀
浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。

-moz- :代表firefox浏览器私有属性
-ms- :代表ie浏览器私有属性
-webkit- :代表safari、 chrome私有属性
-0- :代表Opera私有属性

提倡的写法

-moz-border- radius: 10px;
-webkit-border -radius: 10px;
-o-border- radius: 10px;
border -radius: 10px;

4 移动WEB开发

4.1 简述

4.1.1 移动端基础

兼容移动端主流浏览器，处理Webkit内核浏览器即可。

4.1.2 视口( viewport )

就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口
（1）布局视口(layout viewport) ios、android基本都将这个视口分辨率设置为980px。
（2）视觉视口(visual viewport)是用户正在看到的网站–是网站的区域。
（3）理想视口(ideal viewport)为了使网站在移动端有最理想的浏览和阅读宽度而设定;理想视口，对设备来讲，是最理想的视心尺寸;需要手动添写meta视口标签通知浏览器操作。

meta视口标签的主要目的:布局视口的宽度应该与理想视口的宽度致,简单理解就是设备有多宽,我们布局的视口就多宽。
标准的viewport设置：
视口宽度和设备保持一致;视口的默认缩放比例1.0;不允许用户自行缩放;最大允许的缩放比例1.0;最小允许的缩放比例1.0

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

在这里插入图片描述

4.1.3 二倍图

（1）物理像素&物理像素比
物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。就是所说的分辨率，iphone8的物理像素750；这是厂商在出厂时就设置好了，比如苹果6\7\8是750* 1334；开发的时候1px不是一定等于1个物理像素的。PC端页面，1px开发像素等于1个物理像素的，但是移动端就不尽相同，一般1px开发像素=2个物理像素；一个px的能显示的物理像素点的个数称为物理像素比或屏幕像素比。
Retina (视网膜屏幕)是一种显示技术,可以将把更多的物理像素点压缩至块屏幕里，从而达到更高的分辨率,并提高屏幕显示的细腻程度。

（2）多倍图：如果代码需要的图片尺寸为3030，图片原本的尺寸应是>=302，这样先缩放再在手机上二倍显示时就不会模糊了。
①　对于一张50px* 50px的图片，在手机Retina屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊。
②　在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题。
③　通常使用倍图，因为iPhone 6\7\8的影响，但是现在还存在3倍图4倍图的情况，这个看实际开发公司需求。
④　背景图片注意缩放问题。

（3）背景缩放 background-size属性规定背景图像的大小；background-size:背景图片宽度背景图片高度;
①　单位: 长度|百分比|cover |contain;
②　cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。部分背景图片显示不全。
contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。可能有部分空白区域。

4.1.4 移动端调试

（1）Chrome DevTools (谷歌浏览器)的模拟手机调试。
（2）搭建本地web服务器,手机和服务器个局域网内 ,通过手机访问服务器。
（3）使用外网服务器，直接IP或域名访问。

4.1.5 移动端技术解决方案

（1）移动端浏览器：基本以webkit内核为主，只需要考虑webkit兼容性问题，放心使用h5和c3。
（2）css初始化normalize.css：保护了有价值的默认值，修复了浏览器bug，模块化，拥有详细的文档。
（3）css3盒子模型box-sizing：border-box; 使得border和padding不会撑大盒子；默认box-sizing:content-box;
（4）特殊样式
在这里插入图片描述

4.1.6 常见布局

（1）单独制作移动端页面（主流）
通常情况下，网址域名前面加m(mobile)可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面。
①　流式布局（百分百布局）
②　flex弹性布局（强烈推荐）
③　less+rem+媒体查询布局
④　混合布局

（2）响应式页面兼容移动端（其次）：三星，制作麻烦，还要去调兼容性。媒体查询、bootstarp

4.2 流式布局（百分百布局）

流式布局，就是百分比布局，也称非固定像素布局。
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
流式布局方式是移动web开发使用的比较常见的布局方式
max-width 最大宽度（max-height最大高度）
min-width 最小宽度（min-height最小高度）

京东移动端首页制作：
1.技术选型：方案:我们采取单独制作移动页面方案；技术:布局采取流式布局
2.搭建相关文件夹结构。css、images、upload、index.html
3.设置视口标签以及引入初始化样式。
4.常用初始化样式：

body {
    width: 100%;
    min-width: 320px;
max-width: 640px;
    margin: 0 auto;
    font-size: 14px;
    font-family: -apple-system, Helvetica, sans-serif;
    color: #666;
    line-height: 1.5;
}
1.5是font-size的1.5倍，行高=文字高度+行间距=1.5文字高度，先给个默认1.5，以后再改(跟word类似，先默认用1.5)

5.二倍精灵图做法

在firework里面把精灵图等比例缩放为原来的一半；之后根据大小测量坐标
注意代码里面background-size也要写 :精灵图原来宽度的一半

6.图片格式：dpg图片压缩技术、webp图片格式。

4.3 flex弹性布局

1. flex与传统比较
（1）传统：兼容性好、布局繁琐、局限性(不能在移动端很好布局)
（2）flex：操作方便，布局简单，移动端应用广泛，pc端浏览器支持情况较差。
建议：如果是PC端页面布局，我们还是传统布局。
如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局

2.布局原理
flex是flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
当我们为父盒子设为flex布局以后,子元素的float、clear 和vertical align属性将失效。
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
采用Flex布局的元素,称为Flex容器( flex container ),简称容器"。它的所有子元素自动成为容器成员,称为Flex项目( flex item) ,简称项目。
总结：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

3.常见父项属性(对父元素设置的)。
（1）flex-direction :设置主轴的方向。

在flex布局中,是分为主轴和侧轴两个方向，同样的叫法有:行和列、x轴和y轴。元素是跟着主轴来排列的。
默认主轴方向就是x轴方向,水平向右；默认侧轴方向就是y轴方向,水平向下
注意:主轴和侧轴是会变化的，就看flex- direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的
row 默认值从左到右从右到左 row-reverse 从右到左
column 从上到下 column-reverse 从下到上

（2）justify-content :设置主轴上的子元素排列方式。（使用之前一定要确认好主轴是哪个）

flex-start 默认值从头部开始如果主轴是x轴，则从左到右
flex-end 从尾部开始排列
center 在主轴居中对齐(如果主轴是x轴则水平居中)
space- around 平分剩余空间
space-between 先两边贴边再平分剩余空间(重要)

（3）flex-wrap :设置子元素是否换行。flex默认不换行的值为nowrap;需要换行时设置为wrap。

（4）align-items :设置侧轴上的子元素排列方式(单行)。默认y轴

flex-start 从上到下；
flex-end 从下到上；
center 挤在一起居中(垂直居中) ；
strentch 拉伸(默认值)

（5）align-content :设置侧轴上的子元素的排列方式(多行)。
只能用于子项出现换行的情况(多行)，在单行下是没有效果的。

flex-start 默认值在侧轴的头部开始排列
flex end 在侧轴的尾部开始排列
center 在侧轴中间显示
space-around 子项在侧轴平分剩余空间
space-between 子项在侧轴先分布在两头，再平分剩余空间
stretch 设置子项元素高度平分父元素高度

align-content 和align-items区别:

align-items适用于单行情况下，只有上对齐、下对齐、居中和拉伸
align- content适应于换行(多行)的情况下(单行情况下无效) ,可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
总结就是单行找align-items ;多行找align-content

（6）flex-flow :复合属性,相当于同时设置了flex-direction和flex-wrap。flex-flow: row wrap;

4.flex布局子项常见属性
（1）flex属性：定义子项目分配剩余空间，用flex来表示占多少份数，一般设flex:1；
（2）align- self控制子项自己在侧轴的排列方式；
align- self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
默认值为auto ,表示继承父元素的align- items属性，如果没有父元素，则等同于stretch。
（3）order属性定义子项的排列顺序(前后顺序)
数值越小，排列越靠前，默认为0. 注意：和z-index不一样

5.携程案例重点笔记
（1）布局
在这里插入图片描述
（2）背景线性渐变：背景渐变必须添加浏览器私有前缀

background: linear-gradient (起始方向，颜色1,颜色2，… .);
background: -webkit- linear-gradient(left, red，blue) ; 水平
background: -webkit-linear -gradient(left top, red，blue); 对角线
起始方向可以是:方位名词或者度数，如果省略默认就是top垂直方向。

4.4 rem适配布局

思考方案?
1.页面布局文字能否随着屏幕大小变化而变化?
2.流式布局和flex布局主要针对于宽度布局,那高度如何设置?
3.怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放?

4.4.1 rem基础

（1）rem单位：rem (root em)是个相对单位 ,类似于em , em是父元素的字体大小。
（2）rem的是相对于html元素的字体大小。例：html 设置font-size= 12px;非根元素设置width:2rem;则换成px表示就是24px。
（3）rem的优点就是通过修改html里面的文字大小来改变页面中元素的大小，实现整体控制。

4.4.2 媒体查询( Media Query )

是CSS3新语法。

（1）简单了解：

使用@media查询,可以针对不同的媒体类型定义不同的样式
@media可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

（2）语法规范

@media mediatype and |not l only (media feature) { 
CSS-Code ;}

用@media开头注意@符号
mediatype查询类型:将不同的终端设备划分成不同的类型,可以根据不同的屏幕尺寸来改变不同的样式。

关键字and not only:将媒体类型或多个媒体特性连接到起做为媒体查询的条件。

and:可以将多个媒体特性连接到一起,相当于“且”的意思。
not :排除某个媒体类型，相当于“非”的意思，可以省略。
only :指定某个特定的媒体类型，可以省略。
media feature媒体特性必须有小括号包含

media feature媒体特性必须有小括号包含
在这里插入图片描述

案例：实现思路
①为了防止混乱按照从大到小的或者从小到大的思路。一般从小到大。
②注意我们有最大值max width和最小值min width都是包含等于的。
③当屏幕小于540像素，背景颜色变为蓝色(x<= 539 ) max-width:539px。
④当屏幕大于等于540像素并且小于等于969像素的时候背景颜色为绿色( 540=<x<= 969 ) min-width:540px
⑤当屏幕大于等于970像素的时候,背景颜色为红色( x>= 970) min-width:970px
注意：screen 还有and必须带上不能省略的,我们的数字后面必须跟单位970px,这个px不能省略的

（3）媒体查询+ rem实现元素动态大小变化
rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸。
媒体查询可以根据不同设备宽度来修改样式。
媒体查询+rem就可以实现不同设备宽度，实现页面元素大小的动态变化。

（4）引入资源(理解)
当样式比较繁多的时候,我们可以针对不同的媒体使用不同stylesheets (样式表)。
①原理：就是直接在link中判断设备的尺寸,然后引用不同的css文件。
当我们屏幕大于等于 640px以上的，我们让div一行显示2个。当我们屏幕小于640我们让div一行显示一个。
②语法规范

 <link rel="stylesheet" href="mystylesheet .css" media="mediatype and|not| only (media feature) ” >
例如：<link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">

4.4.3 Less基础

1. 维护css的弊端
CSS是一门非程序式语言，没有变量、函数、SCOPE (作用域)等概念。

CSS 需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的。
不方便维护及扩展，不利于复用。
CSS没有很好的计算能力
非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目。

2.Less介绍：Less ( Leaner Style Sheets的缩写)是一门CSS书展语言，也成为CSS预处理器。

作为CSS的一种形式的打展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。
它在CSS的语法基础之上,引入了变量，Mixin (混入)，运算以及函数等功能，大大简化了CSS的编写并且降低了CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。
Less中文网址: htp://esscss.cnc/ 常见的CSS预处理器: Sass、Less、 Stylus

一句话：Less是一门CSS预处理器语言，它扩展了CSS的动态特性。（相当于插件）

3. Less使用
我们首先新建一个后缀名为less的文件，在这个less文件里面书写less语句。

Less变量：变量是指没有固定的值，可以改变的。因为css中的一些颜色和数值经常使用。

@变量名：值；定义一个粉色的变量
@color: pink; 
body {
           background-color: @color;
}

Less编译
本质上，Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。所以，我们需要把我们的less文件，ctrl+s保存自动编译生成为css文件，这样我们的html页面才能使用。
vocode Less插件
Easy LESS插件用来把less文件编译为css文件
安装完毕插件,重新加载下vscode. 只要保存一下Less文件 ,会自动生成CSS文件。
Less嵌套

.header {
1. less嵌套 子元素的样式直接写到父元素里面就好了
    a {
        color: red;
 2. 如果有伪类、交集选择器、 伪元素选择器 我们内层选择器的前面需要加&
        &:hover {
        color: blue;
        }
}
}

.header a {
  color: red;
}
.header a:hover {
  color: blue;
}

如果遇见(交集|伪类|伪元素选择器)
内层选择器的前面没有&符号，则它被解析为父选择器的后代; 如果有& 符号,它就被解析为父元素自身或父元素的伪类。

Less运算
任何数字、颜色或者变量都可以参与运算。就是Less提供了加(+ )、减(-)、乘()、除(/)算术运算。
注意 :乘号( )和除号(/)的写法; 运算符中间左右有个空格隔开1px + 5；除号加括号：（320px / 15）
对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位; 如果两个值之间只有一个值有单位,则运算结果就取该单位。

/*Less里面写*/ 
@witdh: 10px + 5;
div{
   border: @witdh solid red;
}
/*生成的css*/
div {
    border: 15px solid red;
}
/*Less甚至逐可以这祥*/ 
width: (@width + 5) * 2;

rem适配方案

让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候,等比例适配当前设备。
使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化，元素尺寸也会发生变化，从而达到等比缩放的适配。

（1）rem实际开发适配方案

①按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小; (媒体查询)
②CSS中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值;

（2）rem适配方案技术使用（市场主流）

技术方案1：less + 媒体查询 + rem技术
①　设计稿常见尺寸宽度：
一般情况下,我们以一套或两套效果图适应大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果，现在基本以750为准。
在这里插入图片描述

②　动态设置html标签font-size大小

1)假设设计稿是750px
2)假设我们把整个屏幕划分为15等份(划分标准不一可以是20份也可以是10等份)
3)每一份作为html字体大小,这里就是50px
4)那么在320px设备的时候，字体大小为320/15就是21.33px
5)用我们页面元素的大小除以不同的html字体大小会发现他们比例还是相同的
6)比如我们以750为标准设计稿
7)一个100* 100像素的页面元素在750屏幕下，就是100/ 50转换为rem是2rem* 2 rem比例是1比1
8)320屏幕下，html字体大小为21.33 则2rem= 42.66px此时宽和高都是42.66 但是宽和高的比例还是1比1
9)但是已经能实现不同屏幕下页面元素盒子等比例缩放的效果

③　元素大小取值方法

最后的公式:页面元素的rem值=页面元素值(px) / (屏幕宽度/划分的份数)
屏幕宽度/划分的份数就是html font-size的大小
或者:页面元素的rem值=页面在750像素下的px值/ html font-size字体大小

（3）苏宁易购案例
①　技术选型：
方案：单独制作
技术：rem适配布局（less+rem+媒体查询）
设计图：750px.
②　搭建相关文件结构：css、images、upload、index.html
③　设置视口标签以及引入初始化样式
④　设置公共common.less文件

新建common.less 设置好最常见的屏幕尺寸，利用媒体查询设置不同的htm字体大小，因为除了首页其他页面也需要
我们关心的尺寸有320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px
划分的份数我们定为15等份
因为我们pc端也可以打开我们苏宁移动端首页，我们默认html字体大小为50px，注意这句话写到最上面

⑤　新建index.less文件：写首页样式+引入common. 语法：@import “common”+生成index.css引入index.html中
body样式：

body {
  min-width: 320px;
  width: 15rem;
  margin: 0 auto;
  line-height:  1.5;
  font-family:  Arial,Helvetica;
  background:  #F2F2F2;
}

（4）技术方案2：flexible.js + rem (推荐)
①　简洁高效的rem适配方案flexible.js
手机淘宝团队出的简洁高效移动端适配库；我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理
它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。
我们要做的，就是确定好我们当前设备的html文字大小就可以了
比如当前设计稿是750px，,那么我们只需要把html文字大小设置为75px(750px/ 10)就可以
里面页面元素rem值:页面元素的px值/ 75；剩余的，让flexible.js来去算
github地址: https://github.com/amfe/lib- flexible
②　Vscode px转换rem插件：px to rem & rpx (cssrem) 打开设置–>搜索 cssroot 就可以更改数值了

4.5 响应式布局

4.5.1 响应式开发

1.响应式开发原理
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
在这里插入图片描述

2.响应式布局容器

响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。
原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小,从而实现不同屏幕下，看到不同的页面布局和样式变化。

4.5.2 Bootstrap前端开发框架

1. Bootstrap简介
Bootstrap来自Twitter (推特) , 是目前最受欢迎的前端框架。Bootstrap 是基于HTML、CSS 和JAVASCRIPT的，它简洁灵活,使得Web开发更加快捷。
●中文官网: http://www.bootcss.com/
●官网: http://getbootstrap.com/
●推荐使用: http://bootstrap.css88.com/ https://v3.bootcss.com/
框架:顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。

（1）优点
●标准化的html +css编码规范
●提供了一套简洁、直观强悍的组件
●有自己的生态圈，不断的更新迭代
●让开发更简单，提高了开发的效率
（2）版本
●2.x.x :停止维护兼容性好，代码不够简洁,功能不够完善。
●3.x.x: 目前使用最多稳定，但是放弃了IE6-IE7。对IE8支持但是界面效果不好,偏向用于开发响应式布局、移动设备优先的WEB项目。
●4.x.x:最新版，目前还不是很流行

2.Bootstrap使用
在现阶段我们还没有接触JS相关课程，所以我们只考虑使用它的样式库。
控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。
Bootstrap使用四步曲:

1.创建文件夹结构
2.创建html骨架结构
3. 引入相关样式文件
4.书写内容

在这里插入图片描述

在这里插入图片描述

4.书写内容

●直接拿Bootstrap预先定义好的样式来使用
●修改Bootstrap原来的样式，注意权重问题
●学好Bootstrap 的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果

3.布局容器
Bootstrap需要为页面内容和栅格系统包裹一个.container容器，Bootstarp预先定义好了这个类，叫.container它提供了两个作此用外的类。

1.container-fluid类
●流式布局容器百分百宽度
●占据全部视口( viewport )的容器。
●适合于单独做移动端开发

2.container类
●响应式布局的容器固定宽度
●大屏(>=1200px)宽度定为1170px
●中屏(>=992px)宽度定为970px
●小屏(>=768px)宽度定为750px
●超小屏(100%)

（1）栅格系统：英文为"grid systems" ,也称为"网格系统”,是指将页面布局划分为等宽的列,然后通过列数的定义来模块化页面布局。

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口( viewport )尺寸的增加，系统会自动分为最多12列。
Bootstrap里面container宽度是固定的，但是不同屏幕下，container的宽度不同，再把container划分为12等分。

（2）栅格选项参数
栅格系统用于通过一系列的行 ( row )与列( column )的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
在这里插入图片描述

●行( row )必须放到container布局容器里面
●我们实现列的平均划分需要给列添加类前缀
●xs-extra small :超小; sm small:小; md medium:中等; Ig-large :大;
●列(column)大于12，多余的“列( column )”所在的元素将被作为一个整体另起行排列
●每一列默认有左右15像素的 padding
●可以同时为列指定多个设备的类名，以便划分不同份数例如class=“col-md-4 col-sm-6”

（3）列嵌套

栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素内。
使用col-md-offset-类可以将列向右侧偏移。这些类实际是通过使用选择器为当前元素增加了左侧的边距( margin )。
通过使用.col-md-push-*和.col-md-pull-*类就可以很容易的改变列(column )的顺序。

（4）响应式工具
为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。与之相反的,是visible-xs visible- sm visible-md visible-lg是显示某个页面内容。
在这里插入图片描述

5 实践：黑马面面布局开发

5.1 目的

了解移动端页面开发流程；掌握移动端常见布局思路

技术方案
（1）弹性盒子 + rem + LESS
（2）最小适配设备为iphone5 320px 最大设配设备为iphone8plus(ipad能正常查看内容即可)

2 代码规范
（1）类名语义化,尽量精短、明确，必须以字母开头命名，且全部字母为小写，单词之间统一使用下划线“_” 连接
（2）类名嵌套层次尽量不超过三层
（3）尽量避免直接使用元素选择器
（4）属性书写顺序
布局定位属性：display / position / float / clear / visibility / overflow
尺寸属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow
（5）避免使用id选择器
（6）避免使用通配符*和!important

3 目录规范

项目文件夹：heimamm
样式文件夹：css
业务类图片文件夹：images
样式类图片文件夹： icons
字体类文件夹： fonts

5.2 流程开发

1 蓝湖/摹客协作平台

UI设计师 psd效果图完成后，会上传到蓝湖//摹客里面，同时会拉前端工程师进入开发
大部分情况下，UI会把图片按照前端设计要求给切好
UI设计师上传蓝湖到或者/摹客（了解）
（1） /摹客官网地址： https://www.mockplus.cn/ 注册一个账号
（2）下载moke ps插件
（3）PS 安装/摹客/蓝湖插件
（4）打开PS/摹客/蓝湖插件
（5）上传（需要切图，需要先标注切图）
（6）查看项目
（7）邀请成员进入（分享按钮，链接地址）
前端设计师可以直接/摹客/蓝湖测量取值

2 适配方案

flex 布局
百分比布局
rem布局
vw/vh布局
响应式布局
本次案例 flex + rem + + flexible.js + LESS

3 初始化文件

引入normalize.css
less中初始化body样式
约束范围

@media screen and (min-width: 750px) {
    html {
      font-size: 37.5px !important;
    }
  }

4 布局模块
（1）头部模块 .header 高度为 80px
（2） nav 模块制作多用 flex
（3）充电学习阴影 box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1)

5 swiper 插件使用
官网地址：https://www.swiper.com.cn/

下载需要的css和js文件 html页面中引入相关文件
官网找到类似案例，复制html结构，css样式 js 语法
根据需求定制修改模块

6 图标字体上传下载
上传步骤：
（1）让UI美工准备好图标字体（必须是svg格式）
（2）点上传按钮（保留颜色并提交）
（3）生成之后加入购物车即可
（4）点击下载 — 下载代码
小技巧：如何批量下载全部字体图标呢？

var span = document.querySelectorAll('.icon-cover');
for (var i = 0, len = span.length; i < len; i++) {
      console.log(span[i].querySelector('span').click());
}

7 上传码云并发布部署静态网站
准备工作：需要下载git软件需要码云注册账号
git 可以把我们的本地网站提交上传到远程仓库（码云 gitee）里面；类似以前的 ftp
码云就是远程仓库，类似服务器
（1）码云创建新的仓库。 heimamm
（2）利用git 提交把本地网站提交到码云新建的仓库里面

在网站根目录右键-- Git Bash Here
如果是第一次利用git提交，请配置好全局选项
git config --global user.name “用户名”
git config --global user.email “你的邮箱地址”
初始化仓库 git init
把本地文件放到暂存区 git add .
把本地文件放到本地仓库里面 git commit -m ‘提交黑马面面网站’
链接远程仓库 git remote add origin 你新建的仓库地址
把本地仓库的文件推送到远程仓库 git push -u origin master 刷新页面

（3）码云部署发布静态网站

在当前仓库中，点击 “服务” 菜单
选择 Gitee Pages
选择 “启动” 按钮
稍等之后，会拿到地址，就可以利用这个地址来预览网页
当然你也可以利用草料二维码生成二维码
最后：如果提交网站，你不愿意用git 提交，可以直接找到仓库，里面有文件，选择上传本地文件即可。
但是，1个小时内，只能上传 20个以内的文件，前端人员，git必备技能

Ting7亭子

关注

2
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
CSS笔记汇总-最全最仔细（会时刻更新）

样式表优点缺点使用情况控制范围行内样式书写方便，权重高没有实现样式和结构相分离较少一个标签内部样式部分结构和样式像分离没有彻底分离较多控制一个页面外部样式完全实现结构和样式相分离需要引入最多，强烈推荐控制整个站点一个完整的网页，是标准流、浮动、定位一起完成布局的,每个都有自己的专门用法。标准流可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。浮动可以让多个块级元素行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。定位。
复制链接

扫一扫