CSS 系统性总结(全)

基础知识

因为CSS主要是对页面元素的美化,所以需要先学习 HTML相关课程。

大部分HTML元素都有系统提供的样式,但有以下问题

  • 不同浏览器显示样式不一致
  • 样式过于简单,显示效果不美观
  • 很难按照设计稿完全呈现显示效果

样式声明

可以通过多种方式定义样式表。

外部样式

使用 link 标签引入外部样式文件,需要注意以下几点。

  • link 标签放在 head 标签内部
  • 样式文件要以 .css 为扩展名
  • 一个页面往往需要引入多个样式文件
1
2
3
4
5
属性    说明

rel 定义当前文档与被链接文档之间的关系
href 外部样式文件
type 文档类型

》》》 link 还有其他属性会在其他章节单独讲解

1
<link rel="stylesheet" href="houdunren.css" type="text/css">

嵌入样式

使用 style 标签可以在文档内部定义样式规则。

1
2
3
4
5
<style>
body {
background: red;
}
</style>

内联样式

可以为某个标签单独设置样式。

1
<h1 style="color:green;">houdunren.com</h1>

导入样式

使用 @import 可以在原样式规则中导入其他样式表,可以在外部样式、style 标签中使用。

可以使用以下两种方式导入

1
2
@import "hd.css"
@import url("hd.css")

导入样式要放在样式规则前面定义。

1
2
3
4
5
6
<style>
@import url("hdcms.css");
body {
background: red;
}
</style>

其他细节

空白

在样式规则中可以随意使用空白,空白只是看不见但同样占用空间,所以可以结合其他工具如 webpack 等将 css压缩为一行。

注释

注释是对定义样式规则的说明,便于后期维护理解。

1
2
3
4
5
6
...
body {
/* 这是注释的使用 */
background: red;
}
...

错误

样式规则如果存在错误,解析器会选择忽略,并不会影响其他样式规则。

以下代码的 houdunren:red 是无效样式但不影响后面的 font-size:100px; 规则使用。

1
2
3
4
h1 {
houdunren: red;
font-size: 100px;
}

初始样式

有些标签默认含有内外边距,且不同浏览器大小也不一样。为了统一我们可以重置标签的CSS默认样式。

最简单的方式就是使用插件css-reset (opens new window)完成,你也可以在vscode等编辑器中定义代码片段。

1
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" />

选择器

2021-02-04 18:00:54

样式是做用在元素标签上的,通过本章将可以随意查找元素来应用样式。

基本选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
选择器              示例        描述

.class .intro 选择 class="intro" 的所有元素

#id #firstname 选择 id="firstname" 的所有元素

* * 选择所有元素

element p 选择所有元素

element,element div,p 选择所有元素和所有元素

element element div p 选择元素内部的所有元素

element>element div>p 选择父元素为元素的所有元素

element+element div+p 选择紧接在元素之后的所有元素

标签选择

使用 * 可为所有元素设置样式。

1
2
3
4
* {
text-decoration: none;
color: #6c757d;
}

根据标签为元素设置样式

1
2
3
h1 {
color: red;
}

同时设置多个元素组合

1
2
3
h1,h2 {
color: red;
}

元素在多个组件中存在

1
2
3
4
5
6
h1,h2 {
color: red;
}
h1,h3{
background: #dcdcdc;
}

类选择器

类选择器是为一类状态声明样式规则,下面是把文本居中定义为类样式。

1
2
3
4
5
6
7
8
<style>
.text-center {
text-align: center;
}
</style>

<h1 class="text-center">houdunren.com</h1>
<h2 class="text-center">hdcms.com</h2>

将类选择器指定为具体标签

1
2
3
4
5
6
7
8
9
10
11
12
.help-block {
background: red;
}

span.help-block {
font-size: 12px;
color: #aaa;
background: none;
}
...

<span class="help-block">感谢访问后盾人</span>

ID选择器

为有 id 属性的元素设置样式

1
2
3
4
5
6
#container {
background: red;
}

...
<h1 id="container">houdunren.com</h1>

文档中ID应该是唯一的,虽然为多个元素设置同一个ID也可以产生样式效果,但这是不符合规范的。
建议优先使用类选择器

结构选择器

1
2
3
4
5
6
7
8
选择器             示例  描述
element element div p 选择元素内部的所有元素

element>element div>p 选择父元素为元素的所有元素

element+element div+p 选择紧接在元素之后的元素

element~element2 p~ul 选择元素同级并在元素后面的所有元素

后代选择器

HTML中元素是以父子级、兄弟关系存在的。后代选择器指元素后的元素(不只是子元素,是后代元素)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
main article h2,main h1 {
color: green;
}
...

<main>
<article>
<h2 name="houdunren">houdunren.com</h2>
<aside>
<h2>houdunwang.com</h2>
</aside>
</article>
<h2 name="hdcms.com">hdcms.com</h2>
<h1>后盾人</h1>
</main>

子元素选择

子元素选择器中选择子元素,不包括孙级及以下元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
main article>h2 {
color: green;
}
...

<main>
<article>
<h2 name="houdunren">houdunren.com</h2>
<aside>
<h2>houdunwang.com</h2>
</aside>
</article>
<h2 name="hdcms.com">hdcms.com</h2>
<h1>后盾人</h1>
</main>

紧邻兄弟元素

用于选择紧挨着的同级兄弟元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
main article+h2 {
color: green;
}
...

<main>
<article>
<h2 name="houdunren">houdunren.com</h2>
<aside>
<h2>houdunwang.com</h2>
</aside>
</article>
<h2 name="hdcms.com">hdcms.com</h2>
<h1>后盾人</h1>
</main>

后面兄弟元素

用于选择后面的所有兄弟元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
main article~* {
color: green;
}
...

<main>
<article>
<h2 name="houdunren">houdunren.com</h2>
<aside>
<h2>houdunwang.com</h2>
</aside>
</article>
<h2 name="hdcms.com">hdcms.com</h2>
<h1>后盾人</h1>
</main>

属性选择器

根据属性来为元素设置样式也是常用的场景。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
选择器                 示例                描述

[attribute] [target] 带有 target 属性所有元素

[attribute=value] [target=_blank] targe 属性 等于"_blank" 的所有元素

[attribute~=value] [title~=houdunren] title 属性包含单词 "houdunren" 的所有元素

[attribute|=value] [title|=hd] title 属性值为 "hd"的单词,或hd-cms 以-连接的的独立单词

[attribute*=value] a[src*="hdcms"] src 属性中包含 "hdcms" 字符的每个 元素

[attribute^=value] a[src^="https"] src 属性值以 "https" 开头的每个 元素

[attribute$=value] a[src$=".jpeg"] src 属性以 ".jpeg" 结尾的所有 元素

为具有 class 属性的h1标签设置样式

1
2
3
4
5
6
h1[class] {
color: red;
}
...

<h1 class="container">houdunren.com</h1>

约束多个属性

1
2
3
4
5
6
h1[class][id] {
color: red;
}
...

<h1 class="container" id >houdunren.com</h1>

具体属性值设置样式

1
2
3
4
5
6
7
a[href="https://www.houdunren.com"] {
color: green;
}
...

<a href="https://www.houdunren.com">后盾人</a>
<a href="">HDCMS</a>

^ 以指定值开头的元素

1
2
3
4
5
6
7
h2[name^="hdcms"] {
color: red;
}
...

<h2 name="houdunren">houdunren.com</h2>
<h2 name="hdcms.com">hdcms.com</h2>

$ 以指定值结尾的元素

1
2
3
4
5
6
7
<h2 name="houdunren">houdunren.com</h2>
<h2 name="hdcms.com">hdcms.com</h2>
...

h2[name$="com"] {
color: red;
}

* 属性内部任何位置出现值的元素

1
2
3
4
5
6
7
h2[name*="houdunren"] {
color: red;
}
...

<h2 name="houdunren">houdunren.com</h2>
<h2 name="houdunren.com">hdcms.com</h2>

~ 属性值中包含指定词汇的元素

1
2
3
4
5
6
7
h2[name~="houdunren"] {
color: red;
}
...

<h2 name="houdunren">houdunren.com</h2>
<h2 name="houdunren web">hdcms.com</h2>

| 以指定值开头或以属性连接破折号的元素

1
2
3
4
5
6
7
h2[name|="houdunren"] {
color: red;
}
...

<h2 name="houdunren">houdunren.com</h2>
<h2 name="houdunren-web">hdcms.com</h2>

伪类选择器

为元素的不同状态或不确定存在的元素设置样式规则。

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
状态              示例          说明

:link a:link 选择所有未被访问的链接

:visited a:visited 选择所有已被访问的链接

:hover a:hover 鼠标移动到元素上时

:active a:active 点击正在发生时

:focus input::focus 选择获得焦点的 input 元素

:root :root 选择文档的根元素即html。

:empty p:empty 选择没有子元素的每个元素(包括文本节点)。

:first-child p:first-child 选择属于父元素的第一个子元素的每个元素

:last-child p:last-child 选择属于其父元素最后一个子元素每个元素。

:first-of-type p:first-of-type 选择属于其父元素的首个元素的每个元素

:last-of-type p:last-of-type 选择属于其父元素的最后元素的每个元素。

