html、css学习笔记（六）
2019-07-14 本文已影响0人
dev_winner
- 颜色设置：有
字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的方法也有很多种：
1、英文命令颜色：p{color:red;}
2、RGB颜色：p{color:rgb(133,45,200);}。每一项的值可以是0~255之间的整数，也可以是0%~100%的百分数。如：p{color:rgb(20%,33%,25%);}。
3、十六进制颜色：其原理其实是RGB 设置，但是其每一项的值由0-255变成了十六进制 00-ff。
配色表
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>颜色值</title>
<style type="text/css">
p {
color:#0e1;
}
</style>
</head>
<body>
<p>Lucky boy！！！！！！！！</p>
</body>
</html>
设置文本颜色
-
px（像素）、em、%百分比，这三种单位都是相对单位。
1、像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。
2、em：就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：
p{font-size:12px;text-indent:2em;}
/*实现段落首行缩进 24px（也就是两个字体大小的距离）。*/
-
text-indent属性规定文本块中首行文本的缩进。 注释:允许使用负值。如果使用负值,那么首行会被缩进到左边。 - 注意一个特殊情况：当给 font-size 设置单位为
em时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码：
html:
<p>以这个<span>例子</span>为例。</p>
css:
p{font-size:14px}
span{font-size:0.8em;}
- 结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。
3、百分比
p{font-size:12px;line-height:130%}
/*设置行高（行间距）为字体大小的130%（12 * 1.3 = 15.6px）。*/
- 水平居中设置-行内元素。
块状元素分为定宽块状元素和不定宽块状元素。若被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置text-align:center来实现的。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>定宽块状元素水平居中</title>
<style>
div{
border:1px solid red;
margin:20px;
}
.txtCenter,
.imgCenter {
text-align:center;
}
</style>
</head>
<body>
<div class="txtCenter">我想要在父容器中水平居中显示。</div>
<div class="imgCenter"><img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg" /></div>
</body>
</html>
行内元素居中
- 当被设置元素为
块状元素时用text-align：center就不起作用了，这时分两种情况：定宽块状元素和不定宽块状元素。 -
定宽块状元素：块状元素的宽度width为固定值，满足定宽和块状两个条件的元素是可通过设置“左右margin”值为“auto”来实现居中的。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定宽块状元素水平居中</title>
<style>
div { /*块状元素*/
border: 1px solid red;
width: 200px; /*宽度为固定值，不能缺少*/
margin: 20px auto; /*定宽块状元素，左右自适应*/
}
</style>
</head>
<body>
<div>我是定宽块状元素，我要水平居中显示。</div>
</body>
</html>
定宽块状元素自适应居中
-
不定宽块状元素：块状元素的宽度width不固定。比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。 - 不定宽度的块状元素有三种方法居中：
1、加入table标签；
2、设置display: inline方法：与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置；
3、设置position:relative和left:50%：利用相对定位的方式，将元素向左偏移 50% ，即达到居中的目的。 - 实现居中法一：利用table标签的
长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可将其看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。
a、第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括<tbody>、<tr>、<td>)。
b、第二步：为这个 table 设置左右 margin 居中（这个和定宽块状元素的方法一样）。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
table {
margin: 0 auto;
}
.wrap {
background: #ccc;
}
</style>
</head>
<body>
<div>
<table>
<tbody>
<tr>
<td>
<ul>
<li>我是第一行文本</li>
<li>我是第二行文本</li>
<li>我是第三行文本</li>
<div class="wrap">
设置我所在的div容器水平居中
</div>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
table标签设置不定宽块状元素居中
- 实现居中法二：改变块级元素的
display 为 inline 类型（设置为行内元素显示，然后使用text-align:center来实现居中效果。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
.container {
/*行内元素实现居中*/
text-align: center;
}
.container ul {
list-style: none;
margin: 0;
padding: 0; /*消除文本与div边框之间的间隙）*/
/*设置为内联元素*/
display: inline;
}
.container li {
margin-right: 8px;
/*设置为内联元素*/
display: inline;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
</html>
将块级元素改为内联元素
-
这种方法相比第一种方法的优势是
不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。 -
实现居中法三：通过给
父元素设置float，然后给父元素设置position:relative和left:50%，子元素设置position:relative和left: -50%来实现水平居中。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
.container {
float: left;
position: relative;
left: 50%;
}
.container ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
left: -50%;
border: 2px solid green;
}
.container li {
float: left;
display: inline;
margin-right: 8px;
}
.wrap {
float: left;
position: relative;
left: 50%;
border: 2px solid black;
}
.wrap-center {
background: #ccc;
position: relative;
left: -50%;
border: 2px solid red;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
<div class="wrap">
<div class="wrap-center">我们来学习一下这种方法。</div>
</div>
</body>
</html>
最终的效果
- 注释掉类选择器.wrap-center中的代码
left: 50%;后效果如下，可知子类元素是相对父类元素wrap向左偏移了50%，并把原来的ul-li覆盖！由图可知此时不定宽块级元素并不处于居中位置。
相对元素进行偏移
-
垂直居中：父元素高度确定的单行文本，父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height和line-height高度一致来实现的。(height: 该元素的高度，line-height: 行高（行间距），指在文本中，行与行之间的基线间的距离)。 -
line-height与font-size的计算值之差，在 CSS 中成为行间距。分为两半，分别加到一个文本行内容的顶部和底部。这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块！
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
<style>
.wrap h2 {
margin: 0;
height: 100px;
line-height: 100px;
background: #ccc;
}
</style>
</head>
<body>
<div class="wrap">
<h2>hi,张三!</h2>
</div>
</body>
</html>
单行垂直居中
- 垂直居中，父元素高度确定的
多行文本 - 方法一：使用插入
table(包括tbody、tr、td)标签，同时设置vertical-align：middle。css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>父元素高度确定的多行文本</title>
<style>
.wrap {
height: 500px;
background: #ccc
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td class="wrap">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
table标签实现多行文本居中
- 方法二：在 chrome、firefox 及 IE8 以上的浏览器下可以设置
块级元素的 display 为 table-cell（设置为表格单元显示），激活vertical-align属性，但注意 IE6、7 并不支持这个样式，兼容性比较差。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>父元素高度确定的多行文本</title>
<style>
.container {
height: 300px;
background: #ccc;
display: table-cell;
/*IE8以上及Chrome、Firefox*/
vertical-align: middle;
/*IE8以上及Chrome、Firefox*/
}
</style>
</head>
<body>
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>
<!-- display：table-cell；会使元素表现的类似一个表格中的单元格td，2个td标签不换行 -->
<div style="display: table-cell; vertical-align: middle;">
<img src="http://img.mukewang.com/54ffac56000169c001840181.jpg" title="害羞的小女生" />
</div>
</body>
</html>
激活块级元素的display值：table-cell实现居中
- 这种方法的好处是
不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7而且这样修改display的block变成了table-cell，破坏了原有的块状元素的性质。 - 当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
1、 position : absolute
2、float : left 或 float:right
- 只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以
display:inline-block（块状元素）的方式显示，当然就可以设置元素的width和height了，且默认宽度不占满父元素。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>隐性改变display类型</title>
<style>
.container a { /*a 标签是行内元素*/
float: left;
width: 200px;
background: #ccc;
}
</style>
</head>
<body>
<div class="container">
<a href="#" title="">我的长度可以这么长</a>
</div>
</body>
</html>
a标签变成内联块元素
