css从入门到精通【超详细笔记】，web相册开发结束一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面

结束

一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！

开源分享：docs.qq.com/doc/DSmRnRG…

举例：

#div1,.mini{

background-color:red;

}

分类5：派生选择器

根据上下文关系，选择元素的后代元素，使用空格隔开

选择器1 选择器2 … {

color:red;

}

.ol li{ color: red; background-color: yellow; }

体部：

王恒杰

1人
2人
3人

注意：id选择器>类选择器>标签选择器

综合案例：

/* 【1】基本选择器：元素选择器：通过元素的名字进行定位，它会获取页面上所有这个元素，无论藏的多深都可以获取到格式：元素名字{ css样式; } * */ h1{ color: red; } i{ color: blue; } /* 【2】基本选择器：类选择器应用场合：不同类型的标签使用相同的类型格式： .class的名字{ css样式; } */ .mycls{ color: green; } /* 【3】基本选择器：id选择器：应用场合：可以定位唯一的一个元素不同的标签确实可以使用相同的id，但是一般我们会进行人为的控制，让id是可以唯一定位到一个元素。格式： #id名字{ css样式; } */ #myid{ color: yellow; }

我是一个标题

我是h2标题

分类6：关系选择器div&span

div和span 结合css用于页面的布局。div+css 用于页面布局。

/* 我们可以通俗的理解，把div理解为一个“塑料袋” div属于块级元素--》换行 span属于行内元素--》没有换行效果 span:里面的内容占多大，span包裹的区域就多大*/ div{ border: 1px red solid; } span{ border: 1px greenyellow solid; }

马士兵马士兵
马士兵马士兵

马士兵

马士兵马士兵

马士兵

关系选择器

/*关系选择器: * 后代选择器：只要是这个元素的后代，样式都会发生变化 * div下面的所有h1标签样式都会改变 */ /*div h1{ color: red; }*/ /*关系选择器：子代选择器只改变子标签的样式*/ div>h1{ color: royalblue; } span>h1{ color: yellow; }

这是标题

分类7：属性选择器

/*属性选择器*/ input[type="password"]{ background-color: red; } input[type="text"][value="zhaoss1"]{ background-color: yellow; }

用户名：

用户名2：

密码：

分类8：伪类选择器

伪类选择器向某些选择器添加特殊效果。

.mycls:hover{ color: red; }

我是标题

一般伪类选择器都用在超链接上：

/*设置静止状态*/ a:link{ color: yellow; } /*设置鼠标悬浮状态*/ a:hover{ color: red; } /*设置触发状态*/ a:active{ color: blue; } /*设置完成状态*/ a:visited{ color: green; }

超链接

练习：百度导航栏