:only-of-type p:only-of-type 选择属于其父元素唯一的元素的每个元素。

:only-child p:only-child 选择属于其父元素的唯一子元素的每个元素。

:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。

:nth-child(odd) p:nth-child(odd) 选择属于其父元素的奇数元素。

:nth-child(even) p:nth-child(even) 选择属于其父元素的偶数元素。

:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个元素的每个元素。

:nth-last-child(n) p:nth-last-child(2) 同上,从最后一个子元素开始计数。

:nth-last-of-type(n) p:nth-last-of-type(2) 同上,但是从最后一个子元素开始计数。

:not(selector) :not(p) 选择非元素的每个元素

:超链接伪类

定义链接的不同状态

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
a:link {
color: red
}

a:visited {
color: green
}

a:hover {
color: blue
}

a:active {
color: yellow
}
...

<a href="https://www.houdunren.com">后盾人</a>

不只是链接可以使用伪类,其他元素也可以使用。下面是对表单的点击与获取焦点状态的样式设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
input:focus {
background: green;
}

input:hover {
background: blue;
}

input:active {
background: yellow;
}
...

<input type="text">

:target

用于控制具有锚点目标元素的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
div {
height: 900px;
}

div:target {
color: red;
}
...

<a href="#hdcms">hdcms</a>
<div></div>
<div id="hdcms">
hdcms内容管理系统
</div>

:root

根元素选择伪类即选择html

1
2
3
:root {
font-size: 100px;
}

:empty

没有内容和空白的元素。下面第一个p标签会产生样式,第二个不会因为有空白内容

1
2
3
4
5
6
7
:empty {
border: solid 2px red;
}
...

<p></p>
<p> </p>

结构伪类

下面来通过结构伪类选择器选择树状结构中的标签元素。

:first-child

选择元素中 span 标签并且是第一个。

1
2
3
4
5
6
7
8
9
10
11
12
article span:first-child {
color: red;
}
...

<article>
<span>houdunren.com</span>
<aside>
<span>houdunwang.com</span>
<span>hdcms.com</span>
</aside>
</article>

:first-of-type

选择类型是 span 的第一个元素

1
2
3
4
5
6
7
8
9
10
11
12
article span:first-of-type {
color: red;
}
...

<article>
<span>houdunren.com</span>
<aside>
<strong>hdcms.com</strong>
<span>houdunwang.com</span>
</aside>
</article>

:last-child

选择元素中 span 标签并且是最后一个。

1
2
3
4
5
6
7
8
9
10
11
12
13
article span:last-child {
color: red;
}
...

<article>
<span>houdunren.com</span>
<aside>
<strong>hdcms.com</strong>
<span>houdunwang.com</span>
</aside>
<span>hdphp.com</span>
</article>

:last-of-type

选择类型为 span 的最后一个元素

1
2
3
4
5
6
7
8
9
10
11
12
13
article span:last-of-type {
color: red;
}
...

<article>
<span>houdunren.com</span>
<aside>
<span>houdunwang.com</span>
<strong>hdcms.com</strong>
</aside>
<span>hdphp.com</span>
</article>

:only-child

选择是唯一子元素的 span 标签

1
2
3
4
5
6
7
8
9
10
11
article span:only-child {
color: red;
}
...

<article>
<span>houdunren.com</span>
<aside>
<span>houdunwang.com</span>
</aside>
</article>

:only-of-type

选择同级中类型是 span 的唯一子元素

1
2
3
4
5
6
7
8
9
10
11
12
article span:only-of-type {
color: red;
}
...

<article>
<span>houdunren.com</span>
<aside>
<span>houdunwang.com</span>
<span>hdcms.com</span>
</aside>
</article>

:nth-child(n)

选择第二个元素并且是span标签的

1
2
3
4
5
6
7
8
9
10
11
12
13
article span:nth-child(2) {
color: red;
}
...

<article>
<span>houdunren.com</span>
<aside>
<span>houdunwang.com</span>
<span>hdcms.com</span>
</aside>
<span>hdphp.com</span>
</article>

:nth-of-type(n)

选择第二个 span 元素,不管中间的其他元素

1
2
3
4
5
6
7
8
9
10
11
12
13
article span:nth-of-child(2) {
color: red;
}
...

<article>
<span>houdunren.com</span>
<aside>
<span>houdunwang.com</span>
<span>hdcms.com</span>
</aside>
<span>hdphp.com</span>
</article>

计算数量

n为0/1/2/3… ,下面是隔列变色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
table tr>td:nth-child(2n+1) {
background: green;
color: white;
}
...

<table border="1">
<tr>
<td>houdunren.com</td>
<td>hdcms.com</td>
<td>后盾人</td>
<td>houdunwang.com</td>
<td>hdcms</td>
</tr>
</table>

从第三个开始设置样式

1
2
3
4
table tr>td:nth-child(n+3) {
background: rgb(128, 35, 2);
color: white;
}

设置前三个元素

1
2
3
4
table tr>td:nth-child(-n+3) {
background: rgb(128, 35, 2);
color: white;
}

奇数元素

选择奇数单元格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
table tr>td:nth-child(odd) {
background: green;
color: white;
}
...

<table border="1">
<tr>
<td>houdunren.com</td>
<td>hdcms.com</td>
<td>后盾人</td>
<td>houdunwang.com</td>
<td>hdcms</td>
</tr>
</table>

偶数元素

选择偶数单元格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
table tr>td:nth-child(even) {
background: green;
color: white;
}
...

<table border="1">
<tr>
<td>houdunren.com</td>
<td>hdcms.com</td>
<td>后盾人</td>
<td>houdunwang.com</td>
<td>hdcms</td>
</tr>
</table>

:nth-last-child(n)

从最后一个元素开始获取

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
table tr>td:nth-last-child(2n+1){
background: green;
color: white;
}
...

<table border="1">
<tr>
<td>houdunren.com</td>
<td>hdcms.com</td>
<td>后盾人</td>
<td>houdunwang.com</td>
<td>hdcms</td>
</tr>
</table>

取最后两个元素

1
2
3
main>ul li:nth-last-child(-n+2) {
color: red;
}

:nth-last-of-type(n)

从最后一个元素开始选择 span 标签 。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
article span:nth-last-of-type(1) {
background: red;
color: white;
}
...

<article>
<aside>
<span>houdunren.com</span>
<span>houdunwang.com</span>
<strong>hdcms.com</strong>
</aside>
<span>hdphp.com</span>
</article>

:not(selector)

排除第一个li元素

1
2
3
4
5
6
7
8
9
10
ul li:not(:nth-child(1)) {
background: red;
}
...

<ul>
<li>houdunren.com</li>
<li>hdcms.com</li>
<li>后盾人</li>
</ul>

表单伪类

1
2
3
4
5
6
7
8
9
选择器 示例  说明

:enabled input:enabled 选择每个启用的 input 元素
:disabled input:disabled 选择每个禁用的 input 元素
:checked input:checked 选择每个被选中的 input 元素
:required input:required 包含required属性的元素
:optional input:optional 不包含required属性的元素
:valid input:valid 验证通过的表单元素
:invalid input:invalid 验证不通过的表单

表单属性样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
input:enabled {
background: red;
}

input:disabled {
background: #dddddd;
}

input:checked+label {
color: green;
}
...

<input type="text" disabled>
<input type="text" name="info">

<input type="radio" name="sex" checked id="boy">
<label for="boy">男</label>
<input type="radio" name="sex" checked id="girl">
<label for="girl">女</label>

表单必选样式

1
2
3
4
5
6
7
8
9
10
11
12
input:required {
border: solid 2px blue;
}

input:optional {
background: #dcdcdc;
border: none;
}
...

<input type="text" name="title" required>
<input type="text" name="name">

表单验证样式

1
2
3
4
5
6
7
8
9
10
11
12
13
input:valid {
border: solid 1px green;
}

input:invalid {
border: solid 1px red;
}
...

<form>
<input type="email">
<button>保存</button>
</form>

字符伪类

1
2
3
4
5
6
7
8
9
状态          示例          说明

::first-letter p:first-letter 选择每个元素的首字母

::first-line p:first-line 选择每个元素的首行

::before p:before 在每个元素的内容之前插入内容

::after p:after 在每个元素的内容之后插入内容

首字母大写

1
2
3
4
5
6
7
8
p::first-line {
font-size: 20px;
}
...

<p>
后盾人不断更新视频教程
</p>

段落首行处理

1
2
3
4
5
6
7
8
p::first-letter {
font-size: 30px;
}
...

<p>
后盾人不断更新视频教程
</p>

在元素前添加

1
2
3
4
5
6
7
8
9
10
11
span::before {
content: '⇰';
color: red;
}
span::after {
content: '⟲';
color: green;
}
...

<span>后盾人</span>

搜索框示例

在这里插入图片描述

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

div>input[type="text"] {
border: none;
outline: none;
}

div>input[type="text"]+span:after {
content: "\21AA";
font-size: 14px;
cursor: pointer;
}
...

<div>
<input type="text"><span></span>
</div>

添加属性内容

1
2
3
4
5
6
h2::before {
content: attr(title);
}
...

<h2 title="后盾人">houdunren.com</h2>

元素权重

2021-02-04 18:30:42

