前端学习笔记
阮新伟 学习笔记1 小时 读完 (大约 12418 个字)  0次访问

前端学习笔记

人生就是一种平衡
简简单单才是真，平平淡淡才是福
人之所以痛苦，就在于追求了过多不属于自己的东西
懂得知足的人，即使粗茶淡饭，也能够尝出人生的美味
与其在遗憾中郁郁寡欢，不如好好珍惜自己的拥有，这样才能收获更多的快乐

Front-End-Learning

HTML5介绍

css修饰过的html标签

1
2
3
4
5
6
7
8
9
10
11
12
<head>
    h1{
    	font-size: 12px;
    	color: #930;
    	text-align: center;
    }
</head>
<body>
    <h1>
        Hello World!
    </h1>
</body>

HTML5文档结构

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>	<!--声明文档结构为html5-->
<html>	<!--html标签为html文件的根标签-->
    <head>	<!--head标签为头部标签，一般存放meta和title标签等-->
        <meta charset = "UTF-8">	<!--声明当前文档字符集编码为UTF-8-->
        <title>HTML5文档结构</title>	<!--title标签设置为浏览器标题-->
    </head>
    <body>
        <!--body标签为网页内容-->
    </body>
</html>

HTML5注释

1
<!--这里是注释-->

HTML5 语义化标签

段落标签

1
<p>段落文本</p>

<p>标签的默认格式：在段前段后都会有空白，可以使用css样式来改变。

自定义文本样式

<span>文本</span>

然后在

文章标题

1
2
3
4
5
6
7
8
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>

标题标签一共有6个：h1，h2，h3，h4，h5，h6。

标题组

1
2
3
4
<hgroup>
    <h1>题目</h1>
    <h2>作者</h2>
</hgroup>

语调强调

1
<em>语调强调</em>

语义强调

1
<strong>语义强调</strong>

长引用

1
2
3
<blockquote>
    长引用
</blockquote>

短引用

1
<q>短引用</q>

自定义块

1
<div>...</div>

相当于独立板块，容器。

标签定义头部区域

1
<header>头部标签</header>

标签定义主要区域

1
2
<!-- 只能有一个 -->
<main>主要标签</main>

标签定义底部区域

1
<footer>底部标签</footer>

定义区段

1
<section>区域</section>

侧边栏

1
<aside>侧边栏</aside>

导航

1
<nav></nav>

文章

1
<article></article>

HTML5效果标签

换行效果

1
<br/>
  1. 在换行的地方添加<br/>。
  2. 注意：<br/>是空标签，只需要写一个开始标签，类似的有<hr/>和<img/>。

空格效果

1
&nbsp;

使用特殊字符&nbsp;来表示空格。

水平分割线效果

1
<hr/>

使用<hr/>来实现水平分割线效果

HTML5列表标签

无序列表

1
2
3
4
<ul>
    <li>第一个无序列表</li>
    <li>第二个无序列表</li>
</ul>

有序列表

1
2
3
4
<ol>
    <li>第一个有序列表</li>
    <li>第二个有序列表</li>
</ol>

定义列表

1
2
3
4
<dl>
    <dt>列标题</dt>
    <dd>解释</dd>
</dl>

HTML5图片，链接及表格标签

图片标签

1
<img src = "图片地址" alt = "下载失败时的替换文本" title = "提示文本" width="宽度像素" height="高度像素">

图片格式

  1. jpeg（jpg）
    1. 支持颜色比较丰富，不支持透明效果，不支持动图
    2. 一般用来显示图片
  2. gif
    1. 支持的颜色比较少，支持简单透明，支持动图
    2. 一般用来显示简单单一的图片，动图
  3. png
    1. 支持的颜色丰富，支持复杂透明，不支持动图
    2. 颜色丰富，复杂透明图片
  4. webp
    1. 谷歌推出专门用来表示网页图片的一种格式
    2. 兼容其他图片的所有优点，而且文件特别小
    3. 缺点：兼容性不好
  5. base64
    1. 将文件使用base64编码，通过字符来引入图片
    2. 主要用于需要和网页一起加载的图片
  6. 选用图片格式的标准
    1. 效果一样，用小的
    2. 效果不同，用好的

超链接标签

1
<a href = "目标网址" title = "提示文本">链接显示文本</a>

相对路径

  1. ./：表示当前文件的目录；
  2. ../：表示当前文件的上一级目录；
  3. 如果不存在，则默认为./。

跳转当前页面指定位置

1
2
<a href="#">跳转到顶部</a>
<a href="#idposition">跳转到id属性为idposition的位置</a>

超链接占位符

1
<a href="javascript:;">超链接占位符</a>

新窗口或原窗口打开超链接

1
2
3
4
<!--在当前页面打开超链接-->
<a href = "目标网址" target = "_self">链接提示文本</a>
<!--在新页面打开超链接-->
<a href = "目标网址" target = "_blank">链接提示文本</a>

生成一段英文文本

使用lorem

表格标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--border属性为表格添加边框-->
<table border = "1">
    <!--表格标题-->
    <caption>表格标题</caption>
    <!--表示每一行使用<tr>-->
    <tr>
        <!--默认加粗并居中-->
        <th>表格第一列的标题</th>
        <th>表格第二列的标题</th>
    </tr>
    <tr>
        <td>表格第二行第一列内容</td>
        <td>表格第二行第二列内容</td>
    </tr>
</table>

使用thead、tbody、tfoot定义表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!--border属性为表格添加边框-->
<table border = "1">
    <!--表格标题-->
    <caption>表格标题</caption>
    <!--表头-->
    <thead>
        <tr>
            <!--默认加粗并居中-->
        	<th>表头第一列的标题</th>
        	<th>表头第二列的标题</th>
        </tr>
    </thead>
    <!--表身-->
    <tbody>
        <tr>
            <td>表身第一行第一列内容</td>
            <td>表身第一行第二列内容</td>
        </tr>
    </tbody>
    <!--表尾-->
    <tfoot>
        <tr>
            <td>表尾第一行第一列内容</td>
            <td>表尾第一行第二列内容</td>
        </tr>
    </tfoot>
</table>

HTML5内联框架、音视频标签

内联框架

1
2
<!-- frameborder="0"代表没有边框 frameborder="1"代表有边框 -->
<iframe src="引入的地址" weight="宽度" height="高度" frameborder="0"></iframe>

