CSS入门

CSS入门

  • 1_CSS概要
    • 1.1_CSS引入方式
  • 2_CSS选择器
  • 3_字体样式
    • 3.1_字体属性
    • 3.2_字体类型：font-family
    • 3.3_字体大小：font-size
    • 3.4_字体粗细：font-weight
    • 3.5_字体颜色：color
    • 3.6_总结
  • 4_文本样式
    • 4.1_文本样式属性
    • 4.2_首行缩进：text-indent
    • 4.3_水平对齐：text-align
    • 4.4_文本修饰（划线）：text-decoration
    • 4.5_大小写：text-transform
    • 4.6_行高：line-height
    • 4.7_间距：letter-spacing、word-spacing
  • 5_边框
    • 5.1_边框的属性
    • 5.2_边框属性详细使用
    • 5.3_局部样式
  • 6_列表样式
  • 6.1_列表项符号（一般不使用此方法）：list-style-type
    • 6.2_列表项图片：list-style-image
  • 7_表格
    • 7.1_表格标题位置
    • 7.2_表格边框合并：border-collapse
    • 7.3_表格边框间距：border-spacing
  • 8_图片样式
    • 8.1_图片大小
    • 8.2_图片边框：border
    • 8.3_图片或文本对齐：text-align
    • 8.4_文字环绕：float
  • 9_背景样式
    • 9.1_背景颜色和背景图片
    • 9.2_背景颜色：background-color
    • 9.3_背景图片样式：background-image
    • 9.4_背景图片重复：background-repeat
    • 9.5_背景图片位置：background-position
    • 9.6_背景图片固定：background-attachment
  • 10_伪类（鼠标状态）
    • 10.1_四个伪类
    • 10.2_深入了解:hover
    • 10.3_鼠标样式
  • 11_盒子模型
    • 11.1_盒子模型组成部分
    • 11.2_宽高：width、height
    • 11.3_内边距：padding
    • 11.4_外边距：margin
  • 12_浮动布局
    • 12.1_设置浮动
    • 12.2_清除浮动
  • 13_定位布局
    • 13.1_定位布局属性
    • 13.2_固定定位（相对于屏幕）：fixed
    • 13.3_相对定位：relative
    • 13.4_绝对定位（相对于页面）：absolute

1_CSS概要

1.1_CSS引入方式

（1）外部样式表
（2）内部样式表
（3）行内样式表

  1. 外部样式表
    外部样式表是最理想的CSS引入方式。所谓的外部样式表，指的是把CSS代码和HTML代码都单独放在不同文件中，然后在HTML文档中使用link标签来引用CSS样式表。
    <link rel="stylesheet" type="text/css" href="文件路径" />
  1. 内部样式表
    内部样式表，指的是把HTML代码和CSS代码放到同一个HTML文件中。其中，CSS代码放在style标签内，并且style标签是放在head标签内部的。
    <style type="text/css"> …… </style>
  1. 行内样式表
    行内样式表跟内部样式表类似，也是把HTML代码和CSS代码放到同一个HTML文件。但是两者有着本质的区别：内部样式表的CSS是在“style标签”内定义的，而行内样式表的CSS是在“标签的style属性”中定义的。

外部样式表：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
</body>
</html>

内部样式表：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title></title><style type="text/css">div{color:red;}</style>
</head>
<body><div>绿叶，给你初恋般的感觉。</div><div>绿叶，给你初恋般的感觉。</div><div>绿叶，给你初恋般的感觉。</div>
</body>
</html>

行内样式表：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title></title>
</head>
<body><div style="color:red;">绿叶，给你初恋般的感觉。</div><div style="color:red;">绿叶，给你初恋般的感觉。</div><div style="color:red;">绿叶，给你初恋般的感觉。</div>
</body>
</html>

2_CSS选择器

5种选择器

3_字体样式

3.1_字体属性

表1 字体相关的CSS属性
属性说明
font-family字体类型
font-size字体大小
font-weight字体粗细
font-style字体风格
color字体颜色