元素会被多个样式一层层作用,这就是层叠样式表的来源。如果多个样式做用在元素上就会产生优先级权重问题。

使用类、ID、伪类都有不同的权重,具体应用哪条规则要看权限大小。

  • 相同权重的规则应用最后出现的
  • 可以使用 !important 强制提升某个规则的权限

权重应用

1
2
3
4
5
6
7
8
9
10
11
规则              粒度

ID 0100

class,或类属性值 0010

标签,或伪元素 0001

* 0000

行内样式 1000

下面是ID权限大于CLASS的示例

1
2
3
4
5
6
7
8
9
10
11
<style>
.color {
color: red;
}

#hot {
color: green;
}
</style>

<h2 class="color" id="hot">HDCMS</h2>

属性权重的示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
/* 权重:0021 */
h2[class="color"][id] {
color: red;
}

/* 权重:0012 */
article h2[class="color"] {
color: blue;
}
</style>

<article>
<h2 class="color" id="hot">HDCMS</h2>
</article>

行级权重优先级最高

1
2
3
4
5
6
7
8
9
10
11
12
<style>
/* 权重:0012 */
article h2[class="color"] {
color: blue;
}

#hot {
color: black;
}
</style>

<h2 class="color" id="hot" style="color:green;">HDCMS</h2>

强制优先级

有时在规则冲突时,为了让某个规则强制有效可以使用 !important

1
2
3
4
5
6
7
8
9
10
11
<style>
h2 {
color: red !important;
}

h2 {
color: green;
}
</style>

<h2>HDCMS</h2>

两条规则权限一样,默认应用第二个规则,但第一个规则使用了 !important 提升了权限,所以被应用。

LESS

为了使 CSS 更易维护和扩展,并减少在书写规则时对权重的思考,使用LESS是不错的主意。

很多软件提供了自动生成LESS的功能,下面是在VSCODE中使用的方法。

  1. 安装插件 easy-less 编译LESS(opens new window)
  2. 编辑扩展名为 .less 的文件将自动生成同名的 .css 文件。

下面是一个LESS的示例

1
2
3
4
5
6
7
main {
article {
h1 {
color: red;
}
}
}

将生成 css 文件如下

1
2
3
main article h1 {
color: red;
}

继承规则

子元素可以继承父元素设置的样式。

  • 子元素并不是全部样式。比如边框、高度等并不会继承。
  • 继承的规则没有权重
1
2
3
4
5
6
7
8
9
10
11
<style>
article {
color: red;
border: solid 1px #ddd;
}
</style>
...

<article>
<h2>hdcms <span>内容管理系统</span></h2>
</article>

上例中 h2 标签没有设置颜色样式,将继承 html 的颜色,并且边框没有产生继承。

通配符

在开发中使用 * 选择器会有一个问题。

因为通配符的权限为0,而继承的规则没有权重,看以下代码产生的问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
* {
color: red;
}

h2 {
color: blue;
}
</style>

<article>
<h2>hdcms <span>内容管理系统</span></h2>
</article>

h2 中的span并没有继承 h2 的颜色,就是因为继承没有权重。而使用了 * 权重为0的规则。

文本控制

2021-2-24

文本基础

字体设置

可以定义多个字体,系统会依次查找,比如 'Courier New' 字体不存在将使用 Courier 以此类推。

要使用通用字体,比如你电脑里有 后盾人宋体 在你电脑可以正常显示,但不保证在其他用户电脑可以正常,因为他们可能没有这个字体。

1
font-family: 'Courier New', Courier, monospace;

自定义字体
可以声明自定义字段,如果客户端不存在将下载该字体,使用方式也是通过 font-family 引入。

1
2
3
4
5
6
7
8
9
10
11
<style>
@font-face {
font-family: "houdunren";
src: url("SourceHanSansSC-Light.otf") format("opentype"),
url("SourceHanSansSC-Heavy.otf") format("opentype");
}

span {
font-family: 'houdunren';
}
</style>
1
2
3
4
5
字体  格式
.otf opentype
.woff woff
.ttf truetype
.eot Embedded-opentype

不建议使用中文字体,因为文件太大且大部分是商业字体。

字重定义

字重指字的粗细定义。取值范围 normal | bold | bolder | lighter | 100 ~900

400对应 normal,700对应 bold ,一般情况下使用 bold 或 normal 较多。

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
span {
font-weight: bold;
}

strong:last-child {
font-weight: normal;
}
</style>
...

<span>houdunren.com</span>
<strong>hdcms.com</strong>

文本字号

字号用于控制字符的显示大小,包括 xx-small | x-small | small | meidum | large | x-large | xx-large

百分数
百分数是子元素相对于父元素的大小,如父元素是20px,子元素设置为 200%即为你元素的两倍大小。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
article {
font-size: 20px;
}

span {
font-size: 500%;
}
</style>
...

<article>
<span>houdunren.com</span>
</article>

em
em单位等同于百分数单位。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
article {
font-size: 20px;
}

span {
font-size: 5em;
}
</style>
...

<article>
<span>houdunren.com</span>
</article>

文本颜色

字符串颜色
可以使用如 red | green 等字符颜色声明

1
color:red;

使用十六进制网页颜色

1
color:#ddffde

如果颜色字符相同如 #dddddd 可以简写为 #ddd

使用RGB颜色

1
color:rgb(38, 149, 162);

透明颜色
透明色从 0~1 间,表示从透明到不透明

1
color:rgba(38, 149, 162,.2);

行高定义

1
2
3
div {
line-height: 2em;
}

倾斜风格

字符的倾斜样式控制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
span {
font-style: italic;
}

em {
font-style: normal;
}
</style>
...

<span>houdunren.com</span>
<hr>
<em>hdcms.com</em>

组合定义

可以使用 font 一次将字符样式定义,但要注意必须存在以下几点:

  • 必须有字体规则
  • 必须有字符大小规则
1
2
3
4
5
6
span {
font: bold italic 20px/1.5 'Courier New', Courier, monospace;
}
...

<span>houdunren.com</span>

》》》上例中的 20px 为字体大小,1.5为1.5倍行高定义

文本样式

大小转换

小号大写字母

1
2
3
4
5
6
span {
font-variant: small-caps;
}
...

<span>houdunren.com</span>

字母大小写转换

1
2
3
4
5
6
7
8
9
10
11
12
<style>
h2 {
/* 首字母大小 */
text-transform: capitalize;

/* 全部大小 */
text-transform: uppercase;

/* 全部小写 */
text-transform: lowercase;
}
</style>

文本线条

添加隐藏删除线

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
a {
text-decoration: none;
}

span.underline {
text-decoration: underline;
}

span.through {
text-decoration: line-through;
}

span.overline {
text-decoration: overline;
}
...

<a href="">houdunren.com</a>
<hr>
<span class="underline">下划线</span>
<hr>
<span class="through">删除线</span>
<hr>
<span class="overline">上划线</span>

阴影控制

参数顺序为:颜色,水平偏移,垂直偏移,模糊度。

1
2
3
4
5
6
7
8
<style>
h2 {
text-shadow: rgba(13, 6, 89, 0.8) 3px 3px 5px;
}
</style>
...

<h2>houdunren.com</h2>

在这里插入图片描述

空白处理

使用 white-space 控制文本空白显示。

1
2
3
4
5
选项        说明
pre 保留文本中的所有空白,类似使用 pre 标签
nowrap 禁止文本换行
pre-wrap 保留空白,保留换行符
pre-line 空白合并,保留换行符
1
2
3
4
5
6
7
8
h2 {
white-space: pre;
width: 100px;
border: solid 1px #ddd;
}
...

<h2>hou dunren .com</h2>

文本溢出

下面来学习文本溢出时的控制

单行文本
溢出文本容器后换行处理

1
2
3
4
5
6
7
8
h2 {
overflow-wrap: break-word;
width: 100px;
border: solid 1px #ddd;
}
...

<h2>houdunren.com</h2>

溢出内容末尾添加 ...

