HTML+CSS系列教程笔记（3）

最新推荐文章于 2022-11-19 16:37:45 发布
最新推荐文章于 2022-11-19 16:37:45 发布
阅读量869 收藏
点赞数
文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_73842669/article/details/127603373
版权

第四十六课 CSS选择器

一，标签选择器：（TAG选择器）

使用的场景：
a， 去掉某些标签的默认样式时
b，复杂的选择器中，如层次选择器

二，群组选择器（分组选择器）

可以通过逗号的方式，给多个不同的选择器添加统一的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>
        *{ border:1px red solid;}
</style>
</head>
<body>
    <h1>标题</h1>
    <h2>第一段</h2>
    <div>这是第二段</div>
</body>
</html>

在这里插入图片描述

第四十七课 层次选择器

后代：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 h4 {border: 1px; color: red;}
</style>
</head>
<body>
    <div>第一段</div>
    <p>第二段</p>
    <h2>第三段</h2>
    <h3>
        <h4>第四段</h4>
        <h4>第五段</h4>
        <h4>第六段</h4>
    </h3>
    <div>
        <h4>第七段</h4>
        <h4>第八段</h4>
        <h4>第九段</h4>
    </div>
    <h4>第十段</h4>
</body>
</html>

例如
在这里插入图片描述

层次选择器基本样式：

标签(如div，p，h标签，span)
符号(如后代类的空格，>，+，~)
标签(同1)
{}(花括号)里面即为所需添加的样式

基本样式写法即为标签，符号，标签{}
示例： div h4 {border: 1px; color: red;}

加粗样式

第四十八课 CSS选择器 属性选择器

基本语言

M [attr] {}
例如

div[class*=search]{background: red;}

其中

=：完全匹配
*=：部分匹配
^=起始匹配
$=结束匹配
[][][][]：组合属性 例如div[class="" id=""]{background: red;}

属性选择器基本样式

标签
[选择(例如class*=search)]
{所需添加的样式}

示例： div[class*=search]{background: red;}

第四十九课 CSS选择器 伪类选择器

:link ————→访问前的样式 （只能添加给a标签）
:visited————→访问后的样式 （只能添加给a标签）
:hover————→鼠标移入时的样式 （可以添加给所有的标签）
:active————→鼠标按下时的样式 （可以添加给所有的标签）

注：
一般网站都只设置如下
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: gray;}
a:hover{color: blue; }

    </style>
</head>
<body>
   <a href="https://cet-bm.neea.edu.cn/">英语四级报名</a>
 
</body>
</html>

在这里插入图片描述

第五十课 CSS选择器 after等伪类选择器

一，after before

:after :before:通过伪类的方式给元素添加一段文本内容，使用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>
div:after{ content:"world";color:red}
    </style>
</head>
<body>
<div>hello</div>
 
</body>
</html>

如下
在这里插入图片描述

二，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>
:checked{width: 100px;height: 100px;}
    </style>
</head>
<body>
<input type="checkbox" >
<input type="checkbox" >
<input type="checkbox" >
 
</body>
</html>

如图所示，选择之后的复选框变成了css中被加上checked的css语言的样式
在这里插入图片描述

第五十一课 结构性伪类选择器

一，基本语言

:nth-of-type()    :nth-child()   括号中含有角标，角标例如：nth-of-type(3)，表示第三行
:first-of-type    :first-child   表示第一行
:last-of-type    :last-child   表示最后一行
:only-of-type    :only-child   当只有一行时才会显示效果

区别：

type：类型（例如一个项目中某一类项目的第几个）
child：子项（一个项目中第几项）

伪类选择器基本样式

标签(如div，h2，p)
伪类选择器
{所需添加样式}

示例
a:hover{color: blue; }
div:after{ content:“world”;color:red}
li:nth-of-type(3){background-color: red;}

第五十二课 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{ width: 200px; height:200px ;border: 3px red solid;color:red;font-size: 30px;}
    </style>
</head>
<body>
<div>
    <p>这是一个段落</p>
</div>
</body>
</html>

