💥此MD/PDF/HTML文档由 @竹梦者也 编辑制作,不可转载❌、打印❌、二次编辑❌、贩卖❌。仅供学习交流使用,下载后切勿随意传播。

📌欢迎在留言区提供修改建议~

 

✅2021.6.22 @竹梦者也(https://www.zjgsuzjx.top)

 

一、CSS第一天一、CSS简介1. CSS语法规范2. CSS代码风格二、CSS基础选择器1. 选择器作用2. 选择器分类3. 标签选择器4. 类选择器5. id选择器6. 通配符选择器7. 基础选择器总结三、CSS字体属性1. 字体系列2. 字体大小3. 字体粗细4. 文字样式5. 字体复合属性6. 总结四、CSS文本属性1. 文本颜色2. 对齐文本3. 装饰文本4. 文本缩进5. 行间距5. 总结五、CSS引入方式1. 内部样式表2. 行内样式表3. 外部样式表4. 总结六、Chrome调试工具二、CSS第二天一、Emmet语法1. HTML快速生成语法结构2. CSS快速生成语法结构3. 快速格式化代码二、复合选择器1. 概念2. 后代选择器3. 子选择器4. 并集选择器5. 伪类选择器6. 链接伪类选择器7. focus伪类选择器8. 复合选择器总结三、CSS元素显示模式1. 概念2. 块元素3. 行内元素4. 行块内元素5. 元素显示模式总结6. 元素显示模式转换7. 文字垂直居中四、CSS的背景1. 背景颜色2. 背景图片3. 背景平铺4. 背景图片位置5. 背景图像固定(背景附着)6. 背景复合写法7. 背景色半透明8. 背景总结五、CSS三大特性1. 层叠性2. 继承性3. 优先级三、CSS盒子模型一、盒子模型1. 网页布局过程2. 盒子组成部分3. 边框(border)4. 表格的细线边框5. 内边距(padding)6. 外边距7. 外边距合并8. 清除内外边距二、PS基本操作三、圆角边框四、盒子阴影五、文字阴影四、CSS浮动一、浮动1. 传统网页布局三种方式2. 标准流(普通流/文档流)3. 为什么要浮动4. 浮动特性5. 父级标准流和子级浮动搭配使用二、常见网页布局1. 常见的网页布局(三种)2. 浮动布局的注意点三、清除浮动1. 为什么要清除浮动2. 清除浮动的本质3. 清除浮动方法4. 清除浮动总结四、PS切图1. 图层切图2. 切片切图3. PS插件切图五、学成在线案例1. 学成在线准备工作2. CSS属性书写顺序3. 页面布局整体思路4. 头部制作5. banner制作6. 精品模块7. 精品推荐大模块8. 底部模块五、CSS定位一、定位1. 为什么需要定位2. 定位组成3. 静态定位4. 相对定位 relative5. 绝对定位 absolute6. 子绝父相的由来7. 固定定位 fixed8. 粘性定位9. 定位的总结10. 定位叠放次序11. 定位的扩展二、网页布局总结三、元素的显示与隐藏1. display属性2. visibility可见性3. overflow溢出六、CSS高级技巧一、精灵图1. 为什么要精灵图2. 精灵图的使用二、字体图标1. 优点2. 字体图标下载3. 字体图标的引用(针对第一个网站)4. 字体图标的追加三、CSS三角四、CSS用户界面样式1. 鼠标样式 cursor2. 轮廓线 outline3. 防止拖拽文本域五、vertical-align的使用1. 消除图片底部默认空白缝隙问题六、溢出的文字省略号显示1. 单行文本溢出2. 多行文本溢出显示省略号七、常见布局技巧1. margin负值的应用2. 文字围绕浮动元素3. 行内块技巧运用4. CSS三角强化八、CSS初始化七、HTML5和CSS3提高一、HTML5新特性1. 新增的多媒体标签2. 新增的input类型3. 新增的表单属性二、CSS3新特性1. CSS3的现状2. 属性选择器3. 结构伪类选择器4. 伪元素选择器5. CSS3盒子模型6. CSS 2D转换二维坐标系移动translate旋转rotate转换中心点transform-origin缩放scale2D转换综合写法总结7. CSS动画动画的基本使用动画常用属性动画简写属性8. 3D转换3D位移透视(perspective)3D旋转 rotate3d3D呈现 transform-style9. 浏览器私有前缀10. CSS其它特性11. CSS过渡三、狭义的HTML5 CSS31. 广义的HTML5八、品优购项目实战一、项目规划1. 网站制作流程2. 开发工具以及技术栈3. 模块化开发4. 网站favicon图标5. 网站TDK三大标签SEO优化二、首页制作1. 常用模块类名命名2. LOGO SEO优化3. Tab栏原理(和JS搭配)三、列表页制作四、注册页制作五、Web服务器1. 什么是Web服务器2. 本地服务器3. 远程服务器4. 将自己网站上传远程服务器六、课程总结九、移动WEB开发之流式布局一、移动端基础1. 浏览器现状2. 收集屏幕现状3. 常见尺寸4. 移动端调式方法二、视口1. 布局视口 layout viewport2. 视觉视口 visual viewport3. 理想视口 ideal viewport4. meta视口标签三、二倍图1. 物理像素&物流像素比2. 多倍图3. 背景缩放 background-size四、移动端开发选择1. 移动端主流方案2. 单独制作移动端页面3. 响应式页面兼容移动端五、移动端技术解决方案1. CSS初始化 normalize.css2. 特殊样式六、移动端常见布局1. 流式布局(百分比布局)十、移动WEB开发之flex布局一、flex布局体验二、flex布局原理三、flex布局父项常见属性1. 常见的父项属性2. flex-direction 设置主轴方向3. justify-content 设置主轴上的子元素排列方式4. flex-wrap设置子元素是否换行5. align-items设置侧轴上的子元素排列方式(单行)6. align-content设置侧轴上的子元素排列方式(多行)7. align-content和align-items的区别8. flex-flow四、flex布局子项常见属性1. flex属性2. align-self控制子项自己在侧轴上的排列方式3. order属性定义项目的排列顺序五、携程网案例十一、移动WEB开发之rem适配布局一、rem基础二、媒体查询1. 引入资源三、less基础1. Less介绍2. Less使用四、rem适配方案1. rem实际开发适配方案2. rem适配方案技术使用(市场主流)五、苏宁首页案例1. 设置公共common.less文件2. 在less文件中引入其它less文件3. body样式4. 其它5. 使用适配方案2来制作案例6. px自动转rem插件十二、移动WEB开发之响应式布局一、响应式开发1. 响应式开发原理2. 响应式布局容器二、Bootstrap前端开发框架1. Bootstrap简介2. Bootstrap使用3. 布局容器三、Bootstrap栅格系统1. 简介2. 栅格系统参数3. 列嵌套4. 列偏移5. 列排序6. 响应式工具四、阿里百秀首页案例1. 屏幕划分分析2. 手动修改container的最大宽度3. 引入字体图标4. 制作响应式五、移动端布局总结1. 移动端主流方案2. 移动端技术选型十三、移动WEB开发之vw和vh十四、黑马面面项目一、关于切图二、swiper插件三、上传码云并发布部署静态网站

 

一、CSS第一天

一、CSS简介

美化网页,而html只关注内容。是层叠样式表的简称,也是一种标记语言,也称为CSS样式表或级联样式表。主要设置网页的布局。最大价值:使结构(HTML)和样式(CSS)相分离。

1. CSS语法规范

img

如:

2. CSS代码风格

img

提倡展开格式,因为更加直观。

样式的大小写:提倡小写形式。

空格规范:在冒号后面有一个空格;在选择器和大括号中间也保留空格。

二、CSS基础选择器

1. 选择器作用

选择标签用的。根据需求不同把不同的标签选出来。

2. 选择器分类

可以分为基础选择器和复合选择器。

img

3. 标签选择器

是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式

img

4. 类选择器

差异化选择不同的标签,单独选一个或某几个标签。

口诀:样式点定义,结构类调用,一个或多个,开发最常用

img

举个栗子:

类选择器-多类名:可以给一个标签指定多个类名。多个类名要用空格分开。

如:

使用场景:把公共的样式放到同一个地方。

img

5. id选择器

CSS中用#来定义,结构中用id调用。只能调用一次,别人切勿使用。

如:

id选择器和类选择器的区别

img

6. 通配符选择器

使用*定义,把html里所有的标签全部统一修改。

如:

7. 基础选择器总结

img

三、CSS字体属性

1. 字体系列

用front-family

如:

img

如果有多个字体,会依次判断该电脑是否有这个字体。都没有的话会用浏览器自带的字体。

2. 字体大小

用font-size,单位是px。

img

标题标签比较特殊,需要单独指定文字大小。

3. 字体粗细

用font-weight,可以用数字不带单位。

如:

实际开发中更多用数字。

4. 文字样式

指文本风格,如斜体。

img

5. 字体复合属性

用来节约代码,有严格顺序要求。

注意:

img

6. 总结

img

四、CSS文本属性

1. 文本颜色

有三种表示方法

1.red

2.#ff0000

3.rgb(255,0,0或rgb(100%,0%,0%)

十六进制用的最多。

2. 对齐文本

默认值是left,即左对齐;本质是让盒子里的文字居中。

3. 装饰文本

如下划线、删除线、上划线等。

img

这个代码用的比较多,去掉链接的下划线。

4. 文本缩进

给文本的第一行缩进

em是一个相对单位,是当前文字一个文字的大小。

5. 行间距

控制行于行之间的距离。

文本的行间距由三部分组成:

img

5. 总结

img

五、CSS引入方式

根据样式书写位置不同,可以分成三大类。

1. 内部样式表

写在了htnl页面内部。就是单独放在style里,可以放在任何地方。

img

2. 行内样式表

修改简单样式时使用。

如:

img

3. 外部样式表

适合样式比较多的情况。单独写到css文件中,之后将CSS文件引入到HTML文件中。

快捷键:输入link+Tab

这是最常用的方式。

4. 总结

img

注意:给图片加不了居中对齐,必须给它的父亲

标签对齐。

六、Chrome调试工具

F12或右键审查元素->elements

① Ctrl+滚轮 可以放大开发者工具代码大小。

② 左边是 HTML 元素结构,右边是 CSS 样式。

③ 右边 CSS 样式可以改动数值(左右箭头或者直接输入)和查看颜色。

④ Ctrl + 0 复原浏览器大小。

⑤ 如果点击元素,发现右侧没有样式引入,极有可能是类名或者样式引入错误。

⑥ 如果有样式,但是样式前面有黄色叹号提示,则是样式属性书写错误。

二、CSS第二天

一、Emmet语法

用来提升CSS/HTML编写速度。

1. HTML快速生成语法结构

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

2. CSS快速生成语法结构

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

首字母+数学再按Tab

 

3. 快速格式化代码

也就是快速对齐。可以使用快捷键。

Vscode 快速格式化代码: shift+alt+f

也可以设置 当我们 保存页面的时候自动格式化代码:

1)文件 ------.>【首选项】---------->【设置】;

2)搜索emmet.include;

