CSS样式 (黑马程序员Pink老师讲解)

已于 2024-01-06 17:29:08 修改
阅读量288 收藏 3
点赞数
文章标签： 前端
于 2023-10-05 00:53:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80068547/article/details/133564011
版权

目录(一)

CSS简介
CSS基础选择器
CSS字体属性
CSS文本属性
CSS引入方式
Chrome调试工具

CSS简介

CSS的主要使用场景 就是 美化网页，布局页面

一、HTML局限性

说起 HTML，这其实是个非常单纯的家伙，它只关注内容的语义，比如 < h1 > 表明这是一个大标题，< p > 表明这是一个段落，< img > 表明这儿有一个图片，< a > 表示此处有链接。

很早的时候，世界上的网站虽然很多，但是它们都有一个共同的特点：丑

二、CSS-网页的美容师

CSS 是层叠样式表 (Cascading Style Sheets)的简称.

有时我们也会称之为 CSS样式表或级联样式表.

CSS 也是一种 标记语言.

CSS 主要用于设置 HTML页面的文本内容 (字体、大小、对齐方式等)、图片外形(宽高、边框样式、边距)以及版面的布局和外观显示样式.

CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：美化HTML，让HTML更好看，让页面布局更简单.

使结构（HTML）与样式（CSS）分离。

三、CSS语法规范

使用 HTML 时，需要遵从一定的规范，CSS也是如此，要想熟练地使用 CSS 对网页进行修饰，首先需要了解 CSS 样式规则。

CSS规则主要有两部分组成：选择器 ，一条或多条声明

  • 选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式

  • 属性和属性值以“键值对”的形式出现

  • 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色

  • 属性和属性值之间用英文 ":"分开

  • 多个 "键值对" 之间用英文";" 进行区分

四、CSS代码风格

以下代码书写风格不是强制规则，而是符合实际开发书写方式

样式格式书写

1.紧凑格式

h3 {color: red;font-size: 20px;}
2.展开格式

h3 {
color: red;
font-size: 20px;
}

强烈推荐第二种格式，因为更直观。

样式大小写风格

h3 {
    color: pink;
}
H3 {
    COLOR: PINK;
}

强烈推荐选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外。

样式空格风格

h3 {
    color: pink;
}

  • 属性值前面，冒号后面，保留一个空格

  • 选择器 (标签) 和大括号中间，保留一个空格

CSS 基础选择器

一、CSS 选择器的作用

<div>我是div</div>
<div>我是div</div>
<p>我是p</p>
<ul>
    <li>我是ul里面的小li</li>
</ul>
/*
    1. 我想把 div 里面的文字改为红色?
    2. 我想把第一个 div 里面的文字改为红色?
    3. 我想把 ul 里面的 li 文字改为红色?
*/

选择器 (选择符) 就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说，就是选择不同的标签。

二、选择器分类

选择器分为基础选择器和复合选择器两大类，我们这里先讲解一下基础选择器。

  • 基础选择器由单个选择器组成

  • 基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器

三、标签选择器

标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签定统一的CSS样式。

标签名 {
    属性1: 属性值1;
    属性2: 属性值2;    
    属性3: 属性值3;    
    ...
}

可以把某一类标签全部选择出来，能快速的为页面中的某一类同类型标签统一设置样式；缺点是不能差异化设置标签，只能选择全部的标签。

四、类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。

类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点“.”号显示

.类名 {
    属性1: 属性值1;
    ...
}

例如把拥有red类的HTML元素改成红色：

.red {
    color: red;
}

结构需要用 class 属性 来调用 class 类的意思

<div class="red">
    我变红了
</div>

注意：

  • 类选择器使用“.”（英文点号)进行标识，后面紧跟类名(自定义，我们自己命名的).

  • 可以理解为给这个标签起了一个名字，来表示。

  • 长名称或词组可以使用中横线 (.star-sing {})来为选择器命名。

  • 不要使用纯数字、中文等命名，尽量使用英文字母来表示

  • 命名要有意义，尽量使别人一眼就知道这个类名的目的。

五、类选择器—多类名

我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签。

简单理解就是一个标签有多个名字.

多类名使用方式

<style>
    .red {
        color: red;
    }
    .font20 {
        font-size: 20px;
    }
</style>
// 1.多类名使用方式
<div class="red font20">亚瑟</div>

  • 在标签 class 属性中写多个类名.

  • 多个类名中间必须用空格分开

  • 这个标签就可以分别具有这些类名的样式

多类名开发中使用场景

  • 可以把一些标签元素相同的样式 (共同的部分) 放到一个类里面.

  • 这些标签都可以调用这个公共的类，然后再调用自己独有的类.

  • 从而节省 CSS 代码，统一修改也非常方便.

案例：使用多类名画盒子

<style>
    .box {
        width: 200px;
        height: 200px;
    }
    .red {
        background-color: red;
    }
    .green {
        background-color: green;
    }
</style>
<body>
    <div class="red box"红色></div>
    <div class="green box">绿色</div>
    <div class="red box">红色</div>

六、ID选择器

HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义。

#id名 {
    属性: 属性值
    ...
}

例如，将id为nav元素的内容设置为红色：

#nav {
    color: red;
}

注意：id 属性只能在每个 HTML 文档中出现一次

类选择器与id选择器的区别：

  • 类选择器( class )好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。

  • id选择器好比人的身份证号码，是唯一的，不得重复。

  • id选择器和类选择器最大的不同在于使用次数上。

  • 类选择器在修改样式中用的最多， id选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。

七、通配符选择器

在CSS中，通配符选择器使用“*”定义，它表示选取页面中所有元素(标签)。

* {
    属性:属性值;
    ...
}

例：

* {
    color: red;
}

  • 通配符选择器不需要调用，自动就给所有的元素使用样式

  • 特殊情况才使用，后面讲解使用场景(以下是清除所有的元素标签的内外边距后期讲)

* {
    margin: 0;
    padding: 0;
}

字体属性

CSS Fonts (字体) 属性用于 定义字体系列、大小、粗细、和 文字样式 (如斜体).

一、字体类型

CSS 使用 font-family 属性定义文本的字体类型。

p {
    font-family: "微软雅黑";
}
div {
    font-family: Arial,"Microsoft Yahei","微软雅黑";
}

  • 各种字体之间必须使用英文状态下的逗号隔开

  • 一般情况下,如果有空格隔开的多个单词组成的字体，加引号 " . ".

  • 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示

  • 最常见的几个字体:body {font-family. "Microsoft YaHei,tahoma ,arial,‘Hiragino Sans GB’;}

二、字体大小

CSS 使用 font-size 属性定义字体大小

body {
    font-size: 20px;
}

  • px（像素)大小是我们网页的最常用的单位

  • 谷歌浏览器默认的文字大小为16px

  • 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小

  • 可以给< body >标签指定整个页面的字体大小

  • 标题标签比较特殊，需要单独指定大小

三、字体粗细

CSS 使用font-weight属性定义字体粗细

p {
    font-weight: bold;
}
属性值说明
normal默认值（不加粗）
bold加粗
bolder特加粗
lighter细体
100-900400等同于normal，700等同于bold，注意这个数字后面不加单位

  • 实际开发中，更推荐使用数值表示字体粗细

四、文字样式

使用font-style属性定义文字风格

p {
    font-style: normal;
}

font-style的属性值：