3.2_字体类型：font-family

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">#div1{font-family: Arial;} /*如果字体类型只有一个英文单词，则不需要加上双引号*/#div2{font-family: "Times New Roman";}#div3{font-family: "微软雅黑";}#div4{font-family:Arial,Verdana,Georgia;}</style>
</head>
<body><div id="div1">Arial</div><div id="div2">Times New Roman</div><div id="div3">微软雅黑</div><div id="div4">其实原因是这样的：每个人的电脑装的字体都不一样，有些字体有安装，但也有些字体没有安装。p{font-family:Arial,Verdana,Georgia;}这一句的意思是：p元素优先使用“Aria字体”来显示，如果你的电脑没有装“Arial字体”，那就接着考虑“Verdana字体”。如果你的电脑还是没有装“Verdana字体”，那就接着考虑“Georgia字体”</div>
</body>
</html>

3.3_字体大小：font-size

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">#p1 {font-size: 10px;}#p2 {font-size: 15px;}#p3 {font-size: 20px;}</style>
</head>
<body><p id="p1">字体大小为10px</p><p id="p2">字体大小为15px</p><p id="p3">字体大小为20px</p>
</body>
</html>

3.4_字体粗细：font-weight

font-weight属性取值有两种：一种是“100~900的数值”；另外一种是“关键字”。其中，关键字取值如下表所示。

表1 font-weight属性取值
属性值说明
normal正常（默认值）
lighter较细
bold较粗（一般我们只会用到bold这一个属性值）
bolder很粗（其实效果跟bold差不多）
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">#p1 {font-weight: 100;}#p2 {font-weight: 400;}#p3{font-weight:bold;}#p4{font-weight:bolder;}</style>
</head>
<body><p id="p1">字体粗细为:100（lighter）</p><p id="p2">字体粗细为:400（normal）</p><p id="p3">字体粗细为:700（bold）</p><p id="p4">字体粗细为:900（bolder）</p>
</body>
</html>

3.5_字体颜色：color

color属性取值有两种：**一种是“关键字”、另外一种是“16进制RGB值”。**除了这两种，其实还有RGBA、HSL等，不过后面那几个都是属于CSS3的内容。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">#p1{color:gray;}#p2{color: #048C02;}</style>
</head>
<body><p id="p1">字体颜色为灰色</p><p id="p2">#048C02</p>
</body>
</html>

3.6_总结

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">p{font-family:Arial,Verdana,Georgia;color:blue;font-size:14px;font-weight:bolder;}</style>
</head>
<body><p>“有规划的人生叫蓝图，没规划的人生叫拼图。</p>
</body>
</html>

4_文本样式

4.1_文本样式属性

表1 文本样式属性
属性说明
text-indent首行缩进
text-align水平对齐
text-decoration文本修饰
text-transform大小写转换
line-height行高
letter-spacing字母间距
word-spacing词间距

4.2_首行缩进：text-indent

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">p{font-size:14px;text-indent:28px;/*首行缩进28像素*/}</style>
</head>
<body><h3>爱莲说</h3><p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p><p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人? 牡丹之爱，宜乎众矣。</p>
</body>
</html>

4.3_水平对齐：text-align

表1 text-align属性取值
属性值说明
left左对齐（默认值）
center居中对齐
right右对齐
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">#p1{text-align:left;}#p2{text-align:center;}#p3{text-align:right;}</style>
</head>
<body><p id="p1"><strong>左对齐</strong>:好好学习，天天向上。</p><p id="p2"><strong>居中对齐</strong>:好好学习，天天向上。</p><p id="p3"><strong>右对齐</strong>:好好学习，天天向上。</p>
</body>
</html>

4.4_文本修饰（划线）：text-decoration

表1 text-decoration属性取值
属性值说明
none去除所有的划线效果（默认值）
underline下划线
line-through中划线
overline顶划线
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">#p1{text-decoration:underline;}#p2{text-decoration:line-through;}#p3{text-decoration:overline;}</style>
</head>
<body><p id="p1">这是“下划线”效果</p><p id="p2">这是“删除线”效果</p><p id="p3">这是“顶划线”效果</p>
</body>
</html>

4.5_大小写：text-transform

在CSS中，我们可以使用text-transform属性来将文本进行大小写转换。text-transform属性是针对英文而言，因为中文不存在大小写之分。

表1 text-transform属性取值
属性值说明
none无转换（默认值）
uppercase转换为大写
lowercase转换为小写
capitalize只将每个英文单词首字母转换为大写