3)在settings.json下的【工作区设置】中添加以下语句:

"editor.formatOnType": true,

"editor.formatOnSave": true

二、复合选择器

1. 概念

建立在基础选择器之上,对基本选择器进行组合形成的。

可以更准确、更高效的选择目标元素。

由两个及以上基础选择器用不同方式合成。

总的来说,有class就用.类名,没有class就用标签名。

2. 后代选择器

又称包含选择器,可以选择父元素里面的子元素。

要求如下:

img

3. 子选择器

也称子元素选择器,只能选择亲儿子,即最近一组的元素

img

4. 并集选择器

可以选择多组标签。通常用于集体声明。逗号就是的意思

需要用逗号分开。最后一个元素不要逗号

img

5. 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。

伪类选择器书写最大的特点是用冒号(:)表示,比如 :hover 、 :first-child 。

因为伪类选择器很多,比如有链接伪类、结构伪类等,所以这里先给大家讲解常用的链接伪类选择器。

6. 链接伪类选择器

注意事项:

  1. 为了确保生效,请按照LVHA的循顺序声明 :link-:visited-:hover-:active。
  2. 记忆法:love hate 或者 lv 包包 hao。
  3. 因为 a 链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式。

实际开发中的常用写法:

7. focus伪类选择器

用于选取获得焦点的表单元素。一般来说只有input类表单元素才能获取,因此是针对表单元素的。