1
2
3
4
5
6
7
8
9
10
11
12
<style>
div {
width: 200px;
border: solid 1px blueviolet;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<div>
后盾人自2010年创立至今,免费发布了大量高质量视频教程,视频在优酷、土豆、酷六等视频网站均有收录,很多技术爱好者受益其中。除了免费视频外,后盾人还为大家提供了面授班、远程班、公益公开课、VIP系列课程等众多形式的学习途径。后盾人有一群认真执着的老师,他们一心为同学着想,将真正的知识传授给大家是后盾人永远不变的追求。
</div>

在这里插入图片描述

多行文本
控制多行文本溢出时添加 ...

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
div{
width: 200px;
border:solid 1px blueviolet;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
</style>
<div>
后盾人自2010年创立至今,免费发布了大量高质量视频教程,视频在优酷、土豆、酷六等视频网站均有收录,很多技术爱好者受益其中。除了免费视频外,后盾人还为大家提供了面授班、远程班、公益公开课、VIP系列课程等众多形式的学习途径。后盾人有一群认真执着的老师,他们一心为同学着想,将真正的知识传授给大家是后盾人永远不变的追求。
</div>

显示结果如下
在这里插入图片描述

表格文本溢出
表格文本溢出控制需要为 table 标签定义 table-layout: fixed; css样式,表示列宽是由表格和单元格宽度定义。

1
2
3
4
5
6
7
8
9
10
11
<style>
table {
table-layout: fixed;
}

table tbody tr td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>

在这里插入图片描述

段落控制

文本缩进

控制元素部的文本、图片进行缩进操作

1
2
3
4
5
6
7
8
<style>
p {
text-indent: 2em;
}
</style>
<p>
后盾人自2010年创立至今,免费发布了大量高质量视频教程,视频在优酷、土豆、酷六等视频网站均有收录,很多技术爱好者受益其中。除了免费视频外,后盾人还为大家提供了面授班、远程班、公益公开课、VIP系列课程等众多形式的学习途径。后盾人有一群认真执着的老师,他们一心为同学着想,将真正的知识传授给大家是后盾人永远不变的追求。
</p>

水平对齐

使用 left|right|center 对文本进行对齐操作

1
2
3
4
5
h2 {
text-align: center;
}
...
<h2>houdunren.com</h2>

为了让段落内容看得舒服,需要设置合适的行高

1
2
3
4
5
6
7
8
p {
text-indent: 2em;
line-height: 2em;
}
...
<p>
后盾人自2010年创立至今,免费发布了大量高质量视频教程,视频在优酷、土豆、酷六等视频网站均有收录,很多技术爱好者受益其中。除了免费视频外,后盾人还为大家提供了面授班、远程班、公益公开课、VIP系列课程等众多形式的学习途径。后盾人有一群认真执着的老师,他们一心为同学着想,将真正的知识传授给大家是后盾人永远不变的追求。
</p>

垂直对齐

使用 vertical-align 用于定义内容的垂直对齐风格,包括 middle | baseline | sub | super 等。

图像在段落中居中对齐

1
2
3
4
5
6
7
8
9
10
img {
height: 50px;
width: 50px;
vertical-align: middle;
}
...

<p>
<img src="houdunren.jpg">后盾人自2010年创立至今,免费发布了大量高质量视频教程,视频在优酷、土豆、酷六等视频网站均有收录,很多技术爱好者受益其中。除了免费视频外,后盾人还为大家提供了面授班、远程班、公益公开课、VIP系列课程等众多形式的学习途径。后盾人有一群认真执着的老师,他们一心为同学着想,将真正的知识传授给大家是后盾人永远不变的追求。
</p>

顶部与底部对齐
bottom | top 相对于行框底部或顶部对齐。

1
2
3
4
5
6
7
h2>span {
vertical-align: bottom;
font-size: 12px;
}
...

<h2>houdunren.com <span>hdcms</span></h2>

使用单位对齐
可以使用具体数值设置对齐的位置。

1
2
3
4
h2>span {
vertical-align: -20px;
font-size: 12px;
}

字符间隔

单词与字符间距
使用 word-spacingletter-spacing 控制单词与字符间距。

1
2
3
4
h2 {
word-spacing: 2em;
letter-spacing: 3em;
}

排版模式

2021-2-24 11:46:13

1
2
3
4
模式            说明
horizontal-tb 水平方向自上而下的书写方式
vertical-rl 垂直方向自右而左的书写方式
vertical-lr 垂直方向内内容从上到下,水平方向从左到右
1
2
3
4
5
6
7
8
9
10
div {
height: 200px;
border: solid 1px #ddd;
writing-mode: vertical-rl;
}
...

<div>
后盾人自2010年创立至今,免费发布了大量高质量视频教程,视频在优酷、土豆、酷六等视频网站均有收录,很多技术爱好者受益其中。除了免费视频外,后盾人还为大家提供了面授班、远程班、公益公开课、VIP系列课程等众多形式的学习途径。后盾人有一群认真执着的老师,他们一心为同学着想,将真正的知识传授给大家是后盾人永远不变的追求。
</div>

在这里插入图片描述

盒子模型

2021-02-24 11:47:08

盒子模型

在这里插入图片描述

下而是基本使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
a {
display: inline-block;
border: solid 1px #ddd;
text-align: center;
padding: 10px 20px;
margin-right: 30px;
}
</style>
...

<a href="">MYSQL</a>
<a href="">LINUX</a>
<a href="">PHP</a>

外边距

声明定义

边距顺序依次为:上、右、下、左。
在这里插入图片描述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
main {
border: solid 1px red;
width: 500px;
height: 500px;
margin: 0 auto;
}

h2 {
border: solid 2px green;
width: 300px;
height: 300px;
margin: 50px 80px 100px 150px;
}
</style>
...

<main>
<h2>houdunren.com</h2>
</main>

下例定义上下 50px 边距,左右80px 边距

1
margin: 50px 80px;

下面将边距全部定义为 100px

1
margin:100px;

居中设置

margin 设置auto 后,浏览器会自动

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
<style>
article {
border: solid 1px red;
}

h2,h3 {
border: solid 10px #ddd;
}

h2 {
width: 300px;
margin-left: 200px;
margin-right: 200px;
}

h3 {
width: 500px;
margin-left: auto;
margin-right: auto;
}
</style>
...

<article>
<h2>houdunren.com</h2>
<h3>hdcms.com</h3>
</article>

负值设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
main {
border: solid 1px red;
width: 300px;
margin: 0 auto;
}

h2 {
border: solid 2px green;
margin-left: -50px;
margin-right: -50px;
text-align: center;
}
</style>
...

<main>
<h2>houdunren.com</h2>
</main>

边距合并

相邻元素的纵向外边距会进行合并

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
h2 {
border: solid 2px green;
margin-bottom: 20px;
}

h3 {
border: solid 2px green;
height: 20px;
}
</style>
...

<h2>houdunren.com</h2>
<h2>hdcms.com</h2>
<h3></h3>

内边距

内边距使用 padding 进行定义,使用语法与 margin 相似。

基本使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
a {
padding: 10px 30px;
border: solid 1px #ddd;
border-radius: 5px;
}

a:hover {
background: rgb(3, 78, 110);
color: white;
}
</style>
...

<a href="">MYSQL</a>
<a href="">CSS</a>

BOX-SIZING

宽度与高度包括内边距与边框。

1
2
3
4
5
6
7
8
9
10
h2 {
border: solid 10px #ddd;
height: 60px;
width: 200px;
padding:50px;
box-sizing: border-box;
}
...

<h2>houdunren.com</h2>

边框设计

样式选择

1
2
3
4
5
6
7
8
9
10
11
类型    描述

none 定义无边框。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。

一次定义四个边

1
2
3
h2 {
border-style: double;
}

样式顺序为上、右、下、左,可以分别进行定义

1
2
3
4
h2 {
border-style: outset solid dotted double;
border-width: 8px;
}

单独设置一边样式

1
2
3
4
5
6
7
规则                说明

border-top-style 顶边
border-right-style 右边
border-bottom-style 下边
border-left-style 左边
border-style 四边
1
2
3
4
h2 {
border-top-style: double;
border-width: 8px;
}

边框宽度

1
2
3
4
5
6
7
规则                说明

border-top-color 顶边
border-right-color 右边
border-bottom-color 下边
border-left-color 左边
border-color 四边

简写规则

1
2
3
4
5
6
7
规则            说明

border-top 顶边
border-right 右边
border-bottom 下边
border-left 左边
border 四边

设置底部边框

1
border-bottom: solid 5px red;

行元素边框

行元素也可以进行边框设置

1
2
3
em {
border-bottom: solid 2px red;
}

圆角边框

使用 border-radius 规则设置圆角,可以使用 px | % 等单位。也支持四个边分别设置。

1
2
3
4
5
6
选项                        说明

border-top-left-radius 上左
border-top-right-radius 上右
border-bottom-left-radius 下载
border-bottom-right-radius 下右
1
2
3
4
h2 {
border-radius: 10px;
border: solid 2px red;
}

通过边框绘制圆

1
2
3
4
5
6
div {
width: 100px;
height: 100px;
border: solid 3px red;
border-radius: 50%;
}

定义不同边

1
border-radius: 10px 30px 50px 100px;

行元素绘制圆角

1
2
3
4
em {
border-radius: 50%;
border-bottom: solid 2px red;
}

在这里插入图片描述

轮廓线

元素在获取焦点时产生,并且轮廓线不占用空间。可以使用伪类 :focus 定义样式。

  • 轮廓线显示在边框外面
  • 轮廓线不影响页面布局

线条样式

1
2
3
4
5
6
7
8
9
10
值      描述
none 默认。定义无轮廓。
dotted 定义点状的轮廓。
dashed 定义虚线轮廓。
solid 定义实线轮廓。
double 定义双线轮廓。双线的宽度等同于 outline-width 的值。
groove 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset 定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset 定义 3D 凸边轮廓。此效果取决于 outline-color 值。
1
outline-style: double;

线宽设置

1
outline-width: 10px;

线条颜色

1
outline-color: red;

组合定义

1
outline: red solid 2px;

表单轮廓线

表单默认具有轮廓线,但有时并不好看,使用以下样式规则去除。

1
2
3
input:focus {
outline: none;
}

DISPLAY

控制显示隐藏

使用 display 控制元素的显示机制。

1
2
3
4
5
6
选项            说明

none 隐藏元素
block 显示为块元素
inline 显示为行元素,不能设置宽/高
inline-block 行级块元素,允许设置宽/高f

行转块元素

1
2
3
4
5
6
7
8
9
10
a {
border: solid 1px #ddd;
display: block;
margin-bottom: 5px;
}
...

<a href="">houdunren.com</a>
<a href="">houdunren.com</a>
<a href="">houdunren.com</a>

块转为行元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
ul>li {
display: inline;
padding: 5px 10px;
border: solid 1px #ddd;
}

ul>li:hover {
background: green;
color: white;
cursor: pointer;
}
...

<ul>
<li>hdcms.com</li>
<li>houdunren.com</li>
<li>后盾人</li>
</ul>

行级块使用

1
2
3
4
5
6
7
8
9
10
11
12
13
a {
display: inline-block;
width: 30%;
height: 50px;
border: solid 1px #ddd;
text-align: center;
line-height: 3em;
}
...

<a href="">MYSQL</a>
<a href="">LINUX</a>
<a href="">PHP</a>

VISIBILITY

控制元素的显示隐藏,在隐藏后空间位也保留。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
article {
padding: 30px;
border: solid 2px red;
width: 200px;
}
article div {
width: 100px;
height: 100px;
border: solid 2px red;
padding: 20px;
}
article div:nth-of-type(1) {
visibility: hidden;
}
</style>

<article>
<div></div>
<div></div>
</article>

在这里插入图片描述

溢出控制

隐藏控制

1
2
3
4
5
选项    说明

hidden 溢出内容隐藏
scroll 显示滚动条(有些浏览器会一直显示,有些在滚动时显示)
auto 根据内容自动处理滚动条

溢出隐藏

1
2
3
4
5
6
7
div {
width: 400px;
height: 100px;
border: solid 2px #ddd;
padding: 20px;
overflow: hidden;
}

在这里插入图片描述

溢出产生滚动条
不同浏览器处理方式不同,有些直接显示出来,有些在滚动时才显示。

1
2
3
4
5
6
7
div {
width: 400px;
height: 100px;
border: solid 2px #ddd;
padding: 20px;
overflow: scroll;
}

在这里插入图片描述

文本溢出

单行文本溢出

1
2
3
4
5
6
7
8
9
div {
width: 400px;
height: 100px;
border: solid 2px #ddd;
padding: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

在这里插入图片描述

多行文本溢出控制

1
2
3
4
5
6
7
div {
width: 200px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}

在这里插入图片描述

尺寸定义

可以使用多种方式为元素设置宽、高尺寸。

1
2
3
4
5
6
7
8
9
10
选项          说明

width 宽度
height 高度
min-width 最小宽度
min-height 最小高度
max-width 最大宽度
max-height 最大高度
fill-available 撑满可用的空间
fit-content 根据内容适应尺寸

min&max

正文中不希望图片太大造成溢出窗口,也不希望太小影响美观,使用以下代码可以做到约束。

1
2
3
4
5
6
7
8
9
10
11
<style>
div {
width: 600px;
border: solid 2px #ddd;
padding: 20px;
}
div img {
min-width: 50%;
max-width: 90%;
}
</style>

在这里插入图片描述

fill-available

chrome 浏览器中使用前缀 -webkit 书写样式。
下面是行块元素可以撑满可用空间后的效果。

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
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
padding: 0;
margin: 0;
}

body {
width: 100vw;
height: 100vh;
background: #2c3e50;
}

main {
background: #9b59b6;
height: 100px;
padding: 20px;
box-sizing: border-box;
}

span {
background: #e67e22;
display: inline-block;
width: -webkit-fill-available;
height: -webkit-fill-available;
}
</style>
</head>

<body>
<main>
<span>
houdunren.com
</span>
</main>
</body>

在这里插入图片描述

fit-content

下面是根据内容自动适应宽度,让元素居中显示的效果。

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
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
padding: 0;
margin: 0;
}

body {
width: 100vw;
height: 100vh;
background: #2c3e50;
}

h2 {
text-align: center;
background: #f1c40f;
width: fit-content;
margin: auto;
}
</style>
</head>

<body>
<h2>houdunren.com</h2>
</body>

在这里插入图片描述

min-content

使用min-content 将容器尺寸按最小元素宽度设置。

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
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
padding: 0;
margin: 0;
}