4.6_行高：line-height

line-height属性涉及的理论知识非常多，也极其重要，这一节只是简单接触一下。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">#p1{line-height:15px;}#p2{line-height:20px;}#p3{line-height:25px;}</style>
</head>
<body><p id="p1">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p><hr/><p id="p2">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p><hr/><p id="p3">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
</body>
</html>

4.7_间距：letter-spacing、word-spacing

  1. 字间距
    letter-spacing: 像素值;
  1. 词间距
    word-spacing: 像素值;

字间距：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">#p1{letter-spacing:0px;}#p2{letter-spacing:3px;}#p3{letter-spacing:5px;}</style>
</head>
<body><p id="p1">Rome was't built in a day.罗马不是一天建成的。</p><hr/><p id="p2">Rome was't built in a day.罗马不是一天建成的。</p><hr/><p id="p3">Rome was't built in a day.罗马不是一天建成的。</p>
</body>
</html>

词间距：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">#p1{word-spacing:0px;}#p2{word-spacing:3px;}#p3{word-spacing:5px;}</style>
</head>
<body><p id="p1">Rome was't built in a day.罗马不是一天建成的。</p><hr/><p id="p2">Rome was't built in a day.罗马不是一天建成的。</p><hr/><p id="p3">Rome was't built in a day.罗马不是一天建成的。</p>
</body>
</html>

5_边框

5.1_边框的属性

想要为一个元素定义边框样式，必须要同时设置border-width、border-style、border-color属性才会有效果。

表1 边框样式属性
属性说明
border-width边框的宽度
border-style边框的外观
border-color边框的颜色

5.2_边框属性详细使用

  1. border-width
    border-width属性用于定义边框的宽度，取值是一个像素值。
  1. border-style
    border-style属性用于定义边框的外观，常用取值如下表所示。
表1 border-style属性取值
属性值说明
none无样式
dashed虚线
solid实线

除了上表列出这几个，还有hidden、dotted、double等取值。不过其他取值几乎用不上，可以直接忽略

  1. border-color
    border-color属性用于定义边框的颜色，取值可以是“关键字”或“16进制RGB值”。

简写形式：

border: 1px solid red;

5.3_局部样式

一个元素其实有4条边（上、下、左、右），上一节我们学习的是4条边的整体样式。那么如果想要对某一条边进行单独设置，这该怎么实现呢？

在这里插入图片描述

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">div{width: 100px;                       /*div元素宽为100px*/height: 60px;                       /*div元素高为60px*/border-top: 2px solid red;          /*上边框样式*/border-right: 2px solid yellow;     /*右边框样式*/border-bottom: 2px solid blue;      /*下边框样式*/border-left: 2px solid green;       /*左边框样式*/}</style>
</head>
<body><div></div>
</body>
</html>

6_列表样式

6.1_列表项符号（一般不使用此方法）：list-style-type

在CSS中，不管是有序列表还是无序列表，我们都是使用list-style-type属性来定义列表项符号。
语法：
list-style-type: 取值;

表1去除列表项符号
属性值说明
none无符号
由于列表项符号比较丑，因此在实际开发中，大多数情况下我们都需要使用list-style-type:none;去掉。
表2 ol的list-style-type属性取值
属性值说明
decimal阿拉伯数字：1、2、3…（默认值）
lower-roman小写罗马数字：i、ii、iii…
upper-roman大写罗马数字：I、II、III…
lower-alpha小写英文字母：a、b、c…
upper-alpha大写英文字母：A、B、C…
表1 ul的list-style-type属性取值
属性值说明
disc实心圆●（默认值）
circle空心圆○
square正方形■

6.2_列表项图片：list-style-image

在CSS中，我们可以使用list-style-image属性来定义列表项图片，也就是使用图片来代替列表项符号。
语法：
list-style-image: url(图片路径);

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">ul{list-style-image: url(img/leaf.png);}</style>
</head>
<body><ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul>
</body>
</html>

list-style-image属性实际上就是把列表项符号改为一张图片，而引用一张图片就要给出图片的路径。在真正的开发项目中，一般情况下我们都不会用list-style-image属性来实现，而是使用更为高级的iconfont图标技术来实现，这个自行百度。

7_表格

7.1_表格标题位置

