CSS
1.1 CSS初识
CSS(Cascading Style Sheets) ,通常称为CSS样式表或层叠样式表(级联样式表)
1.2 引入CSS样式表
行内式(内联样式)
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
内部样式表(内嵌样式表)
<head>
<style type="text/CSS">
选择器(选择的标签) {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
</style>
</head>
外部样式表(外链式)
<head>
<link rel="stylesheet" type="text/css" href="css文件路径">
</head>
行内样式表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1 style="color: pink; font-size: 18px;">世纪佳缘,我也在这里等你思密达</h1>
<p> 一行 </p>
</body>
</html>
内部样式表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h2 {
color: green;
font-size: 20px;
}
h4 {
color: purple;
}
p {
color: blue;
}
</style>
</head>
<body>
<h2>忆江南 唐.白居易</h2>
<p>
江南好,风景旧曾谙。<br />
日出江花红胜火,<br />
春来江水绿如蓝,<br />
能不忆江南。</p>
<h4>作者介绍</h4>
<p>白居易(772-846) ,字乐天,白居易(772-846) ,字乐天,
太原(今属山西)人。唐德宗朝进士,元和三年(808)拜左拾遗,后贬江州(今属江西)司马,移忠州(今属四川)刺史,又为苏州(今属江苏)、同州(今属陕西大荔)刺史。晚居洛阳,自号醉吟先生、香山居士。其诗政治倾向鲜明,重讽喻,尚坦易,为中唐大家。也是早期词人中的佼佼者,所作对后世影响甚大。
</p>
<h4>注释</h4>
<p>(1)据《乐府杂录》,此词又名《谢秋娘》,系唐李德裕为亡姬谢秋娘作。又名《望江南》、
《梦江南》等。分单调、双调两体。单调二十七字,双凋五十四字,皆平韵。(2)谙(音安):熟悉。(3)蓝:蓝草,其叶可制青绿染料。</p>
<h4>品评</h4>
<p>此词写江南春色,首句“江南好”,以一个既浅切又圆活的“好”字,摄尽江南春色的种种佳处,而作者的赞颂之意与向往之情也尽寓其中。同时,唯因“好”之已甚,方能“忆”之不休,因此,此句又已暗逗结句“能不忆江南”,并与之相关阖。次句“风景旧曾谙”,点明江南风景之“好”,并非得之传闻,而是作者出牧杭州时的亲身体验与亲身感受。这就既落实了“好”字,又照应了“忆”字,不失为勾通一篇意脉的精彩笔墨。三、四两句对江南之“好”进 行形象化的演绎,突出渲染江花、江水红绿相映的明艳色彩,给人以光彩夺目的强烈印象。其中,既有同色间的相互烘托,又有异色间的相互映衬,充分显示了作者善于著色的技巧。篇末,以“能不忆江南”收束全词,既托出身在洛阳的作者对江南春色的无限赞叹与怀念,又造成一种悠远而又深长的韵味,把读者带入余情摇漾的境界中。</p>
</body>
</html>
1.2.1 三种样式表总结
样式表 |
优点 |
缺点 |
使用情况 |
控制范围 |
行内样式表 |
书写方便,权重高 |
没有实现样式和结构相分离 |
较少 |
控制一个标签(少) |
内部样式表 |
部分结构和样式相分离 |
没有彻底分离 |
较多 |
控制一个页面(中) |
外部样式表 |
完全实现结构和样式相分离 |
需要引入 |
最多,强烈推荐 |
控制整个站点(多) |
1.3 CSS基础选择器
标签选择器
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
类选择器
.类名 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
通配符选择器
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
id选择器
#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
color: red;
}
span {
color: green;
}
</style>
</head>
<body>
标签选择器口诀:
<div>标签选择器,</div>
<div>页面同选起。</div>
<div>直接写标签,</div>
<div>全部不放弃。</div>
<span>标签选择器,</span>
<span>页面同选起。</span>
<span>直接写标签,</span>
<span>全部不放弃</span>
</body>
</html>
类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.red {
color: red;
}
</style>
</head>
<body>
类选择器口诀:
<div>差异化选择,</div>
<div class="red">一个或多个。</div>
<div>上面点定义,</div>
<div>类名别写错。</div>
<div>谁用谁调用,</div>
<div>class来做。</div>
<div class="red">嘿嘿,工作类最多。</div>
</body>
</html>
多类名
<span class="blue font100">G</span>
id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#pink {
color: pink;
}
</style>
</head>
<body>
<p>愿你出走半生,</p>
<p>归来仍是少年。</p>
<p>愿我洗尽铅华,</p>
<p id="pink">依旧笑魇如花。</p>
</body>
</html>
通配符选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
color: pink;
}
</style>
</head>
<body>
<div>所有的,我都要</div>
<div>所有的,我都要</div>
<p>所有的,我都要</p>
<span>所有的,我都要</span>
</body>
</html>
基础选择器总结
选择器 |
作用 |
缺点 |
使用情况 |
用法 |
标签选择器 |
可以选出所有相同的标签,比如p |
不能差异化选择 |
较多 |
p { color:red;} |
类选择器 |
可以选出1个或者多个标签 |
可以根据需求选择 |
非常多 |
.nav { color: red; } |
id选择器 |
一次只能选择器1个标签 |
只能使用一次 |
不推荐使用 |
#nav {color: red;} |
通配符选择器 |
选择所有的标签 |
选择的太多,有部分不需要 |
不推荐使用 |
* {color: red;} |
1.4 font字体
font-size:大小
p {
font-size:20px;
}
font-family:字体
p {
font-family:"微软雅黑";
}
font-weight:字体粗细
font-style:字体风格
平时我们很少给文字加斜体,反而喜欢给斜体标签(em,i)改为普通模式。
font-style: normal;
属性值 |
描述 |
normal |
默认值(不加粗的) |
bold |
定义粗体(加粗的) |
100~900 |
400 等同于 normal,而 700 等同于 bold 我们重点记住这句话 |
属性 |
作用 |
normal |
默认值,浏览器会显示标准的字体样式 font-style: normal; |
italic |
浏览器会显示斜体的字体样式。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
font-size: 16px;
}
.title {
font-size: 20px;
font-family: Arial, "Microsoft YaHei", "微软雅黑" , "黑体";
font-weight: 700;
font-style: italic;
}
h1 {
font-weight: 400;
}
em {
font-style: normal;
}
</style>
</head>
<body>
<p class="title">粉红色的回忆</p>
<p>夏天夏天悄悄过去留下小秘密</p>
<p>压心底 压心底 不能告诉你</p>
<p>晚风春过温暖我心底 我又想起你</p>
<p>多甜蜜 多甜蜜 怎能忘记</p>
<h1> 韩宝仪 </h1>
<em>韩宝仪音乐专辑</em>
</body>
</html>
1.4.1 font:综合设置字体样式
选择器 { font: font-style font-weight font-size/line-height font-family;}
使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以**空格**隔开。
其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
font-size: 16px;
}
.title {
font: italic 700 20px "微软雅黑";
}
h1 {
font-weight: 400;
}
em {
font-style: normal;
}
</style>
</head>
<body>
<p class="title">粉红色的回忆</p>
<p>夏天夏天悄悄过去留下小秘密</p>
<p>压心底 压心底 不能告诉你</p>
<p>晚风春过温暖我心底 我又想起你</p>
<p>多甜蜜 多甜蜜 怎能忘记</p>
<h1> 韩宝仪 </h1>
<em>韩宝仪音乐专辑</em>
</body>
</html>
1.4.2 font总结
属性 |
表示 |
注意点 |
font-size |
字号 |
我们通常用的单位是px 像素,一定要跟上单位 |
font-family |
字体 |
实际工作中按照团队约定来写字体 |
font-weight |
字体粗细 |
记住加粗是 700 或者 bold 不加粗 是 normal 或者 400 记住数字不要跟单位 |
font-style |
字体样式 |
记住倾斜是 italic 不倾斜 是 normal 工作中我们最常用 normal |
font |
字体连写 |
1. 字体连写是有顺序的 不能随意换位置 2. 其中字号 和 字体 必须同时出现 |
1.5 color:文本颜色
表示表示 |
属性值 |
预定义的颜色值 |
red,green,blue,还有我们的御用色 pink |
十六进制 |
#FF0000,#FF6600,#29D794 |
RGB代码 |
rgb(255,0,0)或rgb(100%,0%,0%) |
1.6 text-align:文本水平对齐方式
里面的文字内容 行内块 行内元素都可以居中对齐
属性 |
解释 |
left |
左对齐(默认值) |
right |
右对齐 |
center |
居中对齐 |
1.7 line-height:行间距
一般情况下,行距比字号大7.8像素左右就可以了。
line-height: 24px;
1.8 text-indent:首行缩进
p {
/*行间距*/
line-height: 25px;
/*首行缩进2个字 em 1个em 就是1个字的大小*/
text-indent: 2em;
}
1.9 text-decoration 文本的装饰
值 |
描述 |
none |
默认。定义标准的文本。 取消下划线(最常用) |
underline |
定义文本下的一条线。下划线 也是我们链接自带的(常用) |
overline |
定义文本上的一条线。(不用) |
line-through |
定义穿过文本下的一条线。(不常用) |
1.10 CSS外观属性总结
属性 |
表示 |
注意点 |
color |
颜色 |
我们通常用 十六进制 比如 而且是简写形式 #fff |
line-height |
行高 |
控制行与行之间的距离 |
text-align |
水平对齐 |
可以设定文字水平的对齐方式 |
text-indent |
首行缩进 |
通常我们用于段落首行缩进2个字的距离 text-indent: 2em; |
text-decoration |
文本修饰 |
记住 添加 下划线 underline 取消下划线 none |
1.11 背景简写
background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
2.1 CSS复合选择器
CSS选择器分为 基础选择器 和 复合选择器 ,但是基础选择器不能满足我们实际开发中,快速高效的选择标签。
目的是为了可以选择更准确更精细的目标元素标签。 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的
2.1.1 后代选择器
用来选择元素或元素组的子孙后代
.class h3 {
color:red;
font-size:16px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style>
.nav a {
color: pink;
}
.wangsicong ul li {
color: red;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">内部链接</a>
<a href="#">内部链接</a>
<a href="#">内部链接</a>
</div>
<a href="#">外部链接</a>
<a href="#">外部链接</a>
<a href="#">外部链接</a>
<ul>
<li>一条狗</li>
<li>一条狗</li>
<li>一条狗</li>
</ul>
<div class="wangsicong">
<ul>
<li>王可可是一条狗</li>
<li>王可可是一条狗</li>
<li>王可可是一条狗</li>
</ul>
</div>
</body>
</html>
2.1.2 子元素选择器
子元素选择器只能选择作为某元素子元素(亲儿子)的元素。
.class>h3 {
color:red;
font-size:14px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div>strong {
color: pink;
}
</style>
</head>
<body>
<div>
<strong>儿子</strong>
<strong>儿子</strong>
<strong>儿子</strong>
</div>
<div>
<p>
<strong>孙子</strong>
<strong>孙子</strong>
<strong>孙子</strong>
</p>
</div>
</body>
</html>
2.1.3 交集选择器
交集选择器 是 并且的意思。 即...又...的意思
两个选择器之间不能有空格
比如: p.one 选择的是: 类名为 .one 的 段落标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>交集选择器</title>
<style>
p.red {
color: red;
}
</style>
</head>
<body>
<p class="red">红色</p>
<p class="red">红色</p>
<p class="red">红色</p>
<div class="red">红色</div>
<div class="red">红色</div>
<div class="red">红色</div>
<p>蓝色</p>
<p>蓝色</p>
<p>蓝色</p>
</body>
</html>
2.1.4 并集选择器
比如 .one, p , #test {color: #F00;}
表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。
通常用于集体声明。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p,
span,
.red {
color: red;
}
</style>
</head>
<body>
<p>我和你</p>
<p>我和你</p>
<p>我和你</p>
<span>我和你</span>
<span>我和你</span>
<span>我和你</span>
<div class="red">我和你</div>
<div>我和你</div>
<h1>你和我</h1>
<h1>你和我</h1>
</body>
</html>
2.1.5 链接伪类选择器
a:link /* 未访问的链接 */
a:visited /* 已访问的链接 */
a:hover /* 鼠标移动到链接上 */
a:active /* 选定的链接 */
记忆法
love hate 爱上了讨厌
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接伪类选择器</title>
<style>
a:link {
color: #333;
text-decoration: none;
}
a:visited {
color: orange;
}
a:hover {
color: red;
}
a:active {
color: green;
}
</style>
</head>
<body>
<a href="http://www.xiaomi.com">小米手机</a>
<a href="http://www.dami.com">大米手机</a>
</body>
</html>
2.1.6 复合选择器总结
选择器 |
作用 |
特征 |
使用情况 |
隔开符号及用法 |
后代选择器 |
用来选择元素后代 |
是选择所有的子孙后代 |
较多 |
符号是空格 .nav a |
子代选择器 |
选择 最近一级元素 |
只选亲儿子 |
较少 |
符号是**>** .nav>p |
交集选择器 |
选择两个标签交集的部分 |
既是 又是 |
较少 |
没有符号 p.one |
并集选择器 |
选择某些相同样式的选择器 |
可以用于集体声明 |
较多 |
符号是逗号 .nav, .header |
链接伪类选择器 |
给链接更改状态 |
|
较多 |
重点记住 a{} 和 a:hover 实际开发的写法 |
2.1.7 权重计算公式
标签选择器 |
计算权重公式 |
继承或者 * |
0,0,0,0 |
每个元素(标签选择器) |
0,0,0,1 |
每个类,伪类 |
0,0,1,0 |
每个ID |
0,1,0,0 |
每个行内样式 style="" |
1,0,0,0 |
每个!important 重要的 |
∞ 无穷大 |
2.2 标签显示模式(display)重点
块级元素(block-level)
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>标签是最典型的块元素。
(1)比较霸道,自己独占一行
(2)高度,宽度、外边距以及内边距都可以控制。
(3)宽度默认是容器(父级宽度)的100%
(4)是一个容器及盒子,里面可以放行内或者块级元素。
注意:
只有 文字才 能组成段落 因此 p 里面不能放块级元素,特别是 p 不能放div
同理还有这些标签h1,h2,h3,h4,h5,h6,dt,他们都是文字类块级标签,里面不能放其他块级元素。
行内元素(inline-level)
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,其中<span>标签最典型的行内元素。有的地方也成内联元素
(1)相邻行内元素在一行上,一行可以显示多个。
(2)高、宽直接设置是无效的。
(3)默认宽度就是它本身内容的宽度。
(4)行内元素只能容纳文本或则其他行内元素。
行内块元素(inline-block)
在行内元素中有几个特殊的标签——<img />、<input />、<td>,可以对它们设置宽高和对齐属性,有些资料可能会称它们为行内块元素。
(1)和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。一行可以显示多个
(2)默认宽度就是它本身内容的宽度。
(3)高度,行高、外边距以及内边距都可以控制。
行内元素/行内块元素(inline-block)的共同点:
他们之间如果没有缝隙的话,就紧挨在一起,如果有一点缝隙的话,就不能紧挨在一起。
块级显示模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div>我是块级元素</div>
<div>我是块级元素</div>
<div>
<strong>文字</strong>
<h1>标题</h1>
</div>
</body>
</html>
行内显示模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
span {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<span>我是行内元素</span>
<span>我是行内元素</span>
<span>我是行内元素哒哒哒</span>
<span><strong></strong></span>
</body>
</html>
行内块显示模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img {
width: 200px;
}
</style>
</head>
<body>
<img src="images/3.jpg" alt="">
<img src="images/3.jpg" alt="">
<img src="images/3.jpg" alt="">
</body>
</html>
2.2.1 三种模式总结区别
元素模式 |
元素排列 |
设置样式 |
默认宽度 |
包含 |
块级元素 |
一行只能放一个块级元素 |
可以设置宽度高度 |
容器的100% |
容器级可以包含任何标签 |
行内元素 |
一行可以放多个行内元素 |
不可以直接设置宽度高度 |
它本身内容的宽度 |
容纳文本或则其他行内元素 |
行内块元素 |
一行放多个行内块元素 |
可以设置宽度和高度 |
它本身内容的宽度 |
|
2.2.2 标签显示模式转换 display
块转行内:display:inline;
行内转块:display:block;
块、行内元素转换为行内块: display: inline-block;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
span {
display: block;
width: 100px;
height: 100px;
background-color: pink;
}
div {
display: inline;
width: 200px;
height: 200px;
background-color: purple;
}
a {
display: inline-block;
width: 80px;
height: 25px;
background-color: orange;
}
</style>
</head>
<body>
<span>行内</span>
<span>行内</span>
<div>div 是块级元素</div>
<div>div 是块级元素</div>
<a href="#">百度</a>
<a href="#">新浪</a>
</body>
</html>
2.3 单行文本垂直居中
如果 行高 等 高度 文字会 垂直居中
如果行高 大于 高度 文字会 偏下
如果行高小于高度 文字会 偏上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 100px;
height: 50px;
background-color: pink;
line-height: 50px;
}
</style>
</head>
<body>
<div> 文字垂直居中 </div>
</body>
</html>
2.4 背景
2.4.1 CSS 背景(background)
背景颜色(color)
background-color:颜色值; 默认的值是 transparent 透明的
背景图片(image)
background-image : none | url (url)
background-image : url(images/demo.png);
我们提倡 背景图片后面的地址,url不要加引号。
参数 |
作用 |
none |
无背景图(默认的) |
url |
使用绝对或相对地址指定背景图像 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.bg {
width: 800px;
height: 500px;
background-color: pink;
background-image: url(images/l.jpg);
}
</style>
</head>
<body>
<div class="bg">
12312312312312312312312312312
</div>
</body>
</html>
2.4.2 背景平铺(repeat)
background-repeat : repeat | no-repeat | repeat-x | repeat-y
参数 |
作用 |
repeat |
背景图像在纵向和横向上平铺(默认的) |
no-repeat |
背景图像不平铺 |
repeat-x |
背景图像在横向上平铺 |
repeat-y |
背景图像在纵向平铺 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.bg {
width: 800px;
height: 500px;
background-color: pink;
background-image: url(images/l.jpg);
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div class="bg">
12312312312312312312312312312
</div>
</body>
</html>
2.4.3 背景位置(position)
必须先指定background-image属性
position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
如果指定两个值,两个值都是方位名字,则两个值前后顺序无关,比如left top和top left效果一致
如果只指定了一个方位名词,另一个值默认居中对齐。
如果position 后面是精确坐标, 那么第一个,肯定是 x 第二的一定是y
如果只指定一个数值,那该数值一定是x坐标,另一个默认垂直居中
如果指定的两个值是 精确单位和方位名字混合使用,则第一个值是x坐标,第二个值是y坐标
background-position: x坐标 y坐标;
background-position: right top; 右上角
background-position: left bottom; 左下角
background-position: center center; 水平居中 垂直居中
background-position: center left; 两个值前后顺序无关 因为是方位名词
background-position: top; 如果只指定了一个方位名词,另一个值默认居中对齐
background-position: x坐标 y坐标;
background-position: right top; 右上角
background-position: 50px 10px ; 那么第一个,肯定是 x 是 50 第二的一定是y 是 10
background-position: 10px center; 以下说明 x 10像素 y 垂直居中的
background-position: center 10px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.bg {
width: 800px;
height: 500px;
background-color: pink;
background-image: url(images/l.jpg);
background-repeat: no-repeat;
background-position: top;
}
</style>
</head>
<body>
<div class="bg">
12312312312312312312312312312
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.bg {
width: 800px;
height: 500px;
background-color: pink;
background-image: url(images/l.jpg);
background-repeat: no-repeat;
background-position: center 10px;
}
</style>
</head>
<body>
<div class="bg">
12312312312312312312312312312
</div>
</body>
</html>
2.4.4 背景附着
背景附着就是解释背景是滚动的还是固定的
background-attachment : scroll | fixed
参数 |
作用 |
scroll |
背景图像是随对象内容滚动 |
fixed |
背景图像固定 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
height: 3000px;
background-image: url(images/sms.jpg);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
}
p {
font-size: 30px;
color: #fff;
}
</style>
</head>
<body>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
</body>
</html>
2.4.5 背景简写
background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
background: transparent url(image.jpg) repeat-y scroll center top ;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
height: 3000px;
background: #ccc url(images/sms.jpg) no-repeat fixed center top;
}
p {
font-size: 30px;
color: #fff;
}
</style>
</head>
<body>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
<p>天王盖地虎,小鸡炖蘑菇</p>
</body>
</html>
2.4.6 背景透明
background: rgba(0, 0, 0, 0.3);
最后一个参数是alpha 透明度 取值范围 0~1之间
我们习惯把0.3 的 0 省略掉 这样写 background: rgba(0, 0, 0, .3);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.alpha {
width: 300px;
height: 300px;
background: rgba(0, 0, 0, .2);
}
</style>
</head>
<body>
<div class="alpha">
哒哒哒
</div>
</body>
</html>
2.4.7 背景总结
属性 |
作用 |
值 |
background-color |
背景颜色 |
预定义的颜色值/十六进制/RGB代码 |
background-image |
背景图片 |
url(图片路径) |
background-repeat |
是否平铺 |
repeat/no-repeat/repeat-x/repeat-y |
background-position |
背景位置 |
length/position 分别是x 和 y坐标, 切记 如果有 精确数值单位,则必须按照先X 后Y 的写法 |
background-attachment |
背景固定还是滚动 |
scroll/fixed |
背景简写 |
更简单 |
背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序 |
背景透明 |
让盒子半透明 |
background: rgba(0,0,0,0.3); 后面必须是 4个值 |
2.5 CSS层叠性
样式冲突,遵循的原则是就近原则。那个样式离着结构近,就执行那个样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
color: red;
font-size: 30px;
}
div {
color: pink;
}
</style>
</head>
<body>
<div>
长江后浪推前浪,前浪死在沙滩上。
</div>
</body>
</html>
2.5.1 CSS继承性
子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承,以及color属性)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
color: red;
}
</style>
</head>
<body>
<div>
<p>王思聪</p>
</div>
</body>
</html>
2.5.2 CSS优先级
选择器相同,则执行层叠性
选择器不同,就会出现优先级的问题。选择器不同,就会出现优先级的问题。
CSS权重,我们需要一套计算公式来去计算,这个就是 CSS Specificity(特殊性)
值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。
数位之间没有进制 比如说: 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0, 所以不会存在10个div能赶上一个类选择器的情况。
标签选择器 |
计算权重公式 |
继承或者 * |
0,0,0,0 |
每个元素(标签选择器) |
0,0,0,1 |
每个类,伪类 |
0,0,1,0 |
每个ID |
0,1,0,0 |
每个行内样式 style="" |
1,0,0,0 |
每个!important 重要的 |
∞ 无穷大 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
color: pink!important;
}
.one {
color: blue;
}
#two {
color: green;
}
</style>
</head>
<body>
<div class="one" id="two" style="color: yellow;"> 权重还有30秒到达战场 </div>
</body>
</html>
2.5.3 权重叠加
标签选择器 |
计算权重公式 |
继承或者 * |
0,0,0,0 |
每个元素(标签选择器) |
0,0,0,1 |
每个类,伪类 |
0,0,1,0 |
每个ID |
0,1,0,0 |
每个行内样式 style="" |
1,0,0,0 |
每个!important 重要的 |
∞ 无穷大 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.nav a {
color: red;
}
.nav .first {
color: pink;
}
</style>
</head>
<body>
<div> 人生四大悲 </div>
<div class="nav">
<a href="#" class="first">家里没宽带</a>
<a href="#">网速不够快</a>
<a href="#">手机没流量</a>
<a href="#">学校无wifi</a>
</div>
</body>
</html>
3.1 盒子模型
盒子边框(border)
border : border-width || border-style || border-color
边框的样式:
none:没有边框即忽略所有边框的宽度(默认值)
solid:边框为单实线(最为常用的)
dashed:边框为虚线
dotted:边框为点线
border: 1px solid red; 没有顺序
属性 |
作用 |
border-width |
定义边框粗细,单位是px |
border-style |
边框的样式 |
border-color |
边框颜色 |
3.1.1 盒子边框总结表
很多情况下,我们不需要指定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:宽度 样式 颜色; |
盒子边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
border: 5px dotted pink;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>
分别指定边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<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: none;
border-bottom: 1px dashed red;
}
</style>
</head>
<body>
<div> </div>
用户名: <input type="text" > <br>
密码: <input type="text" >
</body>
</html>
3.1.2 表格的细线边框
通过表格的`cellspacing="0"`,将单元格与单元格之间的距离设置为0,
但是两个单元格之间的边框会出现重叠,从而使边框变粗
通过css属性:
table{ border-collapse:collapse; }
<style>
table {
width: 500px;
height: 300px;
border: 1px solid red;
}
td {
border: 1px solid red;
text-align: center;
}
table, td {
border-collapse: collapse; /*合并相邻边框*/
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小说排行榜</title>
<style>
table,
td,
th {
border: 1px solid deeppink;
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>1</td>
<td>鬼吹灯</td>
<td>
<img src="images/up.jpg">
</td>
<td>356</td>
<td>3560</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr class="pink">
<td>1</td>
<td>鬼吹灯</td>
<td>
<img src="images/down.jpg">
</td>
<td>356</td>
<td>3560</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>
<img src="images/up.jpg">
</td>
<td>356</td>
<td>3560</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr class="pink">
<td>1</td>
<td>鬼吹灯</td>
<td>1</td>
<td>356</td>
<td>3560</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>1</td>
<td>356</td>
<td>3560</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr class="pink">
<td>1</td>
<td>鬼吹灯</td>
<td>1</td>
<td>356</td>
<td>3560</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>1</td>
<td>356</td>
<td>3560</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
</table>
</body>
</html>
3.1.3 内边距(padding)
padding属性用于设置内边距。 是指 边框与内容之间的距离。
当我们给盒子指定padding值之后, 发生了2件事情:
1. 内容和边框 有了距离,添加了内边距。
2. 盒子会变大了。
属性 |
作用 |
padding-left |
左内边距 |
padding-right |
右内边距 |
padding-top |
上内边距 |
padding-bottom |
下内边距 |
值的个数 |
表达意思 |
1个值 |
padding:上下左右内边距; |
2个值 |
padding: 上下内边距 左右内边距 ; |
3个值 |
padding:上内边距 左右内边距 下内边距; |
4个值 |
padding: 上内边距 右内边距 下内边距 左内边距 ; |
<!DOCTYPE html>
<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>
3.1.4 内盒尺寸计算(元素实际大小)
盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框
解决padding跟宽高撑大盒子的问题:先量下盒子的总宽高,然后减去这两部分,剩下的就是内容的宽高了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算盒子实际的大小</title>
<style>
div {
width: 180px;
height: 200px;
background-color: pink;
padding: 10px;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>
3.1.5 padding不影响盒子大小情况
如果没有给一个盒子指定宽度, 此时,如果给这个盒子指定padding, 则不会撑开盒子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
p {
height: 30px;
background-color: purple;
padding-left: 30px;
}
</style>
</head>
<body>
<div>
<p>哒哒哒</p>
</div>
</body>
</html>
3.1.6 外边距(margin)
margin属性用于设置外边距。 margin就是控制**盒子和盒子之间的距离**
属性 |
作用 |
margin-left |
左外边距 |
margin-right |
右外边距 |
margin-top |
上外边距 |
margin-bottom |
下外边距 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
padding: 20px;
margin: 100px 20px 0 10px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
3.1.7 块级盒子水平居中及文本居中
margin: 0 auto; /* 块级盒子水平居中 */
text-align: center; /* 文字、 行内元素 、行内块元素水平居中 */
块级盒子居中对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 600px;
height: 400px;
background-color: pink;
margin: 0 auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
文字居中和盒子居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 600px;
height: 300px;
background-color: pink;
margin: 50px auto;
text-align: center;
}
</style>
</head>
<body>
<div> 稳住 <strong>我们能赢</strong> <input type="text"> </div>
</body>
</html>
3.1.8 插入图片和背景图片区别
插入图片 我们用的最多 比如产品展示类 移动位置只能靠盒模型 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 */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.pic,
.bg {
width: 500px;
height: 500px;
border: 1px solid red;
}
.pic img {
margin: 30px;
}
.bg {
background: url(images/3.jpg) no-repeat;
background-position: 30px 30px;
}
</style>
</head>
<body>
<div class="pic">
<img src="images/3.jpg" alt="">
</div>
<div class="bg">
</div>
</body>
</html>
3.1.9 清除元素的默认内外边距
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
span {
margin: 30px;
}
</style>
</head>
<body>
一个问题
<p>又是一个问题</p>
<span> 行内元素 尽量只设置左右内外边距, 不要设置上下内外边距。</span>
</body>
</html>
3.1.10 盒子塌陷问题
1. 相邻块元素垂直外边距的合并(标准流的盒子)
当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom
下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和
取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)
解决方案:
尽量给只给一个盒子添加margin值。
.
2.嵌套块元素垂直外边距的合并(塌陷)(标准流的盒子)
对于两个嵌套关系的块元素,如果父元素没有上内边距或者上边框
父元素的上外边距会与子元素的上外边距发生合并
合并后的外边距为两者中的较大者
解决方案:
1. 可以为父元素定义上边框。
2. 可以为父元素定义上内边距
3. 可以为父元素添加overflow:hidden.
4. 还有其他方法,比如浮动、固定、绝对定位的盒子不会有问题,后面咱们再总结
外边距合并-上下外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<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>
嵌套关系外边距合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
width: 500px;
height: 500px;
background-color: pink;
overflow: hidden;
}
.son {
width: 200px;
height: 200px;
background-color: purple;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
3.1.11 盒子模型布局稳定性
我们根据稳定性来分,建议如下:
按照 优先使用 宽度 (width) 其次 使用内边距(padding) 再次 外边距(margin)。
原因:
margin 会有外边距合并 还有 ie6下面margin 加倍的bug(讨厌)所以最后使用。
padding 会影响盒子大小, 需要进行加减计算(麻烦) 其次使用。
width 没有问题(嗨皮)我们经常使用宽度剩余法 高度剩余法来做。
3.1.12 圆角边框
让一个正方形 变成圆圈
border-radius: 50%;
让一个长方形变成圆角边框:border-radius:0.5height.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
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>
3.1.13 圆角矩形可以为4个角分别设置圆度, 但是是有顺序的
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
3.1.14 盒子阴影
box-shadow:水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 内/外阴影;
即x方向的阴影,y方向的阴影,虚实程度,影子的大小,影子的颜色,内外阴影(默认外阴影)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 50px auto;
box-shadow: 0 15px 30px rgba(0,0,0,.3);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
3.1.15 注意父盒子跟子盒子的宽度高度问题
没有给定宽度的子盒子,给定padding值不会撑开父盒子.
没有设置高度的父盒子,子盒子的高度撑起父盒子的高度。这里指的子盒子是标准流的盒子。
没有给定宽度的块级子盒子,默认宽度是块级父盒子的宽度。
行内元素跟行内块元素默认由内容撑起宽度跟高度。
4.1 CSS 布局的三种机制
CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流 、浮动和定位,其中:
1. 普通流(标准流)
2. 浮动
让盒子从普通流中浮起来 —— 让多个盒子(div)水平排列成一行。
3. 定位
将盒子在某一个位置 自由的漂浮在其他盒子的上面 —— CSS 离不开定位,特别是后面的 js 特效。
普通标准流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
height: 100px;
background-color: pink;
margin-top: 10px;
}
</style>
</head>
<body>
<div>123</div>
<div>abc</div>
<span>行内元素</span>
<span>行内元素</span>
<span>行内元素</span>
<span>行内元素</span>
<span>行内元素</span>
<span>行内元素</span>
<span>行内元素</span>
<span>行内元素</span>
<span>行内元素</span>
</body>
</html>
4.1.1 浮动
float的常见取值;none/left/right
浮动有以下规则:
1.元素一旦浮动后,脱离标准流,朝着向左或向右方向移动,直到自己的边界紧贴着包含块(一般是父元素)或者其他浮动元素的边界为止
2.浮动压不住文字还有图片,所以可以用定位来解决
3.浮动对行内元素或者行内块元素无效,只对块级元素有效,而且浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img {
float: right;
margin: 10px;
}
</style>
</head>
<body>
1993年,在古装片《战神传说》中扮演一个武功超群的渔民;同年,主演动作喜剧片《至尊三十六计之偷天换日》,在片中饰演赌术高明的千门高手钱文迪;此外,他还主演了爱情片《天长地久》,在片中塑造了一个风流不羁的江湖浪子形象。
1994年,刘德华投资并主演了剧情片《天与地》,在片中饰演面对恶势力却毫不退缩的禁毒专员张一鹏。1995年,主演赛车励志片《烈火战车》,在片中饰演叛逆、倔强的阿祖,并凭借该片获得第15届香港电影金像奖最佳男主角提名;同年在动作片《大冒险家》中演绎了立仁从小时候父母双亡到长大后进入泰国空军的故事。
<img src="images/img.jpg" alt="">
1996年,主演黑帮题材的电影《新上海滩》,在片中饰演对冯程程痴情一片的丁力。1997年,担任剧情片《香港制造》的制作人;同年,主演爱情片《天若有情之烽火佳人》,在片中饰演家世显赫的空军少尉刘天伟;12月,与梁家辉联袂主演警匪动作片《黑金》,在片中饰演精明干练、嫉恶如仇的调查局机动组组长方国辉。1998年,主演动作片《龙在江湖》,饰演重义气的黑帮成员韦吉祥;同年,出演喜剧片《赌侠1999》;此外,他还担任剧情片《去年烟花特别多》的制作人。
1993年,在古装片《战神传说》中扮演一个武功超群的渔民;同年,主演动作喜剧片《至尊三十六计之偷天换日》,在片中饰演赌术高明的千门高手钱文迪;此外,他还主演了爱情片《天长地久》,在片中塑造了一个风流不羁的江湖浪子形象。
1994年,刘德华投资并主演了剧情片《天与地》,在片中饰演面对恶势力却毫不退缩的禁毒专员张一鹏。1995年,主演赛车励志片《烈火战车》,在片中饰演叛逆、倔强的阿祖,并凭借该片获得第15届香港电影金像奖最佳男主角提名;同年在动作片《大冒险家》中演绎了立仁从小时候父母双亡到长大后进入泰国空军的故事。
1996年,主演黑帮题材的电影《新上海滩》,在片中饰演对冯程程痴情一片的丁力。1997年,担任剧情片《香港制造》的制作人;同年,主演爱情片《天若有情之烽火佳人》,在片中饰演家世显赫的空军少尉刘天伟;12月,与梁家辉联袂主演警匪动作片《黑金》,在片中饰演精明干练、嫉恶如仇的调查局机动组组长方国辉。1998年,主演动作片《龙在江湖》,饰演重义气的黑帮成员韦吉祥;同年,出演喜剧片《赌侠1999》;此外,他还担任剧情片《去年烟花特别多》的制作人。
</body>
</html>
4.1.1.1 浮动(float)小结
特点 |
说明 |
浮 |
加了浮动的盒子是浮起来的,漂浮在其他标准流盒子的上面。 |
漏 |
加了浮动的盒子是不占位置的,它原来的位置漏给了标准流的盒子。 |
特 |
特别注意:浮动元素会改变display属性, 类似转换为了行内块,但是元素之间没有空白缝隙 |
浮动口诀之浮漏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动口诀之浮</title>
<style>
.one {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.two {
width: 300px;
height: 300px;
background-color: purple;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
浮动口诀之特
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动口诀之特</title>
<style>
div {
float: left;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div>
天王盖地虎,小鸡炖蘑菇
</div>
</body>
</html>
4.1.1.2 浮动和标准流的父盒子搭配
我们知道,浮动是脱标的,会影响下面的标准流元素,此时,
我们需要给浮动的元素添加一个标准流的父亲,这样,最大
化的减小了对其他标准流的影响。
浮动元素与父盒子的关系:
子盒子的浮动参照父盒子对齐
不会与父盒子的边框重叠,也不会超过父盒子的内边距
4.1.1.3 浮动元素与兄弟盒子的关系
在一个父级盒子中,如果前一个兄弟盒子是:
浮动的,那么当前盒子会与前一个盒子的顶部对齐;
普通流的,那么当前盒子会显示在前一个兄弟盒子的下方。
浮动只会影响当前的或者是后面的标准流盒子,不会影响前面的标准流。
如果一个盒子里面有多个子盒子,如果其中一个盒子浮动了,其他兄弟也应该浮动。防止引起问题
4.1.1.4 清除浮动
因为父级盒子很多情况下,不方便给高度,但是子盒子浮动就不占有位置,最后父级盒子高度为0,就影响了下面的标准流盒子。
由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响
准确地说,并不是清除浮动,而是**清除浮动后造成的影响
清除浮动本质
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后, 父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了
标准流不会影响盒子布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.one {
width: 500px;
background-color: pink;
}
.damao {
width: 200px;
height: 200px;
background-color: purple;
}
.ermao {
width: 250px;
height: 250px;
background-color: skyblue;
}
.two {
width: 700px;
height: 150px;
background-color: #000;
}
</style>
</head>
<body>
<div class="one">
<div class="damao"></div>
<div class="ermao"></div>
</div>
<div class="two"></div>
</body>
</html>
浮动会影响盒子布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.one {
width: 500px;
background-color: pink;
}
.damao {
float: left;
width: 200px;
height: 200px;
background-color: purple;
}
.ermao {
float: left;
width: 250px;
height: 250px;
background-color: skyblue;
}
.two {
width: 700px;
height: 150px;
background-color: #000;
}
</style>
</head>
<body>
<div class="one">
<div class="damao"></div>
<div class="ermao"></div>
</div>
<div class="two"></div>
</body>
</html>
4.1.1.5 清除浮动的方法
在CSS中,clear属性用于清除浮动,在这里,我们先记住清除浮动的方法,具体的原理,等我们学完cs会再回头分析。
选择器{clear:属性值;} clear 清除
1.额外标签法(隔墙法)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.one {
width: 500px;
border: 1px solid red;
}
.damao {
float: left;
width: 200px;
height: 200px;
background-color: purple;
}
.ermao {
float: left;
width: 250px;
height: 250px;
background-color: skyblue;
}
.two {
width: 700px;
height: 150px;
background-color: #000;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="one">
<div class="damao"></div>
<div class="ermao"></div>
<div class="clear"></div>
</div>
<div class="two"></div>
</body>
</html>
优点: 通俗易懂,书写方便
缺点: 添加许多无意义的标签,结构化较差。
2. 父级添加overflow属性方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.one {
width: 500px;
border: 1px solid red;
overflow: hidden;
}
.damao {
float: left;
width: 200px;
height: 200px;
background-color: purple;
}
.ermao {
float: left;
width: 250px;
height: 250px;
background-color: skyblue;
}
.two {
width: 700px;
height: 150px;
background-color: #000;
}
</style>
</head>
<body>
<div class="one">
<div class="damao"></div>
<div class="ermao"></div>
</div>
<div class="two"></div>
</body>
</html>
优点: 代码简洁
缺点: 内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。
3. 使用after伪元素清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.clearfix:after {
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
*zoom: 1;
}
.one {
width: 500px;
border: 1px solid red;
}
.damao {
float: left;
width: 200px;
height: 200px;
background-color: purple;
}
.ermao {
float: left;
width: 250px;
height: 250px;
background-color: skyblue;
}
.two {
width: 700px;
height: 150px;
background-color: #000;
}
</style>
</head>
<body>
<div class="one clearfix">
<div class="damao"></div>
<div class="ermao"></div>
</div>
<div class="two"></div>
</body>
</html>
优点: 符合闭合浮动思想 结构语义化正确
缺点: 由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。
4..使用双伪元素清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.one {
width: 500px;
border: 1px solid red;
}
.damao {
float: left;
width: 200px;
height: 200px;
background-color: purple;
}
.ermao {
float: left;
width: 250px;
height: 250px;
background-color: skyblue;
}
.two {
width: 700px;
height: 150px;
background-color: #000;
}
</style>
</head>
<body>
<div class="one clearfix">
<div class="damao"></div>
<div class="ermao"></div>
</div>
<div class="two"></div>
</body>
</html>
优点: 代码更简洁
缺点: 由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。
代表网站: 小米、腾讯等
4.1.1.6 清除浮动总结
1. 父级没高度
2. 子盒子浮动了
3. 影响下面布局了,我们就应该清除浮动了。
清除浮动的方式 |
优点 |
缺点 |
额外标签法(隔墙法) |
通俗易懂,书写方便 |
添加许多无意义的标签,结构化较差。 |
父级overflow:hidden; |
书写简单 |
溢出隐藏 |
父级after伪元素 |
结构语义化正确 |
由于IE6-7不支持:after,兼容性问题 |
父级双伪元素 |
结构语义化正确 |
由于IE6-7不支持:after,兼容性问题 |
4.1.1.7 常见的图片格式
1. jpg图像格式:
JPEG(.JPG)对色彩的信息保留较好,高清,颜色较多,我们产品类的图片经常用jpg格式的
2. gif图像格式:
GIF格式最多只能储存256色,所以通常用来显示简单图形及字体,但是可以保存透明背景和动画效果
3. png图像格式
是一种新兴的网络图形格式,结合了GIF和JPEG的优点,具有存储形式丰富的特点,能够保持透明背景
4. PSD图像格式
PSD格式是Photoshop的专用格式,里面可以存放图层、通道、遮罩等多种设计草稿。 `
4.2.1 定位
4.2.1.1 标准流
标准流就是从左到右,上到下的方式排版的流,默认情况下不存在层叠现象.
脱离标准流的特点:
可以随意设置完高
宽高默认由内容决定
不再受标准流的约束
不再给父元素汇报宽高数据
标准流在最底层 (海底) ------- 浮动 的盒子 在 中间层 (海面) ------- 定位的盒子 在 最上层 (天空)
4.2.1.2 定位详解
定位 = 定位模式 + 边偏移
边偏移需要和定位模式联合使用,单独使用无;
top和 bottom 不要同时使用;
left 和 right不要同时使用。
4.2.1.3 边偏移
边偏移属性 |
示例 |
描述 |
top |
top: 80px |
顶端偏移量,定义元素相对于其父元素上边线的距离。 |
bottom |
bottom: 80px |
底部偏移量,定义元素相对于其父元素下边线的距离。 |
left |
left: 80px |
左侧偏移量,定义元素相对于其父元素左边线的距离。 |
right |
right: 80px |
右侧偏移量,定义元素相对于其父元素右边线的距离 |
4.2.1.4 定位模式
值 |
语义 |
static |
静态定位 |
relative |
相对定位 |
absolute |
绝对定位 |
fixed |
固定定位 |
4.2.1.5 静态定位(static)
静态定位是元素的默认定位方式,无定位的意思。它相当于 border 里面的none, 不要定位的时候用。
静态定位 按照标准流特性摆放位置,它没有边偏移。
静态定位在布局时我们几乎不用的
4.2.1.6 相对定位(relative)
相对定位是元素相对于它原来在标准流中的位置来说的。(自恋型)
原来在标准流的区域继续占有,后面的盒子仍然以标准流的方式对待它。
相对定位初识
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px;
position: relative;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
相对定位2个特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
.two {
background-color: purple;
position: relative;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div>1</div>
<div class="two">2</div>
<div>3</div>
</body>
</html>
4.2.1.7 绝对定位(absolute)
绝对定位是元素以带有定位的父级元素来移动位置 (拼爹型)
将元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位.
定位口诀 —— 子绝父相
1. 完全脱标 —— 完全不占位置;
2. 父元素没有定位,则以浏览器为准定位(Document 文档)。
绝对定位以带有定位的父级来移动位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位以带有定位的父级元素来移动位置</title>
<style>
.yeye {
width: 500px;
height: 500px;
background-color: skyblue;
position: absolute;
}
.father {
width: 350px;
height: 350px;
background-color: pink;
margin: 100px;
}
.son {
width: 200px;
height: 200px;
background-color: purple;
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="yeye">
<div class="father">
<div class="son"></div>
</div>
</div>
</body>
</html>
绝对定位的盒子不占有位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位的盒子不占有位置</title>
<style>
.father {
width: 500px;
height: 500px;
background-color: pink;
position: relative;
}
.damao {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: purple;
}
.ermao {
width: 250px;
height: 250px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="father">
<div class="damao"></div>
<div class="ermao"></div>
</div>
</body>
</html>
子绝父相代码验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.up {
position: relative;
width: 1000px;
height: 90px;
background-color: pink;
}
.down {
width: 1000px;
height: 150px;
background-color: #000;
}
.arr-l {
position: absolute;
top: 25px;
left: 0;
width: 40px;
height: 40px;
background-color: purple;
}
.arr-r {
position: absolute;
top: 25px;
right: 0;
width: 40px;
height: 40px;
background-color: purple;
}
</style>
</head>
<body>
<div class="up">
<img src="images/img.jpg" alt="">
<div class="arr-l"></div>
<div class="arr-r"></div>
</div>
<div class="down"></div>
</body>
</html>
4.2.1.8 固定定位(fixed)
1. 完全脱标 —— 完全不占位置;
2. 只认浏览器的可视窗口 —— `浏览器可视窗口 + 边偏移属性` 来设置元素的位置;
* 跟父元素没有任何关系;单独使用的
* 不随滚动条滚动。
3.在使用固定定位时,如果盒子中没有内容,需要指定宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style>
body {
height: 1500px;
}
.box {
position: relative;
width: 300px;
height: 300px;
background-color: pink;
margin: 100px;
}
.box img {
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="box">
<img src="images/sun.jpg" alt="" width="150">
</div>
</body>
</html>
4.2.1.9 定位(position)的扩展
绝对定位/固定定位的盒子不能通过设置 margin: auto设置水平居中。相对定位可以
1. left: 50%;:让盒子的左侧移动到父级元素的水平中心位置;
2. margin-left: -100px;:让盒子向左移动自身宽度的一半。
解决方案:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位的盒子水平居中对齐</title>
<style>
div {
position: absolute;
left: 50%;
margin-left: -100px;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
4.2.1.10 堆叠顺序
在使用定位布局时,可能会出现盒子重叠的情况。
加了定位的盒子,默认后来者居上, 后面的盒子会压住前面的盒子。
应用 `z-index` 层叠等级属性可以调整盒子的堆叠顺序
z-index的特性如下:
属性值:正整数、负整数或 、0,默认值是 0,数值越大,盒子越靠上;
如果属性值相同,则按照书写顺序,后来居上;
数字后面不能加单位。
注意:`z-index` 只能应用于相对定位、绝对定位和固定定位的元素,其他标准流、浮动和静态定位无效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.damao,
.ermao,
.sanmao {
position: absolute;
width: 200px;
height: 200px;
background-color: red;
}
.damao {
z-index: 2;
}
.ermao {
top: 50px;
left: 50px;
z-index: 1;
background-color: green;
}
.sanmao {
top: 100px;
left: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="damao"></div>
<div class="ermao"></div>
<div class="sanmao"></div>
</body>
</html>
4.2.1.11 定位改变display属性
前面我们讲过, display 是 显示模式, 可以改变显示模式有以下方式:
可以用inline-block 转换为行内块
可以用浮动 float 默认转换为行内块(类似,并不完全一样,因为浮动是脱标的)
绝对定位和固定定位也和浮动类似, 默认转换的特性 转换为行内块。
所以说, 一个行内的盒子,如果加了浮动、固定定位和绝对定位,不用转换,就可以给这个盒子直接设置宽度和高度等。
同时注意:
浮动元素、绝对定位(固定定位)元素的都不会触发外边距合并的问题。 (我们以前是用padding border overflow解决的)
也就是说,我们给盒子改为了浮动或者定位,就不会有垂直外边距合并的问题了。
定位模式 |
是否脱标占有位置 |
移动位置基准 |
模式转换(行内块) |
使用情况 |
静态static |
不脱标,正常模式 |
正常模式 |
不能 |
几乎不用 |
相对定位relative |
不脱标,占有位置 |
相对自身位置移动 |
不能 |
基本单独使用 |
绝对定位absolute |
完全脱标,不占有位置 |
相对于定位父级移动位置 |
能 |
要和定位父级元素搭配使用 |
固定定位fixed |
完全脱标,不占有位置 |
相对于浏览器移动位置 |
能 |
单独使用,不需要父级 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
position: absolute;
height: 100px;
background-color: pink;
}
span {
position: absolute;
top: 200px;
left: 200px;
width: 300px;
height: 300px;
background-color: purple;
}
</style>
</head>
<body>
<div>天王盖地虎, 导师一米五</div>
<span></span>
</body>
</html>
绝对定位和浮动不会触发外边距合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
position: absolute;
width: 500px;
height: 500px;
background-color: pink;
}
.son {
width: 200px;
height: 200px;
background-color: purple;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
4.2.1.12 固定定位的实际应用技巧
4.2.1.13 圆角矩形设置4个角
圆角矩形可以为4个角分别设置圆度, 但是是有顺序的
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
如果4个角,数值相同
border-radius: 15px;
里面数值不同,我们也可以按照简写的形式,具体格式如下:
border-radius: 左上角 右上角 右下角 左下角;
4.2.1.14 网页布局总结
一个完整的网页,有标准流 、 浮动 、 定位 一起完成布局的。每个都有自己的专门用法。
1). 标准流
可以让盒子上下排列 或者 左右排列的
2). 浮动
可以让多个块级元素一行显示 或者 左右对齐盒子 浮动的盒子就是按照顺序左右排列
3). 定位
定位最大的特点`是有层叠的概念,就是可以让多个盒子 前后 叠压来显示。 但是每个盒子需要测量数值。`
5.1 高级技巧
5.1.1 元素的显示与隐藏
display: none 隐藏对象
display:block 除了转换为块级元素之外,同时还有显示元素的意思。
特点: 隐藏之后,不再保留位置
配合后面js做特效,比如下拉菜单,原先没有,鼠标经过,显示下拉菜单, 应用极为广泛
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.damao {
display: block;
width: 200px;
height: 200px;
background-color: pink;
}
.ermao {
width: 250px;
height: 250px;
background-color: purple;
}
</style>
</head>
<body>
<div class="damao"></div>
<div class="ermao"></div>
</body>
</html>
5.1.2 visibility 可见性
visibility:visible ; 对象可视
visibility:hidden; 对象隐藏
特点: 隐藏之后,继续保留原有位置。(停职留薪)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.damao {
visibility: visible;
width: 200px;
height: 200px;
background-color: pink;
}
.ermao {
width: 250px;
height: 250px;
background-color: purple;
}
</style>
</head>
<body>
<div class="damao"></div>
<div class="ermao"></div>
</body>
</html>
5.1.3 overflow 溢出
实际开发场景:
1. 清除浮动
2. 隐藏超出内容,隐藏掉, 不允许内容超过父盒子。
属性值 |
描述 |
visible |
不剪切内容也不添加滚动条 |
hidden |
不显示超过对象尺寸的内容,超出的部分隐藏掉 |
scroll |
不管超出内容否,总是显示滚动条 |
auto |
超出自动显示滚动条,不超出不显示滚动条 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
overflow: auto;
width: 150px;
height: 150px;
border: 1px solid red;
}
</style>
</head>
<body>
<div>
我要带你去浪漫的土耳其。
我要带你去网吧偷耳机。
我要带你去浪漫的土耳其。
我要带你去网吧偷耳机。
我要带你去浪漫的土耳其。
我要带你去网吧偷耳机。
我要带你去网吧偷耳机。
我要带你去网吧偷耳机。
</div>
</body>
</html>
5.1.4 显示与隐藏总结
属性 |
区别 |
用途 |
display |
隐藏对象,不保留位置 |
配合后面js做特效,比如下拉菜单,原先没有,鼠标经过,显示下拉菜单, 应用极为广泛 |
visibility |
隐藏对象,保留位置 |
使用较少 |
overflow |
只是隐藏超出大小的部分 |
1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围 |
5.2.1 CSS用户界面样式
5.2.1.1 鼠标样式cursor
属性值 |
描述 |
default |
小白 默认 |
pointer |
小手 |
move |
移动 |
text |
文本 |
not-allowed |
禁止 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li style="cursor: default;">默认的</li>
<li style="cursor: pointer;">小手</li>
<li style="cursor: move;">移动</li>
<li style="cursor: text;">文本</li>
<li style="cursor: not-allowed;">禁止</li>
</ul>
</body>
</html>
5.2.1.2 轮廓线 outline
是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
outline : outline-color ||outline-style || outline-width
但是我们都不关心可以设置多少,我们平时都是去掉的。
最直接的写法是 : outline: 0; 或者 outline: none;
<input type="text" style="outline: 0;"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input {
outline: none;
}
</style>
</head>
<body>
<input type="text">
</body>
</html>
5.2.1.3 防止拖拽文本域resize
实际开发中,我们文本域右下角是不可以拖拽:
<textarea style="resize: none;"></textarea>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>防止拖拽文本域</title>
<style>
textarea {
width: 500px;
height: 249px;
outline: none;
border: 1px solid #036;
resize: none;
}
</style>
</head>
<body>
<textarea>请留了言</textarea>
1231231
</body>
</html>
5.2.1.4 用户界面样式总结
属性 |
用途 |
用途 |
鼠标样式 |
更改鼠标样式cursor |
样式很多,重点记住 pointer |
轮廓线 |
表单默认outline |
outline 轮廓线,我们一般直接去掉,border是边框,我们会经常用 |
防止拖拽 |
主要针对文本域resize |
防止用户随意拖拽文本域,造成页面布局混乱,我们resize:none |
Document
vertical-align 垂直对齐 ```markdown vertical-align 垂直对齐,它只针对于行内元素或者行内块元素 一般用来处理图片跟文字的对齐效果 ```
vertical-align : baseline |top |middle |bottom
原因:
图片或者表单等行内块元素,他的底线会和父级盒子的基线对齐。就是图片底侧会有一个空白缝隙。
解决的方法就是:
给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。
给img 添加 display:block; 转换为块级元素就不会存在问题了。
vertical-align对于块级无效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
margin: auto;
vertical-align: middle;
}
</style>
</head>
<body>
<div>
你会失望的
</div>
</body>
</html>
vertical-align图片对齐文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.one {
vertical-align: baseline;
}
.two {
vertical-align: middle;
}
.three {
vertical-align: top;
}
</style>
</head>
<body>
<div>
<img src="images/2.jpg" alt="" class="one"> 你瞅啥
</div>
<div>
<img src="images/2.jpg" alt="" class="two"> 你瞅啥
</div>
<div>
<img src="images/2.jpg" alt="" class="three"> 你瞅啥
</div>
</body>
</html>
去除图片底侧空白缝隙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
border: 1px solid red;
}
div img {
display: block;
}
</style>
</head>
<body>
<div>
<img src="images/3.jpg" alt="">
</div>
</body>
</html>
5.3.1 溢出的文字省略号显示
white-space:normal ;默认处理方式
white-space:nowrap ; 强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象才换行。
text-overflow : clip ;不显示省略标记(...),而是简单的裁切
text-overflow:ellipsis ; 当对象内文本溢出时显示省略标记(...)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>溢出的文字省略号显示</title>
<style>
div {
width: 150px;
height: 25px;
border: 1px solid pink;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>hi~ 来自猩猩的你-欢迎你</div>
</body>
</html>
5.3.2 总结三步曲
/*1. 先强制一行内显示文本*/
white-space: nowrap;
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
5.4.1 CSS精灵技术(sprite)
首先我们知道,css精灵技术主要针对于背景图片,插入的图片img 是不需要这个技术的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>体会css精灵技术</title>
<style>
.icon1 {
width: 23px;
height: 23px;
background: url(images/index.png) no-repeat 0 -107px;
}
.icon2 {
width: 23px;
height: 23px;
background: url(images/index.png) no-repeat -157px -107px;
margin: 100px;
}
</style>
</head>
<body>
<div class="icon1"></div>
<div class="icon2"></div>
</body>
</html>
5.4.2 滑动门
核心技术就是利用CSS精灵(主要是背景位置)和 盒子padding撑开宽度, 以便能适应不同字数的导航栏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a {
display: inline-block;
height: 33px;
background: url(images/to.png) no-repeat;
margin: 100px;
padding-left: 15px;
color: #fff;
}
a span {
display: inline-block;
height: 33px;
background: url(images/to.png) no-repeat right top;
padding-right: 15px;
}
</style>
</head>
<body>
<a href="#">
<span>首页</span>
</a>
<a href="#">
<span>公司新闻</span>
</a>
</body>
</html>
总结:
1. a 设置 背景左侧,padding撑开合适宽度。
2. span 设置背景右侧, padding撑开合适宽度 剩下由文字继续撑开宽度。
3. 之所以a包含span就是因为 整个导航都是可以点击的。
5.4.3 margin负值之美
负边距+定位:水平垂直居中
咱们前面讲过, 一个绝对定位的盒子, 利用 父级盒子的 50%, 然后 往左(上) 走 自己宽度的一半 ,可以实现盒子水平垂直居中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin负值之美-突出显示某个盒子</title>
<style>
div {
float: left;
width: 200px;
height: 300px;
border: 1px solid #ccc;
margin-left: -1px;
margin-top: -1px;
}
div:hover {
border: 1px solid #f40;
position: relative;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
或者
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin负值之美-突出显示某个盒子</title>
<style>
div {
position: relative;
float: left;
width: 200px;
height: 300px;
border: 1px solid #ccc;
margin-left: -1px;
margin-top: -1px;
}
div:hover {
border: 1px solid #f40;
z-index: 1;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
float跟position可以连着一起使用。
5.4.4 三角形之美
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 0;
height: 0;
border-top: 10px solid red;
border-right: 10px solid green;
border-bottom: 10px solid blue;
border-left: 10px solid pink;
}
p {
width: 0;
height: 0;
border-style: solid;
border-width: 10px;
border-color: transparent transparent transparent red;
font-size: 0;
line-height: 0;
}
</style>
</head>
<body>
<div></div>
<p></p>
</body>
</html>
1. 我们用css 边框可以模拟三角效果
2. 宽度高度为0
3. 我们4个边框都要写, 只保留需要的边框颜色,其余的不能省略,都改为 transparent 透明就好了
4. 为了照顾兼容性 低版本的浏览器,加上 font-size: 0; line-height: 0;