CSS学习2

自己在工作中总是有一些自动化开发的需求，总是以为自己是有前端基础的，但是一写页面，布局都布不好，真是搞笑，说起来还是基本功不扎实啊，这里在重新复习一下，然后记录一下文档。后边在写两个综合练习

一、伪类选择器

1.a标签的伪类

<html><head><style>/* 去除a标签文字的下划线 */a {text-decoration: none;}/* a标签没有点击时的默认样式 */a:link {color: black;}/* a标签点击后的样式 */a:visited {color: red;}/* a标签鼠标悬浮或者划过时的样式 */a:hover {color: blue;}/* a标签在鼠标点击时候的样式 */a:active {color: pink;}</style></head><body><a href="https://www.baidu.com">百度</a><br><a href="https://www.jd.com">京东</a></body>
</html>

1.1 伪类的顺序

a标签的书写顺序必须按照link、visted、hover、active的顺序书写，否则有些效果就会不生效。按照首字母顺序可以记忆为lvha

1.2 适用范围

link visted是a标签专属的伪类。只能适用于a标签。而hover、active不仅适用于a标签，还适用于其它元素。
举例：

<html><head><style>.box > div {width: 100px;height: 100px;background-color: red;}.box > div:hover {background-color: black;}.box > div:active {background-color: blue;}</style></head><body><div class="box"><div>1</div><div>2</div></div></body>
</html>

2.结构伪类

这个伪类结构呢，可以理解为 “正则匹配”。
匹配成功就选中该元素，并执行对应的样式
匹配失败，就什么也不会执行

2.1.first-child

注意：这里一定要理解first-child的含义：
first: 第一个元素
child:范围是 在父标签的子元素中寻找
整体含义就是 匹配子元素中的 “第一个元素” 是不是p

2.1.1 针对所有范围
p:first-child #表示 匹配所有子元素中第一个元素是不是p标签错误理解：匹配所有子元素中的第一个p标签

实例：

<html><head><style>p:first-child{color: red;}</style></head><body><!-- 这是body标签子元素中的第一个元素，并且是p标签。所以匹配成功 --><p>body1</p><h1>h1</h1><p>p1</p><div><!-- 这是div子元素中的第一个元素，也是p标签，匹配成功 --><p>d1</p><p>d2</p><p>d3</p><p>d4</p><p>d5</p><p>d6</p></div><div><!-- 这是div的第一个元素，但不是p --><span>11</span><p>22</p></div><div><div><!-- 这是div子元素中的第一个元素，也是p标签，匹配成功 --><p>111</p><p>222</p></div></div></body>
</html>
2.1.2 限定范围
<html><head><style>/* 在class选择器为box的子代元素中 匹配第一个元素是不是p标签 */.box > p:first-child{color: red;}</style></head><body> <p>body1</p><h1>h1</h1><p>p1</p><!-- 设置class选择器 --><div class="box"><p>d1</p><p>d2</p><p>d3</p><p>d4</p><p>d5</p><p>d6</p></div><div><span>11</span><p>22</p></div><div><div><p>111</p><p>222</p></div></div></body>
</html>

2.2 last-child

匹配子元素中的最后一个元素是不是某个标签

<html><head><style>/* 匹配所有子元素中的最后一个元素是不是p标签 */p:last-child{color: red;}</style></head><body> <div class="box"><p>d1</p><p>d2</p><p>d3</p><p>d4</p><p>d5</p><p>d6</p></div></body>
</html>

2.3 nth-child

匹配指定的元素是不是某个标签

<html><head><style>/* 匹配第三个元素是不是p标签 */p:nth-child(3){color: red;}</style></head><body> <div class="box"><p>d1</p><p>d2</p><p>d3</p><p>d4</p><p>d5</p><p>d6</p></div></body>
</html>

验证: 这里看到d2的字体变成了红色，这里再次验证了，这是匹配的第n个元素，而不是第n个p元素

<html><head><style><!-- 在这里加上一个span标签 -->p:nth-child(3){color: red;}</style></head><body> <div class="box"><span>span1</span><p>d1</p><p>d2</p><p>d3</p><p>d4</p><p>d5</p><p>d6</p></div></body>
</html>