默认情况下，表格标题是在表格的上方。如果想要把表格标题放在表格的下方，应该怎么去实现呢？
在CSS中，我们可以使用caption-side属性来定义表格标题的位置。
语法：
caption-side: 取值;

表1 caption-side属性取值
属性值说明
top标题在顶部（默认值）
bottom标题在底部

7.2_表格边框合并：border-collapse

从前面的学习中可以知道，表格加入边框后的页面效果中，单元格之间是有一定空隙的。但是在实际开发中，为了让表格更加美观，我们都是要把单元格之间的空隙去除。
在CSS中，我们可以使用border-collapse属性来去除单元格之间的空隙，也就是将两条边框合并为一条。
语法：
border-collapse: 取值;

表1 border-collapse属性取值
属性值说明
separate边框分开，有空隙（默认值）
collapse边框合并，无空隙

7.3_表格边框间距：border-spacing

上一节介绍了如何去除表格边框间距，但是在实际开发中，有时候我们却需要定义一下表格边框的间距。
在CSS中，我们可以使用border-spacing属性来定义表格边框间距。
语法：
border-spacing: 像素值;

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">table,th,td{border:1px solid silver;}table{border-spacing: 8px;}/**/</style>
</head>
<body><table><caption>表格标题</caption><!--表头--><thead><tr><th>表头单元格1</th><th>表头单元格2</th></tr></thead><!--表身--><tbody><tr><td>表行单元格1</td><td>表行单元格2</td></tr></tbody><!--表脚--><tfoot><tr><td>表行单元格5</td><td>表行单元格6</td></tr></tfoot></table>
</body>
</html>

8_图片样式

8.1_图片大小

语法：
width: 像素值;height: 像素值;

8.2_图片边框：border

语法
border: 1px solid red;

8.3_图片或文本对齐：text-align

  1. 水平对齐
    text-align属性一般只用于两个地方：文本水平对齐和图片水平对齐。
    语法：
    text-align: 取值;
    很多人以为图片的水平对齐是在img元素中定义，其实这是错的。图片是在父元素中进行水平对齐，因此我们当然是在图片的父元素中定义啦。
表1 text-align属性取值
属性值说明
left左对齐（默认值）
center居中对齐
right右对齐
  1. 垂直对齐
    语法：
    vertical-align: 取值;
表2 vertical-align属性取值
属性值说明
top顶部对齐
middle中部对齐
baseline基线对齐
bottom底部对齐
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">img{ width: 60px; height: 60px; }#img1{ vertical-align: top; }#img2{ vertical-align: middle; }#img3{ vertical-align: bottom; }#img4{ vertical-align: baseline; }</style>
</head>
<body>绿叶学习网<img id="img1" src="img/girl.gif" alt=""/>绿叶学习网（top）<hr/>绿叶学习网<img id="img2" src="img/girl.gif" alt=""/>绿叶学习网（middle）<hr/>绿叶学习网<img id="img3" src="img/girl.gif" alt=""/>绿叶学习网（bottom）<hr/>绿叶学习网<img id="img4" src="img/girl.gif" alt=""/>绿叶学习网（baseline）
</body>
</html>

在这里插入图片描述

8.4_文字环绕：float

语法：
float: 取值;

表1 float属性取值
属性值说明
left元素向左浮动
right元素向右浮动

9_背景样式

9.1_背景颜色和背景图片

在CSS中，背景样式包括两个方面：背景颜色和背景图片。
在CSS中，定义“背景颜色”使用的是background-color属性，而定义“背景图片”则比较复杂，往往涉及以下属性。

表1 背景样式属性
属性说明
background-image定义背景图片地址
background-repeat定义背景图片重复，例如横向重复、纵向重复
background-position定义背景图片位置
background-attachment定义背景图片固定

9.2_背景颜色：background-color

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">div{width:100px;height:60px;}#div1{background-color: hotpink}/*关键字定义背景颜色*/#div2{background-color: #87CEFA;}</style>
</head>
<body><div id="div1">背景颜色为：hotpink</div><div id="div2">背景颜色为：#87CEFA</div>
</body>
</html>

9.3_背景图片样式：background-image

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

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">div{width:250px;/*必须给出宽和高，默认为0*/height:170px;background-image: url(img/haizei.png);}</style>
</head>
<body><div></div>
</body>
</html>