效果如下
在这里插入图片描述
此时<p>标签继承了<div>标签的文字样式，而没有继承布局样式，如果需要让<p>标签再继承布局样式，则在css区块的div标签下加入如下段落

<style>
div{ width: 200px; height:200px ;border: 3px red solid;color:red;font-size: 30px;}
 </style>
p{ border:inherit;}

第五十三课 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{color: green;}
        div{color: red;}
        
    </style>
</head>
<body>
    <div>这是一个段落</div>
</body>
</html>

在这里插入图片描述

二，内部样式与外部样式

内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高

三，单一样式优先级

style>id>class>tag>*>继承

第五十四课 CSS优先级

一，!important

提升样式优先级，非规范方式，、不建议使用（不能针对继承的属性进行优先级的提升）

二，标签+类与单类

标签+类>单类

群组优先级

群组选择器与单一选择器优先级相同，靠后的优先级高

第五十五课 CSS优先级

一，层次优先级

1，权重比较

ul li .box p input{} 1+1+10+1+1
.hello span #elem{} 10+1+100

权重不能相加，只是比较的一种方式：100*1<10

2，约分比较

同级标签互相约去比较级别高低

第五十六课 CSS盒子模型

一，组成：content→padding→border→margin

1，content：内容区域 width和height组成的

2，padding：内边距（内填充）

只写一个值：30px（上下左右）
写两个值：30px 40px（ 上下 左右）
写四个值：20px 30px 40px 50px（上 下 左 右）

单一样式只能写一个值
padding-left
padding-right
padding-top
padding-bottom

3，margin：外边距（外填充）

只写一个值：30px（上下左右）
写两个值：30px 40px（ 上下 左右）
写四个值：20px 30px 40px 50px（上 下 左 右）

单一样式只能写一个值
margin-left
margin-right
margin-top
margin-bottom

注：

1，背景色填充到margin以内的区域（不包含margin区域）

2，文字在content区域添加

3，padding不能为负数，而margin可以为负数

二，盒子模型写法

此类属性在css语句中{}内部 例如#box{width: 300px;height: 500px;background-color: red;border: 5px blue solid; padding :10px 100px 500px 50px;}

第五十七课 CSS盒模型基本大小

box-sizing

盒尺寸，可以改变盒子模型的展示形态

正常：width，height作用于→content
border-box：width，height作用于→content padding border

当使用border-box时，设置的width或者height值的效果同时作用于content padding border，即content padding border的width或者height值相加是设置的值

box-sizing使用样式

此类属性在css语句中{}内部 例如#box{width: 300px;height: 500px;background-color: red;border: 5px blue solid; padding :10px ;box-sizing：content-box}
其中（box-sizing：content-box）中的content-box可以与border-box替换

第五十八课 盒模型之margin叠加问题

一，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: 300px; height: 200px; background-color: red; margin-bottom: 30px;}
        #box2{ width: 300px; height: 200px; background-color: blue;margin-bottom: 50px;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

如下
在这里插入图片描述

二，解决方案

1，BFC规范

2，想办法只给一个元素添加间距

第五十九课 盒模型之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: 300px; height: 200px; background-color: red; }
        #box2{ width: 100px; height: 100px; background-color: blue;margin-top: 100px;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
    
</body>
</html>

问题示例如下
在这里插入图片描述

如图所示，代码中希望蓝色区块向下移动100px，而当蓝色区块移动的同时，红色区块也向下移动了。这种现象在margin-right ，left，bottom均不会出现。

二，解决方案

1，BFC规范

2，给父容器加边框

      #box1{ width: 300px; height: 200px; background-color: red;border: 5px black solid;}
        #box2{ width: 100px; height: 100px; background-color: blue;margin-top: 100px;}

3，将margin换成padding

 #box1{ width: 300px; height: 200px; background-color: red; padding-top: 100px;}
        #box2{ width: 100px; height: 100px; background-color: blue;}

第六十课 CSS盒模型margin盒子模型扩展

一，margin左右自适应是可以的，但是上下自适应是不行的。（如果想要实现上下自适应，需要在第二部分学习）

二，width，height不设置的时候，对盒子模型的影响，会自动去计算容器的大小，节省代码