body {
width: 100vw;
height: 100vh;
background: #2c3e50;
}

main {
width: min-content;
margin: auto;
}

div {
margin-bottom: 20px;
background: #f1c40f;
word-break: break-all;
padding: 10px;
}

div:nth-child(1) {
width: 100px;
}
</style>
</head>

<body>
<main>
<div>houdunren.com</div>
<div>hdcms.com</div>
</main>
</body>

在这里插入图片描述

max-content

容器尺寸按子元素最大宽度设置。

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
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
padding: 0;
margin: 0;
}

body {
width: 100vw;
height: 100vh;
background: #2c3e50;
}

main {
width: max-content;
margin: auto;
}

div {
margin-bottom: 20px;
background: #f1c40f;
word-break: break-all;
padding: 10px;
}
</style>
</head>

<body>
<main>
<div>在线视频教程学习网站。houdunren.com</div>
<div>hdcms.com</div>
</main>
</body>

在这里插入图片描述

背景样式

2021-02-24 16:29:35

背景颜色

背景颜色可以使用 rga | rgba | 十六进制 等颜色格式

1
2
3
4
5
6
7
8
<style>
h2 {
background-color: red;
}
</style>
...

<h2>houdunren.com</h2>

背景图片

可以使用 png| gif |jpeg 等图片做为背景使用

1
background-image: url(icon-s.jpg);

背景裁切

1
2
3
4
5
选项        说明

border-box 包括边框
padding-box 不含边框,包括内边距
content-box 内容区域
1
background-clip: border-box;

背景重复

用于设置背景重复的规则

1
2
3
4
5
6
7
选项        说明

repeat 水平、垂直重复
repeat-x 水平重复
repeat-y 垂直重复
no-repeat 不重复
space 背景图片对称均匀分布
1
background-repeat: repeat-y

背景滚动

用于设置在页面滚动时的图片处理方式

1
2
3
选项  说明
scroll 背景滚动
fixed 背景固定
1
background-attachment: fixed;

背景位置

用于设置背景图片的水平、垂直定位。

1
2
3
4
5
6
选项  说明
left 左对齐
right 右对齐
center 居中对齐
top 顶端对齐
bottom 底部对齐

居中对齐

1
2
3
background-position: center;

background-position: 50% 50%;

使用具体数值定义

1
2
3
background-position: 100px 100px;
也支持使用负值
background-position: -200px 100px;

背景尺寸

1
2
3
选项  说明
cover 背景完全覆盖,可能会有背景溢出
contain 图片不溢出的放在容器中,可能会漏出部分区域

指定数值定义宽高尺寸

1
2
3
background-size: 50% 100%;

background-size: 200px 200px;

宽度固定高度自动

1
background-size: 50% auto;

多个背景

后定义的背景置于底层

1
background-image: url(xj-small.png), url(bg.png);

多属性定义

1
2
3
background-image: url(xj-small.png), url(bg.png);
background-repeat: no-repeat;
background-position: top left, right bottom;

可以一次定义多个背景图片。

1
2
background: url(xj-small.png) left 50% no-repeat,
url(bg.png) right 100% no-repeat red;

组合设置

可以使用一条指令设置背景

1
background: red url(xj-small.png) no-repeat right 50% fixed;

盒子阴影

可以使用 box-shadow 对盒子元素设置阴影,参数为 水平偏移,垂直偏移,模糊度,颜色 构成。

1
box-shadow: 10px 10px 5px rgba(100, 100, 100, .5);

在这里插入图片描述

颜色渐变

线性渐变

激变一般用在背景颜色中使用

1
background: linear-gradient(red, green);

渐变角度

1
background: linear-gradient(30deg, red, green);

向右渐变

1
background: linear-gradient(to right, red, green)

向左渐变

1
background: linear-gradient(to left, red, green);

左上渐变

1
background: linear-gradient(to top left, red, green);

右下渐变

1
background: linear-gradient(to right bottom, red, green);

设置多个颜色

1
background: linear-gradient(red, rgb(0, 0, 200), green, rgba(122, 211, 100, 0));

径向渐变

设置渐变

1
background: radial-gradient(red, blue, green);

设置渐变宽度与高度

1
background: radial-gradient(100px 200px, red, blue, green);

左下渐变

1
background: radial-gradient(at bottom left, red, blue);

右下渐变

1
background: radial-gradient(at bottom right, red, blue);

左侧向中心渐变

1
background: radial-gradient(at center left, red, blue);

底部向中心渐变

1
background: radial-gradient(at 50% 100%, red, blue);

标识位

颜色未指定标识时,颜色会平均分布。

红色与蓝色在50%gc 60%间发生激变。

1
background: linear-gradient(45deg, red 50%, blue 0%);

在这里插入图片描述

标识位相同时将没有过渡效果

1
background: linear-gradient(45deg, red 0,red 50%, blue 50%);

在这里插入图片描述

径向标识位绘制小太阳

1
2
3
width: 150px;
height: 150px;
background: radial-gradient(red 0, yellow 30%, black 60%, black 100%);

在这里插入图片描述

通过在两个颜色间中间点定义过渡位置