9.4_背景图片重复：background-repeat

语法：
background-repeat: 取值;

表1 background-repeat属性取值
属性值说明
repeat在水平方向和垂直方向上同时平铺（默认值）
repeat-x只在水平方向（x轴）上平铺
repeat-y只在垂直方向（y轴）上平铺
no-repeat不平铺
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">div{width:200px;height:100px;border: 1px solid silver;background-image: url(img/flower.png);}#div2{background-repeat: repeat-x}#div3{background-repeat: repeat-y}#div4{background-repeat: no-repeat}</style>
</head>
<body><div id="div1"></div><div id="div2"></div><div id="div3"></div><div id="div4"></div>
</body>
</html>

9.5_背景图片位置：background-position

在实际开发中，background-position一般用于实现CSS Spirit（精灵图片）。
语法：
background-position: 像素值/关键字;
background-position属性常用取值有两种：一种是“像素值”；另外一种是“关键字”（这里不考虑百分比取值）。

  1. 像素值
    语法：
    background-position: 水平距离 垂直距离;
    background-position属性设置的两个值是相对该元素的左上角来说的
  1. 关键字
表1 关键字
属性值说明
top left左上
top center靠上居中
top right右上
center left居中靠左
center center正中
center right居中靠右
bottom left左下
bottom center靠下居中
bottom right右下

9.6_背景图片固定：background-attachment

在CSS中，我们可以使用background-attachment属性来定义背景图片是随元素一起滚动还是固定不动。
语法：

background-attachment: 取值;
表1 background-attachment属性取值
属性值说明
scroll随元素一起滚动（默认值）
fixed固定不动

10_伪类（鼠标状态）

10.1_四个伪类

表1 超链接伪类
伪类说明
a:link定义a元素未访问时的样式
a:visited定义a元素访问后的样式
a:hover定义鼠标经过a元素时的样式（只用记这个）
a:active定义鼠标点击激活时的样式

10.2_深入了解:hover

语法：
元素:hover{…}

<!DOCTYPE html> 
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">div{width:100px;height:30px;line-height:30px;text-align:center;color:white;background-color: lightskyblue;}div:hover/*鼠标经过时背景颜色改变*/{background-color: hotpink;}</style>
</head>
<body><div>绿叶学习网</div>
</body>
</html>

10.3_鼠标样式

  1. 浏览器鼠标样式
    语法：
    cursor: 取值;

在这里插入图片描述

<!DOCTYPE html> 
<html>
<head><meta charset="utf-8" /><style type="text/css">div{width:100px;height:30px;line-height:30px;text-align:center;background-color: hotpink;color:white;font-size:14px;cursor:default;}div:hover{cursor:pointer;}/*定义鼠标经过时变为手状*/</style>
</head>
<body><div>鼠标样式</div>
</body>
</html>
  1. 自定义鼠标样式
    语法：

cursor: url(图片地址), 属性值;

这个“图片地址”是鼠标图片地址，其中鼠标图片后缀名一般都是.cur，我们可以使用Photoshop来制作，小伙伴们自行搜索一下制作方法。

而这个“属性值”一般为3种：default、pointer和text。

<!DOCTYPE html> 
<html>
<head><meta charset="utf-8" /><style type="text/css">div{width:100px;height:30px;line-height:30px;text-align:center;background-color: hotpink;color:white;font-size:14px;}#div_default{cursor:url(img/cursor/default.cur),default;}#div_pointer{cursor:url(img/cursor/pointer.cur),pointer;}</style>
</head>
<body><div id="div_default">鼠标默认样式</div><div id="div_pointer">鼠标手状样式</div>
</body>
</html>

11_盒子模型

浏览器审查元素
浏览器提供的控制台功能非常强大，远不止这一个功能。使用浏览器控制台辅助开发，这是前端开发必备的一项基础技能。

11.1_盒子模型组成部分

表1 盒子模型组成部分
属性说明
content内容，可以是文本或图片
padding内边距，用于定义内容与边框之间的距离
margin外边距，用于定义当前元素与其他元素之间的距离
border边框，用于定义元素的边框

在这里插入图片描述

