【前端】CSS知识梳理

31cda2dfc7574f91a6890a9d66208b82.png

基础:标签选择器、类选择器、id选择器和通配符选择器

8240d41fd7fd4ffbaa2795046bb163ce.png

font:font-style(normal) font-weight(400) font-size(16px) /line-height(0) font-family(宋体) 

复合: 后代选择器( )、子选择器(>)、并集选择器(,)、伪类选择器(:)、连接伪类(a:)、:focus

e0b00f8b08974394b1bb8576cfa4cb24.png

 块元素(独占一行)、行内元素(内联元素)、行块元素(<img/><input/><td>)

->diaplay转换 block、incline、incline-block

0147aee1e18747b1a5264ec6981303e6.pngd5f7b88706884b75be6e22975dc4166d.png

继承性属性:text-,font-,line-这些元素开头的可以继承,以及color属性

f91c3002c3c34aaa905bba357c871856.png aed1bec390814bd38e2513c58ca78f24.png

8ee5a85f80e04fca811fbd02a16b1b9d.png

盒子模型 :边框、外边距、内边距、和实际内容

0fe41289769c4201b3786848259e9580.png

b422f030b92e4d5486e984358d26b85b.png ffce01e70b194e8ebdcb47584560e62d.png

 居中:块元素(margin:0 auto;[需设置width])

行内或行内块:给父元素添加text-align:center

cbecce20cc1c481b8a675a15709ad375.png

 border-radius:5747bae86eca4e9f8146b5dd42ff0c22.png    正方形->⚪:50%

 border-shadow:不占空间,不会影响布局

text-shadow

b858677be41d437997a9e4d41d2254b6.png

 浮动(多个块元素横向排列找浮动,纵向排列找标准流)

e568a94e29184229a64655380a1a743c.png

6481f6f5c3334c15863f6c0e23cf20ea.png

af385e87f6bc4ec6a155ffa00dfe81e3.png

4e5f49390c694b928d4326f353380863.png

清楚浮动方法

1.额外标签发(隔墙法)【W3C推荐】

a4f97664976e40a8acfac677793135b7.png

da0ba98136044242a72afc66de863445.png

2.父级添加overflow属性

7cd6a96d48934b9baf689eee3ab0a3b7.png

3.父级添加after伪类

820b629b7d0f4509967514a5eb76f2a2.png

4.父级添加双伪元素

31df6ad53a9241529566410315b85957.png

489271d179e2443294cff60b1a764bf1.png定位 

272038be9aaf46bfba45ab3a5704c1c5.png

5a2f404994754ee9b626d63a5078ea1d.png

 2f18b0b89a3748a2b77e00118a56d2d8.png

e6e5123c111a414293d6d0b0dc2ca6e7.png

1577915eeb3340ccb1167a3285f34967.png

f25e1aa369bf4895a724713b1aa9cefd.png

bb7c9826c6414249afdbfb934925eec0.png

d5d123be4c844bb6b01f1cb83c9d5f0c.png

e93a453e4a54457d881578432d714fda.png

display:none不再占有位置、visibility:hidden继续占有原来位置  verflow 

de0c4add080c4343aa38af55bbbc6a92.png

5f41166d5eff4b2ea7818525a80655ff.png

精灵图sprite

b7024d1f3e9f4333803e9354d0c2c20d.png

 CSS三角形

248b746d9a3347d4a458ecb89296addd.png

14b2d46e997c4e818994392b618612ff.png

f52d7869e42d40349ae8fa396eba2251.png 9b8640b143fc420f87a93bb81920a05a.png

869146bfb0eb4cd09240bc5d582f1bcb.png

溢出文...显示

19b553d8403d43429bdd7bd0bd59d432.png

6273ff91803d44148ca7001b58b50438.png

HTML5新特性

  • 语义化标签,有利于SEO
  •  多媒体、音视频数据
  • input类型、属性扩展

CSS3新特性

  • 属性选择器,权重与类、伪类选择器一样  E[att=""]
  • 结构伪类选择器 E:first-child  E:child()《——DOM树

           nth-child(n) 2n偶数 2n+1奇数

c2a45d3afd1a4707b3b420c445fb6c96.png

88c00bfc7cc24afc82a6d0b3385f2e37.png

  • 伪元素选择器::before  权重为1