1
background: linear-gradient(45deg, red, 50%, blue);

渐变重复

下例定义从0到25为蓝色,25px到50px的红色,并进行重复后产生渐变的进度条。

1
background: repeating-linear-gradient(90deg, blue, 25px, yellow 25px, 25px, red 50px);

在这里插入图片描述

径向重复

1
2
3
width: 200px;
height: 200px;
background: repeating-radial-gradient(100px 100px, red 0%, yellow 40%, black 60%, black 200%);

在这里插入图片描述

数据样式

2021-02-24 16:35:45

表格

表格可以非常快速的部署数据,灵活控制表格样式是必要的。表格不能设置外边距。

定制表格

除了使用 table 标签绘制表格外,也可以使用样式绘制。

1
2
3
4
5
6
7
8
样式规则            说明

table 对应 table
table-caption 对应 caption
table-row 对表 tr
table-row-group 对应 tbody
table-header-group 对应 thead
table-footer-group 对应 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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<style>
.table {
display: table;
border: solid 1px #ddd;
}

.table nav {
display: table-caption;
text-align: center;
background: black;
color: white;
padding: 10px;
}

.table section:nth-of-type(1) {
font-weight: bold;
display: table-header-group;
background: #555;
color: white;
}

.table section:nth-of-type(2) {
display: table-row-group;
}

.table section:nth-of-type(3) {
display: table-footer-group;
background: #f3f3f3;
}

.table section ul {
display: table-row;
}

.table section ul li {
padding: 10px;
display: table-cell;
border: solid 1px #ddd;
}
</style>

<article class="table">
<nav>后盾人在线教程</nav>
<section>
<ul>
<li>标题</li>
<li>说明</li>
</ul>
</section>
<section>
<ul>
<li>后盾人</li>
<li>houdunren.com</li>
</ul>
<ul>
<li>开源系统</li>
<li>hdcms.com</li>
</ul>
</section>
<section>
<ul>
<li>不断更新视频</li>
<li>努力加油</li>
</ul>
</section>
</article>

在这里插入图片描述

表格标题

通过 caption-side 可以设置标题位置,值可以设置为 top | bootom

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
table caption {
background: black;
color: white;
padding: 10px;
caption-side: top;
}
</style>

<table border="1">
<caption>后盾人线上视频课程</caption>
<tr>
<td>houdunren.com</td>
<td>后盾人</td>
</tr>
</table>

在这里插入图片描述

内容对齐

水平对齐使用 text-align 文本对齐规则

1
2
3
4
5
6
<style>
table tr td {
height: 100px;
text-align: center;
}
</style>

垂直对齐使用 vertical-align 处理

1
2
3
4
5
属性    说明

top 顶对齐
middle 垂直居中
bottom 底部对齐
1
2
3
4
5
6
7
<style>
table tr td {
height: 100px;
vertical-align: bottom;
text-align: center;
}
</style>

颜色设置

为表格设置颜色与普通标签相似,可以为 table | thead | tbody | caption | tfoot| tr| td 设置颜色样式。

1
2
3
4
5
6
7
8
9
10
11
<style>
table tr {
color: white;
}
table tr:nth-child(odd) {
background: red;
}
table tr td:nth-child(even) {
background: #067db4;
}
</style>

在这里插入图片描述

使用选择器设置表格隔行变色

1
2
3
4
5
6
7
8
9
10
11
<style>
table thead tr {
background: #118d68;
color: #fff;
}

table tbody tr:nth-child(odd) {
background: #1bb385;
color: white;
}
</style>

在这里插入图片描述

边框间距

设置单元格间距,设置间距上下10px ,左右 50px。

1
2
3
table {
border-spacing: 50px 10px;
}

边框合并

默认表格边框间是有间距的,以下示例将边框合并形成细线表格。

1
2
3
table {
border-collapse: collapse;
}

在这里插入图片描述

隐藏单元格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
table {
empty-cells: hide;
}
</style>
...

<table border="1">
<tr>
<td>在线教程</td>
<td>houdunren.com</td>
</tr>
<tr>
<td></td>
<td>hdcms.com</td>
</tr>
</table>

在这里插入图片描述

无边框表格

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
42
<style>
table {
border: none;
border-collapse: collapse;
}

table td {
border: none;
border-right: solid 1px #ddd;
border-bottom: solid 1px #ddd;
}

table tr:first-child td {
border-top: solid 1px #ddd;
}

table td:last-child {
border-right: none;
}
</style>
...
<table border="1">
<thead>
<tr>
<td>编号</td>
<td>标题</td>
<td>网址</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>在线社区</td>
<td>houdunren.com</td>
</tr>
<tr>
<td>2</td>
<td>开源系统</td>
<td>hdcms.com</td>
</tr>
</tbody>
</table>

在这里插入图片描述

数据表格

可以为表格元素使用伪类控制样式,下例中使用 hover 伪类样式

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
42
43
44
<style>
table,
td {
border: none;
font-size: 14px;
border-collapse: collapse;
}

table tr:hover {
background: #ddd;
cursor: pointer;
}

table td {
border-top: solid 1px #ccc;
padding: 10px;
}
</style>

<table border="1">
<thead>
<tr>
<td>编号</td>
<td>标题</td>
<td>网址</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>在线社区</td>
<td>houdunren.com</td>
</tr>
<tr>
<td>2</td>
<td>开源系统</td>
<td>hdcms.com</td>
</tr>
<tr>
<td>3</td>
<td>开发实战</td>
<td>houdunwang.com</td>
</tr>
</table>

在这里插入图片描述

列表

列表符号

使用 list-style-type 来设置列表样式,规则是继承的,所以在 ul 标签上设置即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
值                      描述

none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。
decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek 小写希腊字母(alpha, beta, gamma, 等。)
lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
hebrew 传统的希伯来编号方式
armenian 传统的亚美尼亚编号方式
georgian 传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic 简单的表意数字
hiragana 标记是:a, i, u, e, o, ka, ki, 等。(日文片假名)
katakana 标记是:A, I, U, E, O, KA, KI, 等。(日文片假名)
hiragana-iroha 标记是:i, ro, ha, ni, ho, he, to, 等。(日文片假名)
katakana-iroha 标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名)

隐藏列表符号

1
2
3
ul {
list-style-type: none;
}

自定义列表样式

1
2
3
4
5
6
ul li {
/* list-style-image: url(xj-small.png);
list-style-image: radial-gradient(10px 10px, red, black); */

list-style-image: linear-gradient(45deg, red, black);
}

符号位置

控制符号显示在内容外面还是内部

1
2
3
选项  说明
inside 内部
outside 外部
1
2
3
ul {
list-style-position: inside;
}

组合定义

可以一次定义列表样式

1
2
3
ul {
list-style: circle inside;
}

背景符号

1
2
3
4
5
6
7
ul li {
background: url(xj-small.png) no-repeat 0 6px;
background-size: 10px 10px;
list-style-position: inside;
list-style: none;
text-indent: 15px;
}

在这里插入图片描述

多图背景定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
ul {
list-style-type: none;
}

ul li {
background-image: url(xj-small.png), url(houdunren.jpg);
background-repeat: no-repeat, repeat;
background-size: 10px 10px, 100%;
background-position: 5px 7px, 0 0;
text-indent: 20px;
border-bottom: solid 1px #ddd;
margin-bottom: 10px;
padding-bottom: 5px;

}
</style>

在这里插入图片描述

追加内容

基本使用

使用伪类 ::before 向前添加内容,使用 ::after 向后面添加内容。

1
2
3
a::after {
content: " (坚持努力) ";
}

提取属性

使用属性值添加内容,可以使用标准属性与自定义属性。

1
2
3
4
5
6
7
<style>
a::after {
content: attr(href);
}
</style>

<a href="houdunren.com">后盾人</a>

通过属性值添加标签提示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
a {
position: relative;
}

a:hover {
&::before {
content: "URL: "attr(data-url);
background: #555;
color: white;
position: absolute;
top: 20px;
padding: 3px 10px;
border-radius: 10px;
}
}

在这里插入图片描述

自定义表单

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
{{<style>
body {
padding: 80px;
}

.field {
position: relative;
}

input {
border: none;
outline: none;
}

.field::after {
content: '';
background: linear-gradient(to right, white, red, green, blue, white);
height: 30px;
position: relative;
width: 100%;
height: 1px;
display: block;
left: 0px;
right: 0px;
}

.field:hover::before {
content: attr(data-placeholder);
position: absolute;
top: -20px;
left: 0px;
color: #555;
font-size: 12px;
}
</style>

...
<div class="field" data-placeholder="请输入少于100字的标题">
<input type="text" id="name">
</div>}}

在这里插入图片描述

浮动布局

2021-02-24 17:45:20

浮动布局

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
在这里插入图片描述

在网站开发中需要一行排列多个元素,使用浮动可以方便实现。下面是使用浮动排列多个元素
在这里插入图片描述

FLOAT

使用浮动可以控制相邻元素间的排列关系。

1
2
3
4
选项  说明
left 向左浮动
right 向右浮动
none 不浮动

文档流

没有设置浮动的块元素是独占一行的。
在这里插入图片描述

浮动是对后面元素的影响,下图中第二个元素设置浮动对第一个元素没有影响

