CSS基础学习总结

1.css是给HTML标签添加 样式 的语言,通过选择器(标签、id、class)建立连接

2.css三种形式
内嵌式:在< head></ head>中写< style>css</ style>
外链式:在< head></ head>中写< link rel=”stylesheet” href=”css/css.css”>
行内式:在标签上直接写<h2 style=”color: red;”>标题</ h2>
导入式:

3.基本语法
选择器+括号对(K:V;)

4.选择器详解
标签选择器“覆盖面”非常大,所以通常用于标签的初始化
Eg.ul{list-style:none;} (列表样式没有,去掉列表的圆点)
Class有个原子类的玩法,就是把类名class=”px color”也写成css的样式,用空格隔开不同的。

5. 复合选择器

  • 后代选择器(空格,如.box p .ddd。元素2可以是儿子,也可以是孙子等,只要是元素1 的后代即可)
  • 子选择器(>,如元素1>元素2。元素2必须是亲儿子,其孙子、重孙之类都不归他管. 你也可以叫他 亲儿子选择器)
  • 并集选择器(逗号,如ul,ol。并集选择器通常用于集体声明)
  • 交集选择器(又h1又spec类名连在一起,如h1.spec)

6.伪类选择器,伪类选择器书写最大的特点是用冒号(:)表示,比如 :hover 、 :first-child。其中p:first-child的正确理解是(假设p的父元素是x):x的第一个叫做p的儿子。

7.>+~元素关系选择器

8.序号选择器、属性选择器、CSS3新增伪类(empty等)、CSS3新增伪元素::

  • ::before 和 ::after 伪元素:给元素设置伪元素的时候,必须设置其content属性,浏览器才会将这些元素插入到选择的元素中。该值可以设置为空字符串:content: “”。允许您在任何非替换元素之前或之后插入内容,这不是实际内容,是装饰性内容。开发中典型的用法在文字后加入红色星号表示必填表单内容。

9.CSS样式层叠性

  • style scoped
    使用场景为在vue中,我们为了避免父组件的样式影响到子组件的样式,会在style中加< style scoped>,这样父组件中如果有跟子组件相同的class名称或者使用选择器的时候,就不会影响到子组件的样式。由于scope引出了/deep/的玩法

  • /deep/
    如果去掉scoped的话就会影响全局样式,但是加上scoped又不能在当前组件修改子组件的样式,这个时候就可以使用 /deep/了。
    /deep/表示深度选择器,可以做到既不影响到别的地方,又能修改子组件在当前的样式。
    除了 /deep/ 以外,>>> 和 ::v-deep也可以实现同样的效果。注意:/deep/ 只能在像 less , sass 等css预处理器中使用,在原生css中使用无效,所以原生css当中应使用 >>>

  • 遇到冲突可以根据id>class>标签来算,也可以计算权重(个人认为不会写出这样的代码,除非解决问题)

  • 实际例子
    ::-webkit-scrollbar 修改整个滚动条的样式

10.字体 font xx

11.段落和行的属性也可以通过css设置

12.color front- list- text- line有继承性,祖先设置标签,既可在后代所有标签中生效。

13.盒模型(HTML标签都是盒子)

  • width宽、height高、padding填充、border边框

  • margin 盒子与盒子之间的距离(margin不叠加,塌陷现象,以大的为准),因为body等有默认的margin,所以在开始制作时,初始化清0。将盒子左右两边的margin都设置为auto,盒子将水平居中:
    Eg:.box{ margin: 0 auto;}(上下是0,左右居中)
    盒子垂直居中,需要使用绝对定位技术实现。
    盒模型计算,来设计布局

  • 添加box-sizing:border-box(默认是content-box:传统的盒模型)后,就变成内缩而不是外扩,该属性大部分应用到移动页面中。

  • 行内元素,块级元素,display属性可以将两种元素互转。display:block;、display:inline;、display:inline-block;

  • 脱离标准文档流:浮动、绝对定位、固定定位,下面的元素会占据原来的位置,即丢掉了当前的位置。