8. 复合选择器总结

img

三、CSS元素显示模式

1. 概念

可以将网页标签分类。HTML元素一般分为块元素和行内元素两种类型。

2. 块元素

img

3. 行内元素

img

特别注意行内元素不能🙅‍放块元素!

链接里面不能放链接!但里面可以放块级元素,但转化成块级模式最安全。

4. 行块内元素

同时具有两种元素的特点。

img

5. 元素显示模式总结

img

6. 元素显示模式转换

将一种模式转化成另一种模式。

如将转化成块级元素:(最常用)

转化成行内元素:

转化成行内块元素:

软件推荐:

img

下载链接:https://zh.snipaste.com/download.html

7. 文字垂直居中

让文字高度等于盒子高度

四、CSS的背景

1. 背景颜色

默认是透明色

2. 背景图片

常用于logo或者装饰性的小图片或者是超大背景图片,优势是便于控制位置(精灵图也是一种运用场景)。none是没有图片。

如:

3. 背景平铺

4. 背景图片位置

改变图片在背景中的位置。

img

1.如果是方位名词,则没有先后关系。如果只写了一个,则另一个默认是center。

注意:较大背景时会常用到上面的代码

2.如果是精确单位,那么第一个是x坐标,第二个是y坐标。

注意,原点坐标是左上角。如果省略一个参数,则没省略的一定是x坐标,另一个默认是垂直居中。