1
2
3
4
5
6
7
8
div:first-of-type {
border: solid 2px red;
}

div:last-of-type {
float: left;
background: green;
}

在这里插入图片描述

丢失空间

如果只给第一个元素设置浮动,第二个元素不设置,后面的元素会占用第一个元素空间。

1
2
3
4
5
6
7
8
div:first-of-type {
float: left;
border: solid 2px red;
}

div:last-of-type {
background: green;
}

在这里插入图片描述

使用浮动

两个元素都设置浮动后,会并排显示

1
2
3
4
5
6
7
8
9
div:first-of-type {
float: left;
border: solid 2px red;
}

div:last-of-type {
float: left;
background: green;
}

在这里插入图片描述

为第二个元素设置右浮动时将移动到右边

1
2
3
4
5
6
7
8
9
div:first-of-type {
float: left;
border: solid 2px red;
}

div:last-of-type {
float: right;
background: green;
}

在这里插入图片描述

浮动边界

浮动元素边界不能超过父元素的padding

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
main {
width: 400px;
border: solid 2px black;
overflow: auto;
padding: 50px;
background-color: antiquewhite;
background-clip: content-box;
}

div {
width: 100px;
height: 100px;
box-sizing: border-box;
}

div:first-of-type {
float: left;
border: solid 2px red;
}

div:last-of-type {
float: right;
background: green;
}

在这里插入图片描述

浮动转块

元素浮动后会变为块元素包括行元素如 span,所以浮动后的元素可以设置宽高

1
2
3
4
a {
float: left;
width: 300px;
}

清除浮动

不希望元素受浮动元素影响时,可以清除浮动。

CLEAR

CSS提供了 clear 规则用于清除元素浮动影响。

1
2
3
4
选项  说明
left 左边远离浮动元素
right 右连远离浮动元素
both 左右都远离浮动元素

使用清除浮动

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
<style>
div {
width: 200px;
height: 200px;
margin-bottom: 10px;
}

div.green {
border: solid 2px green;
float: left;
}

div.red {
border: solid 2px red;
float: right;
}

div.blue {
background: blue;
clear: both;
}
</style>
...

<div class="green"></div>
<div class="red"></div>
<div class="blue"></div>

在这里插入图片描述

在父元素内部最后面添加一个没有高度的了元素,并使用 clear:both

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
<style>
.clearfix {
clear: both;
height: 0;
}

div {
width: 200px;
height: 200px;
margin-bottom: 10px;
}


div.green {
border: solid 2px green;
float: left;
}

div.red {
border: solid 2px red;
height: 200px;
float: left;
}

div.blue {
background: blue;
}
</style>

<article>
<div class="green"></div>
<div class="red"></div>
<div class="clear"></div>
</article>
<div class="blue"></div>

AFTER

使用 ::after 伪类为父元素添加后标签,实现清除浮动影响。

1
2
3
4
5
.clearfix::after {
content: "";
display: block;
clear: both;
}

OVERFLOW

子元素使用浮动后将不占用空间,这时父元素高度为将为零。通过添加父元素并设置 overflow 属性可以清除浮动。

将会使用父元素产生 BFC 机制,即父元素的高度计算会包括浮动元素的高度。

1
2
3
4
5
<style>
article {
overflow: hidden;
}
...

页面布局

完成页面布局注意以下几点

  1. 首先根据设计稿确定页面大小(主要指宽度,移动端不需要考虑),如 1200px 宽度
  2. 水平分割页面主要区域
  3. 每个区域中按以上两步继续细分

在这里插入图片描述

父容器

一组浮动元素要放在一个父容器中,如下图绿线指父容器,里面的红线为浮动子元素。

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
42
43
44
45
46
47
48
49
50
<style>
article {
background: #f3f3f3;
width: 1020px;
height: auto;
overflow: auto;
padding: 20px;
}

article.hot section {
background: #fff;
box-shadow: 0 0 5px #777;
height: 300px;
width: 500px;
}

article.hot section:first-of-type {
float: left;
}

article.hot section:last-of-type {
float: right;
}

article.swiper section {
height: 200px;
background: #fff;
box-shadow: 0 0 5px #777;
}

article.swiper section:first-of-type {
width: 200px;
float: left;
}

article.swiper section:last-of-type {
width: 820px;
float: left;
}
</style>
...

<article class="hot">
<section></section>
<section></section>
</article>
<article class="swiper">
<section></section>
<section></section>
</article>

在这里插入图片描述

形状浮动

通过形状浮动可以让内容围绕图片,类似于我们在word 中的环绕排版。要求图片是有透明度的PNG格式。

在这里插入图片描述

距离控制

1
2
3
4
5
选项      说明
margin-box 外边距环绕
padding-box 内边距环绕
border-box 边线环绕
content-box 内容环绕

外边距环绕

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
span.shape {
float: left;
width: 100px;
height: 100px;
padding: 30px;
margin: 30px;
border: solid 30px green;
shape-outside: margin-box;
}
</style>
...


<p>
<span class="shape"></span>
后盾人自2010年创立至今,免费发布了大量高质量视频教程,视频在优酷、土豆、酷六等视频网站均有收录,很多技术爱好者受益其中。
除了免费视频外,后盾人还为大家提供了面授班、远程班、公益公开课、VIP系列课程等众多形式的学习途径。后盾人有一群认真执着的老师,他们一心为同学着想,将真正的知识传授给大家是后盾人永远不变的追求。
</p>

在这里插入图片描述

边框环绕

1
2
3
4
5
6
7
8
9
span.shape {
float: left;
width: 100px;
height: 100px;
padding: 30px;
margin: 30px;
border: solid 30px green;
shape-outside: border-box;
}

在这里插入图片描述

显示区域

1
2
3
4
选项  说明
circle 圆形
ellipse 椭圆
polygon 多边形

圆形

1
2
3
4
5
6
7
8
9
span.shape {
float: left;
width: 100px;
height: 100px;
padding: 30px;
margin: 30px;
background: red;
clip-path: circle(50% at center);
}

在这里插入图片描述

椭圆

1
2
3
4
5
6
7
8
9
span.shape {
float: left;
width: 100px;
height: 100px;
padding: 30px;
margin: 30px;
background: red;
clip-path: ellipse(50% 80% at 100% 0);
}

在这里插入图片描述

多边形

1
2
3
4
5
6
7
8
9
span.shape {
float: left;
width: 100px;
height: 100px;
padding: 30px;
margin: 30px;
background: red;
clip-path: polygon(50% 0, 100% 100%, 0 100%)
}

在这里插入图片描述

内移距离

使用 inset 属性控制环绕向内移动的距离。

1
2
3
4
5
6
7
8
9
span.shape {
float: left;
width: 100px;
height: 100px;
padding: 30px;
margin: 30px;
background: red;
shape-outside: inset(50px 30px 80px 50px) padding-box;
}

环绕模式

1
2
3
4
5
选项  说明
circle 圆形环绕
ellipse 椭圆环绕
url 图片环绕
polygan 多边环绕

圆形环绕

1
2
3
4
5
img {
padding: 20px;
float: left;
shape-outside: circle(50%) padding-box;
}

在这里插入图片描述

椭圆环绕

1
2
3
4
5
img {
padding: 20px;
float: left;
shape-outside: ellipse(80px 70px) padding-box;
}

在这里插入图片描述

图片环绕

1
2
3
4
img {
float: left;
shape-outside: url(xj.png);
}

在这里插入图片描述

多边环绕

1
2
3
4
5
6
7
8
span.shape {
float: left;
width: 100px;
height: 100px;
background: red;
clip-path: polygon(50px 0px, 0 100px, 100px 100px);
shape-outside: polygon(50px 0px, 0 100px, 100px 100px);
}

在这里插入图片描述

定位布局

2021-02-24 17:10:51

基础知识

定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

轮播图是典型的定位应用
在这里插入图片描述

下面弹出的二维码也可以使用定位处理
在这里插入图片描述

定位类型

1
2
3
4
5
6
选项      说明
static 默认形为,参考文档流
relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 粘性定位

位置偏移

可以为部分类型的定位元素设置上、下、左、右 的位置偏移。

1
2
3
4
5
选项  说明
top 距离顶边
bottom 距离下边
left 距离左部
right 距离右边
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>
body {
padding: 50px;
}

article {
width: 300px;
height: 200px;
border: solid 6px blueviolet;
margin: 20px;
}

div {
font-size: 25px;
background: #f2a67d;
padding: 10px;
position: absolute;
top: 0;
}
</style>
...

<article>
<div>houdunren.com</div>
</article>

在这里插入图片描述

使用百分比单位时使用的是父级尺寸,比如下面的示例left:100%会定位到最右边

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
main {
width: 200px;
height: 200px;
background: #1abc9c;
position: relative;
}
main div {
box-sizing: border-box;
width: 200px;
height: 200px;
background-color: #f1c40f;
background-clip: content-box;
border: solid 1px #333;
color: white;
font-size: 2em;
position: absolute;
left:100%;
}
</style>
<main>
<div>hdcms.com</div>
</main>

在这里插入图片描述

相对定位