音频标签

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 
    controls 是否允许用户控制播放
    autoplay 音频文件是否自动播放，但大多数浏览器不会自动播放
    loop 音频是否循环播放 
-->
<audio src="音频地址" controls autoplay loop></audio>

<!-- 使用source指定文件位置 -->
<audio controls>
    <source src="./xxx.mp3">
    <source src="./xxx.ogg">
    <embed src="./xxx.mp3" type="audio/mp3" width="400" height="300">
</audio>

视频标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 
    controls 是否允许用户控制播放
    autoplay 视频文件是否自动播放，但大多数浏览器不会自动播放
    loop 视频是否循环播放 
-->

<!-- 用法和audio基本一样 -->

<!-- 使用source指定文件位置 -->
<video controls>
    <source src="./xxx.webm">
    <source src="./xxx.mp4">
    <embed src="./xxx.mp4" type="video/mp4">
</video>

<!-- 还可以通过其他视频网站的视频分享进网页中 -->

HTML5表单标签

创建表单

1
2
3
<form method = "传送方式" action = "服务器文件">
    ...
</form>
  1. <form>：创建表单标签；
  2. method：数据传送方式（get / post）；
  3. action：输入的数据传送的地方，例如”save.php”。

文本输入框、密码输入框

1
2
3
4
<form>
    <input type = "text" name = "text" value = "text">
    <input type = "password" name = "password" value = "password">
</form>
  1. type：
    1. 当type = “text”时，输入框为文本输入框；
    2. 当type = “password”时，输入框为密码输入框。
  2. name：文本框变量名。
  3. value：文本框默认值。

placehorder属性

1
2
<input type = "text" placehorder = "请输入用户名">
<input type = "password" placehorder = "请输入密码">
  1. placehorder属性为输入框占位符，里面放文本框提示信息；
  2. 当输入框内容为空提示信息才显示，当输入框内容不为空提示信息消失；
  3. placehorder的内容不是输入框中真正的内容。

数字输入框

1
<input type = "number">
  1. 输入框只能输入数字；
  2. 输入框右侧有加减符号，可以调整数字大小。

网址输入框

1
<input type = "url">

网址输入框的值需要以http://或者https://开头，并且后面必须有内容，否则表单提交时会报错提示。

邮箱输入框

1
<input type = "email">

邮箱输入框中的值必须包含@，并且之后必须要有内容，否则表单提交时会有报错提示。

文本域

1
<textarea cols = "50" rows = "10">在这里输入内容</textarea>
  1. cols：输入域的列数；
  2. rows：输入域的行数；
  3. <textarea>和</textarea>之间可以输入默认值。

laber标签

1
2
3
4
<form
  <label for = "email">输入你的邮箱地址</label>
  <input type = "email" id = "email" placeholder = "Enter email">
</form>

laber标签中for属性的值必须与相关的控件id值相同

单选框、复选框

1
<input type = "radio/checkbox" value = "值" name = "名称" checked = "checked">
  1. type：
    1. 当type = “radio”时，控件为单选框；
      特别注意：对于同一组选项，name值必须相同，才能做到单选的效果
    2. 当type = “checkbox”时，控件为多选框。
  2. value：提交数据到服务器的值（后台程序PHP使用。
  3. name：为控件命名，以备后台程序 ASP、PHP 使用。
  4. checked：当设置 checked=”checked” 时，该选项被默认选中。

下拉菜单

1
2
3
4
5
6
7
8
<form>
    <select>
        <option value="看书">看书</option>
        <option value="运动">运动</option>
        <option value="购物">购物</option>
        <option value="旅游" selected = "selected">旅游</option>
    </select>
</form>
  1. select和option标签都是双标签，它总是成对出现的，需要首标签和尾标签；
  2. select标签里面只能放option标签，表示下拉列表的选项；
  3. option：
    1. 标签放选项内容，不放置其他标签；
    2. 标签之间为显示选项的内容。
  4. value：向服务器提交的值；
  5. selected：设置selected=”selected”属性，则该选项就被默认选中。

提交按钮、重置按钮

1
2
<input type="submit" value="提交" name="submitBtn">
<input type="reset" value="重置" name="resetBtn">
  1. type：
    1. 当type = “submit”时，为提交按钮；
    2. 当type = “reset”时，为重置按钮。
  2. value：按钮上的值；
  3. name：按钮控件名。

CSS3介绍

认识CSS样式

1
2
3
4
5
p{
    font-size: 12px;
    color: red;
    font-weight: bold;
}

使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。

短语样式

1
2
3
span{
    color: red;
}

使用<span>和</span>括起短语实现样式修改。

CSS代码语法

1
p{ color: blue; }
  1. p是选择符；
    又称选择器，指明网页中要应用样式规则的元素。
  2. color是属性；
  3. blue是值；
  4. “{ }”中的就是声明；
    属性和值之间用:分隔，多条声明用;分隔。
  5. 一般为了便于阅读，每一条声明都占一行。

CSS注释代码

1
/*这里是注释*/

CSS样式代码插入形式-内联式

1
<p style = "color: red">这里的文字是红色</p>

多条css样式则用;隔开。

CSS样式代码插入形式-嵌入式

1
2
3
4
5
<style type = "text/css">
span{
    color: red;
}
</style>

嵌入式css样式必须写在<style>和</style>之间，并且一般情况下，嵌入式css样式写在<head>和</head>之间。

CSS样式代码插入形式-外部式

1
2
3
4
5
/*style.css*/
span{
    color: blue;
    font-size: 20px;
}
1
2
3
4
<!--index.html-->
<head>
    <link href = "style.css" rel = "stylesheet" type = "text/css" />
</head>

  1. 将css代码写在另外一个单独的外部文件中，文件以.css结尾

  2. 在<head>中使用<link>将文件链接到HTML文件中。

  3. rel="stylesheet" type="text/css"是固定写法不可修改；

  4. <link>标签位置一般写在<head>标签之内。

三种链接方式优先级

现在不考虑权值的情况。

  1. 就近原则，离被设元素越近优先级越高；
  2. 一般来说，外部式 < 嵌入式 < 内联式，因为在实际开发中一般都是<link>代码在<style>代码前面。

CSS3选择器

选择器

每一条css样式定义由两部分组成，形式如下：