3.如果是混合单位。第一个是x坐标,第二个是y坐标。

5. 背景图像固定(背景附着)

可以做视觉滚动效果。

6. 背景复合写法

img

7. 背景色半透明

第四个参数设置透明度,0是纯透明。习惯性把0给省略,即.3

这是CSS3新增属性。

8. 背景总结

img

五、CSS三大特性

层叠性、继承性、优先级

1. 层叠性

相同的选择器给设置系统的样式。即相同选择器的相同属性会出现冲突的情况。

重叠性原则:

最重要是就近原则

0ea4b0d92268c239ef7859e95c08ab7b.png

2. 继承性

子标签会继承父标签的某些样式,

a1cff517ba7a0b041ff934d1142241c8.png

而行高的继承可以不跟单位。如

指的是当前文字大小的1.5倍。注意是当前的,而不是层叠之前的。

3. 优先级

当同一个元素指定多个选择器时,就会有优先级产生。

原则:选择器相同,则执行重叠性;选择器不同,按照选择器优先级。

优先级如下:(依次变大)

e6b5dfa8058ec56b1c42e27eb483da6b.png

注意点:

b696cc25287c6e78d50f9bba0129a97b.png

注意这里继承过来的权重为0,最后还是粉色。

同时,上面这块代码还可以解释以下情况:

最后结果不是红色,因为浏览器默认制定了一个样式,即蓝色有下划线 a{color:blue},继承的权重为0。

复合选择器还会有权重叠加的问题

如:

 

ul li的权重成了0 0 0 1 +0 0 0 1=0 0 0 2

同时叠加后不会有进位,如0 0 0 10

9c7881e543807317515ff303a857433f.png

三、CSS盒子模型