第六十一课 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>
        #box1{ width: 500px; height: 500px; background-color: red;border: 5px black solid;padding: 30px 40px 60px 70px;}
        #box3{ width: 400px; height: 400px; background-color: blue;border: 4px yellow dashed;padding: 70px 60px 40px 30px}
        #box4{ width: 300px; height: 300px; background-color: green;border: 3px chocolate dotted;padding: 60px 70px 40px 30px}
        #box5{ width: 200px; height: 200px; background-color: khaki;border: 2px silver solid;padding: 70px 30px 40px 60px}
        #box6{ width: 100px; height: 100px; background-color: blueviolet;border: 1px lightcoral dotted;padding: 50px}
        #box7{ width: 10px; height: 10px; background-color: lightpink;border: 1px lightcoral dashed;padding: 50px}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3">
                <div id="box4">
                    <div id="box5">
                        <div id="box7"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
</body>
</html>

示例如下

在这里插入图片描述

第六十二课 标签分类 按类型

一，类型

A,block：块

div p ul li h1…

a，块的特性：独占一行
b，支持所有样式
c，不写宽的时候更父元素的宽度相同
d，所占区域是一个矩形
<!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,#box2{width: 100px;height: 100px;background-color: red;}
</style>
</head>
<body>
    <div id="box1">块1</div>
    <div id="box2">块2</div>
    
</body>
</html>

在这里插入图片描述

B,inline：内联

span a em strong img…

a，挨在一起的
b，有些样式不支持，例如width，height ，margin，padding
c，不写宽的时候，宽由内容绝定
d，所占区域不一定是矩形（自动转行时）
e，内联标签之间会有空隙，原因：换行产生的
<!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,#box2{width: 100px;height: 100px;background-color: red;}
</style>
</head>
<body>
    <span id="box1">内联1</span>
    <span id="box2">内联2</span>
    
</body>
</html>

示例如下
在这里插入图片描述
经观察发现width，height 在该标签中不支持

C,inline-block:内联块

input select…

a，挨在一起，但支持宽高。
<!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>
    #content1,#content2{width: 100px;height: 100px;background-color: red;}
    input{width: 100px;height: 100px;}
</style>
</head>
<body>
    <span id="content1">内联1</span>
    <span id="content2">内联2</span>
    <input type="text">
    <input type="text">
    
</body>
</html>

示例如下
在这里插入图片描述

二，注

布局一般用块标签，修饰文本用内联标签

第六十三课 标签分类 按内容

Flow：流内容
Metadata：元数据
Secioning：分区
Heading：标题
Phrasing：措辞
Embedded：嵌入的
Interactive： 互动的
详情查看网址：https://www.w3.org/TR/html5/dom.html

第六十四课 标签分类 按显示

一，替换与非替换元素

替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。

img ，input。。。
非替换元素：将内容直接告诉浏览器，将其显示出来。
div，h1，p。。。

第六十五课 显示框类型

一，display

1，block

2，inline

3，inline-block

4，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-color: red;display: inline;}
    </style>
</head>
<body>
    <div>块1 </div>
    <div>块2 </div>
    
</body>
</html>

在这里插入图片描述
这本来是一个block块状类型的，但是在div{}添加display，使其变成内联式的

二，使用方法

div{width: 100px;height: 100px;background-color: red;display: inline;
其中

二，注意

隐藏样式
display：none：不占空间的隐藏
visibility：hidden：占空间的隐藏

第六十六课 标签嵌套规范

一，块标签可以嵌套内联标签

  <div>
        <span></span>
        <a href=""></a>
    </div>

二，块嵌套块

 <div>
     <div>  </div>
</div>

特殊：错误的写法

<p>
      <div></div>
</p>

三，内联不能嵌套块 (a标签是一个例外)

错误的写法：

<span>
   <div></div>
</span>

特殊：
正确的写法：

   <a href="a">
       <div></div>
  </a>

四，一些固定的嵌套

ul li
dl dt dd
table tr td

第六十七课 溢出隐藏

一，基本语言

overflow：
visible：默认
hidden：直接隐藏
scroll：会设置出x和y轴
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: 150px;height:    150px;color: red;overflow:scroll;}
    </style>