2.4 nth-child(-n+数字)

匹配子元素中的前n个元素

3.结构伪类2

:first-of-type表示选择"相同类型元素"的第一个
:last-of-type 表示选择"相同类型元素"的最后一个
:nth-of-type(n)表示选择"相同类型元素"的第n个

3.1 first-of-type

<html><head><style>/* 匹配第三个元素是不是p标签 */p:first-of-type {color: red;}</style></head><body> <div class="box"><!-- 在这里加上一个span标签 --><span>span1</span><span>span2</span><p>d1</p><span>span3</span><p>d2</p><span>span3</span><p>d3</p></div></body>
</html>

3.2 last-of-type

<html><head><style>/* 匹配最后一个span元素 */span:last-of-type {color: red;}</style></head><body> <div class="box"><span>span1</span><span>span2</span><p>d1</p><span>span3</span><p>d2</p><!-- 此行变成了红色 --><span>span4</span><p>d3</p></div></body>
</html>

3.3 nth-of-type(n)

<html><head><style>/* 匹配最后三个span元素 */span:nth-of-type(3) {color: red;}</style></head><body> <div class="box"><span>span1</span><span>span2</span><p>d1</p><!-- 此行变成了红色 --><span>span3</span><p>d2</p><span>span4</span><p>d3</p></div></body>
</html>

4.伪元素选择器

伪元素在前端展示出来后是不能选中的。
::before和::after 必须要结合content属性结合使用

<html><head><style>/* 在所有p标签内容的前边加上￥符号 */p::before{content: "￥";}/* 在所有p标签内容的后边加上".00"字符串 */p::after{content: ".00";}</style></head><body> <p>100</p><p>200</p><p>300</p></body>
</html>

二、隐藏元素的方式

1.display

display:none参数可以设置元素隐藏。不但隐藏元素，也不占用任何位置，没有大小宽高

<html><head><style>.box1 {width: 100px;height: 100px;background-color: yellow;display: none;}.box2 {width: 100px;height: 100px;background-color: red;}</style></head><body> <div class="box1">1</div><div class="box2">2</div></body>
</html>

2.visibility

visibility 默认值是show,如果设置为hidden,会隐藏元素。虽然元素看不见了，但是还会占有原来的位置

<html><head><style>.box1 {width: 100px;height: 100px;background-color: yellow;visibility: hidden;}.box2 {width: 100px;height: 100px;background-color: red;}</style></head><body> <div class="box1">1</div><div class="box2">2</div></body>
</html>

三、布局技巧-垂直居中

1.文本居中

前边已经学过了，这里在复习一下。文本居中主要最常用的属性是

# 文本水平居中
text-align: center;# 文本垂直居中
line-height: 200px;

2.图片居中

2.1 方式1: 背景形式

以背景图片的方式调整图片的位置
居中显示：

<html><head><style>* {margin: 0px;padding: 0px;}.outer {width: 500px;height: 500px;background-color: gray;background-image: url("./image/1.jpg");background-size: 300px 200px;background-repeat: no-repeat;background-position: center;}</style></head><body> <div class="outer"></div></body>
</html>

当然还可以通过以下两个参数的值来调整图片的位置。当然使用这两个值的时候就不要使用 background-position: center参数了

background-position-x
background-position-y

2.2 方式2：行内元素形式

<html><head><style>* {margin: 0px;padding: 0px;}.outer {width: 500px;height: 500px;background-color: gray;/* 设置水平居中 */text-align: center;/* 设置垂直居中，但是不是真正意义上的垂直居中 */line-height: 500px;font-size: 0px;}img {width: 200px;height: 100px;/* 设置图片以父标签的中线对齐，这才是真正的中线对齐，这个和line-height配合使用 */vertical-align: middle;}</style></head><body> <div class="outer"><!-- 这里的文字不显示，被font-size：0px隐藏了，但是这段文件必须存在，否则图片无法居中 --><span>xxxx</span><img src="./image/1.jpg" alt=""></div></body>
</html>

3.文字图片混合居中

<html><head><style>* {margin: 0px;padding: 0px;}.outer {width: 300px;height: 300px;background-color: gray;text-align: center;line-height: 300px;/* 这里之所以这样设置，然后在单独设置span中的字体大小，是因为让图片的位置不因为字体的大小变化而影响图片的位置 */font-size: 0px;}img {width: 50px;height: 50px;vertical-align: middle;box-sizing: 5px;border-radius: 50%;position: relative;left: 20px;}span {font-size: 20px;vertical-align: middle;}</style></head><body> <div class="outer"><span>机器猫:</span><img src="./image/cat.jpg"  ></div></body>
</html>

四、浮动

1.简介

最早先浮动是为了 文字环绕图片而设计的，现在还多用于布局。

2.文本浮动后的特点

1.脱离文档流，会漂浮起来，不会在独占一行，会和其他元素共用一行。
2.不管元素浮动前是什么元素，浮动后，默认宽高都是由内容撑开的（最小原则）而且可以设置宽高
3.漂浮的元素不会margin合并，也不会margin塌陷，能够完美的设置四个方向margin和padding
4.不会像行内块元素那样当作文本处理（没有行内块的空白问题）
5，如果浮动元素的下一个元素中有文字，那么浮动元素不会盖住文字

实例：

<html>
<head><style>.outer {width: 500px;height: 600px;background-color: gray;           }.box {height: 100px;}.box1 {background-color: blue;}.box2 {background-color: red; float: left;}.box3 {background-color: pink;height: 200px;}</style>
</head>
<body><div class="outer"><div class="box box1">盒子1</div><div class="box box2">盒子2</div><div class="box box3">盒子3</div></div></body>
</html>

来张示意图：

在这里插入图片描述

3.解决浮动的影响

最主要的影响是就是元素浮动之后，后边的块元素会顶替原来元素的位置。解决办法就是，在受影响的元素上使用

clear: both

例子：

<html>
<head><style>.outer {width: 500px;height: 600px;background-color: gray;           }.box {height: 100px;}.box1 {background-color: blue;}.box2 {background-color: red; float: left;}.box3 {background-color: pink;/* 清除.box2浮动给box3带来的影响 */clear: both;}</style>
</head>
<body><div class="outer"><div class="box box1">盒子1</div><div class="box box2">盒子2</div><div class="box box3">盒子3</div></div></body>
</html>

4.浮动的使用原则

在一个父元素中有多个子元素，如果要使用浮动的话，尽量要么全浮动，要么全不浮动

5.优雅写法

使用clear:both属性的时候，需要找到浮动元素的下一个元素，也就是受影响的元素，加上这个属性。
如果我们不想编辑受影响的元素，并且子元素全部是浮动属性的话，可以使用以下写法

<html>
<head><style>.outer {width: 500px;background-color: gray;     }/* 在所有子元素的最后一行加上一个隐藏的块元素，来清除浮动 *//* 但是这种写法必须是子元素全部浮动的场景，如果最后一个元素没有浮动，这种写法无效 */.outer::after {content: "";display: block;clear: both;}.box {height: 100px;width: 100px;float: left;}.box1 {background-color: blue;}.box2 {background-color: red; }.box3 {background-color: pink;}.center {width: 800px;height: 300px;background-color: green;}</style>
</head>
<body><div class="outer"><div class="box box1">盒子1</div><div class="box box2">盒子2</div><div class="box box3">盒子3</div></div><div class="center">中间</div></body>
</html>

5.浮动综合练习

示意图如下：

在这里插入图片描述

5.1 html代码

<html>
<head><link rel="stylesheet" href="./css/index.css">
</head><body><div class="container"><!-- 头部 --><div class="header clearfix"><div class="logo leftfix">logo</div><div class="banner1 leftfix">banner1</div><div class="banner2 leftfix">banner2</div></div><!-- 菜单 --><div class="menu">菜单</div><!-- 内容部分 --><div class="content clearfix"><!-- 左半部分 --><div class="left leftfix"><!-- 第一行 --><div class="oneline clearfix"><div class="item1 leftfix">栏目1</div><div class="item2 leftfix">栏目2</div></div><!-- 第二行4个小布局 --><div class="twoline"><div class="item3 leftfix">栏目3</div><div class="item4 leftfix">栏目4</div><div class="item5 leftfix">栏目5</div><div class="item6 leftfix">栏目6</div></div></div><!-- 右半部分 --><div class="right leftfix"><div class="item7">栏目7</div><div class="item8">栏目8</div><div class="item9">栏目9</div></div></div><!-- 底部 --><div class="footer">页脚</div></div></body>
</html>

5.2 CSS代码

* {padding: 0;margin: 0;
}
/* 设置浮动和清除浮动属性，减少重复CSS代码 */
.leftfix {float: left;
}
.clearfix::after {content: "";display: block;clear: both;
}/* 全局样式 */
.container {width: 960px;margin: 0 auto;
}/* header中的样式 */
.logo,.banner1,.banner2 {height: 80px;line-height: 80px;background-color: #ccc;text-align: center;
}.logo {width: 200px;
}
.banner1 {width: 540px;margin: 0 10px;
}
.banner2 {width: 200px;
}/* 菜单样式 */
.menu {height: 30px;background-color: #ccc;margin-top: 10px;line-height: 30px;text-align: center;
}/* 内容部分样式 */
.content {margin-top: 10px;
}
.item1,.item2 {height: 198px;width: 368px;line-height: 200px;text-align: center;margin-right: 10px;border: 1px solid black;
}
.twoline {margin-top: 10px;
}
.twoline > div {width: 178px;height: 198px;margin-right: 10px;line-height: 200px;text-align: center;border: 1px solid black;
}.right > div {height: 128px;width: 198px;line-height: 130px;text-align: center;border: 1px solid black;
}
.item8 {margin: 10px 0;
}.footer {width: 960px;height: 60px;margin-top: 10px;background-color: #eee;line-height: 60px;text-align: center;
}

小总结：

这里很多父元素并没有设置高度，是靠子元素内容撑起来的。这样会方便一些，如果高度固定，可能在子元素尺寸发生变化的时候，影响比较大

五、定位

1.相对定位

 position: relative;top:left:right:bottom:

特点：
1.元素会相对于自己原理的元素进行移动
2.相对定位不会脱离文档流，不会影响其它的文档的位置
3.定位的元素，层级会比其它元素高。但是层级高不是浮动。
4.应用场景：适合给元素微调，因为它不会影响其它元素的位置

2.绝对定位

position: absolute;
top:
left:
right:
bottom:

特点：
1.绝对定位会脱离文档流，和浮动一样，直接漂浮起来。后边的元素就会顶替它的位置。但是不一样的是，绝对定位不会像浮动那样，产生文字环绕效果。
2.如果绝对定位元素的父元素"没有定位"，它的参考对象就是浏览器左上角。
如果绝对定位元素的父元素"有定位",它的参考对象就是父元素的左上角。

3.相对和绝对配合使用

一般他们两个配置使用：叫做"子绝父相"，也就是父元素开启相对定义，子元素开启绝对定位。这样子元素的定位就是父元素了。

4.固定定位

特点：

1.固定定位也会脱离文档流
2.固定定位的参考点永远是"视口"

实例：

这个盒子就一直固定在视口的左上角
.box {width: 100px;height: 100px;background-color: pink;position: fixed;top: 0;left: 0;
}

5.定位块元素居中

方案1：通过计算

通过计算让块元素居中

<html>
<head><style>.outer {width: 500px;height: 500px;background-color: pink;position: relative;}.inner {width: 200px;height: 200px;background-color: gray;position: absolute;top: 150;left: 150;}</style>
</head>
<body><div class="outer"><div class="inner"></div></div>
</body>
</html>

方案2: 不用通过计算

这种方案的好处就是：无论父元素怎么变化，块元素都是居中。

<html>
<head><style>.outer {width: 700px;height: 800px;background-color: pink;position: relative;}.inner {width: 200px;height: 200px;background-color: gray;position: absolute;/* 这五个参数，在设置居中的时候缺一不可 */top: 0;bottom: 0;left: 0;right: 0;margin: auto;}</style>
</head>
<body><div class="outer"><div class="inner"></div></div>
</body>
</html>