一、盒子模型

1. 网页布局过程

  1. 先准备好相关的网页元素,网页元素基本都是盒子 Box 。
  2. 利用 CSS 设置好盒子样式,然后摆放到相应位置。
  3. 往盒子里面装内容。

核心:利用CSS设置好盒子位置。

2. 盒子组成部分

CSS盒子模型本质上是一个盒子,封装周围的HTML元素,包括边框、外边框、内边距等等。

6553c13d62571f1d2051b6ce85b40086.png

ddfb2173c7a3fa1bde5e4beee0ad2c09.png

3. 边框(border)

border可以设置元素的边框。

011a243b2904c594f30aa4e152bffeba.png

边框简写:

边框分开写法:

利用层叠性设置上边框为黄色,其它边框为红色:

4. 表格的细线边框

一般测量时不量边框

5. 内边距(padding)

f2f5895d72811c5842a360d4d212c507.png

内边距复合写法(简写):

内边距也影响盒子大小,因此要高度/宽度-2*内边距。

在设置导航栏中,因为字数不同会有不同的浪费空间,因此可以不设置width,通过设置padding来统一间隙。

在小米导航栏中,一般不同text-indent,而用padding。同时要修改宽度。

如果盒子本身没有制定width/height属性,则此时padding不会撑开盒子大小。可以通过继承来实验。

6. 外边距

上面代码和下面代码等价:

另外的复合写法于内边距写法相似。

外边距可以让块级盒子水平居中,有两个条件:

1.必须制定宽度

2.盒子左右的外边距都设置为auto

行内元素或者是行内块元素水平居中给其父元素添加text-align:center即可。

7. 外边距合并

父子元素设定外边距,可能会出现塌陷问题。

93d81cdc99e97f7d84dd4aada4a97610.png

下面这种解决方案最佳,不会增大盒子。

8. 清除内外边距

网页元素很多都带有默认的内外边距,各个浏览器默认的也不一样。

万能解决方法:

行内元素为了照顾其兼容性,尽量只设置左右内外边距,不要设置上下内外边距。(就算设置了也不会起效果)。但是转化为块级和行内块元素就可以设置。

二、PS基本操作

网页美工大部分效果图是用ps做的。

35182acc573de2ee7658e4780b14c4af.png

主要要记住测量和取色。

fedac2ab110c85273db0764444569a57.png

--为什么布局用不同盒子?

不同标签有不同的含义,合理的地方用合理的标签。

--为什么用这么多的类名?

给每一个盒子起一个名字,修改样式会非常灵活。后期维护也很方便。

--到底用margin还是padding?

其实可以混用,各有优缺点。但要根据实际情况,总有更简单的方法。

--去掉li的项目符号:

三、圆角边框

盒子角落带圆角。

参数可以是数值也可以是百分比,如50%,指的是宽度和高度的一半。

原理:

68a9c97f5607c478cff6e610b5d73533.png

制作一个圆形的盒子:

制作圆角矩形:

也可以单独设置:

四、盒子阴影

参数描述:

cb36caf16758546ed8e2916d250b6342.png

要注意盒子阴影不占空间。

五、文字阴影

参数描述:

1d60ef511edc7a39d82d626fc3afffd2.png

四、CSS浮动

一、浮动

1. 传统网页布局三种方式

就是盒子怎么摆放顺序。

1.普通流(标准流)

2.浮动

3.定位

2. 标准流(普通流/文档流)

也就是行内元素和块内元素按照规定好的方式来排列元素。

6a5f72790514b9aff9bf19c677b64bf0.png

3. 为什么要浮动

有很多布局效果,标准流无法实现,此时可以利用浮动完成布局。

因为浮动可以改变元素标签默认的排列方式。

典型应用:让多个块级元素一行内排列显示。

网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。

语法及参数:

55e57ab69a943515283f6e13c83220f4.png

简单解释:加了浮动后会让盒子默认在同一行

4. 浮动特性