14.浮动float
浮动(float属性)的最本质功能是用来实现并排(div作为块级元素,天生是竖直排列的)
子盒子会按顺序进行贴靠,如果没有足够空间,则会寻找再前面一个兄弟元素
设置float以后,行内元素也有宽和高。
1垂直显示的盒子,不要设置浮动,只有并排显示的盒子才要设置浮动。
2一个大盒子带着小盒子,大盒子内部的小盒子设置浮动。
3多用div,一层一层的分块。

15.BFC(编程不规范涉及的操作)、清除浮动(涉及到再仔细看;让内部有浮动的父盒子形成BFC,他就能关闭住内部的浮动,overflow:hidden)

16.相对定位
.box1{ position:relative; top: 100px; left: 100px; }
相对自己原来的位置进行位置调整
相对定位的元素,本质还是原来的位置,只不过渲染在新的地方(产生影子),不会对页面其他元素产生影响。
微调元素位置,调那些不怕被覆盖的地方。

17.绝对定位
.box1{ position:absolute; top: 100px; left: 100px; }
与相对定位不同,就是实际,不是影子,会覆盖其他。
绝对定位的盒子,会以自己祖先元素中,离自己最近的拥有定位属性的盒子,当作基准点。通常用相对定位作基准点。子绝父相
父盒子写position:absolute;但不动,不设置left啥的,子盒子绝对定位就能以该父盒子进行绝对定位了。

做垂直居中:
.box{position:absolute;
top: 50%; /上边线是百分之50,上边线居中了/
left: 50%;
margin-top:-自己高度的一半; /往上拉回了自己高度的一半/
margin-left: -自己宽度的一般;}
此时不能用margin: 0 auto;了,因为绝对定位脱离了标准文档了。

z-index属性,数值大的覆盖数值小的。

三大作用:
覆盖压盖效果
结合css精灵
结合js实现动画

18.固定定位
position:fix;
页面卷动,它也不变;只以页面为参考点;脱离标准文档流;可以用来做返回顶部(顶部导航栏不动z-index:999)、楼层导航等等。

19.css提供了很多小属性,它的目的是层叠大属性,类似于继承多态的感觉。

20.边框border有很多种玩法,变虚线、变三角、变圆角。

21.box-shadow可以设置阴影.

22.背景与渐变background系列属性(用时看)

23.变形transform:旋转变形、位移变形(跟相对定位一样,兼容性不如相对定位)、3d变形旋转、空间移动

24.transition 过度属性,一个元素在不同样式之间变化自动添加“补间动画”。(其他用时再看)

25.overflow
overflow: auto与scroll在内容超出时浏览器均会显示滚动条,但在元素没有超出时,auto会隐藏滚动条,scroll依旧显示滚动条,但是禁用该滚动条

26.在CSS样式中很多样式名前缀都带有’-webkit-‘,但在CSS提供的API中查询不到这些样式名

原因:CSS3中新增了一些属性,针对不同的浏览器,规定其内核名称让它们可以对这些新增属性进行解析。

解释:前缀为“-webkit-”的属性,能够在以webkit为内核的浏览器中正常使用。

各个不同浏览器内核列表:-moz代表firefox浏览器私有属性;-ms代表IE浏览器私有属性;-webkit代表chrome、safari私有属性;-o代表Opera私有属性
使用原因:为了浏览器兼容,某些css的API只支持IE10+,例如transform,直接使用为W3C的标签,对IE9+不支持,要兼容浏览器需要添加前缀
{
transform:translate(10,10) // W3c标准
-webkit-transform:translate(10,10) // Safari Chrome
-moz-transform:translate(10,10) // firefox
-ms-transform:translate(10,10) // IE9
-o-transform:translate(10,10) // opera
}

30.calc()
注意±前后必须有空格,如calc(100% - 20), calc(100%-20)没有空格写法错误

