CSS进阶知识点速览2

1 前情回顾

关于选择器进阶、背景色、元素显示模式和css特性的前半部分集中在下面的笔记中：
css进阶知识点速览

2 CSS特性

2.1 优先级

特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
优先级公式：
继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
注意点：
1 !important写在属性值后面，分号前面
2 !important不能提升继承的优先级，继承的优先级最低
3 实际开放中不建议使用!important

2.2 权重叠加计算

场景：如果是符合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器
权重叠加计算公式：
复合选择器中：
从左到右分别是第一级，第二级，第三级，第四级
(行内样式个数，id选择器个数，类选择器个数，标签选择器个数)
分别比较数量，先比较第一级数量再比之后的，第一集数量能比出结果，后面不需要再比。
这些选择器的关系是相对于要装饰内容而言的。

/*(0,1,0,1)*/
/*#one id选择器*/
div #one{
color: orange;
}
/*(0,1,2,0)*/
.father .son{
color: skyblue;
}
/*(0,0,1,1)*/
.father p{
color: purple
}
/*(0,0,0,2)*/
div p{
color: pink
}

div div{
color: skyblue;
}
div{
color: red;
}

<div>
	<div>
		<div>
		文本
		</div>
	</div>
</div>

上面两个css选中文本，但并不是继承。最终因为div div{color: skyblue;}标签选择器数目多，因此文本为skyblue色。

2.3 谷歌浏览器调试

对出错部分右键-检查-查看

.father .son .sun {
color: skyblue;
}
/*多个类选择器中间以空格隔开也表示交集选择器*/

3 PxCook

3.1下载与安装

官网下载链接
下载后一直下一步就可完成安装。

3.2 基本使用

1将图片拖入后双击
2对于png图使用设计模式，对于psd的分层图用开发模式
3设计模式主要工具
在这里插入图片描述
最上面的是尺子，用来量长度；最下面的是吸管，用来获取颜色。
在这里插入图片描述
抓手工具，如果图片放的过大，需要移动到某一区域，就用抓手。

4开发模式
点击选中可知一切信息

4盒子模型

4.1 盒子模型的介绍

1盒子的概念
（1）页面中的每一个标签，都可以看做是一个“盒子”，通过盒子的视角更方便地进行布局；
（2）浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子
2盒子模型
css中规定每个盒子分别由：内容区域、内边距区域、边框区域、外边距区域构成，这就是盒子模型。
最简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: pink;
            /*边框线*/
            border: 1px solid black;
            /*内边距，出现在内容和盒子之间*/
            padding: 20px;
            /*外边距，两个盒子之间*/
            margin: 50px;
        }
    </style>
</head>
<body>
    <div>content</div>
    <div>content2</div>
</body>
</html>

在这里插入图片描述
在浏览器里点击检查/F12，可以查看到下图，方便调试。
在这里插入图片描述

4.2 内容区域

作用：利用width和height属性默认设置是盒子内容区域的大小
属性：width/height
常见取值：数字+px

4.3 边框

属性名：border
复合属性，取值之间用空格隔开
boder: 10px solid red;
10px是指粗细；red是指线条的颜色，solid是指线条的种类（直线虚线等），这些参数没有顺序之分。
solid:实线线段；
dashed:虚线线段；
dotted:点线。
单方向设置：
场景：只给盒子的某个方向单独设置边框
属性名：border-方位名词，比如border-left
属性值：连写的取值
单个属性
作用：给设置边框粗细、边框样式、边框颜色效果
单个属性：

作用属性值
边框粗细border-width数字+px
边框样式border-style实线solid、虚线dashed、点线dotted
边框颜色border-color颜色取值

4.4 盒子实际大小初级计算公式