1.浮动元素会脱离标准流(脱标),并且不再保留原来的位置。浮动盒子在标准流盒子上面。

2.浮动的元素会一行内显示并且元素顶部对齐。父级宽度装不下时,多出来的会另起一行显示。

3.浮动的元素会具有行内块元素的特性。

任何元素都可以浮动。添加浮动之后会具有和行内块元素相似的性质,可以直接宽度和高度了。块级盒子没有设置宽度,默认宽度和父级一样宽,添加浮动以后,它的大小根据内容来决定。

5. 父级标准流和子级浮动搭配使用

6c7bb7c4f7caeb5de1c1a7127aafee0b.png

准则:先设置盒子大小,在设置盒子位置。

二、常见网页布局

1. 常见的网页布局(三种)

7981bb52cdacbc2ec6536465dd2dee6a.png

54d14e2021d72dd90a9af92db738d3c4.png

第三种最常见

2. 浮动布局的注意点

1.浮动和标准流的父盒子搭配。先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置。

2.一个元素浮动了,理论上其余的兄弟元素也要浮动。浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流。

思考题:所有的父盒子都必须有高度吗?

答:不一定。比如一篇文章里字数越多,高度越多。不能写死高度。

三、清除浮动

1. 为什么要清除浮动

因为父盒子在很多情况下,不方便给高度,但是子盒子浮动不占位置,最后父级盒子高度为0,就会影响下面的标准流盒子。

14a37f6e331aa5af6aab190b6b5578d7.png

2. 清除浮动的本质

就是清除浮动元素造成的影响。

3. 清除浮动方法

语法:

c579966c5357345402d9cbaee4a8b309.png

策略是闭门浮动。

1.额外标签法。也称隔墙法。就是在最后一个浮动的标签后面加一个额外的标签。

注意点:

252f1db3c59bbf22f57e0de63336cbca.png

2.父级添加overflow属性

给父级添加overflow属性,属性值为hiddern、auto、scroll

优点:代码简洁

缺点:无法显示溢出的部分

3.父级添加after伪属性

是额外标签法的升级版。

缺点是照顾低版本浏览器。优点是没有增加标签。

4.双伪元素清除浮动

优点是代码更简洁。缺点是照顾低版本浏览器。代表网站有腾讯、小米等。

4. 清除浮动总结

a4720ee1793ac531a922bdf8c5d3b0a4.png

四、PS切图

常见的图片格式:

f41075903358685621a5fc72bce45d05.png

1. 图层切图

最简单的切图方式:右击图层->快导出为png。

很多情况下要合并图层导出。选中需要的图层:图层菜单->合并图层(ctrl+e)

2. 切片切图

切图->文件菜单->导出->存储为web->选择我们要的图片格式->存储

3. PS插件切图

自动将你要的图层进行输出。

www.cutterman.cn

五、学成在线案例

1. 学成在线准备工作

我们本次采取结构与样式相分离思想:

  1. 创建 study 目录文件夹 (用于存放我们这个页面的相关内容)。
  2. study 目录内新建 images 文件夹,用于保存图片。
  3. 新建首页文件 index.html(以后我们的网站首页统一规定为 index.html )。
  4. 新建 style.css 样式文件。我们本次采用外链样式表。
  5. 将样式引入到我们的 HTML 页面文件中。
  6. 样式表写入清除内外边距的样式,来检测样式表是否引入成功。

2. 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-gradient

3. 页面布局整体思路

1f72aaaf2bf9a7fd0dbc3043cb3f47c4.png

导航栏注意点:实际开发中,我们不会直接用链接a而是用li包含链接(li+a)的做法。因为li+a语义更清晰;直接用啊,搜索引擎容易辨别为由堆砌关键期的嫌疑,从而影响网站排名。

4. 头部制作

b73ad84463103d065642a39bacf9014f.png

5. banner制作

50daa8077a087ccabfb381dae9d8a946.png

✨浮动的盒子不会由外边距浮动的问题

6. 精品模块