1
2
3
选择器{
    样式;
}

类选择器

语法：

1
.类选器名称{css样式代码}

  1. 英文圆点开头；

  2. 类选器可任意取名，但不能取中文；

  3. 例如：将类选器标注为红色

    1
    2
    3
    4
    5
    6
    7
    <style type = "text/css">
    .classname{
        color: red;
    }
    </style>

    <span class = "classname">类选器</span>

ID选择器

语法：

1
#ID选择器名称{css样式代码};

  1. 使用ID选择器，必须给标签添加上id属性，为标签设置id=”ID名称”，而不是class=”类名称”。

  2. ID选择符的前面是井号（#）号，而不是英文圆点（.）。

  3. 例如：将ID选择器标注为红色

    1
    2
    3
    4
    5
    6
    7
    <style type = "text/css">
    #idname{
        color: red;
    }
    </style>

    <span id = "idname">ID选择器</span>

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

  1. ID选择器只能够在文档中使用一次，类选择器可以使用多次；
    如：可以出现多次<span class = "classname"></span>而只能出现一次<span id = "idname"></span>

  2. 类选择器可以使用词列表方式为同一个元素同时设定多种样式，ID选择器不可以使用词列表。
    如：为类选择器词列表使用两种样式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <style type = "text/css">
    .classname1{
        color: red;
    }
    .classname2{
        font-size: 12px;
    }
    </style>
    <span class = "classname1 classname2">类选择器词列表</span>

子选择器

>（大于号）：用于选择指定标签元素的第一代子元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style type="text/css">
/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
.food>li {
    border: 1px solid red;
}
</style>

<ul class="food">
/*水果一个边框，框住了<li></li>之间的所有*/
    <li>水果
        <ul>
            <li>香蕉</li>
            <li>苹果</li>
            <li>梨</li>
        </ul>
    </li>
/*蔬菜一个边框*/
    <li>蔬菜
        <ul>
            <li>白菜</li>
            <li>油菜</li>
            <li>卷心菜</li>
        </ul>
    </li>
</ul>

后代选择器

&nbsp;（空格）：（只是简单的空格，此处为了显示使用了空格符号）加入空格，用于选择指定标签元素下的后代所有元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<style type="text/css">
/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
.food li {
    border: 1px solid red;
}
</style>

<ul class="food">
/*水果一个边框，框住了<li></li>之间的所有*/
    <li>水果
        <ul>
			/*香蕉一个边框*/
            <li>香蕉</li>
			/*苹果一个边框*/
            <li>苹果</li>
			/*梨一个边框*/
            <li>梨</li>
        </ul>
    </li>
/*蔬菜一个边框*/
    <li>蔬菜
        <ul>
			/*白菜一个边框*/
            <li>白菜</li>
			/*油菜一个边框*/
            <li>油菜</li>
			/*卷心菜一个边框*/
            <li>卷心菜</li>
        </ul>
    </li>
</ul>

兄弟选择器

  1. +:选择下一个兄弟元素
  2. ~:选择下面所有兄弟元素
1
2
3
4
5
6
7
8
9
/* 选择p标签后面的第一个兄弟span标签 */
p+span{
    color: red;
}

/* 选择p标签后面的所有兄弟span标签 */
p~span{
    color: green;
}

通用选择器

*（星号）：用于匹配HTML中所有的标签元素。

1
2
3
4
5
6
7
8
9
10
<style type="text/css">
* {
    color: red;
    font-size: 20px;
}
</style>

/*所有标签下元素字体全部为红色，大小为20px*/
<h1>一级标题</h1>
<p>文章</p>

属性选择器

  1. [属性名] 选择含有指定属性的元素
  2. [属性名=属性值] 选择含有指定属性和指定属性值的元素
  3. [属性名^=属性值] 选择含有指定属性和指定值开头的属性值的元素
  4. [属性名$=属性值] 选择含有指定属性和指定值结尾的属性值的元素
  5. [属性名=属性值] 选择含有指定属性和*包含**指定值的属性值的元素
  6. 属性值都可以加上引号"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* 选择含有title属性的p标签 */
p[title] {
    color: green;
}

/* 选择含有title="abc"的p标签 */
p[title=abc] {
    color: red;
}

/* 选择title属性值中以abc开头的p标签 */
p[title^=abc] {
    color: orange;
}

/* 选择title属性值中以abc结尾的p标签 */
p[title$=abc] {
    color: blue;
}

/* 选择title属性值中包含abc的p标签 */
p[title*=abc] {
    color: yellow;
}

伪类选择器

伪类选择符允许给HTML不存在的标签 （标签的某种状态）设置样式，比如鼠标滑过状态：

  1. :hover：鼠标滑过
  2. :active：鼠标点击
  3. :first-child：第一个子元素
  4. :last-child：最后一个子元素
  5. :nth-child()：第n个子元素
    1. :nth-child(n)：所有的子元素
    2. :nth-child(2n)或:nth-child(even)：偶数位元素
    3. :nth-child(2n+1)或:nth-child(odd)：奇数位元素
  6. :first-of-type：每个类型的第一个子元素
  7. :last-of-type：每个类型的最后一个子元素
  8. :nth-of-type()：同类型的第n个子元素，特殊值与:nth-child()相同
  9. :not()：否定，将符合条件的元素从选择器中去除
  10. 超链接独有伪类
    1. :link：用来表示没访问过的链接（正常的链接）
    2. :visited：用来表示访问过的链接，由于隐私的问题，visited这个伪类只能修改链接的颜色

elem1>elem2:x{}：elem1中先满足x伪类的元素，再满足类型是elem2。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
a:hover{css样式代码}

/* ul中的第一个子元素，并且类型是li */
ul>li:first-child {
    color: red;
}

/* ul中的最后一个子元素，并且类型是li */
ul>li:last-child {
    color: green;
}

/* ul中的第二个子元素，并且类型是li */
ul>li:nth-child(2) {
    color: yellow;
}

/* ul中的所有li元素 */
ul>li:nth-child(n) {
    color: blue;
}

/* ul中的所有偶数位的li元素 */
ul>li:nth-child(2n) { /*2n或even */
    color: orange;
}

/* ul中所有奇数位的li元素 */
ul>li:nth-child(2n+1) { /*2n+1或odd*/
    color: red;
}

