CSS

圆角边框（重点）

可以使盒子模型变圆角，如：
border-radius:length;
(圆的半径）
解释如下：

当length数值越大弧形越明显。如下：（可以在网页检查中直接调来看效果，但似乎代码本身是不会改变的?只是一个展示而已）

圆角边框的使用

length可以用px或百分比表示。如下：先给圆形准备一个正方形，然后使圆形的半径为正方形的一半。

注意：top-left这种顺序不能打乱；
如果只写两个数字，则左上右下为一对，剩余两个为一对

盒子阴影

相关代码如下：注意，盒子模型都可以使用:hover 包括div:hover p:hover…

（可以用F12检查页面查看不同数值的效果）

文字阴影（了解）

在CSS3中可以用 text-shadow设置阴影用于文字。

CSS浮动

浮动（float)

传统网页布局的三种方式

网页布局的本质-用CSS来摆放盒子
css提供了三种传统（pc）布局方式：

标准流（普通流/文档流）

即标签按照规定好默认方式排列。（块、行内元素、行内块元素。。。）

为什么需要浮动？

如：1.怎么让多个div在一个行内显示。
此时用display:inline-block中间会有缝隙，不符合要求。
2.怎么让两个盒子左右对齐。
浮动可以改变标签默认的排列方式
网页布局第一准则：
多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动；

什么是浮动？

float属性用于创建浮动框，将其移到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
相关代码如下：正常情况下两个盒子纵向排列，下面代码的效果：

浮动特性（重点）

1.脱离标准普通流的控制（浮）移动到指定位置（动）（脱标）。
2.浮动的盒子不再保留原先的位置。

（可以理解为浮动的已经飞起来的，下面的盒子就占有了它之前的位置）相关代码如下：
2.如果多个盒子都设置了浮动，则它们会按照属性值（左浮动/右浮动）一行内显示并且顶端对齐排列。
如：左边俩左浮动 右边的右浮动

会随着浏览器的大小变化哦~

浮动元素具有行内块元素的特点！（浮动可以设置给任何元素）
首先行内元素本没有宽度和高度，但如果添加了浮动就有了；块级元素本来独占一行，但添加浮动以后就可以一行内有多个挨在一起（紧挨在一起中间没有缝隙）；如果块级盒子没有指定宽度，默认和父亲一样宽，但添加浮动以后，它的大小由内容的多少来决定（行内块元素的特点，即盒子是被内容撑起来的）

浮动元素常和标准流父级搭配使用

如：因为盒子并不是贴着浏览器的，有时候需要一个父盒子，浮动的盒子在标准流的父盒子里。

代码：

效果：

网页布局第二准则：
先设置盒子的大小，再设置盒子的位置；

常见网页布局

常见网页布局

遵守第一准则

通栏（和浏览器一样宽）不需要设置盒子宽度

浮动布局注意点

特别是浮动的盒子只会影响后面的标准流
加浮动要给所有兄弟盒子加！

清除浮动

如果都是标准流，不给父盒子设置高度，子盒子可以撑开父盒子；
如果子盒子是浮动的，父盒子会高度塌陷（浮动相当于不占有位置，飘起来了）
清除浮动以后，父亲就有了高度，也不会影响后面的标准流。

