html+css第三节
一、 css选择器
1.ID选择器(第二节)
2.class选择器(第二节)
3.标签选择器(TAG选择器)
css:div{} <div></div>
html:<div>
使用场景:
1.去掉某些标签的默认样式
2.复杂的选择器中,如:层次选择器
4.群组选择器(分组选择器)
可以通过逗号的方式,给多个不同的选择器添加统一的css样式,来达到代码的复用。
CSS:div ,p ,span{}
<style>
/* #div{background:red;}
#div{background:blue;} */
/* .box{background: red;} */
/* p.box{background: red;} */
/* .content{font-size: 30px;background: blue;} */
div,#text,.title{background: red;}
</style>
</head>
<body>
<!-- <div id="div1">块</div>
<div id="div2">块</div>
<div id="div3">块</div> -->
<!-- <div class="box">块</div>
<div class="box">块</div> -->
<!-- <div class="box content">块</div>
<div class="box content">块</div>
<p class="box">段</p>
-->
<div>块</div>
<P id="text">段</P>
<h2 class="title">标题</h2>
5.通配选择器
*{ } → div,ul, li, p, h1, h2…{}
注:尽量避免使用统配选择器,因为会给所有标签添加样式,慎用。
使用的场景:去掉所有标签的默认样式时`
*{border:1px red solid;}
6.层次选择器
1.后代:M N { }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li{ border: 1px red solid;}
</style>
</head>
<body>
<ul>
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</body>
</html>
2.父代:M>N { }
<style>
#list > li{ border: 1px red solid;}
</style>
</head>
<body>
<ul id="list">
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
3.兄弟:M~N{ }
注:当前M下面的所有兄弟N标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div~h2{background: red;}
</style>
</head>
<body>
<div>块</div>
<p>段</p>
<h2>标题</h2>
</body>
</html>
4.相邻:M+N{ }
当前M相邻的N标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div+h2{background: red;}
</style>
</head>
<body>
<div>块</div>
<h2>标题</h2>
<p>段</p>
</body>
</html>
7.属性选择器
M[ attr ] { }
1.*= :部分匹配
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div[class*=search]{background: red;}
</style>
</head>
<body>
<div>abcd</div>
<div class="box">bcd</div>
<div class="search">cd</div>
<div class="search-button">d</div>
</body>
</html>
2.起始匹配
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div[class^=search]{background: red;}
</style>
</head>
<body>
<div>aaaa</div>
<div class="box">bbbb</div>
<div class="search">cccc</div>
<div class="search-button">dddd</div>
<div class="button-search">eeee</div>
</body>
</html>
3.$=:结束匹配
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div[class$=search]{background: red;}
</style>
</head>
<body>
<div>aaaa</div>
<div class="box">bbbb</div>
<div class="search">cccc</div>
<div class="search-button">dddd</div>
<div class="button-search">eeee</div>
</body>
</html>
4.[ ] [ ] [ ]组合匹配
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div[class][id]{background: red;}
</style>
</head>
<body>
<div>aaaa</div>
<div class="box"id="elem">bbbb</div>
<div class="search">cccc</div>
<div class="search-button">dddd</div>
<div class="button-search">eeee</div>
</body>
</html>
8.伪类选择器
CSS伪类用于向某些元素增加特殊的效果。一般用于初始样式添加不上的时候,用伪类来添加。
1.
:link 访问前的样式 (只能添加给a标签)
:vosited 访问后的样式 (只能添加给a标签)
:hover 鼠标移入时的样式 (可以添加给所有标签)
:active 鼠标按下时的样式 (可以添加给所有标签)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{width: 200px;height: 200px;background: red;}
div:hover{background: blue;}
div:active{background: green;}
</style>
</head>
<body>
<div></div>
</body>
</html>
注:
1.如果四个伪类都生效,一定要注意顺序:L V H A
2.一般网站只这样去设置: a{} a:hover{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a:link{color: red;}
a:visited{color: blue;}
a:hover{color: cyan;}
a:active{color: yellow;}
</style>
</head>
<body>
<a href="#">链接</a>
</body>
</html>
注:一般的网站都只设置
a{ }
( link visited active)
a:hover{ }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a{color: red;}
a:hover{color: cyan;}
</style>
</head>
<body>
<a href="#">链接</a>
</body>
</html>
:after、:before 通过伪类的方式给元素添加一个文本内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div:after{content: "world";}
</style>
</head>
<body>
<div>hello</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div:before{content: "world";}
</style>
</head>
<body>
<div>hello</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div::after{content: "world";color: red;}
</style>
</head>
<body>
<div>hello</div>
</body>
</html>
3.:checked、:disabled :focus 都是针对表单元素的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:disabled{width: 100px;height: 100px;}
:focus{background: red;}
</style>
</head>
<body>
<input type="checkbox">
<input type="checkbox"checked>
<input type="checkbox"disabled>
<input type="text">
</body>
</html>
4.:nth-of-type()、:nth-child()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li:nth-of-type(3){background: red;}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
角标是从1开始的,1表示第一项,2表示第二项 | n值----从0到无穷大(适用于隔行换色)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li:nth-of-type(2n+1){background: red;}
li:nth-of-type(2n){background: blue;}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
:first-of-type、 :first-child
:last-of-type、 :last-child
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li:first-of-type{background: red;}
li:last-of-type{background:blue;}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
:only-of-type、:only-child
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li:only-of-type{background: red;}
</style>
</head>
<body>
<ul>
<li></li>
</ul>
</body>
</html>
二、CSS样式继承
1.文字相关的样式可以被继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{width: 300px;height: 300px;border: 1px red solid;color: red;font-size: 30px;}
</style>
</head>
<body>
<div>
<p>段落</p>
</div>
</body>
</html>
2.布局样式是不能被继承的
默认是不能被继承的,但是可以设置继承属性 inherit 值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{ width: 300px; height: 300px; border: 1px red solid; color: red; font-size: 30px;}
p{border: inherit;}
</style>
</head>
<body>
<div>
<p>这是一个段落</p>
</div>
</body>
</html>
三、CSS优先级
1.相同样式优先级
当设置相同样式时,后面的优先级较高,但不建议出现重复设置样式的情况。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{color: red;}
div{color:blue ;}
</style>
</head>
<body>
<div>块</div>
</body>
</html>
2.内部样式与外部样式
内部样式与外部样式优先级相同,如果都设置了相同样式,那么后写的引入方式优先级高。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./bass.css">
<style>
div{color: red;}
</style>
</head>
<body>
<div>块</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{color: red;}
</style>
<link rel="stylesheet" href="./bass.css">
</head>
<body>
<div>块</div>
</body>
</html>
3.单一样式优先级
style行间>id>class>tag>*>继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#elem{color: blue;}
</style>
</head>
<body>
<div id="elem" style="color: red;">块</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <style>
div{color: red;}
</style>
<link rel="stylesheet" href="./bass.css"> -->
<style>
#elem{color: blue;}
.box{color: red;}
</style>
</head>
<body>
<!-- <div id="elem" style="color: ;">块</div> -->
<div id="elem" class="box">块</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <style>
div{color: red;}
</style>
<link rel="stylesheet" href="./bass.css"> -->
<style>
/* #elem{color: blue;} */
.box{color: red;}
div{color: green;}
</style>
</head>
<body>
<!-- <div id="elem" style="color: ;">块</div> -->
<div id="elem" class="box">块</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <style>
div{color: red;}
</style>
<link rel="stylesheet" href="./bass.css"> -->
<style>
/* #elem{color: blue;} */
/* .box{color: red;} */
div{color: green;}
*{color: red;}
</style>
</head>
<body>
<!-- <div id="elem" style="color: ;">块</div> -->
<div id="elem" class="box">块</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <style>
div{color: red;}
</style>
<link rel="stylesheet" href="./bass.css"> -->
<style>
/* #elem{color: blue;} */
/* .box{color: red;} */
*{color:red ;}
body{color: blue;}
</style>
</head>
<body>
<!-- <div id="elem" style="color: ;">块</div> -->
<div id="elem" class="box">块</div>
</body>
</html>
注:style行间 权重 1000
id 权重 100
class 权重 10
tag 权重 1
4.!important
提升样式优先级,非规范方式,不建议使用。(不能针对继承的属性进行优先级的提升)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <style>
div{color: red;}
</style>
<link rel="stylesheet" href="./bass.css"> -->
<style>
/* #elem{color: blue;} */
/* .box{color: red;} */
#elem{color: red ;}
*{color: green !important;}
</style>
</head>
<body>
<div id="elem" style="color:blue ;">块</div>
</body>
</html>
5.标签+类与单类
标签+类>单类的优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <style>
div{color: red;}
</style>
<link rel="stylesheet" href="./bass.css"> -->
<style>
/* #elem{color: blue;} */
/* .box{color: red;} */
div.box{color: red;}
.box{color: aqua;}
</style>
</head>
<body>
<div class= "box">块</div>
</body>
</html>
6.群组优先级
群组选择器与单一选择器的优先级相同,靠后写的优先级越高。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <style>
div{color: red;}
</style>
<link rel="stylesheet" href="./bass.css"> -->
<style>
/* #elem{color: blue;} */
/* .box{color: red;} */
div{color: blue;}
div,p{color:red;}
</style>
</head>
<body>
<div class="box">块</div>
<p>段落</p>
</body>
</html>
7.层次优先级
1.权重比较
ul li .box p input{ } 1+1+10+1+1
.hello span #elem{ } 10+1+100
2.约分比较
ul li .box p input{ } li p input{ }
.hello span #elem{ } #elem
四、css 盒子模型
组成:content → padding → border → margin
物品 填充物 包装盒 盒子与盒子之间的间距
1.content : 内容区域
width和height 组成的
2.padding : 内边距(内填充)
只写一个值:30px (上下左右)
写两个值: 30px 40px (上下、左右)
写四个值:30px 40px 50px 60px(上、右、下、左)
单一样式只能写一个值:
padding-left
padding-right
padding-top
padding-bottom
3.margin:外边距(外填充)
只写一个值:30px (上下左右)
写两个值: 30px 40px (上下、左右)
写四个值:30px 40px 50px 60px(上、右、下、左)
单一样式只能写一个值:
margin-left
margin-right
margin-top
margin-bottom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{width: 200px;height: 200px;background: red;border: 10px blue solid;padding: 30px 50px;margin: 10px;}
#box2{width: 200px;height: 200px;background: black;color: white;}
</style>
</head>
<body>
<div id="box">一个盒子</div>
<div id="box2">是一个盒子</div>
</body>
</html>
注:
1.背景颜色会填充到margin以内的区域。(不包括margin区域)
border: 10px transparent solid
2.文字会在content区域。
3.padding不能出现负值,margin是可以出现负值。
4.box-sizing
box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。取值为content-box(默认值)| border-box
盒尺寸,可以改变盒子模型的展示形态。
默认值: content-box:width、height → content
border-box:width、height → content padding border
场景:
1.不需要再去计算一些值
2.解决一些100%的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{
width: 200px ;height: 200px; background: red;border: 10px blue solid;
padding: 30px 50px;
box-sizing: content-box;
}
input{width:100% ;padding:30px;box-sizing: border-box;}
</style>
</head>
<body>
<div id="box">这是一个盒子</div>
<input type="text">
</body>
</html>
5.盒子模型的问题
1.margin叠加问题,出现在上下margin同时存在的时候。
会取上下中值较大的作为叠加的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{width: 200px;height: 200px;background: red;margin-bottom: 30px;}
#box2{width: 200px;height: 200px;background: blue;margin-top: 30px;}
</style>
</head>
<body>
<div id="box1" ></div>
<div id="box2"></div>
</body>
</html>
解决方案:
1.BFC规范
2.想办法只给一个元素添加间距。
2.margin传递
margin传递的问题只会出现在嵌套的结构中,且只有margin-top会有传递的问题,其他三个方向是没有传递问题的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{width: 200px;height: 200px;background: red;}
#box2{width: 100px;height: 100px;background: blue;margin-top: 100px;}
</style>
</head>
<body>
<div id="box1" >
<div id="box2"></div>
</div>
</body>
</html>
解决方案:
1.BFC规范
2.给父容器加边框。
#box1{width: 200px;height: 200px;background: red;border: 1px black solid;}
#box2{width: 100px;height: 100px;background: blue;margin-top: 100px;}
3.margin换成padding
#box1{width: 200px;height: 100px;background: red;padding-top: 100px;}
#box2{width: 100px;height: 100px;background: blue;}
6.margin自适居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{width: 400px;height: 100px;background: red;margin:0 auto ;}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
扩展:
margin左右自适应是可以的,但是上下自适应是不行的。
7、不设置content的现象
当width、height不设置的时候,对盒子模型的影响,会自动计算容器的大小,节省代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* #box{width: 400px;height: 100px;background: red;margin:0 auto ;} */
#box1{width: 300px;height: 300px;background: red;}
#box2{height: 100px;background: blue;color:white;padding-left: 30px; border-left: 10px black solid;}
</style>
</head>
<body>
<div id="box1">
<div id="box2">内容</div>
</body>
</html>
五、标签分类
1.按类型
block:块 div、p、ul、li、h1…
特性:
1.独占一行
2.支持所有样式
3.不写width时与父元素的width相同
4.所占区域是一个矩形
inline:内联 span、a、em、strong、img…
特性:
1.挨在一起
2.有些样式不支持,例如 width、height、margin、padding
3.不写宽的时候,宽度由内容决定
4.所占区域不一定执行
5.内联标签之间会有空隙,原因:换行产生的
inline-block:内联块 input、select…
1.挨在一起,但是支持度高
注:布局一般用块标签,修饰文本一般用内联标签
2.按内容
Flow:流内容
Metadata:元数据
Sectioning:分区
Heading:标题
phrasing:措辞
Embedded:嵌入的
Interactive:互动的
3.按显示
替换元素:浏览器根据元素的标签和属性,来决定元素的具体显示内容。
img、input…
<img src="./img/散兵.png" alt="">
<img src="./img/散兵.png" alt="">
非替换元素:将内容直接告诉浏览器,将其显示出来。
div、h1、p…
六、显示框类型
1.display
block
div{width: 100px;height: 100px;background: red;display: block;}
inline
inline-block
none
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{width: 100px;height: 100px;background: red;display: inline-block;}
span{width: 100px;height: 100px;background: red;display:inline-block;}
input{display: none;}
</style>
</head>
<body>
<div>块一</div>
<div>块二</div>
<span>内联一</span>
<span>内联二</span>
<input type="text">
</body>
</html>
注:display:none与 visibility:hidden区别
display:none 不占空间的隐藏
visibility:hidden 占空间的隐藏
#box1,#box2{width: 100px;height: 100px;background: red}
#box1{display: none;}
#box1,#box2{width: 100px;height: 100px;background: red}
#box1{visibility: hidden;}
七、标签嵌套规范
ul li
dl dt dd
table tr td
1.块可以嵌套内联
<div>
<span></span>
<a href="#"></a>
</div>
特殊:
错误的写法
<p>
<div></div>
</p>
2.块标签不一定可以嵌套块标签
<div>
<div></div>
</div>
特殊:
错误的写法
<p>
<div></div>
</p>
3.内联是不能嵌套块的
错误的写法:
<span>
<div></div>
</span>
特殊:
正确的写法
<a href="a">
<div></div>
</a>
八、溢出隐藏
1.overflow
visible:默认
hidden
div{width: 300px;height: 200px;border: 1px black solid;overflow: hidden;}
scroll
auto
x轴,y轴
overflow-x、overflow-y针对两个轴分别设置
div{width: 300px;height: 200px;border: 1px black solid;overflow-y: auto;overflow-x: scroll;}
九、透明度与手势
1.透明度
opacity : 0(透明)~1(不透明)
0.5(半透明)
注:占空间,所有子内容也会透明
2.rgba
rgba():0~1
#div1{width: 100px;height: 100px;background: red;opacity: 0.5;}
#div2{width: 100px;height: 100px;background: red;opacity: 0.5;}
注:可以让指定的样式透明,而不影响其他样式
3.cursor
default:默认箭头
实现自定义手势:
准备图片:.cur .ico
十、最大最小宽高
1.min-width、min-height
2.max-width、max-height
注:
%单位:换算→以父容器的大小进行换算
body{height: 500px;}
#box1{width: 200px;height: 200px;background: red;}
#box2{width: 100%;height: 80%;background:blue ;}
一个容器怎么适应屏幕的高:容器加height:100%; body:100%; html:100%
html,body{height:100%}
.contrainer{height:100%}
十一、css默认样式
1.类型
有些标签右默认样式,有些标签没有默认样式。
没有默认样式:
div、span、…
有默认样式:
body→marign:8px
h1→margin:上下21.440px
p→margin:上下 16px
ul→margin:上下 16px padding:左 40px
默认值:list-style:disc
a→ text-decoration underline;
十二、css reset
1.css reset:
*{margin:0;padding:0;}
优点:不用考虑那些标签有默认的margin和padding
缺点:稍微的影响性能
body,p,h1,ul{margin:0;padding:0}
ul{list-style:none;}
a{text-decoration:none;color:#666;}
img{display:block;}
问题的现象:图片跟容器底部有一些空隙。
内联元素的对齐方式是按照文字基线对齐的,而不是文字成线对齐的。
vertical-align:baseline; 基线对齐方式,默认值
img{vertical-align: bottom;} 解决方式是推荐的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* ul{list-style: none;}
a{text-decoration: none;color: #999;}
a:hover{text-decoration: underline;color: red;} */
div{border: 1px black solid;}
img{vertical-align: bottom;}
</style>
</head>
<body>
<!-- <div>块</div>
<span></span>
<h1></h1>
<p></p>
<ul>
<li></li>
</ul>
<a href="#">链接</a> -->
<div>
<img src="./img/散兵.png" alt="">
</div>
</body>
</html>
写具体页面的时候或一个布局效果的时候:
1.写结构
2.css重置样式
3.写具体样式
css reset初始化设置
十三、float浮动
1.文档流
文档流是文档中可显示对象在排列中所占用的位置。
脱离文档流,延迟父容器靠左或靠右进行排列。
left、right、none
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{border: 1px black solid;}
#box1{width: 100px;height: 100px;background: blue;float: left;}
#box2{width: 200px;height: 200px;background: red;}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
2.float特性
加浮动的元素,会脱离文档流,会延迟父容器靠左或靠右排列,如果之前有浮动的元素,会挨着浮动的元素进行排列。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{border: 1px black solid;}
#box1{width: 100px;height: 100px;background: blue;float: left;}
#box2{width: 200px;height: 200px;background: red;float: left;}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
3.float取值
left
right
none(默认)
4.float注意点
1.只会影响后面的元素
2.内容默认提升半层
3.默认宽根据内容决定
4.换行排列
ul{margin: 0;padding: 0;list-style: none;width: 300px;height: 300px;border: 1px black solid;}
li{width: 100px;height: 100px;background: red; border: 1px yellow solid;box-sizing:border-box ;float: left;}
li:nth-of-type(1){height: 120px;}
li:nth-of-type(2){height: 140px;}
5.主要给块元素添加,但也可以给内联元素添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul{margin: 0;padding: 0;list-style: none;width: 300px;height: 300px;border: 1px black solid;}
li{width: 100px;height: 100px;background: red; border: 1px yellow solid;box-sizing:border-box ;float: left;}
li:nth-of-type(1){height: 120px;}
li:nth-of-type(2){height: 140px;}
span:last-of-type{float: left;}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<span>aaaa</span><span>bbbb</span>
</body>
</html>
5.消除float浮动
1.利用clear属性清楚float浮动
left、right、both
2.固定宽高:不推荐,不能把高度固定死,不适合做自适应的效果
#box1{width: 200px;height: 200px;border:1px
black solid;}
#box2{width: 100px;height: 200px;background: red;float: left;}
3.父元素浮动:不推荐,因为父容器浮动也会影响后面的元素
4.overflow:hidden(BFC规范),如果有子元素想溢出,那么会受到影响
5.display:inline-block(BFC规范),不推荐,父容器会影响后面的元素
6.设置空标签:不推荐,会多添加一个标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* body{border: 1px black solid;} */
#box1{width: 200px;;border:1px black solid;}
#box2{width: 100px;height: 200px;background: red;float: left;}
.clear{clear:both}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
<div class="clear">空</div>
</div>
aaaaaa
</body>
</html>
7.after伪类:推荐,是空标签的加强版,目前各大公司的做法
(clear属性只会操作块标签,对内联标签不起作用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* body{border: 1px black solid;} */
#box1{width: 200px;;border:1px black solid;}
#box2{width: 100px;height: 200px;background: red;float: left;}
.clear::after{content: '';clear: both;display: block;}
</style>
</head>
<body>
<div id="box1"class="clear">
<div id="box2"></div>
</div>
aaaaaa
</body>
</html>
6.示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
ul{list-style: none;}
a{text-decoration: none;color:#666 ;}
h1,h2,h3{font-size: 20px;}
.l{float: left;}
.r{float: right;}
.clear::after{content: "";display: block;clear: both;}
#main{width: 500px;margin: 40px auto;}
#main.title{height: 30px;line-height: 30px;font-size: 18px;font-weight: bold;padding-left: 35px;}
#main ul{overflow: hidden;margin-top: 10px;}
#main li{margin-bottom: 20px;}
#main .pic{width: 150px;}
#main .pic img{margin: 6px;border: 1px black solid;}
#main .content{ width: 300px;font-size: 18px;line-height: 25px;margin-left: 10px;}
#main.content h2{font: size 20px; ; line-height: 30px;}
#main.content p{font-size: 20px line-height 25px; }
</style>
</head>
<body>
<div id="main">
<h2 class="title">原神</h2>
<ul>
<li class="clear">
<div class="l pic">
<a href="#">
<img src="./img/散兵.png" width="120px"height="120px" alt="">
</a>
</div>
<div class="l content">
<h2>散兵</h2>
<p>
我的愤怒,绝不平息。
<a href="#"></a>
</p>
</div>
</li>
<li class="clear">
<div class="l pic">
<a href="#">
<img src="./img/钟离4.jpg" width="120px"height="120px" alt="">
</a>
</div>
<div class="l content">
<h2>钟离</h2>
<p>
此世群魔诸神并起,我虽无意逐鹿,却知苍生苦楚,只愿荡涤四方,护得浮世一隅。
<a href="#"></a>
</p>
</div>
</li>
<li class="clear">
<div class="l pic">
<a href="#">
<img src="./img/公子2.jpg" width="120px"height="120px" alt="">
</a>
</div>
<div class="l content">
<h2>公子</h2>
<p>
这个世界上有太多我们无能为力的事情,回不去的过去,无法预料的将来,以及那些那些再也不可能见到的人。
<a href="#"></a>
</p>
</div>
</li>
</ul>
</div>
</body>
</html>