/* ul中li类型的第一个子元素 */
ul>li:first-of-type {
    color: yellow;
}

/* ul中去除最后一个子元素，并且类型是li */
ul>li:not(:last-child) {
    color: red;
}

能兼容所有浏览器的”伪类选择符“只有a:hover。

伪元素

  1. 伪元素：表示页面中一些特殊的并不真实存在的元素（特殊的位置）
  2. 伪元素以::开头
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* 将p标签中的第一个字母设置为红色 */
p::first-letter{
    color: red;
}

/* 将p标签中的第一行设置为绿色 */
p::first-line{
    color: green;
}

/* 将p标签中选中的元素设置为橘色 */
p::selection{
    color: orange;
}

/* 在div标签中的内容最前面加上【，并设置为蓝色 */
div::before{
    content: '【';
    color: blue;
}

/* 在div标签中的内容的最后面加上】，并设置为蓝色 */
div::after{
    content: '】';
    color: blue;
}

分组选择器

,（逗号）：为html中多个标签元素设置同一个样式。

1
2
/*h1, span标签同时设置颜色为红色*/
h1, span{color: red;}

CSS3的继承，优先级和重要性

样式的继承

  1. 继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代；
  2. 继承的设计是为了方便我们开发，利用继承就可以将一些通用的样式统一设置到祖先元素上，这样只需要设置一次即可让所有元素都具有这样的样式；
  3. 并不是所有的样式都会被继承，比如背景相关、布局相关等的样式都不会被继承。

选择器优先级

  1. 内联式插入样式 1,0,0,0
  2. ID选择器 0,1,0,0
  3. 类选择器 0,0,1,0
  4. 标签选择器 0,0,0,1
  5. 通配符选择器 0,0,0,0
  6. 继承的样式 没有优先级

!important

  1. 选择器最高层级；
  2. 网页样式优先级：用户自定义样式>网页制作者样式>浏览器默认样式；
  3. 当设置了!important，权值高于用户自定义样式。

CSS3字体样式

字体类型

  1. 字体类别，浏览器会自动使用该类别下的字体
    1. serif 衬线字体
    2. sans-serif 非衬线字体
    3. monospace 等宽字体
  2. font-family 可以同时指定多个字体，多个字体间用,隔开，在前面的字体优先使用
  3. font-face 可以将服务器中的字体直接提供给用户使用，存在部分问题
    1. 加载速度
    2. 版权
    3. 字体格式
1
2
3
4
5
6
7
8
9
10
11
12
/*设置字体为微软雅黑*/
body{
    font-family: "Microsoft Yahei";
}

@font-face {
    /* 自定义字体名字 */
    font-family: 'xxx';
    /* 指定路径和类型 */
    /* 如需多个使用,分开 */
    src: url('xxx') format('xxx');
}

如果用户本地电脑没有安装设置的字体，则将显示浏览器默认字体。

字体大小

1
2
3
4
/*设置字体为12px*/
body{
    font-size: 12px;
}

字体粗细

1
2
3
4
/*设置字体为粗体*/
span{
    font-weight: bold;
}

字体版型

1
2
3
4
5
6
/*设置字体版型：正常、斜体、倾斜的字体*/
p{
    font-style: normal;	/*正常*/
    font-style: italic;	/*斜体，用于字体本身就有倾斜的格式*/
    font-style: oblique;	/*倾斜的字体，强制字体倾斜*/
}

字体颜色

  1. 英文命令

    1
    2
    3
    4
    5
    6
    7
    8
    p{
        color: red;
    }

    div{
        border: 2px solid transparent;
        /*透明颜色*/
    }

  2. RGB颜色

    1
    2
    3
    4
    5
    6
    p{
        /*整数形式*/
        color: rgb(133, 45, 200);
        /*分数形式*/
        color: rgb(20%, 33%, 25%);
    }

  3. RGBA：

    1. 就是在RGB的基础上增加了一个A值，表示不透明度
    2. 需要四个值，前三个和RGB一样，第四个表示不透明度，1表示完全不透明，0表示完全透明，0.5半透明

  4. 十六进制颜色（普遍使用）

    1. 语法：#红色绿色蓝色
    2. 颜色浓度：00-ff
    3. 如果颜色两两重复，可以使用缩写
      1. #aabbcc –> #abc
      2. #aabbca 不能够缩写

  5. HSL值、HSLA值

    1. H：色相（0-360）
    2. S：饱和度，颜色的浓度（0%-100%）
    3. L：亮度，颜色的亮度（0%-100%）
    4. A：不透明度，（0-1）

font样式缩写

1
2
3
4
5
6
7
8
9
10
11
12
13
/*原版*/
body{
    font-style:italic;
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋体",sans-serif;
}

/*缩写版*/
body{
    font:italic  bold  12px/1.5em  "宋体",sans-serif;
}

  1. 缩写版至少指定font-size和font-family；

  2. 缩写在font-size和line-height之间需要加/；

  3. 中文网站常用缩写格式

    1
    2
    3
    body{
        font: 12px/1.5em "宋体", sans-serif;
    }

图标字体

  1. 通过字体来使用图标
  2. fontawesome 使用步骤
    1. 下载 https://fontawesome.com/
    2. 解压
    3. 将css和webfonts移动到项目中，并且要位于同一级
    4. 将all.css引入网页中
  3. 使用方式
    1. 使用类名来指定使用图标字体，class=”fas fa-xxx”或class=”fab fa-xxx”
      1
      2
      <i class="fab fa-qq"></i>
      <i class="fas fa-bell"></i>
    2. 使用伪元素来设置图标字体
      1. 找到要设置图标的元素，通过before或after选中
      2. 在content中设置字体编码
      3. 设置字体格式
        1. fab:
          font-family: ‘Font Awesome 5 Brands’;
        2. fas:
          font-family: ‘Font Awesome 5 Free’;
          font-weight: 900; 
          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          li::before {
              content: '\f42b';
              font-family: 'Font Awesome 5 Brands';
              /* font-weight: 400; */
              /* 默认font-weight是400，所以可以忽略 */
          }

          li::after {
              content: '\f44b';
              font-family: 'Font Awesome 5 Free';
              font-weight: 900;
          }
    3. 通过实体来使用图标字体:&#x图标编码，同时也需要引入class=”fas”或class=”fab”;
      1
      2
      <li class="fab">&#xf42b;</li>
      <li class="fas">&#xf44b;</li>

