入门全栈Java程序员——CSS

vlambda
2021-01-13

入门全栈Java程序员——CSS

回复"资源"获取独家整理的学习资料

导读

我们刚刚学习完Html，没学完的看上一篇，趁热打铁，下面我们学习CSS，先用一张‘思维导图’，看看我们都要学习什么

思维导图

CSS简介

1. CSS 是什么

CSS 是层叠式样式表，负责控制网页的外观，是为了改变 Html 的默认外观，使网页更美观而引进的一种技术

2. CSS 和 CSS3 的关系

C3 一般说的是相对于 Css 新增加的内容，也就是说，Css 是基础，学完才能学 C3

3. Css 的引入方式

外部样式表
内部样式表
行内样式表

3.1 外部样式表

这种方式是实际开发中，最常用的方式，意思就是说，将Html 代码和 Css 代码单独放在不同的文件中，然后通过 link 标签来引用 Css 文件

语法：

需求：

创建 Html 页面 index.html

创建 Css 页面 first.css

在 Html 页面使用 p 标签，内容是 XXXX

使用 Css 将 XXXX 改为红色

Html 代码：

 1<!DOCTYPE html>
 2<html>
 3    <head>
 4        <meta charset="utf-8">
 5        <title>index</title>
 6        <link rel="stylesheet" type="text/css" href="./css/first.css" />
 7    </head>
 8    <body>
 9        <p>XXXX</p>
10    </body>
11</html>

CSS 代码：

1p {
2    color: red;
3}

浏览器显示效果：

入门全栈Java程序员——CSS

外部样式表

说明

rel 和 href 的取值都是固定的，href 中为 css 文件的路径

3.2 内部样式表

指的是把 Html 代码和 CSS 代码放在同一个 Html 文件中，css 代码放在，style 标签中，style 放在 head 标签中

语法：

css代码

</style>

代码：

 1<!DOCTYPE html>
 2<html>
 3    <head>
 4        <meta charset="utf-8">
 5        <title>index</title>
 6        <style type="text/css">
 7            p {
 8                color: red;
 9            }
10        </style>
11    </head>
12    <body>
13        <p>XXXX</p>
14    </body>
15</html>

浏览器效果：

入门全栈Java程序员——CSS

内部样式表

3.3 行内样式表

行内样式表指的是使用标签的 style 属性，来改变标签的样式

代码：

 1<!DOCTYPE html>
 2<html>
 3    <head>
 4        <meta charset="utf-8">
 5        <title>index</title>
 6    </head>
 7    <body>
 8        <p style="color: #FF0000 ;">XXXX</p>
 9    </body>
10</html>

浏览器效果：

入门全栈Java程序员——CSS

行内样式表

说明

根据上面的浏览器显示效果，我们发现，效果都是一样的，但是引入方式不同，我们在实际开发时，一般都是使用外部样式表，因为这种方式，可维护性强，通用性强

选择器

1. 元素的 id 和 class

id 和 class 是标签的基本属性，可以使用 id 和 class 进行元素的选择，来进行 Js 和 Css的操作

1.1 id 属性

id 属性值具有唯一性，一个页面中只能存在一个 id ，如果存在，那么 Css 就无法识别这个 id 对应的是哪个元素

1.2 class 属性

class 属性值，不具有唯一性，一个页面可以存在多个属性值相同的 class ，然后就会让具有相同 class 属性值的元素具有相同的Css样式

2. 选择器

一个页面中有很多的标签组成，选择器的作用就是，精确找到你要进行操作的标签

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #b {
                color: red;
            }
        </style>
    </head>
    <body>
        <p id="a">XXXX</p>
        <p id="b">XXXX</p>
        <p id="c">XXXX</p>
    </body>
</html>

浏览器效果：

入门全栈Java程序员——CSS

选择器

我们可以发现，三个相同的标签，我们使用选择器，精确的给第二个元素改变了样式，这就是选择器

3. Css 选择器

Css 选择器非常多，在这个阶段我们主要介绍五种