相对定位是相对于元素原来的位置控制,当元素发生位置偏移时,原位置留白。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style>
body {
padding: 50px;
}
article {
width: 400px;
height: 200px;
border: solid 10px blueviolet;
font-size: 14px;
padding: 30px;
}
article img {
width: 50px;
position: relative;
top: -20px;
}

</style>
...

<article>
<img src="xj.png" alt="">
后盾人自2010年创立至今,免费发布了大量高质量视频教程,视频在优酷、土豆、酷六等视频网站均有收录,很多技术爱好者受益其中。除了免费视频外,后盾人还为大家提供了面授班、远程班、公益公开课、VIP系列课程等众多形式的学习途径。后盾人有一群认真执着的老师,他们一心为同学着想,将真正的知识传授给大家是后盾人永远不变的追求。
</article>

在这里插入图片描述

绝对定位

绝对定义不受文档流影响,就像漂浮在页面中的精灵,绝对定位元素拥有行内块特性。

参照元素

如果父级元素设置了 relative | fixed | sticky ,绝对定位子元素将参数此父元素进行定位。

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
<style>
body {
padding: 50px;
}

article {
width: 400px;
height: 100px;
border: solid 6px blueviolet;
position: relative;
}

div {
font-size: 25px;
background: #f2a67d;
padding: 10px;
position: absolute;
top: 0;
left: 0px;
}
</style>
...

<article>
<div>houdunren.com</div>
</article>

在这里插入图片描述

默认位置

如果没有为定位元素设置偏移,将受父元素的padding等属性影响。但使用定位一般都会设置偏移位置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
body {
padding: 50px;
}

article {
width: 400px;
height: 100px;
border: solid 6px blueviolet;
position: relative;
padding: 20px;
}

div {
background: #f2a67d;
padding: 5px;
position: absolute;
top: 50px;
left: 50px;
}

在这里插入图片描述

设置尺寸

可以通过定位的偏移值设置元素的尺寸。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
body {
padding: 50px;
}
article {
width: 400px;
height: 100px;
border: solid 6px blueviolet;
position: relative;
}
div {
font-size: 25px;
background: #f2a67d;
padding: 10px;
position: absolute;
top: 50%;
left: 50%;
right: 0;
bottom: 0;
}
</style>

在这里插入图片描述

居中定位

通过将 left 设置为50% ,并向左偏移子元素宽度一半可以实现水平居中,垂直居中使用方式类似。

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
<style>
body {
padding: 50px;
}
article {
width: 400px;
height: 400px;
border: solid 6px blueviolet;
position: relative;
}
div {
width: 200px;
height: 200px;
background: #f2a67d;
position: absolute;
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -100px;
}

</style>

<article>
<div></div>
</article>

在这里插入图片描述

滚动行为

固定定位元素会随滚动条发生滚动。

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
<style>
body {
padding: 50px;
}
main {
width: 300px;
height: 200px;
border: solid 10px blueviolet;
position: relative;
overflow: scroll;
}
main article {
height: 600px;
}
main article div {
width: 200px;
height: 200px;
position: absolute;
}
main article div:nth-of-type(1) {
background: red;
left: 0px;
z-index: 2;
}
</style>
...

<main>
<article>
<div></div>
</article>
</main>

在这里插入图片描述

图标定位

有了绝对定位我们可以很方便的控制元素在任何位置的摆放。

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
42
* {
padding: 0;
margin: 0;
}
main {
height: 3000px;
padding: 100px;
}
main div {
width: 300px;
border: solid 6px blueviolet;
padding: 0;
overflow: hidden;
position: relative;
}
main div img {
max-width: 300px;
float: left;
}
main div span {
display: inline-block;
width: 30px;
height: 30px;
text-align: center;
color: white;
line-height: 2em;
border-radius: 50%;
background: blueviolet;
position: absolute;
top: 10px;
left: 10px;
box-shadow: 0 0 5px rgba(100, 100, 100, 0.8);
}

...

<main>
<div>
<span>热</span>
<img src="houdunren.jpg" alt="">
</div>
</main>

在这里插入图片描述

纵向重叠

如果元素重叠在一起,可以使用 z-index 控制元素的上下层级,数值越大越在上面。

父级子元素设置 z-index 没有意义,子元素永远在父元素上面的。

在这里插入图片描述

层级改变

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
<style>
body {
padding: 50px;
}

article {
width: 200px;
height: 200px;
border: solid 10px blueviolet;
position: relative;
cursor: pointer;
}

article:hover div:nth-of-type(2) {
z-index: 2;
}

article div {
width: 200px;
height: 200px;
position: absolute;
}

article div:nth-of-type(1) {
background: red;
left: 0px;
z-index: 2;
}

article div:nth-of-type(2) {
background: green;
left: 50px;
top: 50px;
}
</style>
...

<article>
<div></div>
<div></div>
</article>

在这里插入图片描述

购物车

因为事件捕获特性(请在JS系统课程了解)所要以把父级的 z-index 放在最下面。

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
42
43
44
45
46
47
48
49
50
51
52
<style>
* {
padding: 0;
margin: 0;
}
main {
width: 600px;
padding: 100px;
margin: 0 auto;
}
main article {
width: 150px;
position: relative;
cursor: pointer;
font-size: 14px;
color: #555;
}
main article:hover div:nth-of-type(1) {
border-bottom: none;
}
main article:hover div:nth-of-type(2) {
display: block;
}
main article div {
box-sizing: border-box;
height: 50px;
line-height: 3.5em;
text-align: center;
border: solid 2px blueviolet;
background: white;
}
main article div:nth-of-type(1) {
position: relative;
z-index: 2;
}
main article div:nth-of-type(2) {
display: none;
position: absolute;
right: 0;
top: 48px;
left: -150px;
z-index: 1;
}
</style>
...

<main>
<article>
<div>我的购物车</div>
<div>购物车中暂无产品</div>
</article>
</main>

在这里插入图片描述

固定定位

元素相对于页面固定定位在某个位置,固定定位元素不会在滚动时改变位置 ,使用 position: fixed 产生固定定位。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
header {
height: 60px;
border-bottom: solid 5px #7f35c9;
box-shadow: 0 5px 8px rgba(100, 100, 100, 0.6);
position: fixed;
top: 0px;
left: 0px;
right: 0px;
}
article {
height: 3000px;
margin-top: 80px;
background: #f3f3f3;
border: solid 5px #ddd;
}
</style>
...

<header></header>
<article></article>

在这里插入图片描述

粘性定位

同级定位

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
<style>
* {
padding: 0;
margin: 0;
}
main {
padding: 30px;
font-size: 14px;
}
main article {
width: 400px;
height: 100px;
border: solid 5px blueviolet;
overflow: scroll;
}
main article h2 {
background: #db1f77;
color: white;
text-indent: 20px;
position: sticky;
top: 0;
}
main article h2:nth-of-type(1) {
background: blueviolet;
}
main article section {
height: 300px;
}
</style>
...

<main>
<article>
<section></section>
<h2>后盾人</h2>
<section></section>
<h2>HOUDUNREN</h2>
<section></section>
</article>
</main>

在这里插入图片描述

非同级定位

不属于同一个父元素设置粘性定位时,后面的元素挤掉原来位置的元素如下例。

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
42
43
44
45
46
47
48
49
50
51
52
53
<style>
* {
padding: 0;
margin: 0;
}
main {
padding: 30px;
font-size: 14px;
}
main article {
width: 400px;
border: solid 5px blueviolet;
height: 200px;
overflow: scroll;
}
main article section:nth-of-type(odd) h2 {
background: blueviolet;
}
main article section h2 {
background: #db1f77;
color: white;
text-indent: 20px;
position: sticky;
top: 0;
}
main article section p {
padding: 20px;
}
</style>
...

<main>
<article>
<section>
<h2>hdcms.com</h2>
<p>
后盾人自2010年创立至今,免费发布了大量高质量视频教程,视频在优酷、土豆、酷六等视频网站均有收录,很多技术爱好者受益其中。除了免费视频外,后盾人还为大家提供了面授班、远程班、公益公开课、VIP系列课程等众多形式的学习途径。后盾人有一群认真执着的老师,他们一心为同学着想,将真正的知识传授给大家是后盾人永远不变的追求。
</p>
</section>
<section>
<h2>后盾人</h2>
<p>
后盾人隶属于北京后盾计算机技术培训有限责任公司,是专注于培养中国互联网精英PHP程序语言专业人才的专业型培训机构,拥有七年培训行业经验。后盾人拥有国内一线的讲师和技术团队,团队成员项目经验均在8年以上,团队曾多次为国内外上市集团、政府机关的大型项目提供技术支持,其中包括新浪、搜狐、腾讯、宝洁公司、联想、丰田、工商银行、中国一汽等众多大众所熟知的知名企业。
</p>
</section>
<section>
<h2>houdunwang.com</h2>
<p>
后盾人自2010年创立至今,免费发布了大量高质量视频教程,视频在优酷、土豆、酷六等视频网站均有收录,很多技术爱好者受益其中。除了免费视频外,后盾人还为大家提供了面授班、远程班、公益公开课、VIP系列课程等众多形式的学习途径。后盾人有一群认真执着的老师,他们一心为同学着想,将真正的知识传授给大家是后盾人永远不变的追求。
</p>
</section>
</article>
</main>

在这里插入图片描述