在这个例子中，display:inline-block表示将元素转换为行内块元素（即inline-block），其中inline-block元素的宽度是由内容区撑起来的。我们之所以在这个例子中将元素转换为inline-block元素，也是为了让元素的宽度由内容区撑起来，以便更好地观察。

11.2_宽高：width、height

语法：
width: 像素值; height: 像素值;

只有块元素才可以设置width和height，行内元素是无法设置width和height的。（我们这里不考虑inline-block元素）

11.3_内边距：padding

语法：

padding-top: 像素值;
padding-right: 像素值;
padding-bottom: 像素值;
padding-left: 像素值;

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">div{display:inline-block;   /*将块元素转换为inline-block元素*/padding-top:20px;padding-right:40px;padding-bottom:60px;padding-left:80px;border:2px solid red;background-color:#FFDEAD;}</style>
</head>
<body><div>绿叶学习网</div>
</body>
</html>

在这里插入图片描述

简写形式

padding: 像素值;/*表示4个方向的内边距都是20px。*/
padding: 像素值1 像素值2;/*表示padding-top和padding-bottom为像素值1，padding-right和padding-left为像素值2。*/
padding: 像素值1 像素值2 像素值3 像素值4;/*表示padding-top为像素值1，padding-right为像素值2，padding-bottom为像素值3，padding-left为像素值4。*/

11.4_外边距：margin

外边距指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。
语法：

margin-top: 像素值;
margin-right: 像素值;
margin-bottom: 像素值;
margin-left: 像素值;

举例：只有父元素，没有兄弟元素时

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">#father{display: inline-block;      /*将块元素转换为inline-block元素*/border:1px solid blue;}#son{display:inline-block;       /*将块元素转换为inline-block元素*/padding:20px;margin-top:20px;margin-right:40px;margin-bottom:60px;margin-left:80px;border:1px solid red;background-color:#FFDEAD;}</style>
</head>
<body><div id="father"><div id="son">绿叶学习网</div></div>
</body>
</html>

在这里插入图片描述

举例：有兄弟元素时

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">#father{display: inline-block;      /*将块元素转换为inline-block元素*/border:1px solid blue;}#son{display:inline-block;   /*将块元素转换为inline-block元素*/padding:20px;margin-top:20px;margin-right:40px;margin-bottom:60px;margin-left:80px;border:1px solid red;background-color:#FFDEAD;}.brother{height:50px;background-color:lightskyblue;}</style>
</head>
<body><div id="father"><div class="brother"></div><div id="son">绿叶学习网</div><div class="brother"></div></div>
</body>
</html>

在这里插入图片描述

12_浮动布局

12.1_设置浮动

语法：
float: 取值;

表1 float属性取值
属性值说明
left元素向左浮动
right元素向右浮动

12.2_清除浮动

语法：
clear: 取值;

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

13_定位布局

13.1_定位布局属性

表1 position属性取值
属性值说明
fixed固定定位
relative相对定位
absolute绝对定位
static静态定位（默认值）

13.2_固定定位（相对于屏幕）：fixed

语法：

position: fixed;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;

说明：

position:fixed;是结合top、bottom、left和right这4个属性一起使用的。其中，position:fixed使得元素成为固定定位元素，接着使用top、bottom、left和right这4个属性来设置元素相对于屏幕的位置。

top、bottom、left和right这4个属性不一定全部都用到，一般只会用到其中两个。注意，这4个值的参考对象是浏览器的4条边。

13.3_相对定位：relative

语法：

position: relative;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;

说明： 注意，在默认情况下，固定定位元素的位置是相对浏览器而言，而相对定位元素的位置是相对于原始位置而言！

13.4_绝对定位（相对于页面）：absolute

一个元素变成了绝对定位元素，这个元素就完全脱离文档流了，绝对定位元素的前面或后面的元素会认为这个元素并不存在，此时这个元素浮于其他元素上面，已经完全独立出来了。
语法：

position: absolute;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/545267.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

23张图！万字详解「链表」，从小白到大佬！

23张图！万字详解「链表」，从小白到大佬！

作者 | 王磊来源 | Java中文社群&#xff08;ID&#xff1a;javacn666&#xff09;转载请联系授权&#xff08;微信ID&#xff1a;GG_Stone&#xff09;链表和数组是数据类型中两个重要又常用的基础数据类型。数组是连续存储在内存中的数据结构&#xff0c;因此它的优势是可以通…
阅读更多...
何为“秒传”