ul{ list-style-type: none;/*将无序列表前面的图标取消*/ } li{ float:left;/*向左浮动*/ margin-left: 20px;/*设置间隔20px*/ } a{ text-decoration: none;/*去掉下划线*/ font-size: 13px;/*字号*/ color: black;/*字体颜色*/ } a:hover{ color: #0000FF; } div{ /*定位：*/ position: absolute;/*绝对定位*/ right:200px; }

3、书写位置

注意：**实际开发中三种书写方式用的最多的是：

第三种：外部样式：因为这种方式真正做到了元素页面和样式分离**

三种书写方式优先级：

就近原则

1、内嵌式

<标签名 style="样式1;样式2;...">标签体</标签名>

例：

王恒杰

王恒杰
杨福君

例二：

这是一个h1标题

缺点：会冗余，更改复杂

下课！！！

想得美！！！

2、内联样式

在标签上加上需要使用的属性

<标签名属性名="属性值">标签体</标签名>

在标签里添加标签

选择器

/* 类选择器 */

.test1{

color: yellow;

background-color: lightgray;

}

案例：

头部：

.test2{ color: red; background-color: aqua; } .test1{ color: chartreuse; }

体部：

王恒杰

王恒杰
杨福君

3、外部样式

在标签上加上需要使用的属性

<标签名属性名="属性值">标签体</标签名>

新建.css文件(放在项目下的css文件中)

选择器

.test2{

color: green;

background-color: darkgray;

}

在标签里添加标签

rel:描述引入文件和当前文件的关系，Stylesheet:样式表

type:文件类型 text/css

MIME类型：网络资源在互联网传输过程中的数据解析类型

MIME类型表现：大类型/小类型

text/css text/hyml 网页 text/plain:txt文本类型

image/jpj 图片类型 image/jpeg图片类型

例子：

css部：

.test1{

color: #FF0000;

background-color:yellow;

}

.test2{

color: #00FFFF;

background-color:green ;

}

头部：

体部：

王恒杰

王恒杰
杨福君

4、CSS样式编写位置

方式一：写在标签的style属性中：

字体大小用px表示

落霞与孤鹜齐飞

方式二：写在html头的style标签中(style标签一般写在head标签与title标签之间)：

p{ color:blue; background-color: yellow; }

方式三：写在外部的css文件中，然后通过link标签引入外部的css文件

其中，style.css定义如下：

@charset "UTF-8";

/* 这是css与html结合使用的第三种方式 */

div {

border: 1px solid red;

}

span {

border: 1px solid green;

}

说明：当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

优先级按照上述讲的三种方式依次降低。内联样式（在 HTML 元素内部）拥有最高的优先权。

三、浮动和定位和布局

=============================================================================

1、浮动

float:left;(左浮动)right;(右浮动)

【1】什么是浮动？

浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。

CSS 的 Float（浮动）使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。

说到脱离文档流要说一下什么是文档流，文档流是是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。

【2】浮动初衷：文字环绕图片

img{ float: left; }

浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。

【3】浮动原理

请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

【4】浮动的语法：

【5】利用代码感受浮动效果：

先设置一个大的div，然后里面放入三个小的div:

效果：（没有任何浮动）

然后先给绿色div加上浮动：

再给橙色div添加浮动：

效果

再给黄色div设置浮动：

现在在三个div下面再加上一个紫色div：·

用浮动要考虑影响，看看是否对其他的元素有影响。

【6】消除浮动影响：

方式1：给浮动的父节点加入一个属性overflow:hidden

方式2：

给父节点加一个高度，让粉色div“撑起来”

方式3：

被影响的元素紫色div：给它加入一个属性。

2、定位

【1】position 属性指定了元素的定位类型。

【2】静态定位：（static）

【3】相对定位：（relative）

相对定位的应用场合：

（1）元素在小范围移动的时候

（2）结合绝对定位使用

再说一个属性：z-index

设置堆叠顺序，设置元素谁在上谁在下。

注意：z-index属性要设置在定位的元素上，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

【4】绝对定位：（absolute）

#outer{ width: 500px; height: 500px; background-color: pink; margin-left:300px; } #div01{ width: 100px; height: 100px; background-color: cornflowerblue; position: absolute; left: 30px; top: 50px; } #div02{ width: 100px; height: 100px; background-color: coral; }

111

222

暂时来说看到的效果：蓝色div相对body产生的位移，相对body进行位置的改变，然后蓝色div发生位移以后，原位置得到了释放。橙色div移动上去了！

实际开发中，我们往往让蓝色div在粉色div中发生位移效果：

配合定位来使用：

#outer{ width: 500px; height: 500px; background-color: pink; margin-left:300px; position: relative;/*直接设置一个相对定位*/ } #div01{ width: 100px; height: 100px; background-color: cornflowerblue; position: absolute; left: 30px; top: 50px; } #div02{ width: 100px; height: 100px; background-color: coral; }

111

222

总结：

当给一个元素设置了绝对定位的时候，它相对谁变化呢？它会向上一层一层的找父级节点是否有定位，如果直到找到body了也没有定位，那么就相对body进行变化，如果父级节点有定位（绝对定位，相对定位，固定定位），但是一般我们会配合使用父级为相对定位，当前元素为绝对定位，这样这个元素就会相对父级位置产生变化。无论是上面的哪一种，都会释放原来的位置，然后其他元素会占用那个位置。

开发中建议使用：父级节点relative定位，子级节点使用绝对定位。

【5】固定定位：（fixed）

应用场合：在页面过长的时候，将某个元素固定在浏览器的某个位置上，当拉动滚动条的时候，这个元素位置不动。

代码：

#mydiv{ width: 50px; height: 400px; background-color: cadetblue; /*固定定位*/ position: fixed; right: 0px; top: 300px; }

你好

3、盒子

行级标签:显示内容在一行内,不满不换行 img a input span

块级标签:显示内容在页面占独立区域,内容多少,都换行 p hn li div

div盒子:内容+内边距+边框+外边框

【1】生活案例入手：

【2】盒子模型：

页面上也有很多元素，元素之间的布局/设计依靠盒子模型：

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

边框

border: 线型线宽颜色;边宽

double:双实线

dotted:点线

solid:实线

padding 内边框内补白：当前元素与内部元素之间的距离

padding-top/right/bottom/lrft:10px

margin 外边距外补白：当前元素与外部元素之间的距离

【3】在浏览器端验证一下盒子模型：

div{ width: 100px; height: 100px; background-color: yellowgreen; margin-left: 100px; border: 4px red solid; }

我是div

【4】写代码感受盒子模型：

/*将所有元素的样式：外边距，边框，内边距全部设置为0*/ *{ margin: 0px; border: 0px; padding: 0px; } #outer{ width: 440px; height: 450px; background-color: lightskyblue; margin-left: 100px; margin-top: 100px; padding-top: 50px; padding-left: 60px; } #mydiv{ width: 170px; height: 150px; background-color: pink; padding-top: 50px; padding-left: 30px; }

我是div

练习：

#mydiv{ width: 65px; height: 60px; background: url(img/小喇叭.png) no-repeat 13px 12px;/*不平铺*/ background-color: #EFEFEF;/*注意：要先写背景图再写背景色*/ /*设置div中文字效果*/ font-size: 17px;/*字体大小*/ font-family: "微软雅黑";/*字体类型*/ color: #666666;/*字体颜色*/ padding-top: 50px;/*盒子模型设置内边距*/ text-align: center;/*设置水平居中*/ /*设置固定定位*/ position: fixed; right: 0px; top: 200px; }

最新
发布

你好

四、FontAwesome(css框架)

=======================================================================================

简介: 图标库
下载地址: fontawesome.dashgame.com/
语法:

引用font图标库的css样式文件

下载压缩包,解压
将负责font图标库中css目录和fonts目录粘贴在项目根目录下.
在标签中添加标签

4.fontAwesome预先定义了样式,通过类选择实现

css从入门到精通【超详细笔记】，web相册开发

结束

分类5：派生选择器

综合案例：

我是一个标题

我是一个标题

我是一个标题

我是一个标题

我是h2标题

我是h2标题

我是h2标题

分类6：关系选择器div&span

这是标题

这是标题

这是标题

这是标题

这是标题

这是标题

这是标题

这是标题

这是标题

这是标题

分类7：属性选择器

分类8：伪类选择器

我是标题

练习：百度导航栏

3、书写位置

1、内嵌式

这是一个h1标题

下课！！！

想得美！！！

2、内联样式

3、外部样式

4、CSS样式编写位置

【1】什么是浮动？

【2】浮动初衷：文字环绕图片

【3】浮动原理

【4】浮动的语法：

【5】利用代码感受浮动效果：

【6】消除浮动影响：

【1】position 属性指定了元素的定位类型。

【2】静态定位：（static）

【3】相对定位：（relative）

【4】绝对定位：（absolute）

【5】固定定位：（fixed）

【1】生活案例入手：

【2】盒子模型：

【3】在浏览器端验证一下盒子模型：

最后