a3f6cc45f78bf9f59a790bd02471e87b.png

✨行高是可以继承的

7. 精品推荐大模块

  • 1 号盒子为最大的盒子, box 版心水平居中对齐
  • 2 号盒子为上面部分,box-hd -- 里面左侧标题 H3 左浮动,右侧链接 a 右浮动
  • 3 号盒子为底下部分,box-bd -- 里面是无序列表,有 10 个小 li 组成
  • 小 li 外边距的问题,这里有个小技巧:给 box-hd 宽度为 1215 就可以一行装开 5 个 li

8. 底部模块

9d39ec6cc1e16c800c6d225b30bb3080.png

五、CSS定位

一、定位

1. 为什么需要定位

1.某个元素可以自由的在一个盒子内移动位置,并且压住其他盒子。

2.某些盒子可以固定在屏幕某个位置

2. 定位组成

将盒子定在某一个位置。定位=定位模式+边偏移。

1.定位模式

ff1310d881a41b795c3da70346724c2c.png

2.边偏移

8138f11e2121122bdc295d450c948429.png

3. 静态定位

是元素默认的定位方式,无定位的意思。

静态定位==标准流,没有边偏移。

4. 相对定位 relative

是相对于它原来的位置而言移动的。原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它。(即不会动。不会脱标)

5. 绝对定位 absolute

移动位置时是相对于它祖先元素来说的。如果没有父元素,则以浏览器为准;如果有父级,但父元素没有定位,还是以浏览器为准;如果有祖先级且祖先元素有定位(相对、绝对、固定定位),则以最近一级带有定位的元素为准。绝对定位不再占用原来的位置(脱标)。

6. 子绝父相的由来

子级是绝对定位的话,父级要用相对定位。

因为父级要保留位置,子级不需要保留位置。

7. 固定定位 fixed

可以固定于浏览器可视区的某个位置。

以浏览器的可视窗口为参照点移动元素。跟父元素没有任何关系。不随滚动条滚动。固定位置不占有原来的位置。也是一种特殊的绝定位。

固定定位小技巧:固定在版心右侧位置。

小算法:

1.让固定定位的盒子left:50%,走到浏览器可视区的一半位置。

2.让固定定位的盒子margin-left:版心宽度的一般距离。

8. 粘性定位

可以认为是相对得和固定定位的混合。

284df92a39f561b0d6cfaef78c1897be.png

9. 定位的总结

de4348f10e1d4d2393dd0792d332209f.png

10. 定位叠放次序

利用z-index来控制盒子的前后次序(z轴)。

语法:

bf1309d9b136c2bf2d7b5e613b69d095.png

数值越大,盒子越靠上。数字后面不加单位。只有定位的盒子才有z-index属性。

11. 定位的扩展

1.如果用了绝对定位,则用margin:auto不会起效果,且会让前面设置的margin覆盖无效化。

683da12f7e58e5195af62f9089e7b4b0.png

2.定位的特殊性:

行内元素添加绝对或者是固定定位,可以直接设置高度和宽度;块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小。

3.脱标的盒子不会触发外边距塌陷。

4.绝对定位(固定定位)会完全压住盒子。而浮动元素只会压住下面标准流的盒子,但是不会压住下面标准流盒子里的文字或图片。

✨注意:如果一个盒子既有left属性也有right属性,则默认会执行left属性。

二、网页布局总结

通过盒子模型,清楚知道大部分html标签是一个盒子。通过CSS浮动、定位 可以让每个盒子排列成为网页。一个完整的网页,是标准流、浮动、定位一起完成布局的,每个都有自己的专门用法。

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

三、元素的显示与隐藏

本质:让一个元素在页面中隐藏或者显示出来。

1. display属性

隐藏元素后,不再占用位置。可以搭配JS。用的更多一些。

2. visibility可见性

隐藏元素后,继续占有原来的位置。

3. overflow溢出

一般情况下,不希望溢出部分显示出来。但是如果有定位的盒子,慎用overflow:hidden,因为它会隐藏多余的部分。