何为“秒传”

写在前面 最近一直在弄文件传输的组件&#xff0c;在讨论组里面&#xff0c;有同事提到“秒传”的功能。在目前的通信软件中也有网盘的功能&#xff0c;就从网上搜了一下&#xff0c;这里对“秒传”的实现思路做一下总结&#xff0c;在之后会写一个小的demo实现一下。没有其他&…
阅读更多...
数组转List的3种方法和使用对比！

数组转List的3种方法和使用对比！

作者 | 大脑补丁来源 | blog.csdn.net/x541211190/article/details/79597236前言&#xff1a;本文介绍Java中数组转为List三种情况的优劣对比&#xff0c;以及应用场景的对比&#xff0c;以及程序员常犯的类型转换错误原因解析。一.最常见方式&#xff08;未必最佳&#xff09;…
阅读更多...
oracle10g备份导入

oracle10g备份导入

2019独角兽企业重金招聘Python工程师标准>>> //导出 exp test/testgdsoft filed:\gd.dmp //删用户 drop user wkwx cascade; //用PLSQL创建数据数据库 create user hzjzjn identified by hzjzjn default tablespace BDP_DATABD; grant CREATE USER,DROP USER,ALTE…
阅读更多...
VisualSVNServer的使用

VisualSVNServer的使用

VisualSVNServer的使用1_服务端初识1.1_创建新仓库1.2_创建用户并分配权限1_服务端初识 1.1_创建新仓库 右击Repository&#xff0c;点击create 点击下一步 输入仓库名 右击空白处&#xff0c;点击新建&#xff0c;点击project structure 输入工程名 1.2_创建用户并分…
阅读更多...
安利一个IDEA骚操作:一键生成方法的序列图

安利一个IDEA骚操作:一键生成方法的序列图

在平时的学习/工作中&#xff0c;我们会经常面临如下场景&#xff1a;阅读别人的代码阅读框架源码阅读自己很久之前写的代码。千万不要觉得工作就是单纯写代码&#xff0c;实际工作中&#xff0c;你会发现你的大部分时间实际都花在了阅读和理解已有代码上。为了能够更快更清晰地…
阅读更多...
c#中textbox属性_C＃.Net中带有示例的TextBox.Multiline属性

c#中textbox属性_C＃.Net中带有示例的TextBox.Multiline属性

c#中textbox属性Here we are demonstrating use of Multiline property of the TextBox Control. 在这里&#xff0c;我们演示了TextBox控件的Multiline属性的使用。 Multiline property contains two values: 多行属性包含两个值&#xff1a; True: We can enter text in mo…
阅读更多...
MATLAB新手教程

MATLAB新手教程

MATLAB新手教程 1&#xff0e;MATLAB的基本知识 1-1、基本运算与函数 在MATLAB下进行基本数学运算&#xff0c;仅仅需将运算式直接打入提示号&#xff08;>>&#xff09;之後&#xff0c;并按入Enter键就可以。比如&#xff1a; >> (5*21.3-0.8)*10/25 an…
阅读更多...
嗯，查询滑动窗口最大值的这4种方法不错....

嗯，查询滑动窗口最大值的这4种方法不错....

作者 | 王磊来源 | Java中文社群&#xff08;ID&#xff1a;javacn666&#xff09;转载请联系授权&#xff08;微信ID&#xff1a;GG_Stone&#xff09;本文已收录至 Github《小白学算法》系列&#xff1a;https://github.com/vipstone/algorithm这是一道比较基础的算法题&…
阅读更多...
SVN客户端使用

SVN客户端使用

SVN客户端使用1. 复制服务端URL2. 在客户端电脑新建文件夹用于存储版本代码3. 右击空白处&#xff0c;checkout4. 进入trunk目录&#xff0c;即可尝试新建文件并上传到服务端4.其他客户端更新版本5.解决代码冲突期间由于之前登陆过并设置为记住密码&#xff0c;所以整个过程并没…
阅读更多...
25 张图，1.4 w字！彻底搞懂分布式事务原理

25 张图，1.4 w字！彻底搞懂分布式事务原理