</head>
<body>
    <div>溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 </div>
</body>
</html>

在这里插入图片描述

二，基本样式

 div{width: 150px;height:    150px;color: red;overflow:scroll;}

其中 scroll可以替换成visible hidden auto

第六十八课 透明度与手势

一，基本语言

1， opacity：o（透明）~1（半透明） 0.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{width: 150px;height:    150px;background-color: red;opacity: 0.5;}
    </style>
</head>
<body>
    <div>这是一个块</div>
    
</body>
</html>

在这里插入图片描述
注：占空间，所有的子内容也会透明

2，rgba() ：o（透明）~1（半透明） 0.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{width: 150px;height:    150px;background-color: rgba(255,0,0,0.5);}
    </style>
</head>
<body>
    <div>这是一个块</div>
    
</body>
</html>

在这里插入图片描述

3,鼠标指针样式（手势）

A，默认样式

default ：默认箭头
pointer：手形
move：移动型指针
help：帮助型指针

B，自定义样式

准备图片、

准备的图片必须是
.cur或者是.ico格式

二，基本样式

1，opacity的基本样式

div{width: 150px;height:    150px;background-color: red;opacity: 0.5;}

其中 opacity: 0.5;中的0.5可以在0~1之间改变， 调节透明度

2，rgba的基本样式

 div{width: 150px;height:    150px;background-color: rgba(255,0,0,0.5);}

其中，rgba(255,0,0,0.5);中最后一个维度可以改变（最后一个维度即为最后一个数字0.5）可以在0~1之间改变， 调节透明度

3 ，手势样式

手势样式与div标签平行，也在style标签里面手势标签的样式如下

cursor：pointer

其中，pointer可以与default move help互换，也可以换成

cursor：url( ./img/文件名.ico)

这里的文件名.ico也可以是文件名.cur

第六十九课 最小，最大宽高

一，容器的最小，最大宽高

min-width，max-width
min-height，max-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>
        div{ width: 200px; max-height: 50px;border: 5px red solid; }
    </style>
</head>
<body>
    <div>
        最大高度最大高度
        最大高度最大高度
        最大高度最大高度
        最大高度最大高度
        最大高度最大高度
        最大高度最大高度
        最大高度最大高度
        最大高度最大高度
        最大高度最大高度
        最大高度最大高度
    </div>
</body>
</html>

如下所示，如果文本超过了设定的宽高，那么文本内容会溢出，但当文本未超过设定的值时，div的框会自适应文本大小并改变框的高度与宽度

在这里插入图片描述

二，如果想让容器适应屏幕的高

给div的父容器（body）添加宽与高，给body的父容器（html）添加宽与高
{都是为100%}如下

        html{width: 100%; height: 100%; }
        body{width: 100%; height: 100%;}
        div{ width: 100%; min-height: 100% ;border: 5px red solid;background-color: blue; }

之后便可得到覆盖全屏幕的网页，如下
在这里插入图片描述

第七十课 CSS默认样式

有些标签有默认样式，有些标签没有默认样式

一，没有默认样式

span，div

二，有默认样式

body：

有margin 8px

h1：

有margin ：上下21.44px
font-weight:bold

p：

有margin ：上下16px

ul：

margin：上下16px
padding：左40px 默认点
默认点：list-style:disc

a

text-decoration:underline

第七十一课 CSS默认样式（CSS reset）

去除默认样式方法

1，*{margin：0;padding:0;}

优点：不用考虑那些标签有默认的margin和padding
缺点：稍微的影响性能
解决方案：以含有margin，padding的标签为例
body,p,h1,ul{margin：0；padding:0}

2，ul{list-style:none;}

删去列表前面的点