属性值说明
normal默认值，浏览器会显示标准的字体样式。
italic浏览器会显示斜体的样式

  • 实际开发中很少使用斜体，反而要给斜体标签(<em>、<i>）改成不倾斜(normal)。

五、字体复合属性

CSS 可以把上述字体属性按既定顺序符合书写：

body {
    font: font-style font-weight font-size/line-height font-family;
    /*line-height为行间距，可以省略*/
}

例如，设置微软雅黑的加粗斜体，16像素：

body {
    font: italic 700 16px 'Microsoft Yahei';
}

  • 使用font属性时，必须按上面的顺序书写，不能更换顺序，各个属性用空格隔开

  • 不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性不起作用

六、字体属性总结

属性表示注意点
font-size字号通常使用px 像素，一定要写上单位
font-family字体实际开发中，团队约定字体
font-weight字体粗细blod，加粗，数值700；normal，不加粗，数值是400
font-style字体样式italic，斜体；normal，不倾斜
font字体连写1.顺序；2.字号和字体必须保留

文本属性

定义文本的外观，如文本颜色，对齐方式、装饰、缩进、行间距等

一、文本颜色

使用color属性定义文本颜色

p {
    color: pink;
}

color的属性值：

属性值说明
预设的颜色值red、green、pink…
十六进制表示#FF00CC、#FFFFFF…
RGB表示rgb(255,0,0) 或 rgb(100%,0%,0%)…

  • 开发中最常用的是 十六进制

二、对齐方式

使用text-align属性设置元素内的文本内容的水平对齐方式

h2 {
    text-align: center;
}
属性值说明
center居中对齐
left左对齐，默认值
right右对齐

  • 本质是设置盒子里的文字的水平对齐方式！

  • 给图片加对齐方式是没有用的，可以给它添加一个父级

三、装饰文本

使用text-decoration属性规定添加到文本的装饰，包括下划线、删除线、上划线等。

div {
    text-decoration: underline;
}

text-decoration的属性值：

属性值说明
none默认。没有装饰（常用）
underline下划线。链接标签自带下划线（常用）
overline上划线（几乎不用）
line-throught删除线（几乎不用）

四、文本缩进

使用text-indent来指定文本第一行的缩进，通常是将段落首行缩进。

p {
    text-indent: 20px;
}

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值.

p {
    text-indent: 2em;
}

em是一个相对单位，是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小。

五、行间距

使用line-height属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离.

p {
    line-height: 26px;
}

使用font属性，能够将字号、行高、字体一起设置。
基本语法：

font: 14px/24px “宋体”;

等价：

font-size:14px;
line-height:24px;
font-family:"宋体";

使用FSCapture测量：

六、文本属性总结

属性表示注意点
color文本颜色通常使用16进制书写
text-align文本对齐设定文本的水平对齐格式
text-indent文本缩进首行缩进2字符：2em；
text-decoration文本修饰下划线：underline；取消下划线：none
line-height行高控制行间距

CSS引入方式

一、CSS的三种样式表

行内样式表（行内式）
内部样式表（嵌入式）
外部样式表（链接式）

二、内部样式表

内部样式表（内嵌样式表）是写到html页面内部。是将所有的CSS代码抽取出来，单独放到一个< style >标签中。

<style>
  div {
      color: red;
      font-size: 12px;
  }
</style>

  • < style >标签理论上可以放在HTML文档的任何地方，但一般会放在文档的< head >标签中。

  • 通过此种方式，可以方便控制当前整个页面中的元素样式设置。

三、行内样式表

行内样式表(内联样式表）是在元素标签内部的style属性中设定CSS样式。适合于修改简单样式.

<div style="color: red; font-size: 12px;">
    夏天夏天悄悄过去留下小秘密
</div>

  • style其实就是标签的属性

  • 在双引号中间，写法要符合CSS规范

  • 可以控制当前的标签设置样式

  • ·由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用

  • 使用行内样式表设定CSS，通常也被称为行内式引入

四、外部样式表

核心是:样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。实际开发都是外部样式表。适合于样式比较多的情况。

引入外部样式表的步骤：

  1. 新建css文件，把所有css样式放入此文件中；

  2. 在HTML页面中，使用< link >标签引入这个文件。

<link rel="stylesheet" href="css文件路径" >
属性作用
rel定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet”，表示被链接的文档是一个样式表文件。
href定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

chorme调试工具

一、打开调试工具

打开 Chrome 浏览器，按下f12键或者右键页面空白处->检查

二、使用调试工具

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

  • 左边是HTML元素结构，右边是CSS样式。

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

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

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

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

目录(二)

Emmet语法
CSS的复合选择器
CSS的元素显示模式
CSS的背景
CSS的三大特性

Emmet语法

Emmet语法的前身是Zen coding，它使用缩写,来提高html/css的编写速度

一、快速生成HTML

  • 生成标签直接输入标签名按tab键即可；比如div然后tab键，就可以生成< div ></ div >

  • 如果想要生成多个相同标签加上号就可以了；比如div3就可以快速生成3个div

  • 如果有父子级关系的标签，可以用>；比如 ul > li 就可以了

  • 如果有兄弟关系的标签，用＋就可以了；比如div+p

  • 如果生成带有类名或者id名字的，直接写.demo或者#two按tab键就可以了

  • 如果生成的div类名是有顺序的，可以用自增符号$

  • 如果想要在生成的标签内部写内容可以用{}表示

二、快速生成css

css基本采取简写形式即可

  1. 比如w200 tab键，生成：width: 200px;

  2. 比如lh26 tab键，生成：line-height: 26px;

三、快速格式化代码

Vscode快速格式化代码: shift+alt+f 也可以设置当我们保存页面的时候自动格式化代码:

1.管理 —> 2.设置 —> 3.用户 -> 4.文本编辑器 -> 5.格式化 -> 6.Format On Save

CSS 复合选择器

在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

  1. 复合选择器可以更准确、更高效的选择目标元紊(标签)

  2. 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的

  3. 常用的复合选择器包括︰后代选择器、子选择器、并集选择器、伪类选择器等等

一、后代选择器

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

元素1 元素2 {
    样式声明;
}

  • 这种写法只会选择元素1中的全部元素2（后代元素）

例如：

ul li {
    color: red;
}
/*ul内的所有li标签内容变成红色*/

  • 元素1和元素2之间用空格隔开

  • 元素1是父级，元素2是子级，最终选择的是元素2

  • 元素2可以是儿子，也可以是孙子，可以嵌套下去，只要是元素1的后代即可

  • 元素1和元素2可以是任意基础选择器

二、子选择器

只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素.

父元素1>子元素2 {
    样式声明;
}

上述语法表示选择元素1里面的所有直接后代 (子元素) 元素2.

例如：

div > p {
    color: red;     /*选择 div 里面所有最近一级 p 标签元素 */
}

  • 元素1和元素2之间用大于号隔开

  • 元素1是父级，元素2是子级，最终选择元素2

  • 元素2必须的亲儿子，其孙子、重孙之类的都不归它管，你可以叫它亲儿子选择器

三、并集选择器

并集选择器可以选择多组标签同时为他们定义相同的样式。通常用于集体声明.

并集选择器是各选择器通过英文逗号(,)连接而成，任何形式的选择器都可以作为并集选择器的一部分。

元素1, 元素2 {
    样式声明;
}

上述语法表示选择元素1 和 元素2.

例如：

ul,
div {
    样式声明;   
}

  • 元素1和元素2之间用逗号隔开

  • 逗号可以理解为和的意思

  • 并集选择器通常用于集体声明

  • 约定的书写规范，并集选择器竖着书写

四、伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。伪类选择器书写最大的特点是用冒号 (:) 表示，比如:hover 、:first-child。

伪类选择器很多，比如链接伪类、焦点伪类等

链接伪类选择器

链接伪类选择器类别说明
a:link选择所有未被访问的链接
a:visited选择所有已被访问的链接
a:hover选择鼠标指针位于其上的链接
a:active选择活动链接（鼠标按下，未松开的链接）

链接伪类选择器注意事项：

  1. 为了确保生效，请按照LVHA的循顺序依次声明:link - :visited - :hover - :active。

  2. 因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

链接伪选择器实际开发中的写法

a {
    color: #333;
    text-decoration: none;
}
a:hover {
    color: #369;
    text-decoration: underline;
}

焦点伪类选择器

:focus伪类选择器用于选取获得焦点的表单元素。 焦点就是光标，一般情况< input >类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

input:focus{
    background-color: yellow;
}

元素显示模式

作用:网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。

元素显示模式就是元素(标签）以什么方式进行显示，比如< div >自己占一行，比如一行可以放多个< span >。

HTML元素一般分为块元素和行元素两种类型

一、块元素

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

块元素的特点：

  • 比较霸道，自己独占一行。

  • 高度，宽度、外边距以及内边距都可以控制。

  • 宽度默认是容器(父级宽度)的100%。

  • 是一个容器及盒子，里面可以放行内或者块级元素。

注意：

文字类的元素内不能使用块级元素

  • < p >标签主要用于存放文字，因此< p >里面不能放块级元素，特别是不能放< div >

  • 同理，< h1 >~< h6 >等都是文字类块级标签，里面也不能放其他块级元素

二、行内元素

常见的行内元素有 < a >、< strong >、< b >、< em >、< i >、< del >、< s >、< ins >、< u >、< span >等，其中< span >标签是最典型的行内元紊。有的地方也将行内元素称为内联元素。

行内元素的特点：

  • 相邻行内元素在一行上，一行可以显示多个。

  • 高、宽直接设置是无效的。

  • 默认宽度就是它本身内容的宽度。

  • 行内元素只能容纳文本或其他行内元素。

注意：

  • 链接里面不能再放链接

  • 特殊情况链接< a >里面可以放块级元素，但是给< a >转换一下块级模式最安全

三、行内块元素

在行内元素中有几个特殊的标签< img / >、< input / >、< td >，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

行内块元素的特点：

  • 和相邻行内元素(行内块)在一行上，但是他们之间会有空白缝隙。

  • 一行可以显示多个(行内元素特点)。默认宽度就是它本身内容的宽度(行内元素特点)。

  • 高度，行高、外边距以及内边距都可以控制(块级元素特点)。

四、元素显示模式转换

特殊情况下，我们需要元素模式的转换，简单理解一个模式的元素需要另外一种模式的特性比如想要增加链接 < a > 的触发范围。

转换为块级元素：display: block
转换为行内元素：dispaly: inline
转化为行内块元素：dispaly: inline-block

补充一个小技巧：把单行文字设置为垂直居中：把行间距设置为盒子的高度：

a {
    display: block;
    height: 40px;
    line-height: 40px;
}

单行文字垂直居中的代码：

CSS 没有给我们提供文字垂直居中的代码，这里我们可以使用一个小技巧来实现。

解决方案：让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中。

<div>我要居中</div>
<style>
    div {
        width: 200px;
        height: 40px;
        background-color: pink;
        line-height: 40px;
    }
</style>

案例：小米侧边栏

<style>
​
        a {
            display: block;
            width: 230px;
            height: 40px;
            font: 14px/40px 'Microsoft YaHei';
            color: aliceblue;
            text-indent: 2em;
            text-decoration: none;
            background-color: rgb(83, 87, 88);
        }
​
        a:hover {
            background-color: #ff6f00;
        }
    </style>
<!-- html -->
    <div class="sidebar">
        <ul>
            <a href="#">手机 电话卡</a>
            <a href="#">电脑 盒子</a>
            <a href="#">笔记本 平板</a>
            <a href="#">出行 穿戴</a>
            <a href="#">智能 路由器</a>
            <a href="#">健康 儿童</a>
            <a href="#">耳机 音响</a>
        </ul>
    </div>

背景

通过CSS背景属性，可以给页面元紊添加背景样式。 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

一、背景颜色

使用background-color属性定义元素的背景颜色。

background-color: transparent(默认值)/颜色值;

二、背景图片

使用background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置。(精灵图也是一种运用场景)

background-image: none/url();
参数值作用
none无背景图片（默认）
url使用绝对或相对路径指定背景图片

三、背景平铺

如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性。

background-repeat: 属性值;
属性值作用
repeat背景图片在纵向和横向上平铺（默认）
no-repeat背景图片不平铺
repeat-x背景图片在横向上平铺
repeat-y背景图片在纵向上平铺

四、背景图片位置

使用background-position属性可以改变图片在背景中的位置。

background-position: x y;

参数的意思是：x坐标 和 y坐标。可以是方位名词或精确值

参数值说明
lenght百分比数 | 由浮点数字 和 单位标识符组成的长度值
positiontop | center | bottom | left | right 方位名词

  1. 参数是方位名词

    • 如果指定的两个值都是方位词，则两个值的前后顺序无关，比如 left top 和 top left 效果一致。

    • 采用方位词时，如果只写一个方位词，则另一个默认是center（居中对齐）

  2. 参数是精确数值

    • 第一个一定是x坐标，第二个一定是y坐标

    • 如果只指定了一个数值，那么改数值一定是x坐标，y坐标默认垂直居中

  3. 参数的混合单位

    • 如果指定的两个值是精确单位和方位名词混合使用，第一个值是x坐标，第二个是y坐标

<style>
    div {
        width: 300px;
        height: 300px;
        background-color: pink;
        background-image: url(../Photo/);
        background-repeat: no-repeat;
        background-position: center right;
    }
</style>
<div></div>

五、背景固定

background-attachment=属性设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment后期可以制作视差滚动的效果

background-attachment: scoll | fixed
参数作用
scroll背景图片是随对象内容滚动（默认）
fixed背景图像固定

六、背景复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background中。从而节约代码量.当使用简写属性时，没有特定的书写顺序,一般习惯约定顺序为∶ background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

background: transparent url(url) no-repeat fixed top;

  • 开发中更推荐使用使用复合写法

七、背景颜色半透明

css3提供了设置背景颜色半透明的效果

background: rgba(0, 0, 0, 0.3);

  • 前面三个参数的rgb颜色，最后一个0.3是alpha透明度，取值在0~1之间

  • alpha的0.3可以省略成.3，rgba(0, 0, 0, .3)

  • css3新增属性，IE9+版本浏览器支持

  • 放心使用，不太关注兼容性写法

CSS三大特性

css有三个非常重要的特性：层叠性、继承性、优先级

一、层叠性

相同选择器 给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式突的问题

层叠性原则：

  • 样式冲突，遵循的原则是就近原则,哪个样式里结构近，就执行哪个样式

  • 样式不冲突，不会层叠

div {
    color: red;
    font-size: 12px;
}
div{
    color: pink;
}

最终会显示为12像素，粉红色

二、继承性

子标签会继承父标签的某些样式，如文本颜色和字号。

<style>
    div {
        color: red;
        font-size: 12px;
    }
</style>
  <div>
        <p>
            龙生龙，凤生凤，老鼠生的儿子会打洞
        </p>
    </div>

  • 恰当地使用继承可以简化代码，降低css样式的复杂性

  • 子元素可以继承的样式：(text-，font-，line-这些开头的元素，以及color属性)

行高的继承

<div>过去</div>
<p>将来</p>
<style>
    body {
        /* font: 12px/1.5 "Microsoft Yahei"; */
        font: 12px/1.5 "Microsoft Yahei";
    }
    .div {
        /* 这个1.5 就是当前元素文字大小的1.5倍，所以当前行高就是 14*1.5=21像素 */
        font-size: 14px;
    }
</style>

  • 行高可以跟单位也可以不跟单位

  • 如果子元素没有设置行高，则会继承父元素的行高 1.5

  • 此时子元素的行高是：当前子元素的文字大小 * 1.5

  • body行高为1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

三、优先级

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

  • 选择器相同，则执行层叠性

  • 选择器不同，则根据选择器权重执行

选择器权重1
继承 或者 *0，0，0，0
元素选择器0，0，0，1
类选择器、伪类选择器0，0，1，0
ID选择器0，1，0，0
行内样式 style=""1，0，0，0
! important+∞
div {
    color: red!important;
    font-size:12px;
}

注意：

  • 权重是有4组数字组成,但是不会有进位。

  • 可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推.

  • 等级判断从左向右，如果某一位数值相同，则判断下一位数值。

  • 可以简单记忆法：通配符和继承权重为0，标签选择器为1，类、(伪类)选择器为10，id选择器100，行内样式表为1000，!important无穷大

  • 继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。

四、权重叠加

权重叠加∶如果是复合选择器，则会有权重强加，需要计算权重。

<style>
    /* 复合选择器的权重叠加 */
    ul li {
        color: green;
    }
    /* ul li 权重：0，0，0，1 + 0，0，0，1 = 0，0，0，2 */
    li {
        color: red;
    }
    /* li 权重：0，0，0，1 */
    .nav li {
        color: pink;
    }
    /* .nav li 权重：0，0，1，0 + 0，0，0，1 = 0，0，1，1*/
</style>
  <ul class="nav">
        <li>萝卜</li>
        <li>青菜</li>
    </ul>

权重叠加练习

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

目标(三)

盒子模型
PS基本操作
圆角边框
盒子阴影
文字阴影

盒子模型

页面布局要学习三大核心,盒子模型,浮动和定位.学习好盒子模型能非常好的帮助我们布局页面.

一、看透网页布局本质

网页布局过程：

  1. 准备好相关的网页元素，网页元素基本都是盒子Box。

  2. 利用CSS设置好盒子样式，然后摆放到相应位置。

  3. 往盒子里面装内容。

网页布局的核心本质：就是利用CSS摆盒子

二、盒子模型

所谓盒子模型∶就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括:边框、外边距、内边距、和实际内容。

盒子模型的组成：

三、边框

1. 边框由三部分：边框粗细、边框样式、边框颜色

border: border-width|border-style|border-color;
属性作用
border-width定义边框粗细，单位是px
border-style边框的样式，重点记住solid(实线)、dashed (虚线)、dotted (点线)
border-color边框颜色

复合写法：

border: 1px solid red;/*没有顺序，一般要求这个顺序*/

2. 表格的相邻边框合并

border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

border-collapes: collapse;

  • collapse 单词是合并的意思

  • border-collapse: collapse; 表示相邻边框合并在一起

3. 边框影响盒子的实际大小

边框会额外增加盒子的实际大小。因此我们有两种方案解决:

  • 测量盒子大小的时候不量边框

  • 如果测量的时候包含了边框,则需要width/height减去边框宽度 (减去边框左右的宽度)

四、内边距

padding属性用于设置内边距，即边框与内容之间的距离。

属性作用
padding-left左内边距
padding-right右内边距
padding-top上内边距
padding-bottom下内边距

复合写法：

padding 属性 (简写属性) 可以有一到四个，不同值个数含义不同：

值的个数意思
padding: 5px1个值，代表上下左右内边距都是5px
padding: 5px 10px2个值，第一个代表上下内边距，第二个代表左右内边距
padding: 5px 10px 20px3个值，第一个代表上内边距，第二个代表左右内边距，第三个代表下内边距
padding: 5px 10px 20px 30px4个值，依次是上、右、下、左，顺时针

  • 以上4种情况，实际开发都会使用

padding会影响盒子实际大小

当我们给盒子指定padding值之后，发生了2件事情:

  1. 内容和边框有了距离，添加了内边距。

  2. padding 影响了盒子实际大小。

也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

解决方案∶

  • 如果保证盒子跟效果图大小保持一致，则让width 减去多出来的内边距大小即可。

  • 特别地，如果盒子本身没有指定 width 属性,则此时padding不会撑开盒子大小.

案例：新浪导航

<style>
.nav {
    height: 41px;
    border-top: 3px solid #ff8500;
    border-bottom: 1px solid #edeef0;
    background-color: #fcfcfc;
    line-height: 41px;
}
.nav a {
    display: inline-block;
    height: 41px;
    font-size: 14px;
    text-decoration: none;
    color: #4c4c4c;
    padding-left: 0 20px;
}
​
.nav a:hover {
    background-color: #eee;
    color: #ff8500;
}
</style>
​
<div class="nav">
    <a href="#">新浪导航</a>
    <a href="#">微博</a>
    <a href="#">客户端</a>
</div>

五、外边距

margin属性用于设置外边距，控制盒子与盒子之间的距离。

属性作用
margin-left左外边距
margin-right右外边距
margin-top上外边距
margin-bottom下外边距

margin 简写代表的意义跟 padding 完全一致

外边距的典型应用：

外边距可以让块级盒子水平居中，但是必须满足两个条件：

  1. 盒子必须指定了宽度（width）。

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

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

常见的写法，以下三种都可以：

  • margin-left: auto; maigin-right: auto;

  • margin: auto;

  • margin: 0 auto;

注意：以上方法是 让块级元素水平居中，行内元素和行内块元素水平居中只需给父元素添加：text-algin： center即可

六、外边距合并

使用margin设置块级元素的垂直外边距时，可能会出现外边距的合并。

相邻块级元素垂直外边距（上下外边距）的合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的块级元素设置了下外边距 margin-bottom，下面的块级元素设置了上外边距 margin-top，则它们之间的垂直间距不是 margin-bottom与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

解决方案：

  • 尽量只给一个盒子添加margin值

七、外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案：

  • 为父元素添加上边框

  • 为父元素添加内边距

  • 为父元素添加 overflow: hidden

还有其他方法，比如 浮动、固定、绝对定位的盒子不会有塌陷问题。

八、清除内外边距

网页元素很对带有默认的内外边距，不同浏览器默认的也不相一致。因此在布局前，首先清除网页元素的内外边距：

* {
    padding: 0;
    margin: 0;
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不设置上下内外边距。可以转换为行内块或块级元素再设置 。

PS基本操作

因为网页美工大部分效果图都是利用PS ( Photoshop )来做的，所以以后我们大部分切图工作都是在PS里面完成。

  • 文件→打开∶可以打开我们要测量的图片

  • Ctrl+R：可以打开标尺，或者视图→标尺

  • 右击标尺，把里面的单位改为像素

  • Ctrl+加号 (+)可以放大视图，Ctrl+减号 (-)可以缩小视图

  • 按住空格键，鼠标可以变成小手，拖动PS视图

  • 用选区工具拖动可以测量大小

  • Ctrl+D可以取消选区，或者在旁边空白处点击一下也可以取消选区

案例：产品模块

<style>
        * {
            margin: 0;
            padding: 0;
        }
​
        .box {
            width: 298px;
            height: 416px;
            margin: 100px auto;
            background-color: #F3F5F2;
        }
​
        .box img {
            width: 100%;
        }
​
        .review {
            height: 70px;
            font-size: 14px;
            padding: 0 28px;
            margin-top: 30px;
        }
​
        .appraise {
            font-size: 14px;
            color: #B0B0B0;
            padding: 0 24px;
            margin-top: 20px;
        }
​
        .info {
            font-size: 14px;
            margin-top: 15px;
            padding: 0 28px;
        }
​
        .info h4 {
            display: inline-block;
            font-weight: 400;
        }
​
        .info span {
            color: #ff6700;
        }
​
        .info em {
            font-style: normal;
            color: #ebe4e0;
            margin: 0 6px 0 15px;
        }
​
        .info h4 a {
            text-decoration: none;
            color: black;
        }
    </style>
    <div class="box">
        <img src="../Photo/产品模块案例.png" alt="">
        <p class="review">快递牛，整体不错蓝牙可以说秒连。红米给力</p>
        <div class="appraise">来自于117384232的评价</div>
        <div class="info">
            <h4><a href="#">Redmi AirDots真无线蓝...</a></h4>
            <em>|</em>
            <span> 99.9元</span>
        </div>
    </div>

圆角边框

在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。

border-radius属性用于设置元素的外边框圆角。

border-radius: length;

radius半径(圆的半径)原理：（椭)圆与边框的交集形成圆角效果

  • 参数值可以为数值 (0px~100px)或者百分比 (0%~100%)的形式

  • 如果盒子是正方形，想要设置成一个圆，把数值修改为盒子 (正方形)高度或宽度的一半，或者设置为50%

  • 如果想设置圆角矩形，设置为高度的一半就可以了

  • 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角

  • 也可以分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius

盒子阴影

CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。

box-shadow: h-shadow v-shadow blur spread color inset;
值说明
h-shadow必需。水平阴影位置，可以是负值
v-shadow必需。垂直阴影位置，可以是负值
blur可选。模糊虚实
spread可选。阴影的大小
color可选。阴影的颜色。可用rgba()设置
inset可选。将外阴影（outset）设置为内阴影

注意：

  • 默认就是外阴影（outset）。但是不可以写这个单词，否则阴影会无效

  • 盒子阴影不占空间，不会影响其他盒子排列

<style>
    .box {
        height: 200px;
        width: 200px;
        background-color: pink;
        margin: 0 auto;
        box-shadow: 10px 10px 10px 10px black;
    }
</style>
<div></div>

文字阴影

在CSS3中，我们可以使用text-shadow属性将阴影应用于文本。

text-shadow: h-shadow v-shadow blur color;
值说明
h-shadow必需。水平阴影位置，可以是负值
v-shadow必需。垂直阴影位置，可以是负值
blur可选。模糊虚实
color可选。阴影的颜色。可用rgba()设置

  • 作为了解，实际较少使用。

目录(四)

浮动
常见网页布局
清除浮动
PS切图

CSS浮动

一、传统网页的三种布局

网页布局的本质——用CSS来摆放盒子。

把盒子摆放到相应位置CSS提供了三种传统布局方式(简单说就是盒子如何进行排列顺序)∶

  • 普通流(标准流)

  • 浮动

  • 定位

二、标准流

所谓的标准流:就是标签按照规定好默认方式排列：

  1. 块级元素会独占一行，从上向下顺序排列。

  • 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

  1. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。

  • 常用元素：span、a、i、em等

以上都是标准流布局，前面学习的就是标准流，标准流是最基本的布局方式

注意：实际开发中，一个页面基本都包含了这三种布局方式（移动端会学习新的布局方式）。

三、为什么需要浮动

提问: 我们用标准流能很方便的实现如下效果吗?

  • 如何让多个块级盒子(div)水平排列成一行?

  • 比较难，虽然转换为行内块元素可以实现一行显示，但是他们之间会有大的空白缝隙，很难控制。

  • 如何实现两个盒子的左右对齐?

总结︰有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式. 浮动最典型的应用:可以让多个块级元素一行内排列显示。

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

四、什么是浮动

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

选择器 { float: 属性值; }
属性值说明
none元素不浮动（默认）
left元素向左浮动
right元素向右浮动
<style>
    .left,
    .right {
        float: left;
        width: 200px;
        height: 200px;
        background-color: pink;
    }
    /*.right与上面的.right是相同的选择器，上面的会被下面的调换掉*/
    .right: {
        float: right;
    }
</style>
<div class="left">左青龙</div>
<div class="right">右白虎</div>v

五、浮动特性 (重难点)

加入了浮动元素，会具有很多特性，需要掌握的：

  • 浮动元素会脱离标准流（脱标）

  • 浮动元素会一行内显示并且元素顶部对齐

  • 浮动元素会具有行内块元素的特性

最重要的特性：

  • 脱离标准流的控制移动到指定位置,（俗称脱标）

  • 浮动的盒子不再保留原先的位置

如果多个盒子设置了浮动，则他们会按照属性值在一行内显示并且顶端对齐排列

注意：浮动的元素是相互贴靠在一起的（没有缝隙），如果父级盒子宽度装不下这些浮动的盒子，多出的盒子会另起一行显示

浮动元素会具有行内块元素特性

任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。

  • 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定

  • 浮动的盒子中间是没有缝隙的，是紧挟着一起的

  • 行内元素同理

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

为了约束元素位置，网页布局一般采取的策略是：

先用标准流的父元素排列好上下位置，之后内部子元素采取浮动排列左右位置。这是符合网页布局第一准则的（父元素管上下，子元素管左右）

<!--浮动布局练习-->
<style>
    * {
        margin: 0;
        padding: 0;
    }
    li {
        list-style: none;
    }
    .box {
        width: 1226px;
        height: 285px;
        background-color: pink;
        margin: 0 auto;
    }
    .box li {
        float: left;
        width: 296px;
        height: 285px;
        background-color: purple;
        margin-right: 14px
    }
    .box .last {
        margin-right: 0;
    }
</style>
<ul class="box">
    <li></li>
    <li></li>
    <li></li>
    <li class="last"></li>
</ul>

常见网页布局

常见网页布局

浮动布局注意点

浮动和标准流的父盒子搭配

  • 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

一个元素浮动了，理论上其余兄弟元素也要浮动

  • 一个里面父级有多个盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防引起问题

  • 浮动的元素只会影响浮动盒子后面的标准流，不会影响前面的标准流

清除浮动

一、为什么需要清除浮动

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

  • 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响

二、清除浮动本质

  • 清除浮动本质就是清除浮动元素的影响

  • 如果父元素本身有高度，则不需要清除浮动

  • 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

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

我们实际工作中，几乎只用clear: both; 清除浮动的策略是：闭合浮动

三、清除浮动的方法

  • 额外标签法 也称为隔墙法，是W3C推荐的做法

  • 父级添加 overflow 属性

  • 父级添加 :after 属性

  • 父级添加双伪元素

1.额外标签法

额外标签法会在浮动元素末尾添加一个空标签。例如：< div style="clear: both"></ div>，或者其他标签 (如 < br />等)。

  • 优点：通俗易懂，书写方便

  • 缺点：添加许多无意义的标签，结构化差

注意：这个空标签必须是块级元素

<style>
.box {
    width: 800px;
    border: 1px solid blue;
    margin: 0 auto;
}
.damao {
    float: left;
    width: 300px;
    height: 200px;
    background-color: purple;
}
.ermao {
    float: left;
    width: 200px;
    height: 200px;
    background-color: pink;
}
.foot {
    height: 200px;
    background-color: black;
}
.clear {
    clear: both;
}
</style>
<div class="box">
    <div class="damao"></div>
    <div class="ermao"></div>
    <div class="clear"><div>
</div>
<div class="foot"></div>

2.父级添加overflow属性

可以给父级添加overflow属性，值可以设置为hidden、auto、scroll。

  • 优点：代码简洁

  • 缺点：无法显示溢出的部分

<style>
.box {
    overflow: hidden;
    width: 800px;
    border: 1px solid blue;
    margin: 0 auto;
}
.damao {
    float: left;
    width: 300px;
    height: 200px;
    background-color: purple;
}
.ermao {
    float: left;
    width: 200px;
    height: 200px;
    background-color: pink;
}
.foot {
    height: 200px;
    background-color: black;
}
</style>
<div class="box">
    <div class="damao"></div>
    <div class="ermao"></div>
</div>
<div class="foot"></div>

3. :after 伪元素法

:after方式 是额外标签法的升级版，也是 给父元素添加：

<style>
    .clearfix:after {
    content: "";        /* 伪元素必须写的属性 */
    display: block;     /* 插入元素必须是块级元素 */
    height:0;           /* 不要看到这个元素 */
    clear: both;
    visibility: hidden; /* 不要看到这个元素 */
}
.clearfix {
    /*兼容IE6、7专用*/
    *zoom: 1;
}
.box {
    width: 800px;
    border: 1px solid blue;
    margin: 0 auto;
}
.damao {
    float: left;
    width: 300px;
    height: 200px;
    background-color: purple;
}
.ermao {
    float: left;
    width: 200px;
    height: 200px;
    background-color: pink;
}
.foot {
    height: 200px;
    background-color: black;
}
</style>
<div class="box clearfix">
    <div class="damao"></div>
    <div class="ermao"></div>
</div>
<div class="foot"></div>

  • 优点：没有增加标签、结构更简单

  • 缺点：照顾低版本浏览器

  • 代表网站：百度、淘宝网、网易等

4.双伪元素清除浮动

也是给父元素添加

.clearfix:before,
.clearfix:after {
    content: "";
   display:table;       /* 转化为块级元素并且一行显示 */
}
.clearfix:after {
    clear:both;
}
.clearfix {/*兼容IE6、7专用*/
    *zoom: 1;
}

<style>
.clearfix:before,
.clearfix:after {
    content: "";
   display:table;
}
.clearfix:after {
    clear:both;
}
/*兼容IE6、7专用*/
.clearfix {
    *zoom: 1;
}
​
​
.box {
    width: 800px;
    border: 1px solid blue;
    margin: 0 auto;
}
.damao {
    float: left;
    width: 300px;
    height: 200px;
    background-color: purple;
}
.ermao {
    float: left;
    width: 200px;
    height: 200px;
    background-color: pink;
}
.foot {
    height: 200px;
    background-color: black;
}
</style>
<div class="box clearfix">
    <div class="damao"></div>
    <div class="ermao"></div>
</div>
<div class="foot"></div>

  • 优点:代码更简洁

  • 缺点: 照顾低版本浏览器

  • 代表网站: 小米、腾讯

PS切图

一、常见的图片格式

  1. jpg图像格式 JPEG (JPG )对色彩的信息保留较好，高清，颜色较多，我们产品类的图片经常用jpg格式的

  2. gif图像格式GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果,实际经常用于一些图片小动画效果

  3. png图像格式是一种新的网络图形格式，结合予GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景.如果想要切成背景透明的图片,请选择png格式.

  4. PSD图像格式PSD格式是Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计稿. 对我们前端人员来说, 最大的优点我们可以直接从上面复制文字, 获得图片, 还可以测量大小和距离.

二、图层切图

最简单的切图方式: 右键图层 -> 快速导出为png.

很多情况下, 需要合并图层再导出:

  • 选中需要的图层,右键 - > 合并图层(ctrl + e)

  • 合并后的图层右键 - > 导出

三、切片切图

  • 利用切片工具选中图片

    • 利用切片工具手动划出图片范围

  • 导出选中的图片

    • 文件菜单 -> 导出 -> 存储为Web设备所用格式 -> 选择需要存储的图片格式 -> 存储

  • 需要透明图片：将图层小眼睛取消 —> 文件菜单 -> 导出 -> 存储为Web设备所用格式 (PNG-24) -> 选择需要存储的图片格式 -> 存储

四、PS插件切图

Cutterman是一款运行在Photoshop中的插件,能够自动将你需要的图层进行输出,以代替传统的手工 “导出web所用格式” 以及使用切片工具进行挨个切图的繁琐流程

官网: Cutterman - 最好用的切图工具

注意: Cutterman插件要求PS是完整版. 即可以使用扩展功能的版本.

目录(五)

定位
元素的显示隐藏

CSS定位

一、定位

为什么需要定位

提问:以下情况使用标准流或者浮动能实现吗?

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

  2. 当我们滚动窗口的时候，盒子是固定屏幕某个位置的。

所以：

  • 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。

  • 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子

定位：将盒子定在某一个位置，所以定位也是再摆盒子，按照定位的方式移动盒子。

定位 = 定位模式 + 边偏移

  • 定位模式用于指定一个元素在文档中的定位方式。

  • 边偏移决定了该元素的最终位置。

定位模式：

通过CSS的position属性来设置，有四个值：

值语义
static静态定位
relative相对定位
absolute绝对定位
fixed固定定位

边偏移：

通过四个属性来设置：

边偏移属性示例描述
toptop: 80px顶端偏移量，定义元素相对于其父元素上边线的距离
bottombottom: 80px底部偏移量，定义元素相对于其父元素下边线的距离
leftleft: 80px左侧偏移量，定义元素相对于其父元素左边线的距离
rightright: 80px右侧偏移量，定义元素相对于其父元素右边线的距离

二、静态定位

静态定位是元素的默认定位方式，无定位的意思

选择器 {
    position: static;
}

  • 静态定位按照标准流特性摆放位置，它没有边偏移

  • 静态定位在布局时很少用到

三、相对定位

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

选择器 {
    position: relative;
}

相对定位的特点：（务必记住）

  • 它是相对于自己原来的位置来移动的 (移动位置的时候参照点是自己原来的位置)

  • 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，原来的位置保留）

<style>
    .box1 {
        position: relative;
        top: 100px;
        left: 100px;
        width: 200px;
        height: 200px;
        background-color: pink;
    }
    .box2 {
        width: 200px;
        height: 200px;
        background-color: deeppink;
    }
</style>
<div class="box1"></div>
<div class="box2"></div>

因此，相对定位并没有脱标，最典型的应用是限制绝对定位的

四、绝对定位

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的

选择器 {
    position: absolute;
}

绝对定位的特点：（务必记住）

  • 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准来定位 (Document 文档)

  • 如果祖先元素有定位(相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。

  • 绝对定位不再占有原先的位置（脱标）

五、子绝父相的由来

这句话的意思是：“子级是绝对定位的话，父级就要用相对定位”

  • 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子

  • 父盒子需要加定位限制子盒子在父盒子内显示

  • 父盒子布局时，需要占有位置，因此父元素只能是相对定位

这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级

总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会用到

六、固定定位

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素位置不会改变。

选择器 {
    position: fixed;
}

固定定位的特点：（务必记住）

  • 以浏览器的可视窗口为参照点移动

  • 跟父元素没有任何关系

  • 不随滚动条滚动

  • 固定定位不再占有原先的位置

  • 加了固定定位的盒子一定要有宽度

<style>
    .dj {
        positon: fixed;
        top: 100px;
        right: 40px;
    }
</style>
<div class="dj">
    <img src="#" alt="">
</div>

固定定位也是脱标的，可以看作是一个特殊的绝对定位

案例：固定在版心右侧位置

  • 让固定定位的盒子left: 50%、走到浏览器可视区（也可以看做版心)的一半位置。

  • 让固定定位的盒子margin-left:版心宽度的一半距离。多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了。

七、粘性定位

粘性定位可以被认为是相对定位和固定定位的混合

选择器 {
    position: sticky;
    /*当盒子距离可视区域上沿10px变成粘性定位*/
    top: 10px;
}

粘性定位的特点：

  • 以浏览器的可视窗口为参照点（固定定位特点）

  • 粘性定位占有原先位置（相对定位特点）

  • 必须添加top、left、right、bottom其中一个才有效

跟页面滚动搭配使用。兼容性较差，IE不支持

  • 一定记住 相对定位、固定定位、绝对定位两大特点：1.是否占有位置 (脱标)、2.以谁为基准点移动位置。

定位叠放次序 z-index

再使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index来控制盒子的前后次序 (z轴)

选择器 {
    z-index: 1;
}
<style>
  .box {
    position: absolute
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
  }
  
  .xiongda {
    z-index: 1;
    background-color: red;
  }
.xiongda {
    z-index: 2;
    background-color: green;
  }
.qiangge {
    z-index: 3;
    background-color: blue;
  }
</style>
​
<div class="box xiongda">熊大</div>
<div class="box xionger">熊二</div>
<div class="box qiangge">光头强</div>

  • 数值可以是正整数，负整数或者0，默认是auto，数值越大，盒子越靠上

  • 如果属性值相同，则按照书写顺序，后来居上

  • 数字后面不可以加单位

  • 只有定位的盒子才有z-index属性

案例：绝对定位的盒子水平居中、垂直居中

加了绝对定位的盒子不能通过margin: 0 auto水平居中，但是可以通过下面方法计算实现水平和垂直居中

  • left: 50%：让盒子左侧移动到父级元素的水平中心位置；(父容器宽度的一半)

  • margin-left: -100px; 让盒子向左移动自身宽度的一半（假设盒子宽是200px）

<style>
  .box {
    position: absolute;
    left: 50%;
    margin-left: -100px;
    bottom: 5%;
    width: 200px;
    height: 200px;
    background-color: red;
  }
</style>
<div class="box"></div>

八、定位特殊特性

绝对定位和固定定位也和浮动类似

  • 行内元素添加绝对定位或者固定定位，可以直接设置高度和宽度

  • 块级元素添加绝对定位或者固定定位，如果不设置宽度或高度，默认大小就是内容的大小

九、脱标的盒子不会触发外边距塌陷

用浮动元素、绝对定位、固定定位元素的都不会触发外边距合并的问题

绝对定位、固定定位会完成压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住盒子里的内容

但是绝对定位（固定定位）会压住下面标准流所有的内容

浮动之所以特殊，是因为浮动最初目的就是做文字环绕效果的。

元素的显示和隐藏

类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新显示

本质：让一个元素在页面中因此或者显示出来

  1. display 显示隐藏

  2. visibility 显示隐藏

  3. overflow 溢出显示隐藏

一、display属性

display属性用于设置一个元素如何显示

  • display: none; 隐藏对象；

  • display: block; 除了转换为块级元素外，同时还有显示元素的意思

display隐藏元素后，不在占有原来的位置.

应用及其广泛，搭配JS可以做很多网页特效。

<style>
    .peppa {
        display: none;
        width: 200px;
        height: 200px;
        background-color: pink;
    }
    .george {
        width: 200px;
        height: 200px;
        background-color: skyblue;
    }
</style>
<div class="peppa">佩奇</div>
<div class="george">乔治</div>

二、visibility 可见性

visibility属性用于指定一个元素可见还是隐藏

visibility: visible; 元素可见；
visibility: hidden; 元素隐藏

visibility 隐藏元素后，继续占有原来的位置

如果隐藏元素想要原来位置，就用visibility: hidden;

如果隐藏元素不想要原来位置，就用display: none; （用处更多，重点）

三、overflow (溢出)

overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。

属性值描述
visible不剪切内容也不添加滚动条 (默认)
hidden不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll不管超出内容否，总是显示滚动条
auto超出自动显示滚动条，不超出不显示滚动条

  • 一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。

  • 但是如果有定位的盒子，请慎用overflow:hidden; 因为它会隐藏多余的部分。

目录(六)

精灵图
字体图标
CSS三角
CSS用户界面样式
vertical-align 属性应用
溢出的文字省略号显示
常见布局技巧

目录(八)

HTML5 的新特性
CSS3 的新特性

Web 服务器

1.了解什么是服务器以及相关概念。
2.把自己网站上传到服务器上，可以让其他人访问

一、什么是 Web服务器

我们写的品优购网站，目前是放到自己电脑上的，只能自己访问浏览。

如果想要很多人访问我们的网站，可以把品优购放到服务器上，这样就可以多人访问我们的品优购网站了。

服务器(我们也会称之为主机) 是提供计算服务的设备，它也是一台计算机。在网络环境下，根据服务器提供的服务类型不同，服务器又分为文件服务器、数据库服务器、应用程序服务器、web服务器。

Web 服务器一般指网站服务器，是指驻留于因特网上某种类型计算机的程序，可以向浏览器等 Web客户端提供文档，也可以放置网站文件，让全世界浏览；可以防止数据文件，让全世界下载。

以下服务器我们主要指的是 Web服务器。

根据服务器在网络中所在的位置不同，又可分为本地服务器和远程服务器。

二、本地服务器

我们可以把自己的电脑设置为本地服务器，这样同一个局域网内的同学就可以访问你的品优购网站了。

三、远程服务器

本地服务器主要在局域网中访问，如果想要在互联网中访问，可以把品优购网站上传到远程服务器。

远程服务器是通常是别的公司为我们提供的一台电脑 (主机)，我们只要把网站项目上传到这台电脑上，任何人都可以利用域名访问我们的网站了。

比如域名：www.mi.com 可以访问小米网站。

四、将自己的网站上传到远程服务器

注意：一般稳定的服务器都是需要收费的。比如：阿里云

这里给大家推荐一个免费的远程服务器 (免费空间) 免费空间-free.3v.do 提供100M永久免费ASP空间申请.

  1. 去免费空间网站注册账号。

  2. 记录下主机名、用户名、密码、域名。

主机名：014.3vftp.cn
用户名：heartking
密码：Dyh36974213
域名：http://heartking.free3v.work

  1. 利用 cutftp 软件上传网站到远程服务器。

  1. 在浏览器中输入域名，即可访问我们的品优购网站了。

浏览器私有前缀

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

一、私有前缀

  • -moz-：代表 firefox 浏览器私有属性

  • -ms-：代表 ie 浏览器私有属性

  • -webkit-：代表 safari、chrome 私有属性

  • -o-：代表 Opera 私有属性

二、提倡的写法

-moz-border-radius: 10px;
--webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
「已注销」
关注
黑马pink老师前端从入门到精通教程汇总（附源码+配套资料）
技术专家
11-08 3387
本篇内容主要是PINK老师教程汇总（主要内容如下） web端布局、移动端布局、JavaScript、web API 、操作DOM ，BOM操作
黑马程序员前端-CSS：溢出的文字省略号显示
黑马程序员官方博客
04-06 2893
按照HTML+CSS的学习顺序笔记已经更新了28篇内容了，因为篇幅问题，请看文末。 目录 一、单行文本溢出显示省略号 二、多行文本溢出显示省略号（了解即可） 三、往期合集 今天来学溢出文字省略号显示。 一、单行文本溢出显示省略号 单行文本溢出显示省略号必须满足三个条件： /*1. 先强制一行内显示文本*/ white-space: nowrap; （ 默认 normal 自动换行） /*2. 超出的部分隐藏*/ overflow: hidden;
Pink老师前端笔记-CSS第五天
w1404273025的博客
04-16 897
Pink老师前端笔记-CSS第五天 # day07-前端基础CSS第五天 学习目标： ​ 了解 PS切图 ​ 掌握 CSS属性书写顺序 ​ 掌握 学成在线案例 1. PS 切图 1.1. 常见的图片格式 序号 格式 特点和常用的用途 1 jpg JPEG（.JPG）对色彩的信息保留较好，高清，颜色较多，我们产品类的图片 经常用jpg格式的 2 gif GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果, 实际 经常用于一些图片小动画效
黑马程序员pink老师_CSS学习笔记
weixin_46764819的博客
03-07 1万+
CSS参考手册网址 一、CSS字体样式属性 font-size：字号 相对长度单位 说明 em 相当于当前对象内文本的字体尺寸 px 像素【最常用，推荐使用】 绝对长度单位 说明 in 英寸 cm 厘米 mm 毫米 pt 点 font-family：字体样式 p { 　　font-family: "宋体"；／＊可以写多个字体，用英文逗号隔开，表示找不到１字体去找２字体，.
品优购项目——黑马程序员pink老师/完整源代码/项目讲解/内容补充完善
热门推荐
imByte的博客
09-09 2万+
品优购项目规划 1. 网站制作流程 现阶段，主要是做前台页面设计 2. 品优购项目整体介绍 项目名称：品优购 项目描述：品优购是一个电商网站，需求是完成 PC 端首页、列表页、注册页面 的制作 3. 开发工具以及技术栈 开发工具 VScode 、Photoshop（fw）、主流浏览器（以Chrome浏览器为主） 技术栈 利用 HTML5 + CSS3 手动布局，可以大量使用 H5 新增标签和样式 采取结构与样式相分离，模块化开发 ...
学成在线案例——黑马程序员pink老师\思路讲解\完整源代码
imByte的博客
08-14 7113
本文为跟随B站黑马程序员pink老师学习CSS时所写，文章讲解了学成在线首页的制作思路，并贴出了源代码，作为学习笔记分享给大家 如有错误，欢迎指出。如有侵权，联系删除 文章目录1. 案例准备工作2. CSS属性书写顺序3. 页面布局思路4. 确定版心5. 头部制作6. banner 制作7. 精品推荐小模块8. 精品推荐大模块9. 底部模块10. 完整源代码 总体制作效果如下，完整源代码见文末 1. 案例准备工作 本案例采取结构与样式相分离思想 images中存储所用图片 index.h.
品优购项目——黑马程序员pink老师/完整源代码/项目讲解
m0_46830821的博客
03-30 2万+
话不多说，先上效果图，代码在文末 首页 结尾页 个人注册页 女鞋模块页 1、品优购项目搭建工作 images：放置背景等不经常更换的图片 upload：放置产品类需要经常更换的图片 index.html文件对应首页 common.css对应CSS 公共样式文件 base.css对应CSS 初始化样式文件 2、HTML页面引入 favicon 图标 在 html 页面里面的<head> </head>元素之间引入代码 ...
CSS 学习笔记总结（借鉴黑马程序员pink老师前端入门）
haobowen的博客
12-05 8997
1. CSS 简介 CSS 的主要使用场景就是美化网页，布局页面的 1.1 HTML 的局限性 说起 HTML ，他只关注内容的语义。比如 <h1> 表明这是一个大标题，<p> 表明这是一个段落，<img> 表明这有一个图片，<a> 表示此处有链接。 虽然 HTML 可以做简单的样式，但是带来的是无尽的臃肿和繁琐 1.2 CSS-网页的美容师 CSS 是层叠样式表（Cascading Style Sheets）的简称 有时我们也称之为 CSS 样
基础选择器(黑马程序员pink老师前端教程笔记)
m0_75115363的博客
10-20 94
四种基础选择器（标签选择器，类选择器，id选择器，通配符选择器）的讲解
复合选择器(黑马程序员pink老师前端教程笔记)
m0_75115363的博客
10-20 48
几种复合选择器（后代选择器，子选择器，链接伪类选择器，并集选择器，: focus 伪类选择器）的讲解
最最详细的黑马前端HTML5+CSS3笔记，给大家整理好了
web15085181368的博客
03-02 1392
基于黑马前端视频学习的CSS3笔记，每一天的知识点都放在一起，方便学习查阅 ==CSS第一天== 一、css简介 二、css语法规范 三、css代码风格 四、css选择器的作用 五、css基础选择器 1、标签选择器： 2、类选择器 3、多类名选择器 4、id选择器： 5、id选择器和类选择器的区别 6、通配符选择器 7、选择器总结 六、css字体属性: 1、字体大小： 2、字体粗细： 3、字体样式： 4、字体的综合写法 5、字体总结： 七、css文本属性： 1、文本颜色： 2、文本
黑马前端pink 教学DOM 笔记
weixin_63658047的博客
01-04 765
DOM知识大全（一篇学完DOM）
前端学到什么程度可以找第一份工作？
Ahahaha___的博客
07-19 1060
可以按照下面的学习路线进行查漏补缺，学习重点和建议学习时长都给你标好了。想成为一名前端开发人员，第一步就是网页布局和效果实现，也就是我们常说的切图仔。这时候你需要学习HTML+CSS。此部分的学习目的是把UI设计师给你的设计稿用。这部分的难点是有大量的标签需要你记忆，但是也不用死记硬背，用的多了，自然也就记住一些了。再简单点，就是你不需要记住所有的标签，你只要知道都能实现什么，然后不会就去百度或者查文档。...
深入理解CSS：前端开发必备知识
"这是一份关于前端CSS的学习笔记，主要基于黑马程序员PINK老师的教程，适合初学者或希望深入理解CSS的朋友。笔记涵盖了CSS的基本概念、元素类型、选择器权重以及HTML5新增的选择器和伪类。" 在前端开发中，CSS...
一些常用的react hooks以及各自的作用
weixin_48602044的博客
11-01 413
关于react hooks的一些知识与应用
做一个能适配「手机」的网站需要注意什么
illidri的博客
11-01 292
像现在主流会采用 H5 响应式布局，仅涉及前端的开发工作，代码量少，效果佳，是一种性价比比较高的选择，如果题主有意要进行网站建站，特别是想要手机浏览也有一定效果，可以选择这种~当然还有一种类似的方式叫自适应布局，俗称 AWD（AdaptiveWebDesign），同样是检测视口分辨率，判断不同尺寸和分辨率是什么设备，从而返回不同布局页面。最根本的区别在于，响应式页面的代码量少，但质量要求高，根据不同分辨率自动调整排版，而自适应页面需要根据不同设备准备不同的页面，这样前期的开发工作就大了很多。
前端 常见开发工具使用
weixin_45534301的博客
10-31 485
【代码】前端 常见开发工具使用。
Google Recaptcha V2 简单使用
吴家健ken的博客
10-30 312
Google Recaptcha V2 简单使用
Webserver(2.8)守护进程
最新发布
学习历程记录和分享
11-04 132
每隔2s获取系统时间，将这个时间写入到磁盘文件中。
黑马程序员css笔记pink
02-02
关于黑马程序员的CSS笔记，我无法提供具体的介绍，因为我无法获取到该笔记的内容。你可以尝试在黑马程序员的官方网站或者其他相关渠道上查找相关信息。如果你有其他关于CSS的问题，我会很乐意帮助你解答。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值