web学习笔记—css(2)
4.通配符
4.通配符
“*”，不建议用
降低页面加载速率
数据库：select * from table
<style>
*{
color: lightcoral;
}
</style>5.盒模型
盒模型的5个基本属性：宽度、高度、内边距、边框、外边距
盒模型 图
5.1宽度width
指内容区的宽度，图中的蓝色部分
5.2高度height
指内容区的高度，图中的蓝色部分
5.3内边距padding
图中的绿色部分
一个参数代表四个方向都是40px；两个参数 先上下，再左右（40px，20px表示上下为40，左右为20）；三个参数 （padding: 40px 20px 30px，左边的没有值，会默认和右边的一致，表示上为40，左右为30，下为20）； 四个参数是顺时针方向（padding: 40px 20px 30px 10px;上右下左四个方向）
5.4边框border
图中的黄色部分
三个参数：粗细 线型 颜色
颜色缺省默认黑色
粗细缺省默认3px
线型缺省则不显示border
5.5外边距margin
图中的红色部分，指两个盒子的距离
总的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style>
/*标签有自带的margin，要用通配符将其去掉*/
*{
margin: 0px;;
}
div{
width: 460px;
height: 460px;
/*可以总起来写，也可以分方向写*/
padding: 40px 20px 30px;
padding-top: 10px;
padding-right: 30px;
padding-bottom: 40px;
padding-left: 20px;
/*可以总起来写，也可以分方向写*/
border: solid red;
border-top: 10px solid red;
border-right: 20px dotted yellow;
border-bottom: 10px double purple;
border-left: 15px dashed green;
/*标签有自带的margin，要用通配符将其去掉*/
/*margin:30px 100px;*/
margin: 30px auto;
/*auto缩放的时候在中间缩放*/
}
</style>
</head>
<body>
<div>
我是一个盒子
</div>
</body>
</html>6.标准文档流
6.1标准文档流里面的微观现象
1）空白折叠现象
如果元素之间的空格超过一个以上，则在页面里面显示的时候 元素中间只有一个空格，想去掉这个空格，则需要连起来写
2）高矮不齐时，底边对齐
3）自动换行：一行写不满，则换行写
6.2 css里面的标签分类：
html标签分类：
容器级元素(h1-h6、div、ul、li、ol、li、dl、dt)
文本级元素(p、img、a、i、b、u、span、strong、em、dl)
css标签分类：
1）块级元素
01块级元素独自霸占一行，不和其他任何元素并列显示
02可以接受宽和高
03如果不给块级元素加宽度，那么它的宽度会变成父亲的100%
块级元素：h1-h6、div、ul、li、ol、li、dl、dt、p
2）行内元素
html里面的容器级元素都是css的块级元素
01行级元素同占一行
02不可以接受宽和高
html里面的文本级元素是css的行级元素，p标签除外
块级和行内的转换：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
p{
padding: 0px;
width: 100px;
height: 100px;
background-color: red;
color: white;
/*将块级转换为行级*/
display: inline;
}
span{
width: 100px;
height: 100px;
background-color: green;
/*将行级转换为块级*/
display: block;
}
div{
height: 300px;
width: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<p>我</p>
<p>是</p>
<p>块</p>
<p>级</p>
<span>我</span>
<span>是</span>
<span>行</span>
<span>级</span>
<div>
我
</div>
</body>
</html>一个小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="点击我隐藏/显示图片" id="btn">
<br>
<img src="../img/blue.png" alt="" id="pic">
<script>
var btn=document.getElementById("btn");
var pic=document.getElementById("pic");
var sta = 1;
btn.onclick = function fun(){
if(sta == 1){
pic.style.display = "none" ;
sta = 2;
}
else{
// 让图片显示
pic.style.display="block" ;
sta = 1;
}
}
</script>
</body>
</html>6.3脱离文档标准流
标准文档流里面有很多的规则很多性质，如果我们想让元素在一行上面显示的同时还可以设置宽和高的话，就要脱离文档标准流
css里面脱离文档标准流的方式：
1）浮动
2）绝对定位
3）固定定位
7.浮动
7.1 浮动的性质
性质1：浮动元素脱离文档标准流
性质2：浮动的元素互相贴靠
性质3：自围效果
效果2如下图所示：
效果3如下图所示：
粉色图形会盖住绿色，但不会盖住文字
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字图效果</title>
<style>
*{
padding: 0px;
margin: 0px;
}
p{
width: 100px;
height: 100px;
background-color: hotpink;
float:left ;
}
div{
width: 900px;
height: 900px;
background-color: green;
color: #ffffff;
}
</style>
</head>
<body>
<p></p>
<div>
START
标准文档流里面有很多的规则很多性质，如果我们想让元素在一行上面显示的同时还可以设置宽和高的话，就要脱离文档标准流
css里面脱离文档标准流的方式：
1）浮动
2）绝对定位
3）固定定位
7.浮动
性质1：浮动元素脱离文档标准流
性质2：浮动的元素互相贴靠
标准文档流里面有很多的规则很多性质，如果我们想让元素在一行上面显示的同时还可以设置宽和高的话，就要脱离文档标准流
css里面脱离文档标准流的方式：
1）浮动
2）绝对定位
3）固定定位
7.浮动
性质1：浮动元素脱离文档标准流
性质2：浮动的元素互相贴靠
</div>
</body>
</html>7.2 浮动的清除
共3种方法
7.2.1给父级元素加高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0px;
margin: 0px;
}
/*浮动的清除：给box1加高度*/
.box1{
height: 50px;
background-color: red;
}
ul{
list-style: none;
}
li{
/*增加浮动*/
float: left;
width: 100px;
height: 50px;;
background-color: lightblue;
line-height: 50px;;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>娃哈哈</li>
<li>喜之郎</li>
<li>可比克</li>
<li>卫龙</li>
</ul>
</div>
<div class="box2">
<ul>
<li>吃鸡</li>
<li>王者</li>
<li>阴阳师</li>
<li>连连看</li>
</ul>
</div>
</body>
</html>注意点：如果一个元素要浮动，那么它的祖先元素一定要有高度，有高度的盒子才能关注浮动。
7.2.2 clear：both
当无法给父级元素加高度时，用clear：both
clear:both 清除两边浮动对我盒模型本身的影响
缺点：向上的外边距会失效
.box2{
/*浮动的清除方法2：*/
/*浮动的性质：互相贴靠，box1和box2互相贴靠，用clear清除box1浮动对box2的影响*/
clear: both;
/*缺点：向上的外边距会失效*/
margin-top: 30px;
}7.2.3 内隔法/隔墙法
（这种方式一定要会）
清除浮动用第3种方式
假设现在有2个块级元素（父级元素），2个块级元素中间分别有4个块级元素（子元素），想让2个父级元素上下显示，父级元素中的元素左右显示（在同一行内），具体效果如下图：
那么需要新增加1个块级元素，对该块级元素clear:both，这样两个块级元素上下之间的距离就是这个盒子的height
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0px;
margin: 0px;
}
/*浮动的清除方法1：给box1加高度*/
/*.box1{*/
/*!*height: 50px;*!*/
/*background-color: red;*/
/*margin-bottom: 100px;*/
/*}*/
.box2{
/*浮动的清除方法2：*/
/*浮动的性质：互相贴靠，box1和box2互相贴靠，用clear清除box1浮动对box2的影响*/
clear: both;
/*缺点：上边距会失效*/
/*margin-top: 30px;*/
}
ul{
list-style: none;
}
li{
/*增加浮动*/
float: left;
width: 100px;
height: 50px;;
background-color: lightblue;
line-height: 50px;;
}
.c{
/*浮动的清除方法3：内隔法*/
/*思想是：在两个块级元素之间再加一个盒子，对该盒子clear:both,这样两个块级元素上下之间的距离就是这个盒子的height*/
clear:both;
margin: 0px;
border: 0px;
padding: 0px;
height: 0px;
/*background-color: red;*/
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>娃哈哈</li>
<li>喜之郎</li>
<li>可比克</li>
<li>卫龙</li>
</ul>
</div>
<div class="c"></div>
<div class="box2">
<ul>
<li>吃鸡</li>
<li>王者</li>
<li>阴阳师</li>
<li>连连看</li>
</ul>
</div>
</body>
</html>8.行高
设置当行文本垂直居中的方式：只需要将行高设置和盒模型的高度设置一致即可。
文本在它的行高里面永远都是垂直居中的。
设置多行文本垂直居中显示：
step1：设置行高line-height，数行数n，文字的高度h_font=行数*行高
step2：用总的高度h-文字的高度h_font，再除以2，就是padding_top的值
step3：为了保持总的高度不变，需要将总的高度h自减padding_top求出修改后的总的高度h
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
padding: 0px;
}
p{
width: 500px;
/*原高度 600px*/
/*height: 600px;*/
/*为了保持总高度不变，将总高度减去padding_top的值*/
height: 350px;
border:1px solid black;
margin: 100px;
text-align: center;
line-height: 20px;
/*padding_top求法：(原高度height - （行高line_height * 行数n）) / 2 */
/*即：( 600px - (20 * 5) ) / 2 = 250 */
padding-top: 250px;
}
</style>
</head>
<body>
<p>我是一只小鸭子咿呀咿呀呦我是一只小鸭子咿呀咿呀呦我是一只小鸭子咿呀咿呀呦我是一只小鸭子咿呀咿呀呦我是一只小鸭子咿呀咿呀呦我是一只小鸭子咿呀咿呀呦我是一只小鸭子咿呀咿呀呦我是一只小鸭子咿呀咿呀呦我是一只小鸭子咿呀咿呀呦</p>
</body>
</html>9.伪类
伪类：同一标签根据用户的不同状态显示不同的样式
共四类：link、visited、hover、active
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*link是用户鼠标未点击链接之前所产生的样式*/
/*a{*/
/*color: aquamarine;*/
/*font-size: 30px;*/
/*background-color: mediumpurple;*/
/*}*/
a:link{
color: orangered;
font-size: 10px;
text-decoration: none;
background-color: yellow;
}
/*visited表示用户鼠标单击访问完链接之后产生的样式*/
/*访问之后：字体颜色，背景颜色可以继承，字体大小，下划线不可以继承*/
a:visited{
color: grey;
font-size: 100px;
text-decoration: underline;
background-color: lime;
}
/*hover表示用户鼠标经过产生的样式*/
a:hover{
color: lightskyblue;
font-size: 90px;
text-decoration: underline;
background-color: lime;
}
/*active表示用户鼠标点击该链接不松手时候产生的样式*/
a:active{
color: black;
font-size: 50px;
text-decoration: none;
text-shadow: 3px 3px 3px black;
background-color: lime;
}
</style>
</head>
<body>
<a href="伪类_跳转页面.html" class="">我要去跳转页面</a>
</body>
</html>