CSS3文本样式

文本修饰

1
2
3
4
5
6
span{
    text-decoration: none;	/*默认标准文本*/
    text-decoration: underline;	/*文本下划线*/
    text-decoration: overline;	/*文本上一条线*/
    text-decoration: line-through;	/*穿过文本的一条线*/
}

首行缩进

1
2
3
p{
    text-indent: 2pm;
}

2em的意思就是文字的2倍大小。

行高

  1. 行高指的是文字占有的实际高度
  2. 可以通过line-height来设置行高
    1. 可以直接指定一个大小（px，em）
    2. 也可以设置一个整数，这个整数就是字体大小的倍数
  3. 行高经常用来设置文字的行间距，行间距 = 行高 - 字体大小
  4. 字体框，字体框就是字体存在的格子，设置font-size实际上就是设置字体框的高度
  5. 行高会在字体框的上下平均分配
  6. 可以将行高设置为高度一样的值，可以使得单行文字在一个元素中垂直居中
1
2
3
p{
    line-height: 1.5em;
}

字符间距

  1. 中文字、字母间距

    1
    2
    3
    p{
        letter-spacing: 20px;
    }

  2. 单词间距

    1
    2
    3
    p{
        word-spacing: 20px;
    }

水平对齐

1
2
3
4
5
p{
    text-align: center;	/*居中*/
    text-align: left;	/*居左*/
    text-align: right;	/*居右*/
}

元素垂直对齐

  1. 使用vertical-align 设置元素垂直对齐的方式
  2. baseline 默认值，基线对齐
  3. top 顶部对齐
  4. bottom 底部对齐
  5. middle 居中对齐
  6. 直接指定长度值，如verticla-align: 10px;

设置文本省略号表示多余

  1. white-space 设置网页如何处理空白
    1. normal 正常
    2. nowrap 不换行
    3. pre 保留空白
  2. 需要满足四个条件（缺一不可）
    1. 设置一个宽度 width
    2. 设置white-space: nowrap，使得文本在一行上
    3. 设置超过宽度的部分隐藏 overflow: hidden
    4. 设置文本超出的部分显示省略号 text-overflow: ellipsis

长度值

  1. 像素

    1. 指的是显示器上的小点；
    2. 同样的像素大小可能在不同的设备下显示效果不同；

  2. 百分比

    1. 将属性值设置为相对于父元素属性的百分比
    2. 可以使得子元素随着父元素的改变而改变
    1
    p{font-size:12px;line-height:130%}

    设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。

  3. em

    1. 相对于本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。
    2. 但当给 font-size 设置单位为 em 时，此时计算的标准以父元素的 font-size 为基础；

  4. rem

    1. rem是相对于根元素（HTML元素）字体的font-size值

CSS3盒模型

盒模型、盒子模型、框模型（box model）

  1. CSS将页面中的所有元素都设置成了一个矩形的盒子
  2. 将元素设置为矩形的盒子后，对页面的布局就变成了将不同的盒子摆放到不同位置
  3. 每一个盒子都由以下几个部分组成
    1. 内容区（content）
      1. 元素中的所有的子元素和文本内容都在内容区中排列
      2. 内容区的大小由width和height两个属性来设置
      3. width设置内容区的宽度
      4. height设置内容区的高度
    2. 内边距（padding）
    3. 边框（border）
      1. 边框属于合盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部，边框的大小会影响到整个盒子的大小
      2. 要设置边框，需要至少设置三个样式
        1. 边框的宽度（border-width）
        2. 边框的颜色（border-color）
        3. 边框的样式（border-style）
    4. 外边距（margin）

文档流

  1. 网页是一个多层的结构，一层摞着一层
  2. 通过CSS可以分别为每一层设置样式
  3. 作为用户来讲只能看到最顶层
  4. 在这些曾中，最底下的一层称为文档流，文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排列
  5. 对我们来说元素主要有两个状态
    1. 在文档流中
    2. 不在文档流中（脱离文档）

元素分类

  1. 块状元素
    <div>、<p>、<h1>…<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
  2. 内联元素（行内元素）
    <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
  3. 内联块状元素
    <img>、<input>

块状元素

设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。

1
a{display:block;}

块级元素特点：

  1. 每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

  2. 元素的高度、宽度、行高以及顶和底边距都可设置。

  3. 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

  4. 元素高度在不设置的情况下，是内容的高度。

内联元素

设置display:inline就是将元素显示为块级元素。如下代码就是将块状元素div转换为内联元素，从而使div元素具有内联元素特点。

1
2
3
div{
    display: inline;
}

内联元素特点：

  1. 和其他元素都在一行上；

  2. 元素的高度、宽度及顶部和底部边距不可设置；

  3. 元素的宽度就是它包含的文字或图片的宽度，不可改变。

内联块状元素

设置 display: inline-block就是将元素显示为内联块状元素。

内联块状元素特点：

  1. 和其他元素都在一行上；

  2. 元素的高度、宽度、行高以及顶和底边距都可设置。

none

none设置此元素不会被显示，当想要元素隐藏的时候可以使用此值。

1
2
3
span{
    display: none;
}

宽度和高度

一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

539fbb3a0001304305570259

1
2
3
4
5
6
div{
    width: 200px;
    padding: 20px;
    border: 1px solid red;
    margin: 10px;
}

元素的实际长度为：10px+1px+20px+200px+20px+1px+10px=262px。在chrome浏览器下可查看元素盒模型，如下图：

img

背景色

1
2
3
div{
    background-color: red;	/*背景色为红色*/
}

边框

  1. 四个值：上 右 下 左
  2. 三个值：上 左右 下
  3. 两个值：上下 左右
  4. 一个值：上下左右
1
2
3
4
5
6
7
8
9
div{
    /*缩写版*/
    border: 2px solid red;
    
    /*完整版*/
    border-width: 2px;
    border-style: solid;
    border-color: red;
}
  1. border-width（边框宽度）：
    thin| medium| thick（不常用）
    像素（常用）
  2. border-style（边框样式）：
    dashed（虚线）、dotted（点线）、solid（实线）、double（双线）
  3. border-color（边框颜色）：
    十六进制色、英文色

单边框

