Web之一只jio碰到门了
CSS选择器
标签选择器（又叫TAG选择器）
css：div{}
html：< div >
使用的场景：
1、去掉默写标签的默认样式是
2复杂的选择器中，如 层次选择器
群组选择器（又叫分组选择器）
css：div，p，span{}
可以通过逗号的形式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用
<!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,#text,title{background: red;}
</style>
</head>
<body>
<div>这是一个块</div>
<p id="text">这是一个段落</p>
<h2 class="title">这是一个标题</h2>
</body>
</html>
通配选择器
*{} -> div。ul，li，p，h1，h2······{}
注：尽量避免使用通配选择器，慎用
使用场景：
1、去掉所有标签的默认样式时
层次选择器
后代：M N
父子：M>N
兄弟：M~N（当前M下面的兄弟N标签）
相邻：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[class]{background: aqua;}*/
/*div[class=box]{background: aqua;}*/
/*div[class*=search]{background: aqua;}*/
/* div[class$=search]{background: aqua;}*/
div[class][id]{background: aqua;}
</style>
</head>
<body>
<div>aaaaaa</div>
<div class="box" id="elem">bbbbbb</div>
<div class="search">cccccc</div>
<div class="search button">dddddd</div>
<div class="button search">eeeeee</div>
</body>
</html>
伪类选择器
CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。
M:伪类
:link ：访问前的样式（只能添加给a标签）
:visited ：访问后的样式（只能添加给a标签）
:hover ： 鼠标移入时的样式 （可以添加给所有标签）
:active ：鼠标按下时的样式 （可以添加给所有标签）
注：一般网站都只设置a{L V H A 顺序}
:after：通过伪类的方式给元素往后添加一段文本内容，使用content
:before：通过伪类的方式给元素向前添加一段文本内容，使用content
:checked：针对表单元素
:disabled：针对表单元素
:focus：针对表单元素
hello
<!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: aquamarine;}
li:first-of-type{background: aqua;}
li:last-of-type{background: aquamarine;}
li:only-of-type{background: blueviolet;}
li:nth-of-type(2){background: brown;}
div:nth-child(2){background: brown;}*/
div:only-of-type{background: blue;}
</style>
</head>
<body>
<ul>
<li></li>
<div>aaaaaa</div>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
CSS样式继承
文字相关的样式可以被继承
布局相关的样式不能被继承（默认不能继承，但能设置继承属性inherit值）
CSS优先级
1、相同样式优先级：当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况
2、内部样式与外部样式：内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高
3、单一样式优先级：style行间 > id > class > tag > * > 继承
注：style行间 权重 1000
id 权重 100
class 权重 10
tag 权重 1
4、！important：提升样式优先级，非规范方式，不建议使用
不能针对继承的属性进行优先级的提升
5、标签+类与单类 ：标签+类 > 单类
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: chocolate;}
div{color: blue;}
</style>
<link rel="stylesheet" href="./base.css">--->
<style>
/*#elem{color: darksalmon;}
.box{color: aqua;}
div{color: bisque;}
*{color: indianred;}
body{color: mediumslateblue;}
#elem{color: aquamarine ;}
*{color: indianred ;}
body{color: mediumslateblue !important;}
.box{color: brown;}
div.box{color: aquamarine;}*/
div,p{color: bisque;}
div{color: blue;}
</style>
</head>
<body>
<!---<div id="elem" style="color:blue ;">这是一个块</div>
<div id="elem" class="box;">这是一个块</div>
<div id="elem" style="color:blue ;">这是一个块</div>--->
<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
100个tag相加小于一个class
（2）约分比较
ul li .box p input{} => li p input{}
.hello span #elem{} => #elem{}
CSS盒子模型
组成：content -> padding -> border -> margin
物品 填充物 包装盒 盒子与盒子之间的间距
content：内容区域 宽高组成
padding：内边距（内填充） 数值 可四边单独设置
margin：外边距（外填充）
注：1、背景颜色会填充到margin以内的区域（不包括margin区域）
2、文字会在content区域
3、padding不能出现负值，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: 300px;height: 300px;
background: red;border: 1px solid red;
padding: 30px 50px;
margin: 10px;}
#box2{width: 300px;height: 300px;background: blue;color: white;}
</style>
</head>
<body>
<div id="box">这是一个盒子</div>
<div id="box2">这又是一个盒子</div>
</body>
</html>
box-sizing：属于允许您以特定的方式定义匹配某个区域的特定元素。取值为content-box（默认值）/border-box。
默认值：width，height -> content
border-box：width，height -> content padding border
使用场景：
1、不用再去计算一些值
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>
#box{width: 300px;height: 300px;
background: red;border: 1px solid red;
padding: 30px 50px;
box-sizing: content-box;}
input{width: 100%; padding: 30px;box-sizing: border-box;}
</style>
</head>
<body>
<div id="box">这是一个盒子</div>
</body>
</html>
盒子模型问题
1、margin叠加：出现在上下margin同时存在的时候，会取上下中值较大的
解决方案：
1、BFC规范
2、想办法只给一个元素添加间距
2、margin转递：出现在嵌套结构中，只是针对margin
解决方案：
1、BFC规范
2、给父容器加边框
3、margin换成padding
<!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: cyan;margin-bottom: 30px;}
#box1{width: 200px;height: 200px;background: wheat);margin-top: 30px;}
#box1{width: 200px;height: 200px;background: red;border: 1px black solid;}
#box2{width: 100px;height: 100px;background: gold;margin-top: 100px;}*/
#box1{width: 200px;height: 100px;background: red;padding-top: 100px;}
#box2{width: 100px;height: 100px;background: gold;}
</style>
</head>
<body>
<!---<div id="box1"></div>
<div id="box2"></div>--->
<div id="box1">
<div id="box2"></div>
</div>
</body>
</html>
margin自适应居中是可以的，上下自适应是不行的。
不设置content现象对盒子的影响是会自动计算容器大小，节省代码
<!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: aquamarine;margin-left:auto;margin-right: auto;
margin::0 auto;}*/
#box1{width: 300px;height: 100px;background: blanchedalmond;color: white;padding-left:10px black solid;}
#box2{height: 100px;background: rebeccapurple;color: white;padding-left: 30px;border-left: 10px black solid;}
</style>
</head>
<body>
<div id="box1">
<div id="box2">这是一些内容</div>
</div>
</body>
</html>
标签分类
按类型：
block：块 div、p、ul、li、h2等
1、独占一行
2、支持所有样式
3、不写宽的时候，跟父容器的宽相同
4、所占区域是一个矩形
inline：内联 span、a、em、strong、img等
1、挨在一起
2、有些样式不支持，例如：宽高
3、不写宽的时候，宽度由内容决定
4、所占区域不一定为矩形
5、内联标签之间有空隙，换行产生
inline-block：内联块 input、select等
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>
/*#box1{width: 100px;height: 100px;background: aquamarine;}
#box2{width: 100px;height: 100px;background: aquamarine;}*/
#content1{width: 100px;height: 100px;background: aquamarine;}
#content2{width: 100px;height: 100px;background: aquamarine;}
</style>
</head>
<body>
<!---<div></div>
<span></span>
<input type="text">
<div id="box1">块1</div>
<div id="box2">块2</div>--->
<span id="content1">内联1</span>
<span id="content2">内联2</span>
</body>
</html>
按内容
flow：流内容
metadata：元数据
sectioning：分区
heading：标题
phrasing：措辞
embedded：嵌入的
interactive：互动的
按显示
替换元素：浏览器根据元素标签和属性，来决定元素的具体显示内容（img、input）
非替换元素：将内容直接告诉浏览器，将其显示出来（div、p、h1）
显示框类型
display：
block
inline
inline-block
none
注：display：none 不占空间
visibility：hidden 占空间
<!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: aqua;display: inline;}
span{width: 100px;height: 100px;background: aqua;display:block ;}*/
#box1,#box2{width: 100px;height: 100px;background: red;}
#box1{display: none;}
</style>
</head>
<body>
<!--<div>块1</div>
<div>块2</div>
<span>内联1</span>
<span>内联2</span>
<input type="text">-->
<div id="box1">块1</div>
<div id="box2">块2</div>
</body>
</html>
标签嵌套规范
ul、li、
dl、dt、dd
table、tr、td
块标签可以嵌套内联标签
块标签不一定能嵌套块标签
内联标签不能嵌套块标签（特殊：a标签可以嵌套块标签）
溢出隐藏
overflow
visible:默认
hidden
scroll
auto
x轴，y轴
<!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 black solid;overflow: scroll;}
</style>
</head>
<body>
<div>
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
</div>
</body>
</html>
透明度与手势
opacity：0（透明）-1（不透明）占空间
rgba
cursor：手势（默认手势）
实现自定义手势：图片（后缀名：.cur, .ice）
<!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>
#div1{width: 100px;height: 100px;background:aquamarine;opacity: 0.5;}
#div2{width: 100px;height: 100px;background:rgba(255,0,0,1);
cursor: pointer;}
</style>
</head>
<body>
<div id="div1">这是一个块</div>
<div id="div2">这是一个块</div>
<p>这是一个段落</p>
</body>
</html>
最大、最小宽高
min-width
max-width
min-height
max-height
注：强化对百分比单位的理解
%单位：以父容器大小进行换算
一个容器适应屏幕高：容器加height：100%；body：100%；html：100%
html，body{height:100%;}
.contrainer{height: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>
body{height: 500px;}
/*div{width: 200px;min-height: 200px;border: 3px rebeccapurple solid;}*/
#box1{width: 200px;height: 200px;background: aquamarine;}
#box2{width: 100%;height: 50%;background: blueviolet;}
</style>
</head>
<body>
<div>
<!--这是一段内容
这是一段内容
这是一段内容
这是一段内容
这是一段内容
这是一段内容
这是一段内容
这是一段内容
这是一段内容
这是一段内容
这是一段内容
这是一段内容
这是一段内容
这是一段内容
这是一段内容
这是一段内容-->
<div id="box1">
<div id="box2"></div>
</div>
</div>
</body>
</html>
CSS默认样式
有些标签有默认样式：
body（margin8个像素）
h1（上下margin21.440个像素）
p（上下margin16个像素）
ul（上下margin16个像素，左padding40像素）
默认点：list-style：disc
a：text-decoration：underline
有些标签没有默认样式：div span
CSS reset
简单的CSS reset：
*{margin:0;padding:0;}
优点：不用考虑那些标签有默认的margin和padding
缺点：稍微的影响性能
ul{list-style:none;}
a{text-decoration:none;color:#666;}
img{display:block;}
问题的现象：图片与容器底部有空隙
原因：内联元素对齐方式是按照文字基线对齐，而不是文字底线对齐
vertical-align: baseline：基线对齐方式，默认值
写具体页面时候或一个布局的时候：
1、写结构
2、css重置样式
3、写具体样式
float浮动
文档流
文档中可显示对象在排列时所占用的位置
float特性
加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。
floa取值
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: blanchedalmond;float: left;}
#box2{width: 200px;height: 200px;background: blueviolet;float: left;}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
float注意点
1、注会影响后面的元素
2、内容默认提升半层
3、默认宽根据内容决定
4、换行排列
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>
/*body{border: 1px black solid;}
#box1{width: 100px;height: 100px;background: blanchedalmond;;}
#box2{width: 200px;height: 200px;background: blueviolet;float: left;}
#box3{width: 300px;height: 300px;background: aquamarine;}
#box4{background: aqua;float: left;}*/
ul{margin: 0;padding: 0;list-style: none;width: 300px;height: 300px;border: 1px black solid;}
li{width: 100px;height: 100px;background: brown;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: right;}
</style>
</head>
<body>
<!--<div id="box1"></div>
<div id="box2"></div>
<div id="box3">文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字</div>
<div id="box4">这是一个没有宽度的块元素</div>-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<span>aaa</span>
<span>bbb</span>
</body>
</html>
清除浮动
利用clear属性清除float浮动
上下排列：clear属性，表示清除浮动的，left、right、both
嵌套排列：
1、 固定宽高：不推荐，不能把高度固定死，不适合做自适应的效果
2、父元素浮动：不推荐，因为父容器浮动也会影响到后面的元素
3、overflow：hidden（BFC规范），如果有子元素想溢出，那么会受到影响
4、display：inline-block（BFC规范），不推荐，父容器会影响到后面的元素
5、设置空标签：不推荐，会多添加一个标签
6、after伪类：推荐，是空标签的加强版，目前各大公司的做法
<!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: 100px;height: 100px;background: blue;float:both;}
#box2{width: 200px;height: 200px;background: blueviolet;clear: both;}*/
#box1{width: 200px;border: 1px black solid;}
#box2{width: 100px;height: 200px;background: blueviolet;float: both;}
.clear:after{content:**;clear:both;display:block}
</style>
</head>
<body>
<!--<div id="box1"></div>
<div id="box2"></div>
<div id="box1">
<div id="box2"></div>
<div class="clear"></div>
</div>
aaaaaa-->
<div id="box1">
<div id="box2"></div>
</div>
aaaaaa
</body>
</html>
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