元素选择器
id 选择器
class 选择器
后代选择器
群组选择器

语法：

选择器 {

属性：取值；

}

2.1 元素选择器

元素选择器会选择指定的相同的元素去改变样式

语法：

元素 {

属性：取值；

}

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            p {
                color: red;
            }
        </style>
    </head>
    <body>
        <span>span</span>
        <p>p</p>
        <p>p</p>
        <div>div</div>
    </body>
</html>

浏览器效果：

入门全栈Java程序员——CSS

元素选择器

p {color:red;} 表示把页面中所有的 p 元素选中，然后把它们的文本颜色定义为红色

2.2 id 选择器

语法：

#id属性值 {

属性：取值；

}

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #col {
                color: red;
            }
        </style>
    </head>
    <body>
        <span>span</span>
        <p id="col">p</p>
        <div>div</div>
    </body>
</html>

浏览器显示效果：

入门全栈Java程序员——CSS

id 选择器

#col {color:red;} 表示选中 id="col" 的元素，然后定义它的文本颜色为红色

2.3 class 选择器

语法：

.class属性值 {

属性：取值；

}

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .col {
                color: red;
            }
        </style>
    </head>
    <body>
        <span>span</span>
        <p class="col">p</p>
        <div class="col">div</div>
    </body>
</html>

浏览器显示效果：

入门全栈Java程序员——CSS

class 选择器

.col {color:red;} 表示选中 class="col" 的元素，然后定义它的文本颜色为红色，我们知道 class 在页面中可以有多个，上面的例子中，将 p 元素和 div 元素设置为同一个 class ，它们都会改变文本样式为红色

2.4 后代选择器：

语法：

后代选择器是指，第一个选择器选中的元素，其内部含有子元素，然后可以在定义第二个选择器，选中这个子元素，以此类推

语法

第一个选择器第二个选择器（子元素）{

属性：取值；

}

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        #father .col {
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="father">
            <span>span</span>
            <p class="col">p</p>
            <div>div</div>
        </div>
    </body>
</html>

浏览器显示效果：

入门全栈Java程序员——CSS

后代选择器

#father .col {color:red;} 表示第一个选择器选中id=father 的元素，然后这个元素有三个子元素，.col 表示选中 class 为 col 的子元素，改变文本样式为红色

2.5 群组选择器

群组选择器指的是，同时对几个选择器进行相同的操作

语法：

选择器1，选择器2，...，选择器3 {

属性：取值；

}

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        #span,.col,div {
               color: red;
            }
        </style>
    </head>
    <body>
        <span id="span">span</span>
        <p class="col">p</p>
        <div>div</div>
    </body>
</html>

浏览器显示效果：

入门全栈Java程序员——CSS

群组选择器

#span 表示选中 id=“span” 的元素，.col 表示选中

class=“col” 的元素，div 表示选中页面中的 div 元素，几个选择器之间用逗号隔开

字体样式

1.字体样式属性表

属性	说明
font-family	字体类型
font-size	字体大小
font-weight	字体粗细
font-style	字体风格
color	字体颜色

2. 字体类型 font-family

语法：

font-family:字体1，...，字体n

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        p {
            font-family: "楷体","宋体";
        }
        </style>
    </head>
    <body>
        <p>慕阳源码</p>
    </body>
</html>

浏览器显示效果：

入门全栈Java程序员——CSS

font-family

这个属性可以定义一个字体，也可以定义多个字体，当定义多个字体时，属性值使用逗号隔开，当定义多个字体时，用户电脑如果没有安装第一种字体时，显示第二种字体，以此类推

3. 字体大小 font-size

语法：

font-size:像素值；

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        p {
            font-family: "楷体","宋体";
            font-size: 30px;
        }
        </style>
    </head>
    <body>
        <p>慕阳源码</p>
    </body>
</html>

浏览器显示效果：

入门全栈Java程序员——CSS

font-size

px 像素是font-size的单位，在初学时，我们掌握这一种单位就好

3. 字体粗细 font-size

语法：