6.子充满父元素

当一个父元素的宽高无法确定时，或者二者有一个无法确定
并且子元素不设置宽高的情况，使子元素如果充满父元素。可以使用以下方案

<html>
<head><style>.outer {height: 500px;background-color: pink;position: relative;}.inner {background-color: gray;position: absolute;/* 全部铺满父元素 */top: 0;bottom: 0;left: 0;right: 0;}</style>
</head>
<body><div class="outer"><div class="inner">内部块</div></div>
</body>
</html>

六、布局注意事项

版心

在PC端网页中，一般都会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这就是版心
版心的宽度一般在960-1200之间
版心是一个，也可以是多个。推荐使用多个版心，这样调整东西都比较方便
设置版心的最终目的就是为了尽可能的满足小的屏幕查看网站不出现横向滚动条

七、less

1.简介

less是一门CSS的预处理语言，它扩展了CSS语言，增加了变量、Mixin、函数等特性，使CSS更容易维护和扩展。less既可以运行在浏览器端，也可以运行在server端(nodejs)端

1.1 安装

在vscode中安装easy less插件
新建index.less文件，保存，自动会生成index.css文件

新建index.less文件，保存，自动会生成index.css文件

1.2.引入

引入的时候不需要引入less文件，还是引入css文件，编写代码是在less文件中

2.语法

2.1 变量

设置变量语法：

@变量名:值

实例：

@color:red;.outer{width: 100px;height: 100px;background-color: @color;
}

2.2 less嵌套

在写CSS文件的时候，所有的CSS属性都是由上到下一次编写，没有层级关系。逻辑性很差，一旦内容很多之，不好找到对应的CSS属性。less就很好的解决了这个问题。
实例