本文提纲如下&#xff1a;0. 前言1. 单数据源事务 & 多数据源事务2. 常见分布式事务解决方案2.1. 分布式事务模型2.2. 二将军问题和幂等性2.3. 两阶段提交&#xff08;2PC&#xff09; & 三阶段提交&#xff08;3PC&#xff09;方案2.4. TCC 方案2.5. 事务状态表方案2.…
阅读更多...
des加密密码补位_密码学中的数据加密标准（DES）

des加密密码补位_密码学中的数据加密标准（DES）

des加密密码补位This is a Data Encryption Standard that is the asymmetric key generation for the encryption of digital data in cryptography. Therefore, its short key length of 56 bits of character criticized from the beginning or starting makes it too insec…
阅读更多...
报告老板：这次的缓存事故是这样的...

报告老板：这次的缓存事故是这样的...

事故背景公司最近安排了一波商品抢购活动&#xff0c;由于后台小哥操作失误最终导致活动效果差&#xff0c;被用户和代理商投诉了。老板让我带同事们一起复盘这次线上事故。什么原因造成的&#xff1f;抢购活动计划是零点准时开始&#xff0c;22&#xff1a;00 运营人员通过后台…
阅读更多...
隐式转换

隐式转换

2019独角兽企业重金招聘Python工程师标准>>> 1&#xff1a;隐式转换应用 1.1 隐式转换为期望类型 隐式转换为期望类型是编译器会使用隐式操作的第一个地方。一旦编译器看到了X&#xff0c;但是需要Y&#xff0c;就会检查从X到Y的隐式转换函数。例如&#xff1a; val…
阅读更多...
双“11”搞促销？用贪心算法来盘他！

双“11”搞促销？用贪心算法来盘他！

作者 | 王磊来源 | Java中文社群&#xff08;ID&#xff1a;javacn666&#xff09;转载请联系授权&#xff08;微信ID&#xff1a;GG_Stone&#xff09;这几年商家为了刺激消费是变着花样的推出各种各样的活动&#xff0c;以某多多为首的运营式电商更是让我们看到了营销的无限“…
阅读更多...
AndroidStudio使用入门

AndroidStudio使用入门

AndroidStudio使用入门1_AndroidStudio activity的基本使用1.1_MainActivity和activity_main的初识1.2_Activity的清单文件简介1.3_几种重要文件的介绍1.4_基本布局的认识与使用1.4.1_RelativeLayout(相对布局)1.4.2_线性布局2_访问资源的方式2.1_java访问资源的方式2.2_xml访问…
阅读更多...
面试官：你说说互斥锁、自旋锁、读写锁、悲观锁、乐观锁的应用场景？

面试官：你说说互斥锁、自旋锁、读写锁、悲观锁、乐观锁的应用场景？

前言生活中用到的锁&#xff0c;用途都比较简单粗暴&#xff0c;上锁基本是为了防止外人进来、电动车被偷等等。但生活中也不是没有 BUG 的&#xff0c;比如加锁的电动车在「广西 - 窃格瓦拉」面前&#xff0c;锁就是形同虚设&#xff0c;只要他愿意&#xff0c;他就可以轻轻松…
阅读更多...
2万字，看完这篇才敢说自己真的懂线程池！

2万字，看完这篇才敢说自己真的懂线程池！

前言 线程池可以说是 Java 进阶必备的知识点了&#xff0c;也是面试中必备的考点&#xff0c;可能不少人看了一些文章后能对线程池工作原理说上一二&#xff0c;但这还远远不够&#xff0c;如果碰到比较有经验的面试官再继续追问&#xff0c;很可能会被吊打&#xff0c;考虑如下…
阅读更多...
西南大学校园GIS平台

西南大学校园GIS平台

原文:西南大学校园GIS平台系统架构是B/S,开发语言是C#、silverlight&#xff0c;开发平台是.NET&#xff0c;数据库为sqlserver&#xff0c;这是我读研究生时候自己做的作品&#xff0c;以自己的母校为地图&#xff0c;进行GIS相关的功能分析&#xff0c;核心的模块有&#xff…
阅读更多...
Android studio小问题解决

Android studio小问题解决

1_代码识别不出来问题 2_项目SDK与本地不匹配 先查看项目的SDK 增加本地SDK
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023