经过某图层再显示遮罩层:

六、CSS高级技巧

一、精灵图

1. 为什么要精灵图

网页图像过多,服务器会频繁接受和发送请求图片,造成服务器压力过大,这将大大降低页面的加载速度。为了有效减少服务器请求次数,提高页面的加载速度,出现了CSS精灵技术(CSS Sprites、CSS 雪碧)。

2. 精灵图的使用

主要是针对背景图片使用。就是把多个小背景图片整合到一个图片里。移动背景图片位置,此时可以使用background-position。移动的距离就是目标图片的x和y,一般情况是往上往左移动,所以数值是负值。使用精灵图的时候需要精确测量每个小背景图片的大小和位置。

二、字体图标

主要用于显示网页中通用、常用的一些小图标。

f60a51d0e5bba454002bde9d6e666b9a.png

字体图标iconfont。展示的是图标,本质属于字体。

1. 优点

轻量级、灵活性、兼容性。

  • 轻量级:一个图标字体要比一系列的图像要小。一旦字体加载了,图标就会马上渲染出来,减少了服务器请求
  • 灵活性:本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果、旋转等
  • 兼容性:几乎支持所有的浏览器,请放心使用

但是不能替代精灵图标,只是对工作中图标部分技术的提升和优化。

如果遇到一些结构和样式比较简单的小图标,就用字体图标;如果比较复杂的就用精灵图标。

2. 字体图标下载

icomoon字库:http://icomoon.io

阿里inconfont字库:http://www.iconfont.cn

3. 字体图标的引用(针对第一个网站)

1.把下载包里面的fonts文件夹放入页面根目录下

dff7073231e46f0b767c6ed6ce8a317c.png

2.通过css引入

在CSS样式中全局声明字体。如:

3.html标签内添加小图标。

复制到需要的地方。

4.设置字体

4. 字体图标的追加

当需要添加新的字体图标时:

2f955974eb21742df2d1bc50a928b2c0.png

三、CSS三角

做出三角形。

10116b1daf434cd9c121ff8854e71851.png

四、CSS用户界面样式

1. 鼠标样式 cursor

2. 轮廓线 outline

取消轮廓线:

3. 防止拖拽文本域

五、vertical-align的使用

使用场景:机场用于设置图片或者表单(行内块元素)和文本垂直对齐。只针对行内元素或行内快元素有效。

6d9da7a21813f7d98f6385a87b48c38b.png

默认是baseline。

1. 消除图片底部默认空白缝隙问题

图片底部会有一个空白缝隙,原因是行内块元素会和文字的基线对齐。

解决方案:推荐

或者

六、溢出的文字省略号显示

1. 单行文本溢出

2. 多行文本溢出显示省略号

七、常见布局技巧

1. margin负值的应用

让每个盒子margin往左移动-1px正好压住相邻盒子边框。

鼠标经过某个盒子的时候,提高当前盒子的层级即可。(如果没有定位,要加相对定位;如果有定位,则加z-index)

2. 文字围绕浮动元素

可以巧妙运用浮动元素不会压住文字的特性。

3. 行内块技巧运用

页码在页面中间显示:

  1. 把这些链接盒子转换为行内块, 之后给父级指定 text-align:center;
  2. 利用行内块元素中间有缝隙,并且给父级添加 text-align:center; 行内块元素会水平会居中

4. CSS三角强化

以此可以制作一个三角形。

或者简写:

八、CSS初始化

不同浏览器对于某些百年的默认值是不同的,为了消除不同浏览器对HTML文本呈现的差异,照顾浏览器的兼容,我们需要对CSS初始化。(CSS reset)

Unicode编码字体:把中文字体的名称用相应的Unicode编码来代替,这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。如黑体 \9ED1\4F53

七、HTML5和CSS3提高

一、HTML5新特性

增加了一些新的标签、表单和表单属性。

IE9+以上版本的浏览器才支持。

如: