第三次双创作业-CSDN博客

本文链接：https://blog.csdn.net/m0_74348480/article/details/127586194

第三次双创作业

46CSS选择器标签选择器

标签选择器(TAG选择器）
css：div{}
html:<div>
使用的场景：
1. 去掉某些标签的默认样式时
2. 复杂的选择器中，如层次选择器
群组选择器(分组选择器）
可以通过逗号的方式，给多个不同的选择器添加CSS样式，来达到代码的复用。
css:div,p, span{}

例如：这是三个标签单独设置时分别添加颜色

div{ background: red;}
#text{ background: red;}
.title{ background: red;}
<div>这是一个块</div> 
<p id="text" >这是一个段落</p>
<h2 class="title" >这是一个标题</h2>

可以使用下列代码一次性解决：

div,#text,.title{ background: red;}

通配选择器
*{ } -> div,ul,1i,p,h1,h2…{}
注:尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用。
使用的场景:
1.去掉所有标签的默认样式时

47CSS选择器（2）层次选择器

层次选择器

后代:M N（空格）ul li{ border:1px red solid;}(表示在ul旗下的li标签，甚至是li标签里面的li标签）
父子:M > N(表示在ul（M)旗下的li标签,但是不包含li标签里面的li标签）
兄弟:M~N(M往下所有N标签，但是上面的不管）
相邻:M+N（M相邻的下一个标签）

48CSS选择器（3）属性选择器

属性选择器

在这里插入图片描述
例如：

div[class]{ background: red;}
<div>aaaa</div>
<div class="box" > bbbbb</div>
<div class="search">ccccc</div>

此时所有含class的标签全部选中。

当如下时：

div[class=box]{ background: red;}

则对应标签选中。

=：完全匹配
*=：部分匹配【只要出现（box)则选中该标签。】

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

^=：起始匹配【在起始位置出现该项】
$=：结束匹配【在结束位置出现该项】

可以多个【】【】【】进行组合匹配
这次是在class下有【id】的标签被选中

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

49CSS选择器（4）伪类选择器

CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候,用伪类来添加。
M：伪类{ }
【:link、:visited、 :hover、 :active】

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

注:

link visited只能给a标签加, hover和active可以给所有的标签加。
如果四个伪类都生效,一定要注意顺序:L V H A。
一般网站只这样去设置:a{}， a:hover{}.

50CSS选择器（5）伪类选择器第二弹

:after、:before通过伪类的方式给元素添加一段文本内容，使用content属性。可以单独设置。

div:after{ content: "world"; color: red;}
<div>hello </div>

:checked、:disabled、:focus都是针对表单元素的
当元素具备对应属性时才会触发样式

51CSS选择器（6）伪类选择器第三弹

结构性伪类选择器：nth- of-type() ，nth- child()
角标是从1开始的，1表示第一项， 2表示第二项
n值，从零到无穷大

:nth-of-type()、:nth-child()
:first of type、:first child
:last of-type、:last- child
:only- of-type、:only- child

:first of type、最开始的那个
:last of-type、最后的那个
:only- of-type、唯一的那个（大于等于2不会有反应）

:nth-of-type()、:nth-child()的区别

如下表示选择li中的第二个

li:nth-of-type(2){ background 口red;}
</style>
</head>
<body>
<ul>
<li></li>
<div></div>
<li></li> 
<li></li>
<li></li>
<li></li>
</ul>
</body>

如下表示选择第二项
但是当此时则不会有意义

li:nth-child(2){ background 口red;}
</style>
</head>
<body>
<ul>
<li></li>
<div></div>
<li></li> 
<li></li>
<li></li>
<li></li>
</ul>
</body>

52CSS样式继承

文字相关的样式可以被继承
布局相关的样式不能被继承(默认是不能继承的，但是可以设置继承属性inherit值）
例如：

<style>
div{ width: 300px; height :300px; border:1px Ored solid; color:Ored; font -size :30px;}
</style>
</head>
<body>
<div>
<p>这是一个段落</p>
</div> 
</body>
</html>

p标签可以继承div中的文字样式
在这里插入图片描述

做如下修改则可以继承布局样式

p{border : inherit;]

在这里插入图片描述

53CSS优先级

相同样式优先级
当设置相同样式时,后面的优先级较高,但不建议出现重复设置样式的情况。
内部样式与外部样式
内部样式与外部样式优先级相同,如果都设置了相同样式,那么后写的引入方式优先级高。

相同样式优先级
例如：

<style>
div{ color: red;}
div{ color: blue;}
</style> 
</head>
<body>
<div>这是一个块</div>
</body>
</html>

此时显示为蓝色，后者优先级更高。

内部样式与外部样式
当引入外部样式时，也是后者优先级更高。

单一样式优先级
style行间>id>class>tag>*>继承
例如：

<style>
/* #elem{ color:red;} */
/*.box{ color:blue;} */
/*div{ color:green;} */
/* *{ color:red;} */ 
body{ color:blue;}
</style>
<head>
<body>
<!-- <div id="elem" style="color:blue;">这是一个块</div> -->
<div id="elem" class="box" >这是一个块</div>
</body>
</html>

注: style行间权重1000
id权重100
class权重10
tag权重1

54CSS优先级（2）

!important
提升样式优先级,非规范方式,不建议使用。（不能针对继承提升优先级）
标签+类与单类
标签+类>单类

div.box{ color: blue;}
.box{ color: red; }

上面那行优先级更高

群组优先级
群组选择器与单一选择器的优先级相同,靠后写的优先级高。
例如：

div{color:blue;}
div,p{color:red;}

这两个不分优先级

55CSS优先级（3）

层次优先级

权重比较
ul li .box p input{} 1+1+10+1+1
.hello span #elem{ } 10+1+100
约分比较
ul li .box p input{} li p input{}
.hello span #elem{ } #elem{ }
(约掉级别相同的，剩余部分见斜体）

56盒子模型

在这里插入图片描述
组成: content（物品） -> padding（填充物） -> border（包装盒） -> margin（盒子与盒子之间的间距）

content :内容区域width和he ight组成的
padding :内边距( 内填充)

只写一个值:30px ( 上下左右)
写两个值:30px40px(上下、左右)
写四个值: 30px 40px 50px 60px (上、右、下、左)
单一样式只能写一个值:
padding- left
padding- right
padding- top
padding- bottom

margin :外边距(外填充)

只写一个值:30px ( 上下左右)
写两个值:30px40px(上下、左右)
写四个值: 30px 40px 50px 60px (上、右、下、左)
单一样式只能写一个值:
margin- left
margin- right
margin- top
margin- bottom

注:

背景颜色会填充到margin以内的区域。
文字会在content区域。
padding不能出现负值, margin是可以出现负值。(盒子重叠）

57盒子模型（2）box-sizing

box-sizing【存疑中？】
box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。取值为
content-box (默认值)| border-box.

盒尺寸，可以改变盒子模型的展示形态。
默认值:
content-box : width、 height -> content
border-box : width、 height -> content padding border
使用的场景:
1.不用再去计算一些值
2.解决一些100%的问题

58盒子模型（3）margin叠加

margin叠加
当给两个盒子同时添加上下外边距的时候，就会出现叠加的问题。这个问题只在上下有,左右是没有这个叠加问题的。

#box1{ width:200px; height: 200px; background: red; margin- bottom: 30px; }
#box2{ width : 200px; height: 200px; background: Oblue; margin-top: 40px;}

（此时同时存在30px和40px则不会累加，而是叠加取40px.）

如果想累加：
解决方案:

BFC规范
想办法只给一个元素添加间距。

59盒子模型（4）margin传递

margin传递
margin传递的问题只会出现在嵌套的结构中,且只有margin-top会有传递的问题,其它三个方向是没有传递问题的。
解决方案:

BFC规范
给父容器加边框。
margin换成padding.

输入下例：

#box1{ width: 200px; height: 200px; background: 口red; }
#box2{ width: 100px; height : 100px; background: blue; margin- top: 100px;}

则
在这里插入图片描述

按道理转移到最底部，实际上连带着红色盒子一起下移。
在这里插入图片描述

这是加边框

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

margin换成padding

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

60盒子模型（5）

margin自适应居中

<style>
#box{ width:400px; height : 100px; background: red; margin-left:auto;}
</style>

如上：margin-left:auto就是向左自适应（就是向左标齐）

margin-left: auto; margin-right auto; 而这就是居中对齐。
扩展:

margin左右自适应是可以的，但是上下自适应是不行的。
width、 height不设置的时候，对盒子模型的影响，会自动去计算容器的大小，节省代码。

不设置content的现象

62标签分类

存疑

按类型

block :块
inline :内联
inline block :内联块

block : div、 p、ul、li、h1

1.独占一行
2.支持所有样式
3.不写宽的时候，跟父元素的宽相同

inline：span、a、em、strong、img

1.挨在一起的
2.有些样式不支持，例如: width、 height、 margin、 padding
3.不写宽的时候，宽度由内容决定
4.所占的区域不一定是矩形
5.内联标签之间会有空隙，原因:换行产生的

inline-block : input、 select

1.挨在一起，但是支持宽高

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

63标签分类（2）

按内容
Flow :流内容
Metadata :元数据
Sectioning :分区
Heading :标题
Phrasing :措辞
Embedded :嵌入的
Interactive :互动的

在这里插入图片描述

64标签分类（3）

按显示

替换元素:浏览器根据元素的标签和属性,来决定元素的具体显示内容。（通过属性决定显示）
非替换元素:将内容直接告诉浏览器,将其显示出来。（只写标签即可）

65显示框类型

display显示框类型自行修改

block
inline
inline- block
none

注：
display:none不占空间的隐藏
visibility: hidden 占空间的隐藏

66标签嵌套规范

ul、li
dl、dt、dd
table、tr、td

块能够嵌套内联

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

块嵌套块

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

特殊:
错误的写法:

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

块标签可以嵌套内联标签
块标签不一定能嵌套块标签
内联标签不能嵌套块标签
a标签是一个例外
内联标签不能嵌套块标签
如下为错误写法：

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

特殊: a标签能嵌套块，不能嵌套a标签
正确的写法:

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

67溢出隐藏

overflow

visible :默认
hidden
scroll
auto

下列代码：

<style>
div{ width: 300px; height:200px; border:1px black solid; overflow: hidden;}
</style>

overflow: hidden
可使：
在这里插入图片描述
转变为：

overflow: scrol
效果

在这里插入图片描述
overflow:auto
可以在需要字数多的时候出现滚动条，字数少时不显示。

x轴、y轴
overflow-x、overflow- y针对两个轴分别设置

68透明度与手势

opacity: 0(透明) ~ 1(不透明) 针对整体
0.5(半透明)
例如：

<style>
div{ width: 100px; height: 100px; background: Ored; opacity: 0;}
</style>

当然也占空间。
注:占空间、所有的子内容（就是块里面的字）也会透明

rgba（rgb）是三原色，针对指定样式
例如：

#div1{ width:100px; height: 100px; background:red; opacity: 0.5;}
#div2{ width: 100px; height: 100px; background: rgba( 201, 144, 144, 0);}

cursor：手势
default:默认箭头
自定义鼠标样式
要实现自定义手势:
准备图片:
cur . ico
cursor : url( ./ img/ cursor . ico) ,auto;

69最大、最小宽高

min-width、max-width
min-height、max-height
注:强化对百分比单位的理解

%单位:换算->以父容器的大小进行换算的

body{ height:500px; }
#box1{ width:200px; /* height:200px; */ height: 100%; background:red;}
#box2{ width:100%; height:80%; background: blue;}

/* */ 中的内容可被box2直接继承。
忽略/* */中的内容时，则会box1继承body，box2再继承box1。

一个容器怎么适应屏幕的高:
容器加height :100%;body:100%;html :100%;

html，body{ height:100%; }
contrainer{ height:100%;}

contrainer将直接继承

70CSS默认样式

有些标签有默认样式,有些标签没有默认样式。

没有默认样式:
div、span、 …
有默认样式:
body、h…h6、 p、ul、 …
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 ;

71CSS reset

（存疑中）
简单的CSS reset :
*{ margin:O; padding:0; }
ul{ list-style:none; }
a{ text- decoration:none; color:#666; }
img{ display:block; }
优点:不用考虑哪些标签有默认的margin和padding
缺点:稍微的影响性能

在这里插入图片描述
图片对齐按照基线而不是底线
问题的现象:图片跟容器底部有一些空隙。
内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的。
vertical-align: baseline;基线对齐方式，默认值
img{ vertical- align:bottom;}解决方式是推荐的

78float浮动

文档流
文档流是文档中可显示对象在排列时所占用的位置。
float特性
加浮动的元素,会脱离文档流,会延迟父容器靠左或靠排列，如果之前已经
有浮动的元素,会挨着浮动的元素进行排列。

79float浮动（2）

float注意点

只会影响后面的元素。
内容默认提升半层。
默认宽根据内容决定。
换行排列。
主要给块元素添加，但也可以给内联元素添加。

80float浮动（3）

利用clear属性清除float浮动
上下排列: clear属性，表示清除浮动的， left、right、 both

#box1{ width: 100px; height : 100px; background:D ] red; float:left;}
#box2{ width: 200px; hei ght : 200px; background:D blue; clear:both;}

常用both

嵌套排列:

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

81float(4)

#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>
aaaaaaa
</body>

content设置一个空的内容，先clear:both清浮动,再display内联转块

.clear:after{ content:' '; clear:both; display: block ;}

82练习

<style>
*{ margin:0; padding:0;}
ul{ list-style: none;}
img{ display: block;}
a{ text- decoration: none; color: 。#666; }
h1,h2,h3{ font-size: 16px;}
.1{ float:left;}
.r{ float:right;}
.clear{ content:""; display: block; clear:both; }
</style>
<body>
<div id= "main">
<h2>外媒评论精选</h2>
<ul>
<li>
<div class=" pic" >
<a href="#">
<img src="" alt="">
</a>
</div>
<div class="content">
<h2>测试标题测试标题</h2>
<p
测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落. . .</a>
</p>
</div>
</li>
</ul>
</div>
</body>