31.css做文字后跟省略号效果
text-overflow: ellipsis; // 显示省略号代表被修剪的文本
white-space: nowrap: // 文本不换行
overflow: hidden;

32.css做文字换行效果
width: 300px; // 设置宽
word-break: break-word; // 超过后换行

后续将持续更新…

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

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

相关文章

C++ 函数重载

1.函数重载的概念 在C中可以为两个或两个以上的函数提供相同的函数名称&#xff0c;只要参数类型不同&#xff0c;或参数类型相同而参数个数不同&#xff0c;称为函数重载。 在C语言中实现int&#xff0c;char&#xff0c;double类型的比较大小函数&#xff1a; int my_max_…

LeetCode-每日一题-将数组和减半的最少操作次数

2208. 将数组和减半的最少操作次数 提示 中等 49 相关企业 给你一个正整数数组 nums 。每一次操作中&#xff0c;你可以从 nums 中选择 任意 一个数并将它减小到 恰好 一半。&#xff08;注意&#xff0c;在后续操作中你可以对减半过的数继续执行操作&#xff09; 请你返…

【Kubernetes资源篇】ingress-nginx最佳实践详解

文章目录 一、Ingress Controller理论知识1、Ingress Controller、Ingress简介2、四层代理与七层代理的区别3、Ingress Controller中封装Nginx&#xff0c;为什么不直接用Nginx呢&#xff1f;4、Ingress Controller代理K8S内部Pod流程 二、实践&#xff1a;部署Ingress Control…

React 中的受控组件

React 中的受控组件是由 React 组件管理其值的表单组件。它们的值受到 React 组件状态的控制&#xff0c;更新时会通过回调函数进行数据的处理。 受控组件的特点包括&#xff1a; 值由状态控制&#xff1a;受控组件的值是通过 React 组件的状态进行控制和更新的。通过事件处理…

STM32 串口实验(学习一)

本章将实现如下功能&#xff1a;STM32通过串口和上位机对话&#xff0c;STM32在收到上位机发过来的字符串后&#xff0c;原原本本返回给上位机。 STM32 串口简介 串口作为MCU的重要外部接口&#xff0c;同时也是软件开发重要的调试手段&#xff0c;其重要性不言而喻。现在基本…

Linux搭建实验环境搭建(nginx,mysql,java.tomcat)

♥️作者&#xff1a;小刘在C站 ♥️个人主页&#xff1a; 小刘主页 ♥️努力不一定有回报&#xff0c;但一定会有收获加油&#xff01;一起努力&#xff0c;共赴美好人生&#xff01; ♥️学习两年总结出的运维经验&#xff0c;以及思科模拟器全套网络实验教程。专栏&#xf…

KMP算法的及其原理