1
2
3
4
5
6
div{
    border-top: 2px solid red;	/*上边框*/
    border-right: 2px solid red;	/*右边框*/
    border-bottom: 2px solid red;	/*下边框*/
    border-left: 2px solid red;	/*左边框*/
}

阴影

  1. box-shadow 用来设置元素的阴影效果，阴影不会影响页面布局 
    1
    box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.3);
  2. 第一个值 水平偏移量，设置阴影的水平位置，正值向右移动，负值向左移动。
  3. 第二个值 垂直偏移量，设置阴影的垂直位置，正值向下移动，负值向上移动。
  4. 第三个值 阴影的模糊半径，半径越大，效果越模糊
  5. 第四个值 阴影的颜色

轮廓线

  1. outline用来设置元素的轮廓线，用法与border一模一样
  2. 与border的不同点：轮廓线不会影响到可见框的大小，不会影响页面布局
  3. 主要用在鼠标移动上，添加轮廓的效果

圆角

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
div{
    /*左上 右上 右下 左下*/
    /*顺时针方向*/
    /*缩写版*/
    border-radius: 20px 10px 15px 30px;
    
    /*完整版*/
    border-top-left-radius: 20px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 30px;
    
    /*如果四个圆角都相等*/
    border-radius: 10px;
    
    /*如果左上右下为10px 右上左下为20px*/
    border-radius: 10px 20px;
}

显示圆形

1
2
3
4
5
6
7
div{
    width: 200px;
    height: 200px;
    border: 5px solid red;
    border-radius: 100px;	/*像素值为宽度和长度的一半*/
    border-radius: 50%;	/*百分比显示*/
}

内边距

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
div{
    /*上右下左*/
    /*顺时针*/
    /*缩写版*/
    padding: 20px 10px 15px 30px;
    
    /*完整版*/
    padding-top: 20px;
    padding-right: 10px;
    padding-bottom: 15px;
    padding-left: 30px;
    
    /*如果上下左右都相等*/
    padding: 10px;
    
    /*上下为10px，左右为20px*/
    padding: 10px 20px;
}

可见框

  1. 默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定。
  2. box-sizing: 可以用来设置盒子尺寸的计算方式（设置width和height的作用）
    1. content-box 默认值，宽度和高度用来设置内容区的大小
    2. border-box 宽度和高度用来设置整个盒子可见框的大小，也就是直到边框

外边距

  1. 外边距不会影响盒子可见框的大小，但是会影响盒子的位置
  2. 一共有四个方向的外边距
    1. margin-top：上外边距，设置一个正值，元素向下移动
    2. margin-right：右外边距，默认情况下不会产生任何效果
    3. margin-bottom：下外边距，设置一个正值，其下边的元素会向下移动
    4. margin-left：左外边距，设置一个正值，元素会向右移动
  3. 默认情况下，如果我们设置的左和上外边距则会移动元素自身，而设置下和右外边距则会移动其他元素
  4. margin会影响到盒子实际占用空间
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
div{
    /*上右下左*/
    /*顺时针*/
    /*缩写版*/
    margin: 20px 10px 15px 30px;
    
    /*完整版*/
    margin-top: 20px;
    margin-right: 10px;
    margin-bottom: 15px;
    margin-left: 30px;
    
    /*如果上下左右都相等*/
    margin: 10px;
    
    /*上下为10px，左右为20px*/
    margin: 10px 20px;
}

CSS3布局模型

水平布局

  1. 元素在其父元素中水平方向的位置由以下几个属性共同决定
    1. margin-left
    2. border-left
    3. padding-left
    4. width
    5. padding-right
    6. border-right
    7. margin-right
  2. 水平布局必须满足以上七个元素依次相加等于父元素内容区的宽度
  3. 如果不满足，则称为过度约束，等式自动调整
    1. 都没有设置auto，则会调整margin-right
    2. 如果width和margin同时设置auto，则会将margin设置为0，直接调整width
    3. 如果只有margin-left和margin-right设置为auto，且为正值，则会平均分配，如果为负值，则只会调整margin-right
    4. auto等级：width>margin

垂直布局

  1. 子元素是在父元素的内容区排列的
  2. 如果子元素的大小超过了父元素，则子元素会从父元素溢出
  3. 使用overflow、overflow-x、overflow-y属性来设置父元素如何处理溢出
    1. visible：默认值，子元素会从父元素中溢出，在父元素外部显示
    2. hidden：溢出的内容被裁剪
    3. scroll：生成两个滚动条
    4. auto：根据需要生成滚动条

垂直外边距的折叠

  1. 相邻的垂直方向外边距会发生重叠现象
  2. 兄弟元素
    1. 当之间的相邻垂直外边距同号
      1. 之间的相邻垂直外边距会取两者之间的绝对值的较大值
    2. 当之间的相邻垂直外边距异号
      1. 之间的相邻垂直外边距会去两者之间的和
  3. 父子元素
    1. 父子元素之间相邻垂直外边距，子元素会传递给父元素
    2. 父子外边距的折叠会影响页面的布局，必须进行处理

行内元素的盒模型

  1. 行内元素不支持设置宽度和高度
  2. 行内元素设置的padding、border、margin都不会影响垂直方向的布局
  3. display用来设置元素显示的类型
    1. inline 将元素设置为行内元素
    2. block 将元素设置为块元素
    3. inline-block 将元素设置为行内块元素，既可以设置宽度和高度，又可以不独占一行
    4. table 将元素设置成一个表格
    5. none 元素不在页面中显示
  4. visibility 用来设置元素的显示状态
    1. visible 默认值，元素在页面中正常显示
    2. hidden 元素在页面中隐藏，但是依然占据页面位置

css布局模型

  1. 流动模型（Flow）
  2. 浮动模型（Float）
  3. 层模型（Layer）

流动模型

默认的网页布局模式。

特征：

  1. 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，在默认状态下，块状元素的宽度都为100%；
  2. 在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。

