小黑子的HTML入土过程第三章
- HTML+CSS系列教程第三章
- 3.15 标签群组通配等选择器
- 3.16 层次选择器
- 3.17 属性选择器
- 3.18 伪类选择器
- 3.19 结构伪类选择器
- 3.20 CSS的样式继承
- 3.21 单一样式的优先级
- 3.22 CSS盒子模型
- 3.23 box-sizing改变盒模型
- 3.24 盒模型之margin的叠加问题
- 3.24 盒模型之margin的传递问题
- 3.25 CSS盒子模型之扩展
- 3.26 按类型划分标签
- 3.27 按内容划分标签
- 3.28 按显示内容划分标签
- 3.29 display显示框类型
- 3.30 标签的嵌套规范
- 3.31 overflow溢出隐藏
- 3.32 透明度与手势
- 3.33 最大最小宽高
- 3.34 CSS的默认样式
- 3.35 CSS的重置样式
- 3.36 flot浮动概念及原理
- 3.37 float注意点
- 3.38 清除float浮动
HTML+CSS系列教程第三章
3.15 标签群组通配等选择器
标签选择器(TAG选择器)
css:div{} html:<div></div>
使用的场景:
1,去掉某些标签的默认样式时
2,复杂的选择器中,如层次选择器
群组选择器(分组选择器):
css:div,p,span{}
可以通过逗号的方式,给多个不同的选择器添加统一的CSS样式,
来达到代码的复用。
通配选择器
*{}->div,ul,li,p,h1,h2....
注:尽量避免使用通配选择器,因为会给所有的标签添加样式,慎用。
使用的场景:
1,去掉所有标签的默认样式时
范例:
<style>
div{background: red;}
#text{background: red;}
.title{background: blue;}
<style>
<body>
<div >这是一个段落</div>
<p id="text">这是一个块</p>
<h2 class="title">这是一个标题</h2>
<body>
—>但是这样写style部分会有重复的类似代码比较麻烦
当颜色相同时简化代码:
<style>
div,#text{background: red;}
.title{background:blue;}
<style>
<body>
<div >这是一个段落</div>
<p id="text">这是一个块</p>
<h2 class="title">这是一个标题</h2>
<body>
3.16 层次选择器
后代选择器:M N{}
父子选择器:M>N{}
兄弟选择器:M~N{} 使用当前M下面的所有兄弟N标签
相邻选择器:M+N{} 使用当前M下面相邻的一个n标签
后代:
在选择器M下包含所有的后代,之外的则不会被选中
<style>
#list li{border:2px red solid;}
<style>
<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>
<body>
—>
父子:
M只选择孩子N,不选择孩子N的孩子
<style>
#list>li{border:2px red solid;}
<style>
<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>
<body>
—>
兄弟:
M只选择下面的兄弟N,和M上面的无关
<style>
div~h2{background: red;}
<style>
<body>
<h2>这是一个标题</h2>
<div>这是一个段落</div>
<p>这是一个块</p>
<h2>这是一个标题</h2>
<h2>这是一个标题</h2>
<h2>这是一个标题</h2>
<h2>这是一个标题</h2>
<h2>这是一个标题</h2>
<body>
—>
相邻:
M只会找下面相邻紧挨着的一个N,上面相邻的不管
<style>
div+h2{background: red;}
<style>
<body>
<h2>这是一个标题</h2>
<div>这是一个段落</div>
<p>这是一个块</p>
<h2>这是一个标题</h2>
<h2>这是一个标题</h2>
<h2>这是一个标题</h2>
<h2>这是一个标题</h2>
<h2>这是一个标题</h2>
<body>
—>无效果,因为不紧挨着
<style>
div+h2{background: red;}
<style>
<body>
<h2>这是一个标题</h2>
<div>这是一个段落</div>
<h2>这是一个标题</h2>
<p>这是一个块</p>
<h2>这是一个标题</h2>
<h2>这是一个标题</h2>
<h2>这是一个标题</h2>
<h2>这是一个标题</h2>
<body>
—>
3.17 属性选择器
属性选择器:
M[attr]0}
=:完全匹配
*=:部分匹配
^=:起始匹配
$=:结束匹配
[][][]:组合匹配
范例:
<style>
div[class] {background: red;}
<style>
<body>
<div id="elem">aaaaaaaaa</div>
<div class="search">bbbbbbbbb</div>
<div class="box">ccccccccc</div>
<div class="search-fuck">eeeeeeeee</div>
<body>
—>全选class属性的
<style>
div[class*=search] {background: red;}
<style>
<body>
<div id="elem">aaaaaaaaa</div>
<div class="search">bbbbbbbbb</div>
<div class="box">ccccccccc</div>
<div class="search-fuck">eeeeeeeee</div>
<body>
—>有search的都匹配
<style>
div[class^=search] {background: red;}
<style>
<body>
<div id="elem">aaaaaaaaa</div>
<div class="search">bbbbbbbbb</div>
<div class="box">ccccccccc</div>
<div class="search-fuck">eeeeeeeee</div>
<div class="fuck-search">ddddddddd</div>
<body>
—>^=选择开头有的属性,后面有不算
<style>
div[class$=search] {background: red;}
<style>
<body>
<div id="elem">aaaaaaaaa</div>
<div class="search">bbbbbbbbb</div>
<div class="box">ccccccccc</div>
<div class="search-fuck">eeeeeeeee</div>
<div class="fuck-search">ddddddddd</div>
<body>
—>选择以search在末尾结束的语句
3.18 伪类选择器
伪类选择器M:伪类{}
:link 访问前的样式 (只能添加给a标签)
: visited 访问后的样式 (只能添加给a标签)
: hover 鼠标移入时的样式 (可以添加给所有的标签)
: active 鼠标按下时的样式 (可以添加给所有的标签)
:after,:before 通过伪类的方式给元素添加一段文本内容,使用content属性
:checked,:disabled ,:focus都是针对表单元素的
注:
一般的网站都只设置
a{} (link visited active ) a:hoverd
范例:
1.
<style>
a{color: gray;}
a:hover{color: red;}
<style>
<body>
<a href="#">这是一个链接</a>
<body>
—>点击前
—>点击后
2.
<style>
div:after{content: "hello"; color: red;}
<style>
<body>
<div>world </div>
<body>
—>
3.
<style>
:checked{width: 110px;height: 110px;}
<style>
<body>
<input type="checkbox">
<input type="checkbox" >
<input type="checkbox" >
<body>
—>点击前
—>点击后
<style>
:disabled{width: 110px;height: 110px;}
<style>
<body>
<input type="checkbox">
<input type="checkbox" >
<input type="checkbox" disabled>
<body>
—>点进前
—>点击后
<style>
:disabled{width: 110px;height: 110px;}
:focus{background: red;}
<style>
<body>
<input type="checkbox">
<input type="checkbox" >
<input type="checkbox" disabled>
<input type="text" >
<body>
—>点击前
—>点击后
3.19 结构伪类选择器
nth-of-type() nth-child()
角标()是从1开始的,1表示第一项,2表示第二项, n值表示从6到无穷大
first-of-type first-child
last-of-type last-child
only-of-type only-child
nth-of-type()和nth-child()之间的区别:
type :类型的意思
child :孩子的意思
范例:
<style>
li:nth-of-type(2) {background: red;}
<style>
<body>
<li></li>
<div>aaaaaa</div>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<body>
—>表示只在li中找第几个着色
<style>
li:nth-child(2) {background: red;}
<style>
<body>
<li></li>
<div>aaaaaa</div>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<body>
—>在li下选中第二个,但它第二个是div而不是li,故不显示
3.20 CSS的样式继承
文字相关的样式可以被继承
布局相关的样式不能被继承
(默认是不能继承的,但是可以设置继承属性:inherit )
范例:
<style>
div{width: 300px;height: 330px;border: 2px red solid;color: greenyellow;
font-size: 50px;}
<style>
<body>
<div>这是一个段落</div>
<body>
—>
继承属性:inherit
<style>
div{width: 300px;height: 330px;border: 2px red solid;color: greenyellow;
font-size: 50px;}
p{border:inherit;}
<style>
<body>
<div><p>这是一个段落</p></div>
<body>
—>
3.21 单一样式的优先级
1.相同样式优先级:
当设置相同样式时,后面的优先级较高,但不建议出现重复设置样式的情况。
2.内部样式与外部样式:
内部样式与外部样式优先级相同,如果都设置了相同样式,
那么后写的引入方式优先级高。
3.单一样式优先级:
style行间> id > class > tag > *(通配) >继承
(cSS的权重指的是这些选择符的优先级)
注:style行间 权重1000
id 权重100
class 权重10
tag 权重
4.!important
提升样式优先级,非规范方式,不建议使用。
(不能针对继承的属性进行优先级的提升)
5.标签+类与单类
标签+类 〉单类
6.群组优先级
群组选择器与单一选择器的优先级相同,靠后写的优先级高。
7.样式权重等级
(1)!important 权重值为10000
(2)内联样式,如: style=“”,权重值为1000
(3)ID选择器,如:#content,权重值为100
(4)类、伪类和属性选择器,如:.content、:hover权重值为10
(5)标签选择器和伪元素选择器,如:div、p、:before权重值为1
8.层次优先级
1.权重比较
并不是看谁的多就权重谁
ul li .box p input{} 比如:1 +1 +10 +1 +1.
hello span elem{} 10+1 +100
谁数值高才算
如果写100个低级同样的样式,是不是就可以比高级的优先了呢?
其实并不是,100个标签加到一起也没有class的优先级高,1和10不是进制
的意思,而是等级
2.约分比较(等级相同地约掉)
ul li .box p input{} li p input{}
.hello span itelem{} elem{}
注意:尽量不要写大于3个的,不然不符合语法
范例:
1.
<style>
.box{color: red;}
#elem{color: green;}
<style>
<body>
<div id="elem"class="box">这是一个段落</div>
<body>
—>明显id属性将class属性的覆盖了
2.
<style>
#elem{color: green;}
*{color: red!important;}
<style>
<body>
<div id="elem" style="color: blue;">这是一个段落</div>
<body>
—>!important让低级通配优先于style
3.22 CSS盒子模型
组成:content ->padding -> border -> margin
相当于:物品 填充物 包装盒 盒子于盒子之间的间距
content :内容区域 width和height组成的
padding :内边距(内填充)
只写一个值:30px(上下左右)
写两个值: 30px 40px(上下、左右)
写四个值: 30px 40px 5opx 6opx(上、右、下、左)
单一样式只能写一个值:
padding-left
padding-right
padding-top
padding-bottom
margin :外边距(外填充)
只写一个值: 30px(上下左右)
写两个值: 30px 4opx(上下、左右)
写四个值: 30px 40px 5opx 6opx(上、右、下、左)
单一样式只能写一个值:
正值px表示隔开,负值px表示贴合
margin-1eft
margin-right
margin-tnp
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: 300px;height: 200px;background: red;
border: 15px blue solid; padding:30px 20px ;
margin: 10px;}
#box2{width: 300px;height: 200px;background:black;
color: white; padding:30px ;}
</style>
</head>
<body>
<div id="box">这是一个盒子</div>
<div id="box2">这又是一个盒子</div>
</body>
</html>
—>
<style>
#box{width: 300px;height: 200px;background: red;
border: 15px blue solid; padding:30px 20px ;
margin: -20px;}
#box2{width: 300px;height: 200px;background:black;
color: white; padding:30px ;}
</style>
</head>
<body>
<div id="box">这是一个盒子</div>
<div id="box2">这又是一个盒子</div>
</body>
</html>
3.23 box-sizing改变盒模型
box-sizing:
盒尺寸,可以改变盒子模型的展示形态。
默认值:
content-box : width. height -> content
border-box : width、 height ->content padding border
(盒子的宽高由后面的来分配,越多分得越少)
使用的场景:
1.不用再去计算一些值
2.解决一些100%的问题
3.24 盒模型之margin的叠加问题
1. margin叠加问题,出现在上下margin同时存在的时候,会取上下中值较大
的作为叠加的值。
2.不会左右叠加 。
解决方案:
1.BFC规范。
2想办法只给一个元素添加间距。
范例:
1.
<style>
#box1{
width: 200px;height: 200px;background: red;
margin-bottom: 30px;
}
#box2{
width: 200px;height: 200px;background: yellow;
margin-top: 30px;
}
</style>
</head>
<body>
<div id="box1">这是一个盒子</div>
<div id="box2">这又是一个盒子</div>
</body>
—>
2.
<style>
#box1{
width: 200px;height: 200px;background: red;
margin-bottom: 30px;
}
#box2{
width: 200px;height: 200px;background: yellow;
margin-top: 70px;
}
</style>
</head>
<body>
<div id="box1">这是一个盒子</div>
<div id="box2">这又是一个盒子</div>
</body>
—>取大的px,明显间距变大
3.24 盒模型之margin的传递问题
margin传递问题,出现在嵌套的结构中,只是针对margin
-top的问题。
<style>
#box1{
width: 200px;height: 200px;background: red;
}
#box2{
width: 100px;height: 100px;background: yellow;
margin-top: 100px;
}
</style>
</head>
<body>
<div id="box1"><div id="box2">盒子</div></div>
</body>
—>加上margin-top之后,里面的边框将外层也一起带下去了
并没有实现只有里面边框在下
1.可以加边框解决
<style>
#box1{
width: 200px;height: 200px;background: red;
border: 1px black solid;
}
#box2{
width: 100px;height: 100px;background: yellow;
margin-top: 100px;
}
</style>
</head>
<body>
<div id="box1"><div id="box2">盒子</div></div>
</body>
—>
2.把margin-to改成上一个paddin-top,再修改高度
<style>
#box1{
width: 200px;height: 100px;background: red;
}
#box2{
width: 100px;height: 100px;background: yellow;
}
</style>
</head>
<body>
<div id="box1"><div id="box2">盒子</div></div>
</body>
—>
3.25 CSS盒子模型之扩展
扩展:
1. margin左右自适应是可以的﹐但是上下自适应是不行的。
(如果想实现上下自适应的话,需要在后面深入来进行学习)
2. width、height不设置的时候,对盒子模型的影响,会自动去
计算容器的大小,节省代码。
<style>
#box1{
width: 200px;height: 100px;background: red;
padding-top: 100px; margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="box1"></div>
</body>
—>居中效果
2.
<style>
#box1{
width: 300px;height: 300px;background: red;
}
#box2{ width:100%; height:100pX; background:blue;
color:white; padding-left: 30px; border
-left:1px black solid;}
</style>
</head>
<body>
<div id="box1">
<div id="box2">这是一些内容</div>
</div>
</body>
—>
3.
<style>
#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>
</div>
</body>
—>不设置width时,系统自动计算填充
3.26 按类型划分标签
按类型
block : div、p、ul、li、h1 ...
1.独占一行
2.支持所有样式
3.不写宽的时候,跟父元素的宽相同
4.所占区域是一个矩形
inline : span . a、 em、strong、img ...
1.挨在一起的
2.有些样式不支持,例如: width、height、margin、
padding
3.不写宽的时候,宽度由内容决定
4.所占的区域不一定是矩形
5.内联标签之间会有空隙,原因:换行产生的
inline-block : input、select ...
(可以具备块和内联的特性)
1.挨在一起,但是支持宽高
注:布局一般用块标签,修饰文本一般用内联标签
1.不写宽时,占满
<style>
#box1,#box2 {height: 200px;background: red;}
</style>
</head>
<body>
<div id="box1">块1</div>
<div id="box2">这是一些内容</div>
</body>
2.
<style>
#content1,#content2 {width: 100px; height: 100px;
background: red;}
</style>
</head>
<body>
<span id="content1">内联1内联1内联1内联1内联1内联1</span>
<span id="content2">内联2</span>
</body>
—>
or无空隙
<style>
#content1,#content2 {width: 100px; height: 100px;
background: red;}
</style>
</head>
<body>
<span id="content1">内联1内联1内联1内联1内联1内联1</span><span id="content2">内联2</span>
</body>
—>
<style>
#box1,#box2 {height: 200px;background: red;}
input{width: 200px;height: 200px;}
</style>
</head>
<body>
<div id="box1">块1</div>
<div id="box2">这是一些内容</div>
<input type="text">
<input type="text">
</body>
—>
3.27 按内容划分标签
https://www.w3.org/TR/html5/dom.html
3.28 按显示内容划分标签
按显示:
替换元素:浏览器根据元素的标签和属性,来决定元素的具体显示内容
img、input ...
非替换元素:将内容直接告诉浏览器,将其显示出来。
div、h1、p ...
范例:
<style>
img{width: 700px;height: 500px;}
input{width: 200px;height: 200px;}
</style>
</head>
<body>
<img src="./图片/img/1.jpg(我的图片路径)" alt="">
<input type="checkbox">
<h1>标题</h1>
</body>
—>
3.29 display显示框类型
display: block,inline, inline-block, none
区别:
display: none不占空间的隐藏
visibility: hidden占空间的隐藏
范例:
1.
<style>
div{width: 100px;height: 100px;background: red; display: inline;}
span{width: 100px;height: 100px;background: red; display: block;}
</style>
</head>
<body>
<div>块1</div>
<div>块2</div>
<span>内联1</span>
<span>内联2</span>
</body>
—>display令块有了内联属性,内联有了块属性
2.
<style>
div{width: 100px;height: 100px;background: red;
display: inline-block;}
span{width: 100px;height: 100px;background: red;
display: inline-block;}
</style>
</head>
<body>
<div>块1</div>
<div>块2</div>
<span>内联1</span>
<span>内联2</span>
</body>
—>inline令其都支持了宽、高,并且排成了一列
3.
<style>
#box1{
width: 300px;height: 100px;background: red;
display: none;
}
#box2{width:300px;height:100pX; background:blue; color:white; }
</style>
</head>
<body>
<div id="box1">块1</div>
<div id="box2">块2</div>
</body>
—>display:none效果,将红色的块1,隐藏不占空间
<style>
#box1{
width: 300px;height: 100px;background: red;
visibility: hidden;
}
#box2{width:300px;height:100pX; background:blue; color:
white; }
</style>
</head>
<body>
<div id="box1">块1</div>
<div id="box2">块2</div>
</body>
—> visibility: hidden效果,将块1隐藏但占空间
3.30 标签的嵌套规范
例子:
ul、li
dl、 dt. dd
table、 tr、td
块能够嵌套内联
<div>
<span></span><a href="#""></a></div>
块嵌套块
<div>
<span></span> <a href="#""></a> </div>
特殊:
p标签不能嵌套div标签
错误的写法:<p>
<div></div><p>
内联是不能嵌套块
错误的写法:
<span><div></div></span>
特殊:
正确的写法:<a href="#"><div></div></a>
<a href="#"><span></span> </a>
这样的好处:可以给一个区域加链接
注(a标签不能嵌套a标签)
3.31 overflow溢出隐藏
overflow :
visible :默认
hidden
scroll
auto
x轴、y轴
overfloW-x、overflow-y针对两个轴分别设置
实现;
1.
<style>
div{width: 200px;height: 200px;border: 1px black solid;}
</style>
</head>
<body>
<div>溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
</div>
</body>
—>不加overfl导致溢出边框
<style>
div{width: 200px;height: 200px;border: 1px black
solid; overflow: hidden;}
</style>
</head>
<body>
<div>溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
</div>
</body>
—>hidden的直接剪切隐藏
<style>
div{width: 200px;height: 200px;border: 1px
black solid;overflow: scroll;}
</style>
</head>
<body>
<div>溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
</div>
</body>
—>滚动条效果
<style>
div{width: 200px;height: 200px;border: 1px black solid;}
</style>
</head>
<body>
<div>溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
</div>
</body>
—>只有右边有滚动条,并且再内容多到超过边框时才显示滚动条
3.32 透明度与手势
opacity : 0(透明)~1(不透明)
0.5(半透明)
注:占空间、所有的子内容也会透明
rgba() : 0~ 1
注:可以让指定的样式透明,而不影响其他样式
cursor :手势
default :默认箭头
要实现自定义手势:
准备图片:.cur . .ico
cursor : url(./img/ cursor.ico)
(自己定义的光标图) ,auto;
1.opacity
<style>
div{width: 200px;height: 200px;background:red;
border: 1px black solid; opacity: 0.5;}
</head>
<body>
<div>这是一个块</div>
<p>这是一个段落</p>
</body>
—>透明化依旧占空间
<style>
#div1{width: 200px;height: 200px;background:red;
opacity: 0.5;}
#div2{width: 200px;height: 200px;background:
rgba(255,0.5,0.5, 0.5);}
</head>
<body>
<div id="div1">这是一个块</div>
<p>这是一个段落</p>
<div id="div2">这是一个块</div>
</body>
—>rgba只针对背景透明,对文字不影响
<style>
div{width: 200px;height: 200px; rgba(255,0.5,0.5,
0.5);cursor: help;}
</head>
<body>
<div>这是一个块</div>
</body>
—>
<style>
div{width: 200px;height: 200px; rgba(255,0.5,0.5,
0.5);
opacity: 0.5; cursor: pointer;}
</head>
<body>
<div>这是一个块</div>
<p>这是一个段落</p>
</body>
—>
3.33 最大最小宽高
min-width、min-height
max-width.max-height
%单位: 换算->已父容器的大小进行换算的
一个容器怎么适应屏幕的高: 容器加height:100%;
body:108%;
htm1:100%;
html, body{ height : 100%;}
.contrainerheight : 100%;
<style>
div{width: 200px;min-height: 200px;border: 1px red
solid}
</head>
<body>
<div>
这是一个内容
这是一个内容
这是一个内容
这是一个内容
这是一个内容
这是一个内容
这是一个内容
这是一个内容
这是一个内容
这是一个内容
这是一个内容
这是一个内容
这是一个内容
这是一个内容
这是一个内容
这是一个内容
这是一个内容
</div>
</body>
—>
原本:
设置了最小高度或宽度,那么超过了最小高度或宽度,就会自动调节
—>
<style>
div{width: 200px;max-height: 200px;border: 1px red
solid}
</head>
<body>
<div>
这是一个内容
这是一个内容
这是一个内容
这是一个内容
这是一个内容
这是一个内容
这是一个内容
这是一个内容
这是一个内容
</div>
</body>
—>
原本
—>设置了最大高度或宽度,那么小于最大高度或宽度,就会自动调节
<style>
#box1{width: 200px;height: 200px;background: red;}
#box2{width: 100%;height: 80%;background: blue;}
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
—>%计算时根据父容器div1来进行
—>当其中一项高或宽没有时,就无效果
<style>
body{ height : 100%;}
#box1{width: 200px;height: 100%;background: red;}
#box2{width: 100%;height: 80%;background: blue;}
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
—>根据body部分层层迭代
3.34 CSS的默认样式
没有默认样式的:div、span
有默认样式的:
body ->marign : 8px
h1 ->margin : 上下 21.440px
font-weight : bold
p->margin : 上下 16px
ul ->margin : 上下 16px padding :左 40px
默认点:list-style : disc
a ->text-decoration: underline;
3.35 CSS的重置样式
css reset :
*{margin:0; padding:o;}
优点:不用考虑哪些标签有默认的margin和padding
缺点:稍微的影响性能
body,p,h1,ul{ margin:0; padding:o;}
ul{ list-style : none;}
a{ text-decoration: none; color:#999;}
img{ dispaly: block}
问题的现象:图片跟容器底部有一些空隙。
内联元素的对齐方式是按照文字基线对齐的,而不是文字的
底线对齐。
vertical-align: baseline; 基线对齐方式,默认值
img{ vertical-align:bottom;} 解决方式是推荐的
写具体页面的时候或一个布局效果的时候:
1.写结构
2. css重置样式
3. 3.写具体样式
<style>
ul{list-style: none;}
</head>
<body>
<ul>
<li></li>
</ul>
<a href=""></a>
</body>
原本是有默认点的
—>加了list-style:none就消失了
<style>
ul{list-style: none;}
a{text-decoration: none;color: #999;}
a:hover{text-decoration: underline;color: red;}
</head>
<body>
<ul>
<li></li>
</ul>
<a href="">这是一个链接</a>
</body>
原本:
—>下划线消失,并且点击才出现下划线、变色
<style>
img{ vertical-align: bottom; }
</head>
<body>
<div><img src="./ img/dog.jpg" alt="" >xyz</div>
</body>
—>填充基线
3.36 flot浮动概念及原理
1.
<style>
body{border: 5px black solid;}
#box1{width: 100px;height: 100px;background: red;
float: left;}
#box2{width: 50px;height: 50px;background: yellow; float: left;}
#box3{width: 200px;height: 200px;background: green;}
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
无浮动前:
—>向左进行了浮动,表示不占原来的位置了,沿着父容器body向左排列,而处于正常文档流的box3则替代了浮动文档的位置
<style>
body{border: 5px black solid;}
#box1{width: 100px;height: 100px;background: red;
float: left;}
#box2{width: 50px;height: 50px;background: yellow; float: left;}
#box3{width: 200px;height: 200px;background: green;}
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
—>向右效果
<style>
body{border: 5px black solid;}
#box1{width: 100px;height: 100px;background: red;
float: right;}
#box2{width: 50px;height: 50px;background: yellow; float: right
;}
#box3{width: 200px;height: 200px;background: green; float:left}
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
—>当body父容器中无正常文档流时,设置的实线边框就不会撑开如例1的样子。
<style>
body{border: 5px black solid;}
#box1{width: 100px;height: 100px;background: red;
float: right;}
#box2{width: 50px;height: 50px;background: yellow; float: right;}
#box3{width: 200px;height: 200px;background: green;float: right;}
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
—>按循序排列浮动
3.37 float注意点
1.只会影响后面的元素。
2.内容默认提升半层。
3.默认宽根据内容决定。
4.换行排列。
5.主要给块元素添加,但也可以给内联元素添加。
1.只会影响后面的元素
<style>
body{border: 5px black solid;}
#box1{width: 100px;height: 1000px;background: red;
float: left;}
#box2{width: 50px;height: 50px;background: yellow;}
#box3{width: 200px;height: 200px;background: green;}
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
—>由于box2px比较小,故被覆盖,实际上在左上角的位置
or.
<style>
body{border: 5px black solid;}
#box1{width: 100px;height: 100px;background: red;
}
#box2{width: 50px;height: 50px;background: yellow;float: left;}
#box3{width: 200px;height: 200px;background: green;}
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
—>
<style>
body{border: 5px black solid;}
#box1{width: 100px;height: 100px;background: red;
}
#box2{width: 50px;height: 50px;background: yellow;float: left;}
#box3{width: 200px;height: 200px;background: green;}
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3">文字文字文字文字
文字文字文字文字文字文字文字文字文字
</div>
</body>
—正常的大文档流上的字体不会被小的浮动文档遮盖,可以配合实现图文混排的效果
3.
原本:
<style>
body{border: 5px black solid;}
#box1{width: 100px;height: 100px;background: red;
}
#box2{width: 50px;height: 50px;background: yellow;float: left;}
#box3{width: 200px;height: 200px;background: green;}
#box4{background: orange;}
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4">这是一个无框的块元素</div>
</body>
—>无添加宽高时,填充body基下
<style>
body{border: 5px black solid;}
#box1{width: 100px;height: 100px;background: red;
}
#box2{width: 50px;height: 50px;background: yellow;float: left;}
#box3{width: 200px;height: 200px;background: green;}
#box4{background: orange;}
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4">这是一个无框的块元素</div>
</body>
—>单无添加宽高浮动时,其根据内容决定
原本
<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;}
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
—>
(1)
<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;}
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
—>浮动换行排列
(2)
<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;}
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
—>
(3)
<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: 80px;}
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
—>
4.
<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: 80px;}
span:last-of-type{float: right;}
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<span>aaaffff</span><span>bbbb</span>
</body>
—>内联元素也适用浮动
3.38 清除float浮动
如何清除浮动
上下排列:clear属性,表示清除浮动的,left、 right、 both
嵌套排列:
固定宽高:不推荐,不能把高度固定死,不适合做自适应的效果。
父元素浮动:不推荐,因为父容器浮动也会影响到后面的元素。
overflow : hidden (BFC规范),如果有子元素想溢出,那么
会受到影响。
display : inline-block(BFC规范),不推荐,父容器会影响
到后面的元素。
设置空标签︰不推荐,会多添加一个标签。
after伪类:推荐,是空标签的加强版,目前各大公司的做法。
(clear属性只会操作块标签,对内联标签不起作用)
<style>
#box1{width: 100px;height: 100px;background: red;
float: left;}
#box2{width: 200px;height: 200px;background: blue;
clear: both;}
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
原本不加clear
—>加了clear:both / left / right将蓝色方块不受浮动影响
<style>
#box1{width: 200px;border: 4px black solid;
overflow: hidden;}
#box2{width: 100px;height: 200px;background: blue
;clear: left;}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
fkfkfkffkfkffkfk
</body>
—>
<style>
#box1{width: 200px;border: 4px black solid;
display: inline-block;}
#box2{width: 100px;height: 200px;background: blue
;clear: left;}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
fkfkfkffkfkffkfk
</body>
—>
<style>
#box1{width: 200px;border: 4px black solid; }
#box2{width: 100px;height: 200px;background: blue;float: left;}
.clear{ clear:both;}
</head>
<body>
<div id="box1">
<div id="box2"></div>
<div class="clear">zhes1</div>
</div>
fkfkfkffkfkffk
</body>
—>
当将div class属性标签的文字去除
5.
<style>
#box1{width: 200px;border: 4px black solid; }
#box2{width: 100px;height: 200px;background:
blue;float: left;}
.clear::after{content:"";clear:both;display:block}
</head>
<body>
<div id="box1" class="clear">
<div id="box2"></div>
</div>
fkfkfkffkfkffk
</body>
原本:
.clear::after{content:"~~~~";clear:both;display:block}
—>
—>伪类空标签,清除浮动影响