语法：
选择器{clear:属性值;}
属性值：left right both(同时清除左右两侧浮动的影响）
实际中我们只使用clear:both;
清除浮动的策略：闭合浮动；
闭合浮动即把浮动的影响限制在父元素中。

额外标签法

也称作“隔墙法”。在浮动元素的末尾添加一个空标签，（就像一堵墙把它们堵住）例如：二毛盒子（即最后一个浮动的盒子）后面那个div（或者< br />但是不能是span等行内元素）

缺点是结构化比较差，这个新标签必须是块级元素！

清除浮动–父级添加 overflow

给父级添加overflow属性，将其属性值设置为hidden、auto或scroll
缺点：无法显示溢出盒子（会把溢出的部分切掉）

代码：

清除浮动–：after 伪元素法

相当于在大盒子内部后面插入一个盒子

在style里面写，然后让需要清除浮动的父盒子拥有clearfix这个属性。

清除浮动–：双伪元素法

其实就是在盒子前后都插入盒子

PS切图

常见的图片格式

图层切图

切图即把PSD文件中某个图给导出来，可以点击，把图层右键导出为PNG；
有时候需要合并（shif一起选择，ctrl+e合并）再导出 ；

综合案例

CSS属性书写顺序

头部的制作：导航栏链接需要用li写

定位

定位原因和组成

1.需要某个元素能自由地在盒子里移动并能压住盒子；
2.当我们滚动窗口时，某些盒子固定在屏幕中；
定位=定位模式+边便宜
定位模式用于指定元素在文档中的定位方式，边偏移决定该元素的最终位置。

静态定位static(了解）

默认的定位方式（无定位）
语法：
选择器 { position:static;}
静态定位就是标准流，也没有边偏移；

相对定位 relative(重要）

相对定位是元素在移动位置时相对于它原来的位置来说。

**原来在标准流的位置继续占有，后面的盒子仍然在原来的位置。**如下：
蓝色盒子走后，粉色盒子没有变位置

绝对定位absolute(Important）

绝对定位相对于它的祖先元素。
特点：
1.如果父元素没有定位（只是标准流或浮动的盒子）则还是以浏览器为准定位。
2.如果父元素有定位（相对、绝对、固定）则会以最近一级带有定位的父元素为准定位。
3.绝对定位脱标不占有原来的位置。

子绝父相

常常子盒子用绝对定位；父盒子用相对定位。

固定定位fixed （重要）

固定定位是元素固定于浏览器可视区的位置，主要用于可以在浏览器页面滚动时元素的位置不会改变。
特点：以可视窗口为标准（即浏览器放大缩小后可见部分）；跟父元素没有任何关系；不随着滚动条滚动；固定定位不占有原来的位置；
固定在版心右侧位置：让固定定位的盒子left50%，走到版心一半位置；让固定定位的盒子margin-left:版心宽度的一半，走版心宽度的一半位置。

粘性定位

粘性定位认为是相对定位和固定定位的混合；
以浏览器的可视窗口为参照点移动元素；
占有原先的位置；
必须添加top bottom left right中一个；

定位总结：

定位叠放次序

选择器{z-index:1;}
数值可以为正整数、负整数、0，默认为auto，数值越大，盒子越靠上；
如果属性值相同，按照书写顺序，后来者居上；
数字后面不加单位；
只有定位的盒子才加z-index；

绝对定位的盒子水平居中

盒子加上绝对定位后，margin:auto不起作用，要想盒子水平居中，需要：
1.让盒子left:50%;
2.让盒子margin-left:-盒子的一半宽度像素；

让盒子垂直居中：
1.让盒子top：50%；
2.让盒子margin-top:-盒子的高度一半像素；

定位拓展

1.给行内元素添加绝对或固定定位，不需要转换就可以直接设置高度和宽度；
2.块级元素添加绝对或固定定位，不添加高度或宽度，默认大小为内容的大小；
3.脱标的盒子（加浮动、绝对定位、固定定位）都不会触发外边距塌陷；
4.绝对定位（固定定位）会完全压住盒子；
浮动元素是不同的，它只会压住后面标准流的盒子但不会压住盒子里的文字（图片）；绝对定位（固定定位）会完全压住下面标准流盒子里所有内容；浮动产生的目的是为了文字环绕效果；

注意：如果一个盒子既有left属性又有right属性，则会执行left属性，同理top和bottom会执行top;

元素的显示与隐藏

如：网页广告点击关闭则关掉，刷新后则显示；
本质：让一个元素在页面中隐藏或显示出来；

display属性

display:none;隐藏对象。
不但可以隐藏元素，还不占有原来的位置；
display:block; 除了转换为块级元素之外，还有显示元素的意思。

visibility

visibility:visible;元素可视；
visibiity:hidden;元素隐藏；
visibility隐藏元素后，继续占有原来的位置；
注意display:none用处更多
（前面有在表格那里看到border-collapse,是为了合并表格边框）

overflow溢出隐藏显示

如果内容溢出了做什么：
visible:显示（默认）
hidden:不显示
scroll:显示滚动条
auto：在需要时添加滚动条（溢出时有滚动条，不溢出时不显示）
注意有定位的盒子慎用！下面hot

CSS高级技巧导读

精灵图

核心原理：将小图片整合到一张大图片中，就只需要请求一次；

使用精灵图的核心：
1.主要针对背景图片使用，即把多个小背景图整合到大背景图。
2.又叫做雪碧图,sprites
3.主要借助背景位置来实现–background-position。
4.一般情况下精灵图都是负值（盒子位于背景图左上角，x轴正方向是右边，y轴往下是正方向）

代码：index就是存的精灵图

字体图标

字体图标iconfont本质是文字 可以更改大小颜色等


字体图标可以直接网上下载。
1.下载 2.引入到html页面 3.字体图标的追加
icomoon字体库 http://icomoon.io
阿里iconfont字库 www.iconfont.cn/

下载好压缩包后解压，将font放到html文件根目录下面，里面有四个不同字体文件（兼容性），使用icomoon里面的style文件的部分内容，写到style里，打开demo里，复制你想要的字体图标：

写到html里，然后在style里声明它的字体(和font-face里要一样）、大小、颜色等…

效果如下：

注意：font-face里url路径对的
字体图标的追加：

CSS三角

有时候要加入line-height font-size…为兼顾浏览器版本
想要如下效果：

要用到：子绝父相、span（子盒子）的大小为10px，border-bottom为5px，border-top也为5px

CSS用户界面样式

鼠标样式cursor

{cursor:pointer;}

表单轮廓线outline

给表单\文本域添加 outline:none 这样光标放在文本域内时就不会加轮廓线
文本域本身是可以拖拽大小的，添加 resize:none就不能；

vertical-align实现行内块和行内元素垂直居中对齐

怎么实现图片（表单域）和文字垂直居中对齐（即图片或表单域在文字中线上）：

效果：

解决图片底侧有空白缝隙：
我们给图片加父盒子加边框时，边框并不会牢牢贴在图片上，一般底部会有一定空隙，这是由于图片和文字是基线对齐的原因。
效果：

溢出文字省略号显示

单行文本溢出显示省略号

多行文本溢出显示省略号

有兼容性问题，适合于webkit浏览器或移动端

建议让后台来做哦~

常见布局技巧

margin负值

1.当两个盒子合并时（添加浮动）它们的Border合在一起会变粗（如1px加在一起就是2px），这样可以给盒子加margin负值，让它们border覆盖在一起。代码执行时是一个个盒子一行行style先后执行的。
2.鼠标经过某个盒子，让边框颜色改变，需要给当前盒子添加定位，提高盒子的层级（相对定位，保留位置）如果盒子都加了定位，则当前盒子添加z-index。

文字围绕浮动元素

浮动的盒子会压住后面的标准流盒子但不会压住盒子里的文字！不需要给文字添加浮动。
代码：

行内块（行内）元素水平居中对齐

给父盒子添加text-align:center;就能让里面的行内（块）元素全部水平居中对齐；

代码见文件夹；

CSS三角强化

当我们需要：


效果：

css初始化

/* 把我们所有标签的内外边距清零 */

/* {
margin: 0;
padding: 0
}
/* em 和 i 斜体的文字不倾斜 /
em,
i {
font-style: normal
}
/ 去掉li 的小圆点 */
li {
list-style: none
}

img {
/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 /
border: 0;
/ 取消图片底侧有空白缝隙的问题 */
vertical-align: middle
}

button {
/* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
cursor: pointer
}

a {
color: #666;
text-decoration: none
}

a:hover {
color: #c81623
}

button,
input {
/* “\5B8B\4F53” 就是宋体的意思 这样浏览器兼容性比较好 */
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, “\5B8B\4F53”, sans-serif
}

body {
/* CSS3 抗锯齿形 让文字显示的更加清晰 12px/1.5表示12px字体，1.5倍行高*/
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, “\5B8B\4F53”, sans-serif;
color: #666
}

.hide,
.none {
display: none
}
/* 清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: “.”;
height: 0
}

.clearfix {
*zoom: 1
}

pink老师前端入门视频教程笔记(中）相关推荐

1. pink老师前端入门视频教程笔记(上）

   HTML5+CSS3+移动端布局+flex布局rem布局响应式布局摹客蓝湖使用教程笔记 基础班学习路线 HTML简介 网页 什么是网页 什么是HTML 常用浏览器 常用浏览器 浏览器内核 ***Web ...

2. 一阶段P1~P96（PJavaScript基础语法-dom-bom-js-es6新语法-jQuery- 数据可视化echarts 黑马pink老师前端入门基础视频教程（持续更新）

   提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 JavaScript笔记 计算机编程基础 1. 变 量 \color{red}{1. 变量} 1.变量 1. 变量概述 2. 变量的使 ...

3. CSS 学习笔记总结（借鉴黑马程序员pink老师前端入门）

   1. CSS 简介 CSS 的主要使用场景就是美化网页,布局页面的 1.1 HTML 的局限性 说起 HTML ,他只关注内容的语义.比如 <h1> 表明这是一个大标题,<p> ...

4. 四阶段P188~P（PJavaScript基础语法-dom-bom-js-es6新语法-jQuery- 数据可视化echarts 黑 马pink老师前端入门基础视频教程（持续更新）

   JavaScript课堂笔记 JavaScript 简单类型与复杂类型 1. 简单类型与复杂类型 2. 堆和栈 3. 简单类型的内存分配 4. 复杂类型的内存分配 5. 简单类型传参 6. 复杂类型传 ...

5. 黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（复合选择器，元素显示模式，背景）

   一.基础班学习路线 三.CSS3基础 1.Emmet语法 emmet语法生成html标签 <!DOCTYPE html> <html lang="en"> ...

6. 黑马程序员pink老师前端入门教程，零基础必看的JavaScript基础语法视频教程（二）

   四.JS运算符 算数运算符 浮点数的精度问题 比较运算符 运算符优先级 五.JS流程控制-分支 数字补零案例(三元表达式) switch注意事项 匹配规则是 全等 没有break就不会退出,会继续执行 ...

7. 黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（精灵图，字体图标，技巧）

   一.基础班学习路线 三.CSS高级技巧 1.精灵图 为什么需要精灵图sprites 精灵图使用(原理) 精灵图使用(代码) 精灵图案例-拼出自己名字 2.字体图标 字体图标产生和优点 字体图标下载 字 ...

8. 黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（定位，显示与隐藏）

   一.基础班学习路线 三.CSS基础 1.CSS定位 为什么需要定位 定位组成 静态定位static 相对定位relative 绝对定位absolute-与父级有关 绝对定位脱标的不占有原来位置 子绝父 ...

9. 黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（权重，盒子模型）

   一.基础班学习路线 三.CSS3基础 1.CSS的三大特性 CSS三大特性之层叠性 CSS三大特性之继承性 行高的继承 CSS三大特性之优先级 CSS权重的叠加 十个在最后累加会变成0,0,0,10: ...

最新文章

1. ztree树封装 json实例_小白7天入门PHP Web开发 - Day 6[下]（综合）个人博客实例讲解用户数据的存储...
2. 文本转化工具dos2unix
3. 快手火爆背后的算法逻辑分析
4. mysql分区-索引
5. 【20090319-02】asp.net 操作 word(转)
6. [渝粤教育] 武汉大学 数字图像处理 参考 资料
7. java基础集合简介Map（三）下
8. 深度学习笔记（21） 边缘检测
9. VSCode 设置代码自动保存！！！
10. 百度面试题：Median of Two Sorted Arrays（java实现）
11. studio中碰到的jni问题：java.lang.UnsatisfiedLinkError
12. matlab分组形式条形图,Matplotlib带标签的分组条形图
13. uni-app实现支付及项目打包上传
14. Windows应用商店0x80131500错误
15. 如何实现视觉识别颜色
16. 第四课：股票，多数人的找死，少数人的等死
17. openstack rally安装失败后折腾一遭
18. Springcloug入门
19. 【吴恩达深度学习】05_week2_quiz Natural Language Processing Word Embeddings
20. 网络设置巨形帧_网卡设置 网卡的高级设置说明

热门文章

1. 2008 第二届中国软件技术英雄会归来感受
2. 大家都知道递归，尾递归呢？什么又是尾递归优化？
3. 区块链的共识机制介绍及几种常见共识的优缺点
4. Scrapy爬取知乎用户信息以及人际拓扑关系
5. python技能排名_Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
6. Cisco iOS的三类密码配置
7. 机械工程材料_概念简要复习
8. DB2数据库嵌入式SQL开发
9. hdu 4489 The King’s Ups and Downs 组合 递推
10. 手机屏幕投影到投影仪_投影机与大屏幕电视：您应该购买哪一个？