浮动模型

  1. 通过浮动可以使一个元素向其父元素的左侧或右侧移动
  2. 使用float属性来设置元素的浮动
    1. none 默认值，元素不浮动
    2. left 元素向左浮动
    3. right 元素向右浮动
  3. 元素设置浮动以后，水平布局的等式便不需要强制成立
  4. 元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素可以向上移动
  5. 浮动的特点
    1. 浮动元素会完全脱离文档流，不再占据文档流中的位置
    2. 设置浮动以后元素会向父元素的左侧或右侧移动
    3. 浮动元素默认不会从父元素中移出
    4. 浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
    5. 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
    6. 浮动元素不会超过它上边的浮动的兄弟元素，最多和它在同一行
  6. 浮动元素的特点
    1. 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕图片的效果
    2. 脱离文档流后，宽度和高度都默认被内容撑开，并且不会独占一行
1
2
3
4
div{
    float: left;
    float: right;
}

高度塌陷问题和BFC

  1. 高度塌陷问题：在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动以后，其会完全脱离文档流，子元素从文档流中脱离，将会无法撑起父元素的高度，导致父元素的高度丢失。父元素高度丢失以后，其下的元素会自动上移，导致页面混乱。
  2. BFC（Block Formatting Context）：块级格式化环境
    1. BFC是一个CSS中一个隐含的属性，一个元素开启BFC就会变成一个独立的布局区域。
    2. 开启BFC后的特点
      1. 开启BFC的元素不会被浮动元素所覆盖。
      2. 开启BFC的元素子元素和父元素外边距不会重叠。
      3. 开启BFC的元素可以包含浮动的子元素。
    3. 可以通过一些特殊的方式来开启元素的BFC
      1. 设置元素的浮动（不推荐）
      2. 将元素设置为行内块元素（不推荐）
      3. 将元素的overflow设置一个非visible的值，常用的方式是为元素设置overflow: hidden，开启其BFC。

clear

  1. 清除浮动元素对当前元素所产生的影响
  2. left 清除左侧浮动元素对当前元素的影响
  3. right 清除右侧浮动元素对当前元素的影响
  4. both 清除两侧浮动元素对当前元素的影响（取两侧影响最大的那侧清除）
  5. 原理 设置清除浮动之后，浏览器会自动为元素添加一个上外边距以使得其位置不受到其他浮动元素的影响

使用::after和clear解决高度塌陷问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
div.outer {
    border: 10px red solid;
}

div.outer>div.inner {
    width: 200px;
    height: 200px;
    background-color: #bfa;
    float: left;
    /* 子元素设置浮动，而父元素并未开启BFC，则会产生高度塌陷问题 */
}

div.outer::after {
    content: "";
    display: block;
    clear: both;
    /* 在父元素中，通过::after伪元素添加一个空文本
    而由于::after默认是行内元素，就算清除了前面浮动元素对页面布局的影响，不会出现在div.inner的下面，也只会出现在旁边，所以给其设置为block
    然后再清除它前面浮动元素对页面布局的影响，则浏览器会给它设置一个与div.inner高度相同的上外边距，这样就可以将父元素的高度撑开了，并且高度和子元素所需要的高度相同 */
}

使用::before解决父子元素垂直外边距重叠问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
div.outer {
    width: 200px;
    height: 200px;
    background-color: #bfa;
}

div.outer>div.inner{
    width: 100px;
    height: 100px;
    background-color: orange;
    margin-top: 100px;
    /* 因为子元素的上外边距和父元素重叠，则设置子元素的上外边距会传递给父元素，这时候会整体移动，出现布局问题 */
}

div.outer::before{
    content: "";
    display: table;
    /* 在父子元素之间使用::before伪元素，将其隔开，则能够有效解决外边距重叠问题 */
}

使用.clearfix同时解决高度塌陷和父子元素垂直外边距重叠问题

1
2
3
4
5
6
.clearfix::before,
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

定位

  1. 定位是一种更加高级的布局手段
  2. 通过定位可以将元素摆放到页面的任意位置
  3. 通过position属性来设置定位
    1. static 默认值，元素是静止的没有开启定位
    2. relative 开启元素的相对定位
    3. absolute 开启元素的绝对定位
    4. fixed 开启元素的固定定位
    5. sticky 开启元素的粘滞定位

相对定位

  1. 当元素的position属性值设置为relative时，则开启了元素的相对定位
  2. 相对定位的特点
    1. 元素开启相对定位以后，如果不设置偏移量，元素不会发生任何变化
    2. 相对定位是参照元素在文档流中的位置进行定位的
    3. 相对定位会提升元素的层级
    4. 相对定位不会使元素脱离文档流
    5. 相对定位不会改变元素的性质
  3. 偏移量（offset）
    1. 当元素开启了定位以后，可以通过偏移量来设置元素的位置
    2. top 定位元素和定位位置上边的距离
    3. bottom 定位元素和定位位置下边的距离
    4. left 定位元素和定位位置左边的距离
    5. right 定位元素和定位位置的右侧距离
    6. 通常情况下，top和bottom只会使用一个来控制垂直位置，left和right只会使用一个来控制水平位置。

如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

1
2
3
4
5
div{
    position: relative;	/*相对定位*/
    left: 100px;	/*距离以前位置左侧100px*/
    top: 50px;	/*距离以前位置顶部50px*/
}

绝对定位

  1. 当元素的position属性值设置为absolute时，则开启了元素的绝对定位
  2. 绝对定位的特点
    1. 开启绝对定位后，如果不设置偏移量元素的位置不会发生变化
    2. 开启绝对定位后，元素会从文档流中脱离
    3. 绝对定位会改变元素的性质，行内元素变成块元素，块元素的宽高被内容撑开
    4. 绝对定位会使元素提升一个层级
    5. 绝对定位元素是相对于其包含块进行定位的
  3. 包含块（containing block）
    1. 正常情况下，包含块就是离当前元素最近的祖先块元素
    2. 绝对定位下，包含块就是离当前元素最近的开启了定位的祖先块元素，如果所有祖先块元素都没有开启定位，则根元素就是它的包含块
  4. html元素叫做根元素或者是初始包含块

如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

1
2
3
4
5
div{
    position: absolute;	/*绝对定位*/
    left: 100px;	/*距离左侧100px*/
    top: 50px;	/*距离顶部50px*/
}

固定定位

  1. 当元素的position属性值设置为fixed时，则开启了元素的固定定位
  2. 大部分特点和绝对定位是一样的，只是固定定位永远参考于浏览器的视口进行定位

fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。

1
2
3
4
5
div{
    position: fixed;	/*固定定位*/
    right: 0px;	/*距离网页窗口右侧0px*/
    bottom: 0px;	/*距离网页窗口底部0px*/
}