font-weight:取值；

取值表：

属性值	说明
normal	正常
lighter	较细
bold	较粗
bolder	很粗

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        p {
            font-family: "楷体","宋体";
            font-size: 30px;
            font-weight: bold;
        }
        </style>
    </head>
    <body>
        <p>慕阳源码</p>
    </body>
</html>

浏览器显示效果：

入门全栈Java程序员——CSS

font-weight

font-weight 的取值还有100-900，不过在实际开发中基本不会使用到，例子使用的取值是 bold 其它的大家动手尝试一下

4. 字体风格：font-style

语法：

font-size:取值；

取值表：

属性值	说明
normal	正常
italic	斜体
oblique	斜体

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        p {
            font-family: "楷体","宋体";
            font-size: 30px;
            font-weight: bold;
            font-style: italic;
        }
        </style>
    </head>
    <body>
        <p>慕阳源码</p>
    </body>
</html>

浏览器显示效果：

入门全栈Java程序员——CSS

font-style

font-style 的属性取值中，有一些字体没有 italic 属性，这时使用 oblique 来实现

5. 字体颜色：color

语法：

color:颜色值；

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        p {
            font-family: "楷体","宋体";
            font-size: 30px;
            font-weight: bold;
            font-style: italic;
            color: red;
        }
        </style>
    </head>
    <body>
        <p>慕阳源码</p>
    </body>
</html>

浏览器显示效果：

入门全栈Java程序员——CSS

color

文本样式

1.文本样式属性表

属性	说明
text-indent	首行缩进
text-align	文本对齐
text-decoration	文本缩进
text-transform	大小写转换
line-height	行高

上一章节学习的字体样式是针对文字本身，而文本样式针对的是整个段落，在 Css 中，使用 font 和 text 前缀区别这两类样式

2. 首行缩进：text-indent

语法：

text-indent:像素值；

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            p {
                text-indent: 28px;
            }
        </style>
    </head>
    <body>
        <p>慕阳源码</p>
    </body>
</html>

浏览器显示效果：

入门全栈Java程序员——CSS

text-indent

在学 Html 时，我们发现 p 标签，没有首行缩进的功能，我们当时是使用6个  (空格)，来实现缩进首行缩进两个字的功能，现在我们可以使用 Css 的 text-indent 来实现这个功能了，有效的避免了代码的冗余

如果我们的字体大小设置为14px，那我们将 text-indent 设置为字体大小的两倍就好

3. 水平对齐：text-align

语法：

text-align:取值；

属性值见下表：