KMP算法 首先 我们先了解一下 KMP算法的作用 str1 和str2 字符串 如果str1中包含str2 那么返回头位置 如果不包含返回-1 首先 我们先加入一个概念: 有一个next数组 next[i]的值为 str2 中 以i-1位置为结尾的字符串中 最长相同前缀后缀为多长(相同前缀后缀 不是对称 aba 中相…

uniapp 小程序如何从主包页面跳转到分包页面

在uniapp开发小程序的时候&#xff0c;“分包”概念一定要提前了解下&#xff0c;具体我就不多说了&#xff0c;自己看下关网的相关配置。 那么&#xff0c;如果从主包页面&#xff0c;跳转至分包的页面呢&#xff1f;如图所示 我的页面->详情页 在我的页面创建好自己的链…

测牛学堂:车载测试面试总结之语音助手相关

车载语音助手的工作原理&#xff1f; 语音助手的工作原理总结下来可以分为4个步骤&#xff1a; 1 通过麦克风采集驾驶员的语音指令 2将语音信号转换为数字信号 3过语音识别技术将语音指令转换为计算机可以理解的指令 4 通过语音合成技术将计算机的回应转换为语音输出 车载…

ARM--LED灯点亮

LED1,LED2,LED3亮灯 .text .global _start_start: /**********LED1点灯--->PE10**************//*初始化RCC章节*/通过RCC_MP_AHB4ENSETR寄存器,使能GPIOs组控制器 0x500000A28[4] 1RCC_INIT: E组和F组一起使能ldr r0,0x50000A28 ldr r1,[r0]orr r1,r1,#(0x3 << 4)s…

vuex和redus的异同

生态系统和语言&#xff1a;Vuex是为Vue.js框架设计的状态管理库&#xff0c;而Redux是一个独立的JavaScript状态管理库&#xff0c;可以与多种框架&#xff08;如React、Angular等&#xff09;一起使用。 架构&#xff1a;Vuex是基于Flux架构的一种实现&#xff0c;而Redux是…

QT 脚本QScriptValue返回QList<QString>

在 QT 脚本中&#xff0c;可以使用 QScriptValue 类来返回 QList<QString> 类型的值。首先&#xff0c;你需要创建一个 QList<QString> 对象&#xff0c;然后将其转换为 QScriptValue 类型。 下面是一个示例代码&#xff1a; // 创建 QList<QString> 对象 …

vue3+ts+elementui-plus二次封装树形表格实现不同层级展开收起的功能

一、TableTreeLevel组件 <template><div classmain><div class"btns"><el-button type"primary" click"expandLevel(1)">展开一级</el-button><el-button type"primary" click"expandLevel(2…

13年测试老鸟,接口性能测试总结整理,据说这是全网最全的...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 性能测试按照不同…

【云原生系列】openstack搭建过程及使用

目录 搭建步骤 准备工作 正式部署OpenStack 安装的过程 安装组件如下 登录页面 进入首页 创建实例步骤 上传镜像 配置网络 服务器配置 dashboard配置 密钥配置免密登录 创建实例 绑定浮动ip 免密登录实例 搭建步骤 准备工作 1.关闭防火墙和网关 systemctl dis…

运维高级学习---MySQL备份恢复

数据库备份&#xff0c;数据库为school&#xff0c;素材如下 1.创建student和score表 CREATE TABLE student ( id INT(10) NOT NULL UNIQUE PRIMARY KEY , name VARCHAR(20) NOT NULL , sex VARCHAR(4) , birth YEAR, department VARCHAR(20) , address VARCHAR(50) );创建sco…

【周赛第66期】题目、解答与疑义

目录 感想 判断题1.单选题1.2.&#xff08;有疑义&#xff09; 填空题1. 编程题1.路灯亮度题目题解答案 2.题目题解答案 感想 &#xff08;吐槽&#xff09; 在线IDE真不好用&#xff0c;不说不如CLion&#xff0c;抄一下leetcode的也好啊…… 希望支持比赛时实时看别人通过了…

MATLAB 创建神经网络模型的patternnet和newff函数区别

patternnet和newff都是在MATLAB中用于创建人工神经网络的函数&#xff0c;但它们有一些区别和适用场景。 网络类型&#xff1a; patternnet&#xff1a;用于创建多层感知器&#xff08;MLP&#xff09;类型的神经网络&#xff0c;MLP是一种前馈神经网络&#xff0c;由输入层、若…

Jupyter(CPP内核) || 如何在使用xeus-cling时添加第三方库

国内的搬运真是管杀不管埋。在CSDN上找了半天没有找到在xeus-cling添加第三方库的&#xff0c;最后还是只能自己到处去看英文文档。 先贴上英文文档的链接&#xff1a;Introduction — xeus-cling documentation 构建二进制文件时&#xff0c;通常在构建工具中指定包含目录和第…

抖音SEO源码开发指南:介绍如何开发抖音SEO源码的基本步骤和要点。

一、 抖音SEO源码开发指南&#xff1a; 确定目标&#xff1a;首先要明确开发抖音SEO源码的目标是什么&#xff0c;是提高搜索排名还是增加用户量等。根据不同的目标来制定开发策略和思路。 分析竞争&#xff1a;对于同类产品&#xff0c;要进行竞争分析&#xff0c;了解对手的…