粘滞定位

  1. 当元素的position属性设置为sticky时则开启了元素的粘滞定位
  2. 粘滞定位的特点和相对定位基本一样，不同的是粘滞定位可以在元素到达某个位置时将其固定

绝对定位与相对定位结合使用

  1. 参照定位的元素必须是相对定位元素的前辈元素：

    1
    2
    3
    4
    5
    <div id="box1">
    /*参照定位的元素*/
        <div id="box2">相对参照元素进行定位</div>
        /*相对定位元素*/
    </div>

    从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。

  2. 参照定位的元素必须加入position:relative;

    1
    2
    3
    4
    5
    #box1{
        width:200px;
        height:200px;
        position:relative;        
    }

  3. 定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

    1
    2
    3
    4
    5
    #box2{
        position:absolute;
        top:20px;
        left:30px;         
    }

    这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。

绝对定位元素的布局

  1. 当开启绝对定位后，水平方向的布局等式就需要添加left和right两个值，垂直方向就需要添加top和bottom
  2. left、right、top和bottom的默认值都是auto
  3. 如果发生过度约束
    1. auto等级：width>right>left>margin或height>bottom>top>margin
    2. 检查有无auto
      1. 如果有，就按照auto等级调整
      2. 否则就调整right或bottom

元素的层级

  1. 对于开启了定位的元素，可以通过z-index属性来指定元素的层级
  2. z-index需要一个整数作为参数，值越大元素层级越高，层级高的优先显示
  3. 如果元素层级一样，则优先显示靠下的元素
  4. 祖先元素的层级再高也不会盖住后代元素

背景

  1. background-color: 设置背景颜色
  2. background-image: 设置背景图片
    1. 通过设置url(“xxx”)，来选择背景图片
    2. 如果同时设定background-color和background-image，背景颜色会成为背景图片的背景色
    3. 如果背景图片尺寸小于元素，背景图片会将元素铺满
    4. 如果背景图片尺寸大于元素，背景图片多余部分会被裁剪
    5. 如果背景图片尺寸等于元素，背景图片正常显示
  3. background-repeat: 设置背景图片重复方式
    1. repeat 默认值，背景沿着x轴、y轴双方向重复
    2. repeat-x 沿着x轴方向重复
    3. repeat-y 沿着y轴方向重复
    4. no-repeat 背景图片不重复
  4. background-position: 设置背景图片位置
    1. top、left、right、bottom、center：必须设置两个值，否则第二个值默认为center
    2. 偏移量（水平方向偏移量 垂直方向偏移量）
  5. background-size: 设置背景图片大小
    1. 两个值：宽度、高度，只写一个值的话，第二个值默认auto
    2. cover 图片比例不变，将元素铺满
    3. contain 图片比例不变，将背景图片完整显示
  6. background-origin: 设置背景图片的原点
    1. padding-box 默认值，background-position从内边距处开始计算
    2. content-box background-position从内容区开始计算
    3. border-box background-position从边框区开始计算
  7. background-clip: 设置背景范围
    1. border-box 默认值，背景会出现在边框下
    2. padding-box 背景出现在内边距和内容区下
    3. content-box 背景出现在内容区
  8. background-attachment: 背景图片是否跟着元素移动
    1. scroll 默认值，背景图片会随着元素移动
    2. fixed 背景固定在页面中，不会随元素移动
  9. 简写属性：background
    1. background-position/background-size: background-position必须写在background-size前面，并且用/隔开
    2. background-origin background-clip: background-origin必须在background-clip前面

      flex弹性盒模型

flex属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.box {
    background: blue;
    display: flex;
}

.box div {
    width: 200px;
    height: 200px;
}

.box1 {
    background: red;
}

.box2 {
    background: orange;
}

.box3 {
    background: green;
}

<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

三个块元素设置大小以及背景色，在父容器中添加flex。

技术点的解释：

  1. 设置display: flex属性可以把块级元素在一排显示。
  2. flex需要添加在父元素上，改变子元素的排列顺序。
  3. 默认为从左往右依次排列,且和父元素左边没有间隙。

横轴排列方式

1
justify-content: flex-start| flex-end| center| space-between| space-around;
  1. flex-start：交叉轴的起点对齐；
  2. flex-end：右对齐；
  3. center： 居中；
  4. space-between：两端对齐，项目之间的间隔都相等；
  5. space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

纵轴排列方式

1
align-items: flex-start| flex-end| center| baseline| stretch;
  1. flex-start：默认值，左对齐；
  2. flex-end：交叉轴的终点对齐；
  3. center： 交叉轴的中点对齐；
  4. baseline：项目的第一行文字的基线对齐；
  5. stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

flex占比

  1. 给子元素设置flex属性,可以设置子元素相对于父元素的占比。

  2. flex属性的值只能是正整数,表示占比多少。

  3. 给子元素设置了flex之后,其宽度属性会失效。

水平居中显示

行内元素

1
2
3
.center{
    text-align: center;
}

块状元素——定宽块状元素

1
2
3
4
div{
    width: 200px;	/*定宽，不可缺*/
    margin: 20px auto;	/*上下为20px，左右auto*/
}

已知宽高实现盒子水平垂直居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.box {
    border: 1px solid #00ee00;
    height: 300px;
    position: relative;
}

.box1 {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    position: absolute;
    top: 50%;
    left: 50%;
    margin:-100px 0 0 -100px;
}
  1. 利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。
  2. 子元素设置上和左偏移的值都为50%，是元素的左上角在父元素中心点的位置。效果：
    img
  3. 然后再用margin给上和左都给负的自身宽高的一半,就能达到垂直水平居中的效果。

不知宽高实现盒子水平垂直居中

1
2
3
4
5
6
7
8
9
10
11
12
13
.box {
    border: 1px solid #00ee00;
    height: 300px;
    position: relative;
}

.box1 {
    border: 1px solid red;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
  1. 利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。
  2. 子元素设置上和左偏移的值都为50%。
  3. 然后再用css3属性translate位移,给上和左都位移-50%距离，就能达到垂直水平居中的效果。
#

喜欢这篇文章？打赏一下作者吧

评论

关注我

链接

分类

最新文章

归档

标签

CSS3
Flask1
HTML3
Java1
Javascript1
MVC1
Python1
前端1
基础1

目录

×