3，a{text-decotation:none;color;#666}

删除a标签下面的下划线，

4，img{display：block;}

问题的现象：图片跟容器底部有一些空隙。
内联元素的对齐方式是按照文字基线对齐的，而不是文字底线
解决方式

1，img{vertical-align：baseline;}：基线对齐方式，默认值
2，img{vertical-align；bottom;}
3，转换成块`img{display：block;}

第七十八课 float流动 概念及原理

一，文档流

文档流是文档中可显示对象在排列时所占用的位置。

float特性：加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列
float取值
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>
    #box1{width: 100px;height: 100px;background: red; float: left;}
    #box2{width: 200px;height: 200px;
    background: blue;}
    </style>
</head>
<body>
    <div id="box1" ></div>
    <div id="box2" ></div>
</body>
</html>

注意观察#box1{width: 100px;height: 100px;background: red; float: left;}
可以发现，代码 float: left;，表示悬浮于左侧
如图
在这里插入图片描述

第七十九课 float流动

一，float注意点

1，只会影响后面的元素。

2，内容默认提升半层。

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>
     #box1{width: 50px;height: 50px; background-color: yellow;}   
    #box2{width: 100px;height: 100px;background: red; float: left;}
    #box3{width: 200px;height: 200px;
    background: blue;}
    #box4{background-color: green;float: left;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2">浮动只会影响后面的元素，会漂浮在蓝色盒子是上面，而不会漂浮到前面的黄色盒子上</div>
    <div id="box3">内容默认提升半层，因此内容在蓝色的上面而不会漂浮到红色的上面</div>
    <div id="box4" >默认宽根据内容决定</div>
</body>
</html>
1~3 示例

在这里插入图片描述

4，换行排列

5，主要给块元素添加，但也可以给内联元素添加

下面示例中span也可以添加浮动样式

<!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; background-color: royalblue;}
li{width: 100px;height: 100px; list-style:none;background-color: red;float: left;}
span:last-of-type{float: right;}
    </style>
</head>
<body>
<ul>
<li>四块红色的块都使用了漂浮样式</li> 
<li>红色的块都是按顺序排列的</li> 
<li>漂浮排列的块都满足换行排列</li> 
<li>4</li>
</ul>
<span>1</span> 
<span>2</span> 
</body>
</html>

如下所示
在这里插入图片描述

第八十课与八十一课 清除float流动

一，浮动的清除类型

1，上下排列的清除

使用clear属性，表示清除浮动的语言如下
left:清除左浮动
right:清除右浮动
both：清除所有的浮动

2，嵌套排列

a，固定宽高：不推荐，不能把高度固定死，不适合做自适应的效果
b，父元素浮动：不推荐，因为父元素浮动也会影响到后面的元素
c，overflow：hidden（BFC）规范，如果有子元素想溢出，那么会受到影响
d，display：inline-block（BFC）规范，不推荐，父容器会影响到后面的元素。
e，设置空标签：不推荐，会多添加一个标签。
f，after伪类：推荐，是空标签的加强版，目前各大公司的做法。

二，浮动的清除的表达样式

1，上下排列clear清除

  #box1{width: 100px;height: 100px;background-color: red;float: left;}
  #box2{width: 200px;height: 200px;background: blue;clear: both;}

2，嵌套排列

a，固定宽高
 #box1{ width: 200px;border: 5px black solid;}
 #box2{ width: 100px;height: 200px;background: red;}

 <div id="box1"> 
         <div id="box2"></div>
    </div>

如下所示，在此类情况下，外层的box1的高度是由内层决定的
在这里插入图片描述

b，给父元素添加浮动
 #box1{ width: 200px;border: 5px black solid; float: left;}
 #box2{ width: 100px;height: 200px;background: red; float: left;}

  <div id="box1"> 
        <div id="box2"></div>
    </div>

父容器浮动之前
在这里插入图片描述
父容器浮动后
在这里插入图片描述

c d，overflow：hidden与display：inline-block
#box2{width: 100px;height: 200px;background: red;overflow：hidden}

其中，overflow：hidden与display：inline-block可以互换

e，设置空标签
 #box1{width: 200px;border: 1px blue solid;}
        #box2{width: 100px;height: 200px;background: red;float: left;}
        .clear{clear: both;}

<div id="box1">
        <div id="box2"></div>
        <div class="clear"></div>
    </div>

在这里插入图片描述

f，after伪类
  #box1{width: 200px;border: 1px blue solid;}
        #box2{width: 100px;height: 200px;background: red;float: left;}
        .clear:after{`content:''`; clear: both; display: block;}

<div id="box1" class="clear">
        <div id="box2"></div>
    </div>

content: ' '表示下面的内容是空的
clear: both;：表示清除浮动样式
display: block;：表示将内联样式转化成块
在这里插入图片描述

氢生锈了
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
HTML 选择器：提高网页开发效率的利器
a451319296的博客
05-12 4075
HTML 选择器是一种用于查找特定元素的语法，根据标签名、类名、ID 等属性来筛选出符合条件的元素。在开发过程中，灵活运用各种选择器可以帮助我们更加高效地操作页面元素。本文总结了常用的HTML选择器，并提供了相关使用案例和注意事项。通过熟练掌握这些选择器的使用方式，能够提高网页开发效率，并使代码更加规范化、易于维护。
html+css基础.md
02-25
它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 超文本是...
html没有prefix属性,HTML前缀属性(Open Graph Protocol)的含义？
weixin_30363285的博客
06-04 670
第一：前缀由RDFa (Resource Description Framework in Attributes)扩展名定义的属性之一。 RDFa用于以许多标记语言(如HTML和XML)表示的网页中实现Semantic Web。而不是让一个网页告诉浏览器它应该如何构造，现在你也可以告诉它什么是页面代表，像个人，产品列表等。并且为了能够语义地表示您的网页上的数据，您需要使用语义词汇表，这将告诉浏览器...
html没有prefix属性,将HTML转成XHTML并清除一些无用的标签和属性
weixin_42486913的博客
06-04 173
介绍这是一个能帮你从HTML生成有效XHTML的经典库。它还提供对标签以及属性过滤的支持。你可以指定允许哪些标签和属性可在出现在输出中，而其他的标签过滤掉。你也可以使用这个库清理Microsoft Word文档转化成HTML时生成的臃肿的HTML。你也在将HTML发布到博客网站前清理一下，否则像WordPress、b2evolution等博客引擎会拒绝的。它是如何工作的里面有两个类：HtmlRea...
html怎么给单元格加前缀,如何在HTML输入字段中添加不可移除的前缀？
weixin_35716518的博客
07-08 712
这适合我：$("input").keydown(function(e) {var oldvalue=$(this).val();var field=this;setTimeout(function () {if(field.value.indexOf('http://') !== 0) {$(field).val(oldvalue);}}, 1);});http://jsfiddle.net/J2...
前端基础入门--2
m0_59283844的博客
11-19 473
层样叠式表(Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
韩顺平html+css+javascript笔记完整版
01-30
CSS3引入了许多新特性，如伪类、媒体查询、动画和过渡效果，以及更强大的布局模型如Flexbox和Grid。 【JavaScript】 JavaScript是一种轻量级的解释型编程语言，主要用于网页和网络应用的动态效果和交互。JavaScript...
B站笔记-HTML+CSS.rar
04-15
1. **HTML元素**：HTML由一系列的元素组成，每个元素都有其特定的标签，如`<p>`代表段落，`<img>`用于插入图像，`<a>`定义超链接等。 2. **HTML属性**：元素可以有属性，例如`src`用于指定图片或视频的源路径，`href...
史上最经典的HTML+CSS笔记.rar
04-24
综上所述，这份"史上最经典的HTML+CSS笔记"应包含了从基础语法到高级特性的全面教程，无论是初学者还是有一定经验的开发者，都能从中受益。通过markdown格式阅读，可以清晰地查看和理解代码示例，方便学习和参考。
HTML和CSS的学习笔记
最新发布
02-09
HTML（HyperText Markup ...通过实践这些笔记和教程，你可以逐步掌握创建美观、响应式的网页所需的技能。同时，不断探索新的前端技术，如JavaScript、jQuery、Vue.js或React.js，将使你在网页开发领域更加得心应手。
prefix_360百科.html
08-03
linux安装软件采用源码安装灵活自由，适用于不同的平台，维护也十分方便。 源码的安装一般由3个步骤组成: 配置(configure) 编译(make) 安装(make install) 安装方法： 具体的安装方法一般作者都会给出文档，这里说明配置(configure)的prefix选项 以安装supersparrow-0.0.0为例，我们打算把他安装到目录 /usr/local/supersparrow,于是在supersparrow-0.0.0目录执行带选项的脚本 ./configure –prefix=/usr/local/supersparrow
html组群选择器,css 群组选择器实例详解
weixin_34070026的博客
06-04 2915
群组选择器，就是同时对几个选择器进行相同的操作。常常，我们的CSS 样式中会有好几个地方需要使用到相同的设定时，一个一个分开写会是一件满累人的工作，重覆性太高且显得冗长，更不好管理....在CSS 语法的基本设定中，就可以把这几个相同设定的选择器合并在一起，原本可能是写了7~8 行相同的语法，合在一起后就只要短短的一小行，怎么看都让人心旷神怡啊~语法css 群组选择器语法如下图所示对于群组选择器，...
html5群组选择器,选择器分组
weixin_39595430的博客
06-03 156
假如巴望 h2 元素与段落都有灰色。为到达这个指标，最容易的做法是使用以下声名：h2, p {color:gray;}将 h2 与 p 决意器放在规定左边，然后用逗号分隔隔离分散，就定义了一个划定。其右侧的款式(color:gray;)将使用到这两个决意器所援用的元素。逗号通知涉猎器，规则中囊括两个一致的决意器。如果没有这个逗号，那末划定规矩的寄义将纯粹差异。拜见子弟决定器。梗概将任意多个抉择器分...
html5+css3学习笔记-prefixfree前缀补全插件
weixin_30572613的博客
01-15 78
虽然现代浏览器支持CSS3，但是一些过往的版本或是目前有些CSS3属性的应用还是离不开前缀的。一些牛逼且执着于web技术且乐于分享的仁兄(Lea Verou)就搞了个名叫prefixfree.js的插件可以自动补全前缀。 首先在页面任意地方（能生效的方）插入插件 <script src="prefixfree.min.js"></script> 然后打开页面可...
<html lang="ja-JP" prefix="og: http://ogp.me/ns# website: http://ogp.me/ns/website#">
weixin_35755389的博客
10-28 1771
HTML5でOGP設定する際に注意したいxmlns属性とprefix属性 SNS対応のOGP（Open Graph Protocol）をHTML5に追加する際に一部変更が必要なようです。 ソーシャルネットワークサービス（SNS）を通じてブログを広めていくためにはOGP（Open Graph Protocol）の設定が重要なようです。 OGPを設置にするにあたって色
HTML群组选择器关联的属性是,Css选择器 id class 标签 群组 后代 通用 伪类选择器 详细介绍...
weixin_35262602的博客
06-09 299
1.id选择器语法：标记>#id名{属性:属性值;}eg:共享博客#box{color:red;}注：①id选择器的优先级最高，id名是唯一的，不能出现同名id；②id名的命名要语义化，常用的命名方法：驼峰命名法(#subNavTitle)，下划线连接命名法(main_left_con)。2.类选择器(class选择器)语法：标记>.class名{属性:属性值；}eg：共享博客.b...
html+css+javascript笔记
12-29
以下是一个简单的HTML+CSS+JavaScript笔记的示例： ```html <!DOCTYPE html> <html> <head> <title>HTML+CSS+JavaScript笔记</title> <link rel="stylesheet" href="demo.css"> <style> /* 在demo.css中定义的样式 */ div { color: red; } </style> </head> <body> <div> 这是一个HTML文档中的区域部分。 </div> <script> // JavaScript代码示例 var message = "这是一个JavaScript变量"; console.log(message); </script> </body> </html> ``` 在上面的示例中，我们创建了一个HTML文档，引入了名为demo.css的CSS文件，并在HTML中使用了一个div元素来定义一个区域部分。在demo.css中，我们为div元素设置了红色的文字颜色。此外，我们还在JavaScript代码块中定义了一个变量，并使用console.log()函数在浏览器的控制台中输出了该变量的值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值