d1f454ba1820474d9ba79be32c44d5f3.png

6dda81c780f74bff90445b8639e3a170.png

 CSS过渡transition

7d2787d1f5c9421894053e86a41268f2.png

转换

translate(x,y)  translate(50%,50%) 相对于本身元素的  rotate scale 

 动画

 

流式布局 flex布局

通过给父盒子添加flex属性,来控制子盒子的位置和排列方式 

flex-direction设置主轴的方向

justify-content设置主轴上的子元素的排列方式

flex-wrap:wrap   换行,flex布局默认不换行

align-items

flex布局子项常见属性 

flex属性

align-self属性

order属性

 rem布局

媒体查询

 

less

响应式布局

bootstrap

 

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

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

相关文章

第16课 核心函数(方法)

掌握常用的内置函数及其用法。 数学类函数&#xff1a;abs、divmod、max、min、pow、round、sum。 类型转换函数&#xff1a;bool、int、float、str、ord、chr、bin、hex、tuple、list、dict、set、enumerate、range、object。 序列操作函数&#xff1a;all、any、filter、m…

基于AI深度学习的中医针灸实训室腹针穴位智能辅助定位系统开发

在中医针灸的传统治疗中&#xff0c;穴位取穴的精确度对于治疗效果至关重要。然而&#xff0c;传统的定位方法&#xff0c;如体表标志法、骨度折量法和指寸法&#xff0c;由于观察角度、个体差异&#xff08;如人体姿态和皮肤纹理&#xff09;以及环境因素的干扰&#xff0c;往…

C++ 实现俄罗斯方块游戏

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

《高频电子线路》—— 相位平衡条件判断准则

文章内容来源于【中国大学MOOC 华中科技大学通信&#xff08;高频&#xff09;电子线路精品公开课】&#xff0c;此篇文章仅作为笔记分享。 相位平衡条件判断准则 反馈电压或者从电感上获得&#xff0c;或者从电容上获得。分别为电感反馈三端振荡器&#xff0c;或者是电容反馈…

砥砺十年风雨路,向新而行创新程丨怿星科技十周年庆典回顾

10月24日&#xff0c;是一年中的第256天&#xff0c;也是程序员节&#xff0c;同时也是怿星的生日。2014年到2024年&#xff0c;年华似水匆匆一瞥&#xff0c;多少岁月轻描淡写&#xff0c;怿星人欢聚一堂&#xff0c;共同为怿星科技的十周年庆生&#xff01; 01.回忆往昔&…

Android——横屏竖屏

系统配置变更的处理机制 为了避免横竖屏切换时重新加载界面的情况&#xff0c;Android设计了一中配置变更机制&#xff0c;在指定的环境配置发生变更之时&#xff0c;无需重启活动页面&#xff0c;只需执行特定的变更行为。该机制的视线过程分为两步&#xff1a; 修改 Androi…

mysql上课总结(5)(MySQL的完整性约束(详细介绍))

目录 一、完整性约束。 &#xff08;1&#xff09;概念与目的。 <1>概念。 <2>目的。 &#xff08;2&#xff09;各个约束的详细&#xff08;表格&#xff09; &#xff08;3&#xff09;各个约束的简要总结。 <1>主键约束。 <2>唯一约束。 <3>非…

msys2更换国内源(多个文件(不是3个文件的版本!))

msys2更换国内源 起因排查答案如下mirrorlist.mingw64mirrorlist.ucrt64mirrorlist.mingw32mirrorlist.mingwmirrorlist.clang64mirrorlist.clang32mirrorlist.msys 不想看经过的直接跳到答案 起因 查了很多个教程大部分都是【打开MSYS2软件内的\etc\pacman.d\ 中3个文件&…

使用 MMDetection 实现 Pascal VOC 数据集的目标检测项目练习(二) ubuntu的下载安装

首先&#xff0c;Linux系统是人工智能和深度学习首选系统。原因如下: 开放性和自由度&#xff1a;Linux 是一个开源操作系统&#xff0c;允许开发者自由修改和分发代码。这在开发和研究阶段非常有用&#xff0c;因为开发者可以轻松地访问和修改底层代码。社区支持&#xff1a;…

TCP Analysis Flags 之 TCP Keep-Alive

