css
学习三大重点: css
盒子模型 、 浮动 、 定位
主题思路:
目标:
网页布局中,我们是如何把里面的文字,图片,按照美工给我们的效果图排列的整齐有序呢?
CSS
设置好盒子的大小,然后摆放盒子的位置。我们明白了,盒子是网页布局的关键点,所以我们更应该弄明白 这个盒子有什么特点。
所谓盒子模型:
HTML
页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。总结:
border
)、内边距(padding
)、和外边距(margin
)组成。cellpadding
)cellspacing
)标准盒子模型
border : border-width || border-style || border-color
属性 | 作用 |
---|---|
border-width | 定义边框粗细,单位是px |
border-style | 边框的样式 |
border-color | 边框颜色 |
border : border-width || border-style || border-color
例如:
border: 1px solid red; 没有顺序
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
div {
width: 200px;
height: 200px;
/*边框的宽度 实际开发中都是跟 px 单位*/
border-width: 5px;
/*实线的*/
border-style: solid;
}
style>
head>
<body>
<div> div>
body>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
div {
width: 200px;
height: 200px;
/*边框的宽度 实际开发中都是跟 px 单位*/
border-width: 5px;
/*实线的*/
/* border-style: solid; */
/*虚线的 dashed 大师的 说话都很虚*/
border-style: dashed;
}
style>
head>
<body>
<div> div>
body>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
div {
width: 200px;
height: 200px;
/*边框的宽度 实际开发中都是跟 px 单位*/
border-width: 5px;
/*实线的*/
/* border-style: solid; */
/*虚线的 dashed 大师的 说话都很虚*/
/* border-style: dashed; */
/*点线*/
border-style: dotted;
}
style>
head>
<body>
<div> div>
body>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
div {
width: 200px;
height: 200px;
/*边框的宽度 实际开发中都是跟 px 单位*/
border-width: 5px;
/*实线的*/
/* border-style: solid; */
/*虚线的 dashed 大师的 说话都很虚*/
/* border-style: dashed; */
/*点线*/
/* border-style: dotted; */
/* border-color: pink; */
/*边框的综合性写法*/
/*边框粗细 边框 样式 边框颜色*/
border: 5px dotted pink;
}
style>
head>
<body>
<div> div>
body>
html>
参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.48
Branch: branch01commit description:a0.48(盒子边框案例example01)
tag:a0.48
很多情况下,我们不需要指定4个边框,我们是可以单独给4个边框分别指定的。
我们可以看看小米官网:
只有上边框。
上边框 | 下边框 | 左边框 | 右边框 |
---|---|---|---|
border-top-style:样式; | border-bottom-style:样式; | border-left-style:样式; | border-right-style:样式; |
border-top-width:宽度; | border- bottom-width:宽度; | border-left-width:宽度; | border-right-width:宽度; |
border-top-color:颜色; | border- bottom-color:颜色; | border-left-color:颜色; | border-right-color:颜色; |
border-top:宽度 样式 颜色; | border-bottom:宽度 样式 颜色; | border-left:宽度 样式 颜色; | border-right:宽度 样式 颜色; |
淘宝左侧导航栏没有上边框
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
div {
width: 200px;
height: 400px;
/*上边框写法*/
border-top: 2px solid red;
}
style>
head>
<body>
<div> div>
body>
html>
div {
width: 200px;
height: 400px;
/*上边框写法*/
border-top: 2px solid red;
border-left: 1px solid green;
}
div {
width: 200px;
height: 400px;
/*上边框写法*/
border-top: 2px solid red;
border-left: 1px solid green;
border-right: 1px solid blue;
border-bottom: 1px solid pink;
}
同样的input
的边框也可以指定:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
div {
width: 200px;
height: 400px;
/*上边框写法*/
border-top: 2px solid red;
border-left: 1px solid green;
border-right: 1px solid blue;
border-bottom: 1px solid pink;
}
input {
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px dashed red;
}
style>
head>
<body>
<div> div>
用户名: <input type="text" > <br>
密码: <input type="text" >
body>
html>
简写边框:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
div {
width: 200px;
height: 400px;
/*上边框写法*/
border-top: 2px solid red;
border-left: 1px solid green;
border-right: 1px solid blue;
border-bottom: 1px solid pink;
}
input {
/* border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px dashed red; */
/* 四个边框都去掉*/
border: none;
/* 覆盖 ,注意不可换顺序,可遵循‘先写大的,后写小的’*/
border-bottom: 1px dashed red;
}
style>
head>
<body>
<div> div>
用户名: <input type="text" > <br>
密码: <input type="text" >
body>
html>
参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.49
Branch: branch01commit description:a0.49(分别指定边框案例example02)
tag:a0.49
通过表格的cellspacing="0"
,将单元格与单元格之间的距离设置为0,
但是两个单元格之间的边框会出现重叠,从而使边框变粗
通过css
属性:
table{ border-collapse:collapse; }
collapse
单词是合并的意思border-collapse:collapse;
表示相邻边框合并在一起,而不重叠边框。
完善样式:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小说排行榜title>
<style>
table,
td,
th {
border: 1px solid deeppink;
}
style>
head>
<body>
<table cellspacing="0" width="500" height="249" align="center">
<caption> <h3>小说排行榜h3> caption>
<tr >
<th>排名th>
<th>关键词th>
<th>趋势th>
<th>今日搜索th>
<th>最近七日th>
<th>相关链接th>
tr>
<tr>
<td>1td>
<td>鬼吹灯td>
<td>
<img src="images/up.jpg">
td>
<td>356td>
<td>3560td>
<td>
<a href="#">贴吧a>
<a href="#">图片a>
<a href="#">百科a>
td>
tr>
<tr >
<td>1td>
<td>鬼吹灯td>
<td>
<img src="images/down.jpg">
td>
<td>356td>
<td>3560td>
<td>
<a href="#">贴吧a>
<a href="#">图片a>
<a href="#">百科a>
td>
tr>
<tr>
<td>1td>
<td>鬼吹灯td>
<td>
<img src="images/up.jpg">
td>
<td>356td>
<td>3560td>
<td>
<a href="#">贴吧a>
<a href="#">图片a>
<a href="#">百科a>
td>
tr>
<tr >
<td>1td>
<td>鬼吹灯td>
<td>1td>
<td>356td>
<td>3560td>
<td>
<a href="#">贴吧a>
<a href="#">图片a>
<a href="#">百科a>
td>
tr>
<tr>
<td>1td>
<td>鬼吹灯td>
<td>1td>
<td>356td>
<td>3560td>
<td>
<a href="#">贴吧a>
<a href="#">图片a>
<a href="#">百科a>
td>
tr>
<tr >
<td>1td>
<td>鬼吹灯td>
<td>1td>
<td>356td>
<td>3560td>
<td>
<a href="#">贴吧a>
<a href="#">图片a>
<a href="#">百科a>
td>
tr>
<tr>
<td>1td>
<td>鬼吹灯td>
<td>1td>
<td>356td>
<td>3560td>
<td>
<a href="#">贴吧a>
<a href="#">图片a>
<a href="#">百科a>
td>
tr>
table>
body>
html>
发现框是2px
而不是1px
根据以上我们可以得出因为没有合并单元格的缘故:导致边框重叠
table,
td,
th {
border: 1px solid deeppink;
/*让我们的表格 单元格 th 合并相邻的边框*/
border-collapse: collapse;
}
完善标题栏颜色及单行变色:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小说排行榜title>
<style>
table,
td,
th {
border: 1px solid deeppink;
/*让我们的表格 单元格 th 合并相邻的边框*/
border-collapse: collapse;
}
/* 标题栏颜色 */
.hotpink {
background-color: hotpink;
}
/* 隔行变色 */
.pink {
background-color: pink;
}
style>
head>
<body>
<table cellspacing="0" width="500" height="249" align="center">
<caption> <h3>小说排行榜h3> caption>
<tr class="hotpink">
<th>排名th>
<th>关键词th>
<th>趋势th>
<th>今日搜索th>
<th>最近七日th>
<th>相关链接th>
tr>
<tr>
<td>1td>
<td>鬼吹灯td>
<td>
<img src="images/up.jpg">
td>
<td>356td>
<td>3560td>
<td>
<a href="#">贴吧a>
<a href="#">图片a>
<a href="#">百科a>
td>
tr>
<tr class="pink">
<td>1td>
<td>鬼吹灯td>
<td>
<img src="images/down.jpg">
td>
<td>356td>
<td>3560td>
<td>
<a href="#">贴吧a>
<a href="#">图片a>
<a href="#">百科a>
td>
tr>
<tr>
<td>1td>
<td>鬼吹灯td>
<td>
<img src="images/up.jpg">
td>
<td>356td>
<td>3560td>
<td>
<a href="#">贴吧a>
<a href="#">图片a>
<a href="#">百科a>
td>
tr>
<tr class="pink">
<td>1td>
<td>鬼吹灯td>
<td>1td>
<td>356td>
<td>3560td>
<td>
<a href="#">贴吧a>
<a href="#">图片a>
<a href="#">百科a>
td>
tr>
<tr>
<td>1td>
<td>鬼吹灯td>
<td>1td>
<td>356td>
<td>3560td>
<td>
<a href="#">贴吧a>
<a href="#">图片a>
<a href="#">百科a>
td>
tr>
<tr class="pink">
<td>1td>
<td>鬼吹灯td>
<td>1td>
<td>356td>
<td>3560td>
<td>
<a href="#">贴吧a>
<a href="#">图片a>
<a href="#">百科a>
td>
tr>
<tr>
<td>1td>
<td>鬼吹灯td>
<td>1td>
<td>356td>
<td>3560td>
<td>
<a href="#">贴吧a>
<a href="#">图片a>
<a href="#">百科a>
td>
tr>
table>
body>
html>
参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.50
Branch: branch01commit description:a0.50(小说排行榜案例example03)
tag:a0.50
如小米首页右侧导航栏,文字要是贴着边框很丑,所以必然需要设置内边距padding
padding
属性用于设置内边距。 是指 边框与内容之间的距离。
属性 | 作用 |
---|---|
padding-left | 左内边距 |
padding-right | 右内边距 |
padding-top | 上内边距 |
padding-bottom | 下内边距 |
当我们给盒子指定padding
值之后, 发生了2件事情:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内边距title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid red;
}
style>
head>
<body>
<div> 王者农药 div>
body>
html>
发现很丑,我们想实现类似小米首页一样。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内边距title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid red;
/*左内边距*/
padding-left: 10px;
padding-top: 30px;
}
style>
head>
<body>
<div> 王者农药 div>
body>
html>
注意添加了内边距:
盒子会变大了
小迪推荐大家使用FastStone Capture 下载
以上代码会很麻烦,我们可以简写:
div {
width: 200px;
height: 200px;
border: 1px solid red;
/*左内边距*/
/* padding-left: 10px;
padding-top: 30px; */
/*padding 简写 复合写法*/
/*padding: 20px; 上下左右 都是 20 内边距*/
padding: 20px;
}
/*padding: 10px 20px; 上下10 左右 20 内边距*/
padding: 10px 20px;
/*padding: 10px 20px 30px; 上 10 左右 20 下 30 内边距*/
padding: 10px 20px 30px;
/*padding: 10px 20px 30px 40px; 上10 右 20 下 30 左 40 顺时针*/
padding: 10px 20px 30px 40px;
参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.51
Branch: branch01commit description:a0.51(内边距案例example04)
tag:a0.51
注意: 后面跟几个数值表示的意思是不一样的。
我们分开写有点麻烦,我们可以不可以简写呢?
值的个数 | 表达意思 |
---|---|
1个值 | padding:上下左右内边距; |
2个值 | padding: 上下内边距 左右内边距 ; |
3个值 | padding:上内边距 左右内边距 下内边距; |
4个值 | padding: 上内边距 右内边距 下内边距 左内边距 ;(顺时针 ) |
课堂一练:
请写出如下内边距:
5像素
25像素
左右是15像素
。12像素
下内边距是 0
左内边距是25像素
右内边距是 10像素
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
1. 要求盒子有一个左边内边距是 5像素
div {
padding-left: 5px;
}
2. 要求简写的形式写出 一个盒子上下是 25像素 左右是15像素。
div {
padding: 25px 15px;
}
3. 要求简写的形式写出 一个盒子 上内边距是 12像素 下内边距是 0 左内边距是 25像素 右内边距是 10像素
div {
padding: 12px 10px 0 25px;
}
style>
head>
<body>
body>
html>
参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.52
Branch: branch01commit description:a0.52(内边距课堂一练案例example05)
tag:a0.52
新浪导航栏的核心就是因为里面的字数不一样多,所以我们不方便给宽度,还是给padding
,撑开盒子的。
先把结构做出来
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新浪导航栏案例title>
<style>
/*清除元素默认的内外边距*/
* {
margin: 0;
padding: 0;
}
body{
margin: 20px;
}
style>
head>
<body>
<div class="nav">
<a href="#">设为首页a>
<a href="#">手机新浪网a>
<a href="#">移动客户端a>
<a href="#">博客a>
<a href="#">微博a>
<a href="#">关注我a>
div>
body>
html>
a
是有宽高的,高度是可以给的,但是宽度不好设置,因为字数没法固定,为了方便写样式,我们先设置一个粉色的背景,方便调试样式。
我们在新浪网上截图测量尺寸=>宽度41px
拾色=>#fcfcfc
下边框:1px
上边框
上边框取色:#ff8500
下边框取色:#edeef0
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新浪导航栏案例title>
<style>
/*清除元素默认的内外边距*/
* {
margin: 0;
padding: 0;
}
body{
margin: 20px;
}
.nav {
height: 41px;
background-color: #FCFCFC;
/*上边框*/
border-top: 3px solid #FF8500;
/*下边框*/
border-bottom: 1px solid #EDEEF0;
}
.nav a {
/*转换为行内块*/
display: inline-block;
height: 41px;
background-color: pink;
}
style>
head>
<body>
<div class="nav">
<a href="#">设为首页a>
<a href="#">手机新浪网a>
<a href="#">移动客户端a>
<a href="#">博客a>
<a href="#">微博a>
<a href="#">关注我a>
div>
body>
html>
我们不好设置宽度,因为a
标签的字数是不同的。padding
是可以撑开盒子的,我们可以都设置一样的padding
。
.nav a {
/*转换为行内块*/
display: inline-block;
height: 41px;
background-color: pink;
/*代表 上下是 0 左右是 20 内边距*/
padding: 0 20px;
}
让文字垂直居中,去除a
标签下划线,设置文字颜色及大小,去掉粉色背景。
文字颜色:#4c4c4c
文字大小:12px
.nav a {
/*转换为行内块*/
display: inline-block;
height: 41px;
/* background-color: pink; */
line-height: 41px;
color: #4C4C4C;
/*代表 上下是 0 左右是 20 内边距*/
padding: 0 20px;
text-decoration: none;
font-size: 12px;
}
鼠标放在a
标签设置底色。
背景:#edeef0
字体颜色:#fc8400
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新浪导航栏案例title>
<style>
/*清除元素默认的内外边距*/
* {
margin: 0;
padding: 0;
}
body{
margin: 20px;
}
.nav {
height: 41px;
background-color: #FCFCFC;
/*上边框*/
border-top: 3px solid #FF8500;
/*下边框*/
border-bottom: 1px solid #EDEEF0;
}
.nav a {
/*转换为行内块*/
display: inline-block;
height: 41px;
/* background-color: pink; */
line-height: 41px;
color: #4C4C4C;
/*代表 上下是 0 左右是 20 内边距*/
padding: 0 20px;
text-decoration: none;
font-size: 12px;
}
.nav a:hover {
background-color: #edeef0;
color:#fc8400;
}
style>
head>
<body>
<div class="nav">
<a href="#">设为首页a>
<a href="#">手机新浪网a>
<a href="#">移动客户端a>
<a href="#">博客a>
<a href="#">微博a>
<a href="#">关注我a>
div>
body>
html>
参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.53
Branch: branch01commit description:a0.53(新浪导航栏案例)
tag:a0.53
实际页面中的盒子是固定大小,不能设置padding
后,就撑大盒子,这样会影响布局。
宽度
Element Height = content height + padding + border
(Height
为内容高度)
高度
Element Width = content width + padding + border
(Width
为内容宽度)
盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算盒子实际的大小title>
<style>
div {
width: 180px;
height: 200px;
background-color: pink;
/*添加10px 内边距 左右 上下*/
padding: 10px;
}
style>
head>
<body>
<div> div>
body>
html>
盒子的实际大小 = 内容宽度 高度 + 内边距 + 边框
200 + 20 + 0 = 220
解决的方法:
内边距一定要给的, 我们只能改变 内容宽度 width
让他减去 多出来的内边距就可以了
200 - 20 = 180
参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.54
Branch: branch01commit description:a0.54(计算盒子的实际大小案例example06)
tag:a0.54
笔试测试题
(A) 130
(B) 135
© 125
(D) 115
100 + 20 + 10
div {
width: 200px;
height: 200px;
border: 1px solid #000000;
border-top: 5px solid blue;
padding: 50px;
padding-left: 100px;
}
w
200 + 150 + 2 = 352
h
200 + 100 + 6 = 306
(注意这里覆盖的现象。)
如果没有给一个盒子指定宽度, 此时,如果给这个盒子指定padding, 则不会撑开盒子。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
p {
/*块级元素默认与父级一样宽 width: 200px;*/
height: 30px;
background-color: purple;
}
style>
head>
<body>
<div>
<p>哒哒哒p>
div>
body>
html>
p {
/*块级元素默认与父级一样宽 width: 200px;*/
height: 30px;
background-color: purple;
padding-left: 30px;
/*特殊情况, 如果这个盒子啊,没有宽度 则padding 不会撑开盒子*/
}
加上宽度后,有padding
就会撑开宽度了。
p {
/*块级元素默认与父级一样宽 width: 200px;*/
width: 200px;
height: 30px;
background-color: purple;
padding-left: 30px;
/*特殊情况, 如果这个盒子啊,没有宽度 则padding 不会撑开盒子*/
}
参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.55
Branch: branch01commit description:a0.55(padding不会影响盒子大小的情况案例example07)
tag:a0.55
margin
属性用于设置外边距。 margin
就是控制盒子和盒子之间的距离
属性 | 作用 |
---|---|
margin-left | 左外边距 |
margin-right | 右外边距 |
margin-top | 上外边距 |
margin-bottom | 下外边距 |
margin值的简写 (复合写法)代表意思 跟 padding 完全相同。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/*外边距*/
margin-left: 100px;
}
style>
head>
<body>
<div>div>
body>
html>
div {
width: 200px;
height: 200px;
background-color: pink;
/*外边距*/
margin-left: 100px;
margin-top: 50px;
}
简写:
div {
width: 200px;
height: 200px;
background-color: pink;
/*外边距*/
/* margin-left: 100px;
margin-top: 50px; */
margin: 100px;
}
默认都是左对齐,因为右边没内容,就默认充满了。如果右边有内容则是100px
间距。
div {
width: 200px;
height: 200px;
background-color: pink;
padding: 20px;
margin: 100px;
}
实际我们在看网页的时候,也可通过F12
,根据颜色很快判断出容器的padding
和margin
。
可以通过这种方式检验css
的padding
、margin
设置是否正确。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
padding: 20px;
/*外边距*/
/* margin-left: 100px;
margin-top: 50px; */
margin: 100px 20px 0 10px;
}
style>
head>
<body>
<div>div>
body>
html>
参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.56
Branch: branch01commit description:a0.56(margin外边距案例example08)
tag:a0.56
我们发现小米首页始终保持居中对齐的,缩小网页后也是始终保持的(两边边距都一样),这是因为块级盒子是可以居中对齐的。
width
)实际工作中常用这种方式进行网页布局,示例代码如下:
.header{ width:960px; margin:0 auto;}
常见的写法,以下下三种都可以。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
div {
width: 600px;
height: 400px;
background-color: pink;
}
style>
head>
<body>
<div>div>
body>
html>
外边距默认左上对齐。
margin-left: auto;
左侧充满。
margin-right: auto;
右侧充满。
margin-left: auto;
margin-right: auto;
左右两侧充满,即居中。
我们看小米首页也有这种居中写法:
但其实还有其他写法如:
margin: auto;
代表上下左右都是auto
的,但是盒子默认是需要贴着顶部的,因此是没有效果的,即不会垂直居中,只会左右居中。
另一种写法
margin: 0 auto;
注意必须有宽度,如果没宽度,块级元素没宽度,会占满一行的,就不存在居中了。
div {
/* width: 600px; */
height: 400px;
background-color: pink;
margin: 0 auto;
}
参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.57
Branch: branch01commit description:a0.57(块级盒子居中对齐案例example09)
tag:a0.57
text-align: center
, 而且还可以让 行内元素(如strong
)和行内块(如input
)居中对齐margin
改为 auto
text-align: center; /* 文字 行内元素 行内块元素水平居中 */
margin: 10px auto; /* 块级盒子水平居中 左右margin 改为 auto 就阔以了 上下margin都可以 */
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
div {
width: 600px;
height: 300px;
background-color: pink;
/*块级盒子水平居中*/
margin: 50px auto;
}
style>
head>
<body>
<div> 稳住 div>
body>
html>
text-align: center;
还可以让 行内元素(如strong
)和行内块(如input
)居中对齐
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
div {
width: 600px;
height: 300px;
background-color: pink;
/*块级盒子水平居中*/
margin: 50px auto;
/*盒子里面的文字 行内元素 、行内块(input元素)居中对齐水平居中*/
text-align: center;
}
style>
head>
<body>
<div> 稳住 <strong>我们能赢strong> <input type="text"> div>
body>
html>
参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.58
Branch: branch01commit description:a0.58(文字居中和盒子居中案例example10)
tag:a0.58
插入图片 我们用的最多 比如产品展示类 移动位置只能靠盒模型padding margin
背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position
img {
width: 200px;/* 插入图片更改大小 width 和 height */
height: 210px;
margin-top: 30px; /* 插入图片更改位置 可以用margin 或padding 盒模型 */
margin-left: 50px; /* 插入当图片也是一个盒子 */
}
div {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat;
background-position: 30px 50px; /* 背景图片更改位置 我用 background-position */
}
通过盒模型移动图片。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
.pic {
width: 500px;
height: 500px;
border: 1px solid red;
}
style>
head>
<body>
<div class="pic">
<img src="images/3.jpg" alt="">
div>
body>
html>
padding
移动图片的位置,如果设置容器盒子padding
,会撑大盒子。
.pic {
width: 500px;
height: 500px;
border: 1px solid red;
padding: 30px;
}
或者通过图片的外边距(margin
)移动图片,这样就不会撑开容器盒子了。
.pic {
width: 500px;
height: 500px;
border: 1px solid red;
/*padding: 30px;*/
}
.pic img {
margin: 30px;
}
参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.59
Branch: branch01commit description:a0.59(插入图片和背景图片区别案例example11-1——通过盒模型移动图片)
tag:a0.59
背景图片的设置
背景图片不能通过设置padding
来移动位置。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
.pic,
.bg {
width: 500px;
height: 500px;
border: 1px solid red;
/*padding: 30px;*/
}
.pic img {
margin: 30px;
}
.bg {
background: url(images/3.jpg) no-repeat;
padding: 30px;
}
style>
head>
<body>
<div class="pic">
<img src="images/3.jpg" alt="">
div>
<div class="bg">
div>
body>
html>
只能通过background-position
设置位置,第一个是水平位置,第二个是垂直位置。
.bg {
background: url(images/3.jpg) no-repeat;
background-position: 30px 30px;
/*padding: 30px;*/
}
参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.60
Branch: branch01commit description:a0.60(插入图片和背景图片区别案例example11-2——移动背景图片)
tag:a0.60
注意一般情况下,我们插入图片用得多,而背景图片用得少。
为了更灵活方便地控制网页中的元素,制作网页时,我们需要将元素的默认内外边距清除
*
代表所有
代码:
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
注意:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
span {
margin: 30px;
}
style>
head>
<body>
一个问题
<p>又是一个问题p>
<span> 行内元素 尽量只设置左右内外边距, 不要设置上下内外边距。span>
body>
html>
行内元素设置了上下边距也没意义。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
/*这是一个神奇的代码 我们以后写css 第一句话*/
* {
margin: 0;
padding: 0;
}
span {
margin: 30px;
}
style>
head>
<body>
一个问题
<p>又是一个问题p>
<span> 行内元素 尽量只设置左右内外边距, 不要设置上下内外边距。span>
body>
html>
参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.61
Branch: branch01commit description:a0.61(清除元素的默认内外边距案例example12)
tag:a0.61
使用margin
定义块元素的垂直外边距时,可能会出现外边距的合并。
margin-bottom
margin-top
,则他们之间的垂直间距不是margin-bottom
与margin-top
之和解决方案:尽量给只给一个盒子添加margin
值。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
.top,
.bottom {
width: 200px;
height: 200px;
background-color: pink;
}
.top {
margin-bottom: 100px;
}
.bottom {
background-color: purple;
}
style>
head>
<body>
<div class="top">div>
<div class="bottom">div>
body>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
.top,
.bottom {
width: 200px;
height: 200px;
background-color: pink;
}
.top {
margin-bottom: 100px;
}
.bottom {
background-color: purple;
margin-top: 50px;
}
style>
head>
<body>
<div class="top">div>
<div class="bottom">div>
body>
html>
边距仍是100px
参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.62
Branch: branch01commit description:a0.62( 相邻块元素垂直外边距的合并案例example13)
tag:a0.62
解决方案:
overflow:hidden
。还有其他方法,比如浮动、固定、绝对定位的盒子不会有问题,后面咱们再总结。。。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
.father {
width: 500px;
height: 500px;
background-color: pink;
}
.son {
width: 200px;
height: 200px;
background-color: purple;
}
style>
head>
<body>
<div class="father">
<div class="son">div>
div>
body>
html>
我们想把最里面的紫色盒子移动下去,我们给它设置上外边距
.son {
width: 200px;
height: 200px;
background-color: purple;
margin-top: 100px;
}
然后紫色的盒子带着它的父亲粉色盒子一起塌陷了。
解决办法:
1、可以为父元素定义上边框 transparent
透明
.father {
width: 500px;
height: 500px;
background-color: pink;
/*嵌套关系 垂直外边距合并 解决方案 */
/*1. 可以为父元素定义上边框 transparent 透明*/
border-top: 1px solid transparent;
}
2、可以给父级指定一个 上 padding
值
.father {
width: 500px;
height: 500px;
background-color: pink;
/*嵌套关系 垂直外边距合并 解决方案 */
/*2. 可以给父级指定一个 上 padding值。*/
padding-top: 1px;
}
3、可以为父元素添加overflow:hidden
.father {
width: 500px;
height: 500px;
background-color: pink;
/*嵌套关系 垂直外边距合并 解决方案 */
/*3. 可以为父元素添加overflow:hidden。*/
overflow: hidden;
}
参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.63
Branch: branch01commit description:a0.63( 嵌套块元素垂直外边距的合并(塌陷)案例example14)
tag:a0.63
学习完盒子模型,内边距和外边距,什么情况下用内边距,什么情况下用外边距?
我们根据稳定性来分,建议如下:
按照 优先使用 宽度 (width
) 其次 使用内边距(padding
) 再次 外边距(margin
)。
width > padding > margin
margin
会有外边距合并 还有 ie6
下面margin
加倍的bug
(讨厌)所以最后使用。padding
会影响盒子大小, 需要进行加减计算(麻烦) 其次使用。width
没有问题(嗨皮)我们经常使用宽度剩余法 高度剩余法来做。因为网页美工大部分效果图都是利用ps
来做的,所以,以后我们大部分切图工作都是在ps
里面完成。
ctrl+r
可以打开标尺 或者 视图 – 标尺像素
ctrl+ 加号
键 可以 放大 视图 ctrl+ 减号
缩小视图空格键
, 鼠标可以 变成小手 ,拖动 ps 视图ctrl+ d
可以取消选区 或者旁边空白处点击一下也可以取消选区调出标尺:或者ctrl+r
标尺设置以像素为单位,利用鼠标右键。
宽328px
,如果加上边框就是330px
。
拾色器:
或者
左侧小箭头是图片
背景是渐变色,用图片
结构布局:
刚才我们量了整体宽度(排除边框)是328px
我们测量高度:226px
,加上边框是228px
无序和有序列表前面默认的列表样式,在不同浏览器显示效果不一样,而且也比较难看,所以,我们一般上来就直接去掉这些列表样式就行了。 代码如下
li { list-style: none; }
实现外层框架:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新闻列表综合案例title>
<style>
/*这句话必须要写, 不要忘却了*/
* {
margin: 0;
padding: 0;
}
.box {
width: 328px;
height: 226px;
/*灰色*/
border: 1px solid #ccc;
/*块级盒子水平居中*/
margin: 100px auto;
background: url(images/line.jpg);
}
style>
head>
<body>
<div class="box">
div>
body>
html>
参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.64
Branch: branch01commit description:a0.64( 综合案例example15-1——实现最外层的框子)
tag:a0.64
写字的部分与外边框的间隙:
设置外边距不方便,到时候再细分两块都需要设置外边距。
干脆给最外框设置一个内边距方便。
左侧间隙:15px
,一般设置都是间隙等宽,这里其它方向我就不测量了。
.box {
width: 328px;
height: 226px;
/*灰色*/
border: 1px solid #ccc;
/*块级盒子水平居中*/
margin: 100px auto;
background: url(images/line.jpg);
padding: 15px;
}
但是盒子立刻就被撑大了
需要重新设置宽高,都需要减去15x2=30
.box {
width: 298px;
height: 196px;
/*灰色*/
border: 1px solid #ccc;
/*块级盒子水平居中*/
margin: 100px auto;
background: url(images/line.jpg);
padding: 15px;
}
参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.65
Branch: branch01commit description:a0.65( 综合案例example15-2——实现列表内部的间隙)
tag:a0.65
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新闻列表综合案例title>
<style>
/*这句话必须要写, 不要忘却了*/
* {
margin: 0;
padding: 0;
}
.box {
width: 298px;
height: 196px;
/*灰色*/
border: 1px solid #ccc;
/*块级盒子水平居中*/
margin: 100px auto;
background: url(images/line.jpg);
/*如果一个盒子给了一个padding值,会撑大盒子*/
padding: 15px;
}
.box h2 {
font-size: 18px;
/*字跟下划线有一些间隙,我们设置为上下均有间隙*/
padding: 5px 0;
/*底边框*/
border-bottom: 1px solid #ccc;
}
style>
head>
<body>
<div class="box">
<h2>最新文章/New Articlesh2>
<ul>
<li><a href="#">北京招聘网页设计,平面设计,phpa>li>
<li><a href="#">体验javascript的魅力a>li>
<li><a href="#">jquery世界来临a>li>
<li><a href="#">网页设计师的梦想a>li>
<li><a href="#">jquery中的链式编程是什么a>li>
ul>
div>
body>
html>
参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.66
Branch: branch01commit description:a0.66( 综合案例example15-3——实现标题模块,及初步实现列表框)
tag:a0.66
我们发现列表有一个小圆点,我们把它去掉(默认样式)
/*取消列表样式*/
li {
list-style: none;
}
文字是a
标签,我们取色
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新闻列表综合案例title>
<style>
/*这句话必须要写, 不要忘却了*/
* {
margin: 0;
padding: 0;
}
/*取消列表样式*/
li {
list-style: none;
}
.box {
width: 298px;
height: 196px;
/*灰色*/
border: 1px solid #ccc;
/*块级盒子水平居中*/
margin: 100px auto;
background: url(images/line.jpg);
/*如果一个盒子给了一个padding值,会撑大盒子*/
padding: 15px;
}
.box h2 {
font-size: 18px;
/*字跟下划线有一些间隙,我们设置为上下均有间隙*/
padding: 5px 0;
/*底边框*/
border-bottom: 1px solid #ccc;
}
.box ul li {
height: 30px;
/*background-color: pink;*/
border-bottom: 1px dashed #ccc;
}
.box ul li a {
color: #333;
font-size: 12px;
text-decoration: none;
}
style>
head>
<body>
<div class="box">
<h2>最新文章/New Articlesh2>
<ul>
<li><a href="#">北京招聘网页设计,平面设计,phpa>li>
<li><a href="#">体验javascript的魅力a>li>
<li><a href="#">jquery世界来临a>li>
<li><a href="#">网页设计师的梦想a>li>
<li><a href="#">jquery中的链式编程是什么a>li>
ul>
div>
body>
html>
文字没有垂直居中,行高和li
高度设置成一样的即可。
.box ul li {
height: 30px;
line-height: 30px;
/*background-color: pink;*/
border-bottom: 1px dashed #ccc;
}
鼠标移动端a标签,出现下划线。
.box ul li a:hover {
text-decoration: underline;
}
参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.67
Branch: branch01commit description:a0.67( 综合案例example15-4——优化列表,实现虚线及a标签下划线效果)
tag:a0.67s
我们把图片插进去,图片垂直居中,且左边有一点距离。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新闻列表综合案例title>
<style>
/*这句话必须要写, 不要忘却了*/
* {
margin: 0;
padding: 0;
}
/*取消列表样式*/
li {
list-style: none;
}
.box {
width: 298px;
height: 196px;
/*灰色*/
border: 1px solid #ccc;
/*块级盒子水平居中*/
margin: 100px auto;
background: url(images/line.jpg);
/*如果一个盒子给了一个padding值,会撑大盒子*/
padding: 15px;
}
.box h2 {
font-size: 18px;
/*字跟下划线有一些间隙,我们设置为上下均有间隙*/
padding: 5px 0;
/*底边框*/
border-bottom: 1px solid #ccc;
}
.box ul li {
height: 30px;
line-height: 30px;
/*background-color: pink;*/
border-bottom: 1px dashed #ccc;
/*background-position: 5px center ; 可简写到background里 */
background: url(images/arr.jpg) no-repeat 5px center;
}
.box ul li a {
color: #333;
font-size: 12px;
text-decoration: none;
}
.box ul li a:hover {
text-decoration: underline;
}
style>
head>
<body>
<div class="box">
<h2>最新文章/New Articlesh2>
<ul>
<li><a href="#">北京招聘网页设计,平面设计,phpa>li>
<li><a href="#">体验javascript的魅力a>li>
<li><a href="#">jquery世界来临a>li>
<li><a href="#">网页设计师的梦想a>li>
<li><a href="#">jquery中的链式编程是什么a>li>
ul>
div>
body>
html>
但是文字把图标给盖住了。站在图标的角度看,我们可以为其添加margin-left
,让文字往右移动。
.box ul li a {
color: #333;
font-size: 12px;
text-decoration: none;
margin-left: 20px;
}
站在图标的角度看,我们可以为其添加padding-left
,让文字往右移动,只不过a
会被撑大,而a是透明的,因此没什么影响。
.box ul li a {
color: #333;
font-size: 12px;
text-decoration: none;
padding-left: 20px;
}
同时也可以在li
的角度,如果设置margin-left
,会不妥,因为图标也是在li
里的,如果加外边框,li
会带着a
标签向右偏移。
.box ul li {
height: 30px;
line-height: 30px;
/*background-color: pink;*/
border-bottom: 1px dashed #ccc;
/*background-position: 5px center ; 可简写到background里 */
background: url(images/arr.jpg) no-repeat 5px center;
margin-left: 20px;
}
.box ul li a {
color: #333;
font-size: 12px;
text-decoration: none;
/*margin-left: 20px;*/
/*padding-left: 20px;*/
}
.box ul li a:hover {
text-decoration: underline;
}
我们设置了padding
为啥不重新计算盒子呢?
因为这个li
没有宽度 所以padding
不会撑开盒子
.box ul li {
height: 30px;
line-height: 30px;
/*background-color: pink;*/
border-bottom: 1px dashed #ccc;
/*background-position: 5px center ; 可简写到background里 */
background: url(images/arr.jpg) no-repeat 5px center;
/*因为这个li 没有宽度 所以padding 不会撑开盒子*/
padding-left: 20px;
}
上面还有漏洞,我们对照原图发现标题下划线和第一个li
太近了。
21像素
,我们减去li
的文字上部本来的11px
,我们设置为10px
即可。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新闻列表综合案例title>
<style>
/*这句话必须要写, 不要忘却了*/
* {
margin: 0;
padding: 0;
}
/*取消列表样式*/
li {
list-style: none;
}
.box {
width: 298px;
height: 196px;
/*灰色*/
border: 1px solid #ccc;
/*块级盒子水平居中*/
margin: 100px auto;
background: url(images/line.jpg);
/*如果一个盒子给了一个padding值,会撑大盒子*/
padding: 15px;
}
.box h2 {
font-size: 18px;
/*字跟下划线有一些间隙,我们设置为上下均有间隙*/
padding: 5px 0;
/*底边框*/
border-bottom: 1px solid #ccc;
margin-bottom: 10px;
}
.box ul li {
height: 30px;
line-height: 30px;
/*background-color: pink;*/
border-bottom: 1px dashed #ccc;
/*background-position: 5px center ; 可简写到background里 */
background: url(images/arr.jpg) no-repeat 5px center;
/*因为这个li 没有宽度 所以padding 不会撑开盒子*/
padding-left: 20px;
}
.box ul li a {
color: #333;
font-size: 12px;
text-decoration: none;
/*margin-left: 20px;*/
/*padding-left: 20px;*/
}
.box ul li a:hover {
text-decoration: underline;
}
style>
head>
<body>
<div class="box">
<h2>最新文章/New Articlesh2>
<ul>
<li><a href="#">北京招聘网页设计,平面设计,phpa>li>
<li><a href="#">体验javascript的魅力a>li>
<li><a href="#">jquery世界来临a>li>
<li><a href="#">网页设计师的梦想a>li>
<li><a href="#">jquery中的链式编程是什么a>li>
ul>
div>
body>
html>
参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.68
Branch: branch01commit description:a0.68( 综合案例example15-5——最终实现)
tag:a0.68
以下我们讲的CSS3
部分新属性, 但是我们遵循的原则是,以下内容,不会影响我们页面布局, 只是样式更好看了而已。
border-radius:length;
实际radius
是半径的意思,这里就是通过半径来控制圆角边框。
其中每一个值可以为 数值或百分比的形式。
技巧: 让一个正方形 变成圆圈
border-radius: 50%;
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
style>
head>
<body>
<div> div>
body>
html>
div {
width: 200px;
height: 200px;
background-color: pink;
border-radius: 100px;
}
但是以上这样计算圆的半径很麻烦,可以设置百分比:
div {
width: 200px;
height: 200px;
background-color: pink;
/*border-radius: 100px;*/
border-radius: 50%;
}
参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.69
Branch: branch01commit description:a0.69( 综合案例example16-1——圆角边框初步实现)
tag:a0.69
这个应用十分广泛:
做出如下样式,即不是圆了,而是矩形,侧边是半圆。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/*border-radius: 100px;*/
border-radius: 50%;
}
p {
width: 100px;
height: 20px;
background-color: red;
font-size: 12px;
color: #fff;
text-align: center;
line-height: 20px;
border-radius: 50%;
}
style>
head>
<body>
<div> div>
<p> 特价 免费送 p>
body>
html>
以上效果图矩形的圆角, 就不要用 百分比了,因为百分比会是表示高度和宽度的一半。
而我们这里矩形就只用 用 高度的一半就好了,即精确单位。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/*border-radius: 100px;*/
border-radius: 50%;
}
p {
width: 100px;
height: 20px;
background-color: red;
font-size: 12px;
color: #fff;
text-align: center;
line-height: 20px;
border-radius: 10px;
}
style>
head>
<body>
<div> div>
<p> 特价 免费送 p>
body>
html>
参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.70
Branch: branch01commit description:a0.70( 综合案例example16-2——矩形圆角边框初步实现)
tag:a0.70
border-radius: 1-4 length|% / 1-4 length|%;
border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性
CSS 属性 border-radius
允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形,当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。
注意: 每个半径的四个值的顺序是:左上角,右上角,右下角,左下角。
如果省略左下角,右上角是相同的。
如果省略右下角,左上角是相同的。
如果省略右上角,左上角是相同的。
值 | 描述 |
---|---|
length | 定义弯道的形状。 |
% | 使用%定义角落的形状。 |
该属性是一个 简写属性,是为了将这四个属性 border-top-left-radius
、border-top-right-radius
、border-bottom-right-radius
,和 border-bottom-left-radius
简写为一个属性。
即使元素没有边框,圆角也可以用到 background
上面,具体效果受 background-clip
影响。
当 border-collapse
的值为 collapse
时,border-radius
属性不会被应用到表格(
)元素上。
CSS box-shadow
属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果,并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。
box-shadow:水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 内/外阴影;
div {
width: 200px;
height: 200px;
border: 10px solid red;
/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); */
/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸(影子大小) 阴影颜色 内/外阴影; */
box-shadow: 0 15px 30px rgba(0, 0, 0, .4);
}
你几乎可以在任何元素上使用box-shadow
来添加阴影效果。如果元素同时设置了 border-radius
属性 ,那么阴影也会有圆角效果。多个阴影在z轴上的顺序和多个 text shadows 规则相同(第一个阴影在最上面)。
是一个允许你生成 box-shadow
的交互式工具。
更多可参考
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 50px auto;
/*box-shadow:水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 内/外阴影;*/
box-shadow: 2px 2px 2px 2px #000;
}
style>
head>
<body>
<div>div>
body>
html>
水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子大小)
分别演示一下:
我们看看小米怎么写的:
可以把透明度设置深一些:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 50px auto;
/*box-shadow:水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 内/外阴影;*/
/*box-shadow: 2px 2px 2px 2px #000;*/
box-shadow: 0 15px 30px rgba(0,0,0,.3);
}
style>
head>
<body>
<div>div>
body>
html>
参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.71
Branch: branch01commit description:a0.71( 综合案例example17——盒子阴影demo)
tag:a0.71
开始就形成良好的书写规范,是你专业的开始。
【强制】 选择器 与 { 之间必须包含空格。
示例:
.selector {
}
【强制】 属性名 与之后的 : 之间不允许包含空格, : 与 属性值 之间必须包含空格。
示例:
font-size: 12px;
【强制】 并集选择器,每个选择器声明必须独占一行。
示例:
/* good */
.post,
.page,
.comment {
line-height: 1.5;
}
/* bad */
.post, .page, .comment {
line-height: 1.5;
}
【建议】 一般情况情况下,选择器的嵌套层级应不大于 3 级,位置靠后的限定条件应尽可能精确。
示例:
/* good */
#username input {}
.comment .avatar {}
/* bad */
.page .header .login input {}
.comment div * {}
【强制】 属性定义必须另起一行。
示例:
/* good */
.selector {
margin: 0;
padding: 0;
}
/* bad */
.selector { margin: 0; padding: 0; }
【强制】 属性定义后必须以分号结尾。
示例:
/* good */
.selector {
margin: 0;
}
/* bad */
.selector {
margin: 0
}