只考虑内容和边框线
需求：盒子尺寸400400，背景绿色，边框10px，实线，黑色
盒子尺寸：width/height + 边框线粗细2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            height: 40px;
            border-top: 3px #ff8500 solid;
            border-bottom: 1px #edeef0 solid;
        }
        .box a{
            width: 80px;
            height: 40px;
            display: inline-block;
            text-align: center;
            line-height: 40px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
        }
        .box a:hover{
            background-color: #edeef0;
            color: #ff8500;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="">新浪导航</a>
        <a href="">新浪导航</a>
        <a href="">新浪导航</a>
        <a href="">新浪导航</a>
    </div>
</body>
</html>

在这里插入图片描述

4.5内边距padding

padding 50px;
上面代码添加了4个方向的内边距。
padding 10px 80px;
两值的话：第一个表上下，第二个表左右。

4.6 盒子实际大小的终极计算公式

盒子尺寸：width/height + 边框线粗细2+内边距2
给盒子设置border或padding，盒子会被撑大，如果不想盒子被撑大，该怎么处理？
操作：给盒子设置属性box-sizing:border-box;
优点：浏览器会自动计算多余大小，自动在内容中减去

4.7 外边距

margin: 50px;

4.7.1 清除默认内外边距

比如p、h系列、ul标签都要默认内外边距

*{
margin:0;
padding: 0;
}

4.7.2 版心居中

想让盒子居于网页中间

margin: 0 auto;

4.7.3 外边距折叠现象

合并现象
场景：垂直布局的块级元素，上下的margin会合并
结果：最终两者距离为margin的最大值
解决方法：只给其中一个盒子设置margin即可

塌陷现象
场景：相互嵌套的块级元素，子元素的margin-top会作用在父元素上
结果：导致父元素一起向下移动
解决办法：
1不在子元素用margin，只给父元素设置border-top或者padding-top
2子元素设置margin，再给父元素设置overflow: hidden
3转成行内块元素：子元素里：display: inline-block;
4设置浮动

5 浮动

5.1 结构伪类选择器

目标：能够使用结构伪类选择器在HTML中定位元素
1作用与优势：
(1)作用：根据元素在html中的结构关系查找元素
(2)优势：减少对html中类的依赖，有利于保持代码整洁
(3)场景：常用于查找某父级选择器中的子集
2选择器

选择器说明
E:first-child{}匹配父元素中第一个子元素，并且是E元素
E:last-child{}匹配父元素中最后一个子元素，并且是E元素
E:nth-child(n){}匹配父元素中第n个子元素，并且是E元素
E:nth-last-child(n){}匹配父元素中最后n个子元素，并且是E元素

案例1：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li:first-child{
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <ul>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>

    </ul>
</body>

在这里插入图片描述
结构伪类选择器中n的注意点：
1n为0,1,2,3,4,5,6,…
2通过n可以组成常见公式

功能公式
偶数2n, even
奇数2n+1,2n-1,odd
找到前5个-n+5
找到从第5个往后n+5

5.2伪元素

伪元素：一般页面中的非主体内容可以使用伪元素
区别：
(1)元素：html设置的标签
(2)伪元素：由css模拟出的标签效果
种类

伪元素作用
::before在父元素内容的最前添加一个伪元素
::after在父元素内容的最后添加一个伪元素

注意点：
(1)必须设置content属性才能生效
(2)伪元素默认是行内元素

    <style>
        .father{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }
        .father::before{
            content: 'note';
        }
        .father::after{
            content: 'world';
        }
    </style>
</head>
<body>
    <div class="father">hello</div>
</body>

在这里插入图片描述

5.3标准流

标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以合资方式排列元素。
常见的标准流排版规则：
1块级元素：从上到下，垂直布局，独占一行
2行内元素或行内块元素：从左到右，水平布局，空间不够自动拆行

5.4 浮动

注意：浏览器解析行内块或者是行内标签的时候，如果标签换行书写会产生一个空格的距离

5.4.1浮动的作用

早期的作用：图文环绕
img{float:left;}
现在的作用：网页布局
让块在一行无间隙排列

.one{
background-color: pink;
float: left;
}
.two{
background-color: green;
float: left;
}

两个块靠左紧贴一起。

5.4.2特点

1浮点元素会脱离标准流，在标准流中不占位置
相当于从地面飘到了空中
2浮动元素比标准流高半个级别，可以覆盖标准流中的元素
3浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
4浮动元素有特殊的显示效果“
一行可以显示多个
可以设置宽高

类似下图的设计需要注意：橙色和蓝色居中且位于一行，我们知道浮动元素的不能利用margin居中的，因此橙色和蓝色盒子外必然还有第三个盒子，该盒子的标签相对于橙色和蓝色的标签是父关系，它被设置了居中。
在这里插入图片描述

5.4.3css书写顺序

1浮动/display
2盒子模型：margin border padding
3文字样式
案例2：
目标样式：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 1226px;
            height: 614px;
            margin: 0 auto;
        }
        .father .son1{
            float: left;
            width: 234px;
            height: 614px;
            background-color: #800080;
        }
        .father .son2{
            float: left;
            width: 978px;
            height: 614px;
            background-color: green;
            margin-left: 14px;
        }
        .father .son2 .grandson{
            float: left;
            margin-bottom: 14px;
            margin-right: 14px;
            width: 234px;
            height: 300px;
            background-color: #87ceeb


        }
        .father .son2 .grandson.grandson:nth-child(4n){
            margin-right: 0;
        }
        .father .son2 .grandson.grandson:nth-child(n+5){
            margin-bottom: 0;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2">
            <div class="grandson"></div>
            <div class="grandson"></div>
            <div class="grandson"></div>
            <div class="grandson"></div>
            <div class="grandson"></div>
            <div class="grandson"></div>
            <div class="grandson"></div>
            <div class="grandson"></div>
        </div>
    </div>
</body>
</html>

案例3：
目标样式：
在这里插入图片描述
技巧:网页导航的设计时，请用li标签嵌套a标签。
然而用li标签的话容易出现下面的效果：
在这里插入图片描述
对此，我们可以通过list-style: none;消除。
全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .nav{
            margin: 0 auto;
            width: 640px;
            height: 50px;
            background-color: #ffc0cb;
        }
        .nav ul{
            list-style: none;
        }
        .nav .navson{
            float: left;
        }
        .nav .navson a{
            display: inline-block;
            width: 80px;
            height: 50px;
            color: white;
            font-size: 16px;
            line-height: 50px;
            text-align: center;
            text-decoration: none;
        }
        .nav .navson:hover{
            background-color: #008000;
        }


    </style>
</head>
<body>
    <div class="nav">
        <ul>
        <li class="navson"><a href="#">新闻</a></li>
        <li class="navson"><a href="#">新闻</a></li>
        <li class="navson"><a href="#">新闻</a></li>
        <li class="navson"><a href="#">新闻</a></li>
        <li class="navson"><a href="#">新闻</a></li>
        <li class="navson"><a href="#">新闻</a></li>
        <li class="navson"><a href="#">新闻</a></li>
        <li class="navson"><a href="#">新闻</a></li>
        </ul>
    </div>
</body>
</html>

5.5清除浮动

含义：清除浮动带来的影响
影响：如果子元素浮动了，此时子元素不能撑开标准流的块级元素
原因：
子元素浮动后脱标——>不占位置
目的：
需要父元素有高度，从而不影响其他网页元素的布局
比如：
父子级标签，子级浮动，父级没有高度，后面的标准呢盒子会受影响
常见于父级是纯文字，高度不定，不好设置

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【面试HOT200】二叉树的构建二叉搜索树篇

【面试HOT200】二叉树的构建二叉搜索树篇

系列综述&#xff1a; &#x1f49e;目的&#xff1a;本系列是个人整理为了秋招面试的&#xff0c;整理期间苛求每个知识点&#xff0c;平衡理解简易度与深入程度。 &#x1f970;来源&#xff1a;材料主要源于【CodeTopHot200】进行的&#xff0c;每个知识点的修正和深入主要参…
阅读更多...
vr工业制造流程3D模拟仿真可视化展示

vr工业制造流程3D模拟仿真可视化展示

工业仿真3D数字化展示系统具有多方面的独特之处&#xff0c;主要体现在以下几个方面&#xff1a; 1、真实感和交互性&#xff1a;该系统可以将实际的工业设备、产品、场景等进行数字化建模&#xff0c;通过三维图形技术将其呈现在计算机屏幕上&#xff0c;使用户可以在虚拟环境…
阅读更多...
ospf选路

ospf选路

问题描述 R6通过主备份路径访问LSP&#xff08;R1&#xff09;&#xff0c;主为R2&#xff0c; 备为R3 解决方案 路由器1看作LSP&#xff0c;配置loopback 0 ,地址为1.1.1.1 供测试使用&#xff1b;路由器 236, LSW4和LSW5&#xff0c; 运行ospf处于相同区域&#xff0c;建立…
阅读更多...
【荣誉】科东软件荣获广州市软件行业协会双料大奖！

【荣誉】科东软件荣获广州市软件行业协会双料大奖！

软件产业在数字经济中扮演着基础支撑的角色&#xff0c;对于优化产业结构、提高自主可控、赋能整体经济高质量发展具有关键作用。 近日&#xff0c;广州市软件行业第七届会员大会第三次会议成功召开&#xff01;此次会议旨在回顾过去一年的行业发展&#xff0c;展望未来的趋势和…
阅读更多...
HarmonyOS应用开发——页面

HarmonyOS应用开发——页面

我们将对于多页面以及更多有趣的功能展开叙述&#xff0c;这次我们对于 HarmonyOS 的很多有趣常用组件并引出一些其他概念以及解决方案、页面跳转传值、生命周期、启动模式&#xff08;UiAbility&#xff09;&#xff0c;样式的书写、状态管理以及动画等方面进行探讨 页面之间…
阅读更多...
C++基础 -45- 类的静态数据成员

C++基础 -45- 类的静态数据成员

类的静态成员不包含在对象空间内 举例验证 定义普通变量和静态的变量 输出可知静态成员并没有占用类空间 静态数据成员的赋值&#xff08;必须类外赋值&#xff09; int base:: b 100;静态数据成员的访问&#xff08;不需要先定义对象&#xff09; int main() {cout <…
阅读更多...
最新关于openai.APIConnectionError: Connection error.的解决方法

最新关于openai.APIConnectionError: Connection error.的解决方法

其实是和以前一样的处理方式&#xff0c;&#xff08;挂魔法&#xff09;修改代理&#xff0c;但是openai的源码改了&#xff0c;好多博客的方法不能用了。现在给一个新的修改方式&#xff0c;自己用的&#xff0c;发现可以。 1.找到pip下载的openai的Lib&#xff0c;找到_base…
阅读更多...
揭秘AI魔法绘画：Stable Diffusion引领无限创意新纪元

揭秘AI魔法绘画：Stable Diffusion引领无限创意新纪元

文章目录 1. 无限的创意空间2. 高效的创作过程3. 个性化的艺术表达4. 跨界合作的可能性5. 艺术教育的革新6. 艺术市场的拓展 《AI魔法绘画&#xff1a;用Stable Diffusion挑战无限可能》编辑推荐内容简介作者简介精彩书评目录前言/序言本书读者对象学习建议获取方式 随着科技的…
阅读更多...
SpringCloud微服务 【实用篇】| http客户端Feign

SpringCloud微服务 【实用篇】| http客户端Feign

目录 一&#xff1a;http客户端Feign 1. Feign替代RestTemplate 2. 自定义配置 3. Feign性能优化 4. 最佳实践 前言 前些天突然发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家&#xff0c;感兴趣的同学可以…
阅读更多...
开启三层交换机DHCP服务

开启三层交换机DHCP服务

二层交换机上不需要配置任何东西&#xff0c;只需要在pc机上开启dhcp服务&#xff0c;配置好LSW1后就可以自动获取到IP地址。 sys Enter system view, return user view with CtrlZ. [Huawei]sys sw1 [sw1]dhcp enable Info: The operation may take a few seconds. Please wai…
阅读更多...
MES管理系统在生产计划排程中的应用与价值

MES管理系统在生产计划排程中的应用与价值

随着制造业市场竞争的日益激烈和客户需求的多样化&#xff0c;传统的生产计划排程方式已经无法满足企业的需求。为了提升生产计划的效率和准确性&#xff0c;越来越多的企业开始引入MES管理系统这一先进的工具。那么&#xff0c;MES管理系统到底是什么&#xff0c;又是如何解决…
阅读更多...
基于c++版本的数据结构改-python栈和队列思维总结

基于c++版本的数据结构改-python栈和队列思维总结

##栈部分-&#xff08;叠猫猫&#xff09; ##抽象数据类型栈的定义&#xff1a;是一种遵循先入后出的逻辑的线性数据结构。 换种方式去理解这种数据结构如果我们在一摞盘子中取到下面的盘子&#xff0c;我们首先要把最上面的盘子依次拿走&#xff0c;才可以继续拿下面的盘子&…
阅读更多...
Nodejs+vue+ElementUi自动排课系统

Nodejs+vue+ElementUi自动排课系统

使用自动排课系统分为管理员和学生、教师三个角色的权限子模块。 管理员所能使用的功能主要有&#xff1a;首页、个人中心、学生管理、教师管理、班级信息管理、专业信息管理、教室信息管理、课程信息管理、排课信息管理、系统管理等。 学生可以实现首页、个人中心、排课信息管…
阅读更多...
uni-app 微信小程序之新增 添加小程序的交互

uni-app 微信小程序之新增 添加小程序的交互

文章目录 1. 实现效果2. 提示组件 1. 实现效果 2. 提示组件 在 components 中新增 struggler-uniapp-add-tip 提示添加小程序 组件默认展示&#xff0c;通过点击将 SHOW_TIP 存储本地进行隐藏 <template><view><view class"uni-add-tips-box" v-if&…
阅读更多...
【LeetCode】2629. 复合函数

【LeetCode】2629. 复合函数

复合函数 题目题解 题目 请你编写一个函数&#xff0c;它接收一个函数数组 [f1, f2, f3&#xff0c;…&#xff0c; fn] &#xff0c;并返回一个新的函数 fn &#xff0c;它是函数数组的 复合函数 。 [f(x)&#xff0c; g(x)&#xff0c; h(x)] 的 复合函数 为 fn(x) f(g(h(x…
阅读更多...
深度学习在单线性回归方程中的应用--TensorFlow实战详解

深度学习在单线性回归方程中的应用--TensorFlow实战详解

深度学习在单线性回归方程中的应用–TensorFlow实战详解 文章目录 深度学习在单线性回归方程中的应用--TensorFlow实战详解1、人工智能<-->机器学习<-->深度学习2、线性回归方程3、TensorFlow实战解决单线性回归问题人工数据集生成构建模型训练模型定义损失函数定义…
阅读更多...
bpftrace原理与使用方法

bpftrace原理与使用方法

Bpftrace 概念和原理bpftrace安装bpftrace 语法结构bpftrace 变量内置变量自定义变量Map变量 内置函数Bpftrace操作案例文件系统磁盘进程内存 bpftrace是一种基于eBPF&#xff08;Extended Berkeley Packet Filter&#xff09;的跟踪工具&#xff0c;用于在Linux系统中进行动态…
阅读更多...
金山终端安全系统V9.0 update_software_info_v2.php处SQL注入漏洞复现 [附POC]

金山终端安全系统V9.0 update_software_info_v2.php处SQL注入漏洞复现 [附POC]

文章目录 金山终端安全系统V9.0 update_software_info_v2.php处SQL注入漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现 0x06 修复建议参考链接&#xff1a; 金山终端安全系统V9.0 update_software_info_v2.php处…
阅读更多...
国产麒麟操作系统部署记录

国产麒麟操作系统部署记录

前提&#xff1a;部署项目首先要安装各种软件&#xff0c;在内网环境下无法在线下载。 思路&#xff1a;首先部署一台能上网的系统&#xff0c;在此系统下只下载包&#xff0c;然后传到另一台内网系统下进行安装&#xff1b; 1、最开始yum未安装&#xff0c;因此需要先安装yu…
阅读更多...
Leetcode每日一题学习训练——Python3版（到达首都的最少油耗）

Leetcode每日一题学习训练——Python3版（到达首都的最少油耗）

版本说明 当前版本号[20231205]。 版本修改说明20231205初版 目录 文章目录 版本说明目录到达首都的最少油耗理解题目代码思路参考代码 原题可以点击此 2477. 到达首都的最少油耗 前去练习。 到达首都的最少油耗 ​ 给你一棵 n 个节点的树&#xff08;一个无向、连通、无环…
阅读更多...
最新文章

Copyright @ 2022~2023