前言 默认情况下&#xff0c;Wireshark 的 TCP 解析器会跟踪每个 TCP 会话的状态&#xff0c;并在检测到问题或潜在问题时提供额外的信息。在第一次打开捕获文件时&#xff0c;会对每个 TCP 数据包进行一次分析&#xff0c;数据包按照它们在数据包列表中出现的顺序进行处理。可…

关于数学建模的一些介绍

为了更好了解世界&#xff0c;我们可以通过数学来描述许多特定的现象&#xff0c;而数学模型就是现实世界的理想化&#xff0c;不过它永远不能完全精确地表示现实世界。 在这篇文章中&#xff0c;我将介绍一些数学建模的基本概念以及相应的基础知识&#xff0c;而关于更具体的…

CSRA的LINUX操作系统24年11月2日下午上课笔记

压缩和解压缩&#xff1a;zip 、gzip、bz、xz # zip 压缩 # 压缩文件夹 # 解压缩 # unzip -v 查看压缩包中的内容 # bzip2 dir1/* :将dir1中的所有文件压缩 # gzip # 压缩文件夹 # 解压缩 tar 归档命令&#xff1a; # 创建tar包 tar -c*f # 释放tar包 tar -xf[c] # c …

Java JUC(四) 自定义线程池实现与原理分析

目录 一. 阻塞队列 BlockingQue 二. 拒绝策略 RejectPolicy 三. 线程池 ThreadPool 四. 模拟运行 在 Java基础&#xff08;二&#xff09; 多线程编程 中&#xff0c;我们简单介绍了线程池 ThreadPoolExecutor 的核心概念与基本使用。在本文中&#xff0c;我们将基于前面学…

施耐德M310PLC通讯之ModbusTCP(一)

这是另一个专题----施耐德国产化PLC(M310)的通讯篇 本节是ModbusTcp通讯 测试对象: M310plc与M241PLC 通讯协议: ModbusTcp 主站:M310PLC 从站:M241PLC 1.M310端: 1.1 新建工程(M310采用EcoStruxure Motion Expert 软件) 新建工程,这里不区分PLC型号的,只要是M310即…

电能表预付费系统-标准传输规范(STS)(30)

6.5.3.2 CONTROLBlock construction The 1 6 digit CONTROLBlock is constructed from the data elements in the APDU as defined in Table 36 and Table 37.The most significant digit is in position 1 5 and the least significant digit in position 0. APDU中的数据元素…

Jmeter基础篇(19)JSR223预处理器

前言 JSR223预处理器是Apache JMeter中的一个组件&#xff0c;它允许用户使用任何支持Java Scripting API (JSR 223) 的脚本语言来执行预处理任务。这个功能非常强大&#xff0c;因为它让测试人员能够利用如Groovy、JavaScript&#xff08;Nashorn引擎&#xff09;、BeanShell…

Python基于TensorFlow实现双向循环神经网络GRU加注意力机制分类模型(BiGRU-Attention分类算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后关注获取。 1.项目背景 随着深度学习技术的发展&#xff0c;循环神经网络&#xff08;RNN&#xff09;及其变种如门控循环…

echart实现地图数据可视化

文章目录 [TOC](文章目录) 前言一、基本地图展示2.数据可视化 总结 前言 最近工作安排使用echarts来制作图形报表&#xff0c;记录一下我的步骤&#xff0c;需求呈现一个地图&#xff0c;地图显示标签&#xff0c;根据业务指标值给地图不同省市填充不同颜色&#xff0c;鼠标放…

数学真题总结

举反例 看清正负号 对应的特征值一致 不用裁开计算行列式要注意符号&#xff01;&#xff01;&#xff01; 根据值的大小确定正负 没有思路就构建tanx求极值要考虑端点线性方程&#xff1a;求通解归并x几何意义 整体思想 u e^x y都设计好了&#xff0c;曲线是f(x,y) 0,直接把…

ES跟Kafka集成

配合流程 1. Kafka作为分布式流处理平台&#xff0c;能够实时收集和处理不同数据源的数据流&#xff1b; 2. 通过Kafka Connect或者Logstash等中间件&#xff0c;可以将Kafka中的数据流实时推送到Elasticsearch中&#xff1b; 3. Elasticsearch接收到数据后&#xff0c;会根据…