.outer{width: 100px;height: 100px;background-color: green;.header {width: 50px;height: 50px;background-color: #fff;.itme {display: inline-block;}}
}

保存之后css文件的效果

.outer {width: 100px;height: 100px;background-color: green;
}
.outer .header {width: 50px;height: 50px;background-color: #fff;
}
.outer .header .itme {display: inline-block;
}

less的语法还是比价多的，这里不做详细介绍。主要是为了用到它的嵌套功能，逻辑性比较强。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/535469.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

判断出栈顺序是否合法

判断出栈顺序是否合法

给你一个入栈顺序&#xff0c;判断出栈顺序是否合法 入栈的顺序&#xff08;1&#xff0c;2&#xff0c;3&#xff0c;4&#xff0c;5&#xff09;出栈&#xff08;4&#xff0c;5&#xff0c;3&#xff0c;2&#xff0c;1&#xff09;是合法序列 入栈的顺序&#xff08;1&…
阅读更多...
给你的 SpringBoot 工程部署的 jar 包瘦瘦身吧！

给你的 SpringBoot 工程部署的 jar 包瘦瘦身吧！

一、背景 SpringBoot 为我们快速开发提供了很好的架子&#xff0c;使得我们只需要少量配置就能开始我们的开发工作&#xff0c;但是当我们需要打包上传部署时&#xff0c;却是很神伤的一个问题&#xff0c;因为打出来的 Jar 包少则十几兆&#xff0c;多则一百来兆&#xff0c;…
阅读更多...
缓存的使用

缓存的使用

文章目录 1.为什么要有缓存&#xff1f;2.缓存使用场景3.缓存分类4.缓存使用模式5.淘汰策略6.缓存的崩溃与修复7.缓存最佳实践参考文献 1.为什么要有缓存&#xff1f; 数据访问具有局部性&#xff0c;符合二八定律&#xff1a;80% 的数据访问集中在 20% 的数据上&#xff0c;这…
阅读更多...
自主通用多物理场仿真PaaS平台伏图（Simdroid）及伏图电子散热模块上架华为云商店

自主通用多物理场仿真PaaS平台伏图（Simdroid）及伏图电子散热模块上架华为云商店

随着云计算、大数据等前沿技术的蓬勃发展&#xff0c;国内制造业正面临智能制造转型升级的机遇与挑战。工业软件是制造业研发创新不可或缺的核心工具&#xff0c;《“十四五”智能制造发展规划》中明确了工业软件对于智能制造的核心支撑作用&#xff0c;着重提出加强关键核心技…
阅读更多...
机器视觉检测设备的组成要素

机器视觉检测设备的组成要素

机器视觉检测设备是一种先进的自动化检测技术工具&#xff0c;它利用光学、图像处理和计算机硬件及软件技术模拟并扩展人类的视觉功能&#xff0c;以实现对产品或目标物体进行自动化的尺寸测量、缺陷检测、表面质量评估、颜色识别、形状匹配以及位置判断等功能。这种设备通常包…
阅读更多...
《ElementPlus 与 ElementUI 差异集合》el-button 属性 type=“text“ 被删除

《ElementPlus 与 ElementUI 差异集合》el-button 属性 type=“text“ 被删除

差异 element-ui el-button中&#xff0c;属性 type"text" 定义文字按钮&#xff0c;也是链接按钮&#xff1b;element-plus el-button中&#xff0c;改为新增属性 link 并与其它 type 值配合使用&#xff1b; // element-ui <el-button type"text"&g…
阅读更多...
图【数据结构】

图【数据结构】

文章目录 图的基本概念邻接矩阵邻接表图的遍历BFSDFS 图的基本概念 图是由顶点集合及顶点间的关系组成的一种数据结构 顶点和边&#xff1a;图中结点称为顶点 权值:边附带的数据信息 路径 &#xff1a; 简单路径 和 回路&#xff1a; 子图&#xff1a;设图G {V, E}和图G1…
阅读更多...
【C#语言入门】17. 事件详解（上）

【C#语言入门】17. 事件详解（上）

【C#语言入门】17. 事件详解&#xff08;上&#xff09; 一、初步了解事件 定义&#xff1a;单词Event&#xff0c;译为“事件” 通顺的解释就是**“能够发生的什么事情”**&#xff0c;例如&#xff0c;“苹果”不能发生&#xff0c;但是“公司上市”这件事能发生。在C#中事…
阅读更多...
strcat函数

strcat函数

函数理解记忆&#xff1a;str表示是<string.g>中的函数&#xff0c;cat表示附加。意思是将一个字符串的内容附加到另一个字符串的末尾。 注意要点&#xff1a;既然要附加&#xff0c;附加的字符串和被附加的字符串都要有\0。否则不知道附加多少&#xff0c;不知附加在哪…
阅读更多...
深信服技术认证“SCCA-C”划重点：深信服应用交付AD

深信服技术认证“SCCA-C”划重点：深信服应用交付AD

为帮助大家更加系统化地学习云计算知识&#xff0c;高效通过云计算工程师认证&#xff0c;深信服特推出“SCCA-C认证备考秘笈”&#xff0c;共十期内容。“考试重点”内容框架&#xff0c;帮助大家快速get重点知识 划重点来啦 *点击图片放大展示 深信服云计算认证&#xff08;S…
阅读更多...
基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的交通信号灯识别系统（深度学习+UI界面+训练数据集+Python代码）

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的交通信号灯识别系统（深度学习+UI界面+训练数据集+Python代码）

摘要&#xff1a;本研究详细介绍了一种采用深度学习技术的交通信号灯识别系统&#xff0c;该系统集成了最新的YOLOv8算法&#xff0c;并与YOLOv7、YOLOv6、YOLOv5等早期算法进行了性能评估对比。该系统能够在各种媒介——包括图像、视频文件、实时视频流及批量文件中——准确地…
阅读更多...
2023 年安徽省职业院校技能大赛(高职组)

2023 年安徽省职业院校技能大赛(高职组)

#需要资源或有问题的&#xff0c;可私博主&#xff01;&#xff01;&#xff01; #需要资源或有问题的&#xff0c;可私博主&#xff01;&#xff01;&#xff01; #需要资源或有问题的&#xff0c;可私博主&#xff01;&#xff01;&#xff01; 某企业根据自身业务需求&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023