属性值	说明
left	左对齐
center	居中对齐
right	右对齐

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            p {
                text-align: center;
            }
            div {
                width: 200px;
                height: 100px;
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <div>
            <p>慕阳源码</p>
        </div>
    </body>
</html>

浏览器显示效果：

入门全栈Java程序员——CSS

text-align

在学 Html 时，我们学过 div 标签，使用 div 标签进行页面的布局，我们定义一个宽 200px，高 100px 的 div，在使用 text-align 属性值设为 center，发现文本是在 div 中居中对齐的

4. 文本修饰：text-decoration

语法：

text-decoration:取值；

属性值表：

属性值	说明
none	去除所有划线效果
underline	下划线
line-through	中划线
overline	顶划线

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            p {
                text-decoration: underline;
            }
        </style>
    </head>
    <body>
            <p>慕阳源码</p>
    </body>
</html>

浏览器显示效果：

入门全栈Java程序员——CSS

text-decoration

这个属性可以为超链接去除下划线，因为超链接的默认样式不太美观，极少的网站会使用它的默认样式

超链接默认显示效果：

入门全栈Java程序员——CSS

超链接默认显示效果

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            p {
                text-decoration: underline;
            }
            a {
                text-decoration: underline;
            }
        </style>
    </head>
    <body>
            <p>慕阳源码</p>
            <a href="">去除下划线</a>
    </body>
</html>

浏览器显示效果：

入门全栈Java程序员——CSS

为超链接去除下划线

5. 大小写：text-transform

语法：

text-transform:取值；

属性值表：

属性值	说明
none	无转换
uppercase	转化为大写
lowercase	转化为小写
capitalize	首字母转化为大写

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            p {
                text-transform: uppercase;
            }
        </style>
    </head>
    <body>
            <p>myym</p>
    </body>
</html>

浏览器显示效果：

入门全栈Java程序员——CSS

text-transform

6. 行高：line-height

语法：

line-height:取值；

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            p {
                line-height: 50px;
            }
        </style>
    </head>
    <body>
            <p>慕阳源码<br />慕阳源码</p>
            <span>慕阳源码<br />慕阳源码</span>
    </body>
</html>

浏览器显示效果：

入门全栈Java程序员——CSS

line-height

边框样式

1. 整体样式

语法：

border:border-width,border-style,border-color;

border-style 属性值表：

属性值	说明
none	无样式
dashed	虚线
solid	实现

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            p {
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
            <p>慕阳源码慕阳源码</p>
    </body>
</html>

浏览器显示效果：

入门全栈Java程序员——CSS

border

2. 局部样式

局部样式就是说，边框有上、下、左、右、四条边，我们也可以单独为某一条边进行单独的设置

属性表：

属性值	说明
border-top	上边框
border-bottom	下边框
border-left	左边框
border-right	右边框

我们以上边框为例：

代码：

<!DOCTYPE html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            p {
                border-top: 1px solid red;
            }
        </style>
    </head>
    <body>
            <p>慕阳源码慕阳源码</p>
    </body>
</html>

浏览器显示效果：

入门全栈Java程序员——CSS

border-top

当我们想要三条边框的样式，去除某一个边框的样式，我们应该怎么办？

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            p {
                width: 130px;
                border: 1px solid red;
                border-bottom:0px;
            }
        </style>
    </head>
    <body>
            <p>慕阳源码慕阳源码</p>
    </body>
</html>

浏览器显示效果：

入门全栈Java程序员——CSS

去除某一个边框的样式

列表样式

1. 列表项符号

语法：

list-style-type:取值

ol列表属性值表：

属性值	说明
decimal	1,2,3
lower-roman	i,ii,iii
upper-roman	I,II,III
lower-alpha	a,b,c
upper-alpha	A,B,C

ul列表属性值表：

属性值	说明
disc	实心圆
circle	空心圆
square	正方形

有序列表列表项为阿拉伯数字：

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            ol {
                list-style-type: decimal;
            }
        </style>
    </head>
    <body>
            <ol>
                <li>慕阳</li>
                <li>源码</li>
            </ol>
    </body>
</html>

浏览器显示效果：

入门全栈Java程序员——CSS

阿拉伯数字

有序列表列表项为阿拉伯数字：

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            ul {
                list-style-type: circle;
            }
        </style>
    </head>
    <body>
            <ul>
                <li>慕阳</li>
                <li>源码</li>
            </ul>
    </body>
</html>

浏览器显示效果：

入门全栈Java程序员——CSS

空心圆

如果我们要去除列表项符号怎么办？

语法:

list-style-type:none;

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            ol,ul {
                list-style-type: none;
            }
        </style>
    </head>
    <body>
            <ul>
                <li>我是无序列表</li>
                <li>慕阳</li>
                <li>源码</li>
            </ul>
            <ol>
                <li>我是有序列表</li>
                <li>慕阳</li>
                <li>源码</li>
            </ol>
    </body>
</html>

浏览器显示效果：

入门全栈Java程序员——CSS

去除列表项符号

表格样式

1. 表格边框合并

语法：

border-collapse:取值

属性值表：

属性值	说明
separate	边框分开
collapse	边框合并

表格边框默认样式：

入门全栈Java程序员——CSS

table 默认样式

使边框合并为一条：

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            table,td {
                border: 1px solid silver;
            }
            table {
                border-collapse: collapse;
            }
        </style>
    </head>
    <body>
        <table> 
            <tr>
                <td>css</td>
                <td>html</td>
            </tr>
        </table>
    </body>
</html>

浏览器显示效果：

入门全栈Java程序员——CSS

border-collapse

2. 表格边框间距：border-spacing

语法：

border-spacing:像素值；

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            table,td {
                border: 1px solid silver;
            }
            table {
                border-spacing: 10px;
            }
        </style>
    </head>
    <body>
        <table> 
            <tr>
                <td>css</td>
                <td>html</td>
            </tr>
        </table>
    </body>
</html>

浏览器显示效果：

入门全栈Java程序员——CSS

border-spacing

背景样式

1. 背景图片属性表

属性	说明
background-image	定义背景图片地址
background-repeat	定义背景图片重复
background-position	定义背景图片位置

2. 背景图片样式：background-image

语法：

background-image:url(图片路径);

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div {
                width: 200px;
                height: 200px;
                border: 1px solid silver;
                background-image: url(./image/1.png);
            }
        </style>
    </head>
    <body>
        <div>
        </div>
    </body>
</html>

浏览器显示效果：

入门全栈Java程序员——CSS

background-image

3. 背景图片重复

语法：

background-repeat：取值；

属性值表：

属性值	说明
repeat	x，y（默认值）
repeat-x	x
repeat-y	y
no-repeat	不平铺

我们将 div 容器设置为 400*400 显示效果为：

入门全栈Java程序员——CSS

默认值

我们在将其设为不平铺 no-repeat：

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div {
                width: 400px;
                height: 400px;
                border: 1px solid silver;
                background-image: url(./image/1.png);
                background-repeat: no-repeat;
            }
        </style>
    </head>
    <body>
        <div>
        </div>
    </body>
</html>

浏览器显示效果：

入门全栈Java程序员——CSS

no-repeat

4. 背景图片位置-像素值：backgrou-position

语法：

background-position:水平距离垂直距离；

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div {
                width: 400px;
                height: 400px;
                border: 1px solid silver;
                background-image: url(./image/1.png);
                background-repeat: no-repeat;
                background-position: 30px 30px;
            }
        </style>
    </head>
    <body>
        <div>
        </div>
    </body>
</html>

浏览器显示效果：

入门全栈Java程序员——CSS

像素值

使用像素值时，水平和垂直距离是相对父容器的左上角来说的

5. 背景图片位置-关键字：backgrou-position

语法：

background-position:水平距离垂直距离;

关键字：

入门全栈Java程序员——CSS

我们以图中的 center center 为例：

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div {
                width: 400px;
                height: 400px;
                border: 1px solid silver;
                background-image: url(./image/1.png);
                background-repeat: no-repeat;
                background-position: center center;
            }
        </style>
    </head>
    <body>
        <div>
        </div>
    </body>
</html>

浏览器显示效果：

入门全栈Java程序员——CSS

关键字

6. 背景颜色：background-color

语法：

background-color：颜色值;

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div {
                width: 100px;
                height: 100px;
                border: 1px solid silver;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div>
        </div>
    </body>
</html>

浏览器显示效果：

入门全栈Java程序员——CSS

background-color

超链接伪类

1. 超链接伪类表

伪类	说明
a:link	未访问时的样式
a:visited	访问后的样式
a:hover	经过时的样式
a:active	点击激活是的样式

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            a {
                text-decoration: none;
            }
            a:link {color: red;}
            a:visited {color: pink;}
            a:hover {color:green}
            a:active {color:blue}
        </style>
    </head>
    <body>
        <a href="http://www.baidu.com" target="_blank">百度</a>
    </body>
</html>

浏览器显示效果：

入门全栈Java程序员——CSS

超链接伪类

这个希望大家去 HBuilder 中敲一下，会有一个直观的感受

盒子模型

1. 盒子模型组成部分

属性	说明
content	内容（文本或图片）
padding	内边距（内容据边框的距离）
margin	外边距（当前元素和其它元素之间的距离）
border	边框（元素的边框）

盒子模型：

入门全栈Java程序员——CSS

盒子模型

2. 内容区

内容区位于 CSS 盒子模型的中心，内容可以是文本、图片，内容区是盒子模型必备的组成部分，其余3个部分是可选的

内容区属性表：

属性	说明
width	宽度
height	高度
overflow	内容溢出时，指定溢出的处理方式

3. 内边距

内边距值得是内容和边框之间的距离

内边距属性表：

属性	说明
padding	上、下、左、右
padding-top	上
padding-bottom	下
padding-left	左
padding-right	右

4. 外边距

外边距指的是两个盒子之间的距离，它可以是子元素和父元素之间的距离，也可以兄弟元素之间的距离

外边距属性表：

属性	说明
margin	上、下、左、右
margin-top	上
margin-bottom	下
margin-left	左
margin-right	右

5. 举例说明

代码：

<!DOCTYPE html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div {
                display: inline-block;
                background-color: pink;
                border: 2px solid red;
                margin: 30px;
                padding: 20px;
            }
        </style> 
    </head>
    <body>
        <div>慕阳源码</div>
    </body>
</html>

浏览器显示效果：

入门全栈Java程序员——CSS

效果

此时的盒子模型：

入门全栈Java程序员——CSS

当前盒子模型

浮动布局

1. 讲解浮动布局之前，深入学习一下行内元素，行内块元素和块级元素

区别如下：

行内元素：

行内元素不会独占一行，多个相邻的行内元素会排列在同一行里，知道这里行排列不下，才会换行
行内元素对其设置宽、高是无效的，其宽度会随元素内容变化而变化，对于 margin 和 padding 两个属性，其在水平方向上生效，而在竖直方向上是无效的

块级元素：

块级元素总是独占一行，宽度，高度，内边距，外边距都是可以控制的

行块级元素：

融合了行级元素和块级元素的特点，既可以在一行中显示，又可以设置宽高，并且内边距和外边距也都是可以控制的

转化表：

语法	说明
display:inline	转为行内元素
display:block	转为块级元素
display:inline-block	转为行块元素

2. 正常文档流

正常文档流指的是，将页面从上到下分为一行一行，其中块元素独占一行，相邻行内元素中从左到右排列直到该行排满，也就是说，正常文档流指的是默认情况下的 Html 文档结构

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        </style> 
    </head>
    <body>
        <div></div>
        <span></span><span></span>
        <p></p>
        <img><img>
        <hr />
    </body>
</html>

正常文档流的 Html 结构：

入门全栈Java程序员——CSS

正常文档流

3. 脱离文档流

当我们使用浮动和定位去改变页面默认的 Html 结构时，称为脱离文档流

3.1 浮动

语法：

float:取值;

属性值表：

属性值	说明
left	元素向左浮动
right	元素向右浮动

初始化设置：

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box1 {width: 300px;background-color: blue;border: 1px solid silver;}
            .box1 div {
                margin: 15px;
                padding: 10px;
            }
            .box2 {background-color: red;}
            .box3 {background-color: yellow;}
        </style> 
    </head>
    <body>
        <div class="box1">
            <div class="box2">s1</div>
            <div class="box3">s2</div>
        </div>
    </body>
</html>

浏览器显示效果：

入门全栈Java程序员——CSS

正常文档流

设置 s1 浮动：

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box1 {width: 300px;background-color: blue;border: 1px solid silver;}
            .box1 div {
                margin: 15px;
                padding: 10px;
            }
            .box2 {background-color: red;float:left;}
            .box3 {background-color: yellow;}
        </style> 
    </head>
    <body>
        <div class="box1">
            <div class="box2">s1</div>
            <div class="box3">s2</div>
        </div>
    </body>
</html>

浏览器显示效果：

入门全栈Java程序员——CSS

s1 浮动后

因为 s1 向左浮动后变为浮动元素，此时其宽度不再延伸，由其中的内容决定其宽度，所以相邻的 s2 就会紧贴着 s1

设置 s2 浮动

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box1 {width: 300px;background-color: blue;border: 1px solid silver;}
            .box1 div {
                margin: 15px;
                padding: 10px;
            }
            .box2 {background-color: red;float:left;}
            .box3 {background-color: yellow;float:left;}
        </style> 
    </head>
    <body>
        <div class="box1">
            <div class="box2">s1</div>
            <div class="box3">s2</div>
        </div>
    </body>
</html>

浏览器显示效果：

入门全栈Java程序员——CSS

s1、s2 浮动后

当 s1 、s2 都设置浮动后我们发现父元素变成了一条线，这是由于浮动引起的，接下来我们学习消除浮动，解决这个问题

4. 消除浮动

语法：

clear:取值;

属性值表：

属性值	说明
left	清除左浮动
right	清除右浮动
both	同时清除左右浮动

现在我们来清除浮动，使父元素恢复正常：

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box1 {width: 300px;background-color: blue;border: 1px solid silver;}
            .box1 div {
                margin: 15px;
                padding: 10px;
            }
            .box2 {background-color: red;float:left;}
            .box3 {background-color: yellow;float:left;}
            .clear {clear: both;}
        </style> 
    </head>
    <body>
        <div class="box1">
            <div class="box2">s1</div>
            <div class="box3">s2</div>
            <div class="clear"></div>
        </div>
    </body>
</html>

浏览器显示效果：

入门全栈Java程序员——CSS

清除浮动

定位

1. 定位属性值表

属性值	说明
fixed	固定定位
relative	相对定位
absolute	绝对定位

2. 固定定位：fixed

所谓的固定就说，被固定的元素不会随着滚动条的拖动而改变位置

语法：

position:flxed;

top:像素值;

right:像素值;

bottom:像素值;

left:像素值;

先使用 fixed 使元素固定，之后使用，top、right、bottom、left 来设置元素相对浏览器的位置（四条边）

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box1 {width: 100px;height: 1000px;border: 1px solid silver;background-color: green;}
            .box2 {position: fixed;top: 30px;left: 100px;width: 50px;height: 50px;background-color: yellow;border: 1px solid red;}
        </style> 
    </head>
    <body>
            <div class="box1">b1</div>
            <div class="box2">b2</div>
    </body>
</html>

浏览器显示效果：

入门全栈Java程序员——CSS

固定定位

3. 相对定位：relative

相对定位是说，元素相对于它的原始位置计算而来

语法：

position:relative;

top:像素值;

right:像素值;

bottom:像素值;

left:像素值;

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box1 {width: 100px;height: 100px;border: 1px solid silver;background-color: green;}
        </style> 
    </head>
    <body>
            <div class="box1">b1</div>
    </body>
</html>

浏览器显示效果：

入门全栈Java程序员——CSS

b1 初始位置

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box1 {width: 100px;height: 100px;border: 1px solid silver;background-color: green;
            position: relative;top:50px;left: 50px;}
        </style> 
    </head>
    <body>
            <div class="box1">b1</div>
    </body>
</html>

浏览器显示效果：

入门全栈Java程序员——CSS

相对定位后的位置

4. 绝对定位：absolute

一个元素如果对其使用绝对定位，那么这个元素就完全脱离文档流了，此时这个元素在所有元素的最上层，完全独立出来了

语法：

position:absolute;

top:像素值;

right:像素值;

bottom:像素值;

left:像素值;

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box1 {width: 100px;height: 100px;border: 1px solid silver;background-color: green; }
            .box2 {width: 100px;height: 100px;border: 1px solid silver;background-color: red;position:absolute ;
            top: 30px;left: 30px;}
        </style> 
    </head>
    <body>
            <div class="box1">b1</div>
            <div class="box2">b2</div>
    </body>
</html>

浏览器显示效果：

入门全栈Java程序员——CSS

绝对定位

固定定位和绝对定位的位置相对于浏览器，而相对定位的位置是相对与元素原始位置而定的

▼

往期精彩回顾

▼

扫一扫，关注我

申请加入Java新手村

戳 “阅读原文”一起来充电吧!

vlambda博客
学习文章列表