当前位置: 首页 > news >正文

CSS读书笔记

——————————————精华部分——————————————

1、选择器
(1)基本选择器:
标签选择器 body{}
类选择器 class=''  .class名称{}
ID选择器 id=''  #id名称{}

优先级:ID选择器 > 类选择器 > 标签选择器

(2)层次选择器
后代选择器 body p{}
子选择器 body>p{}
相邻兄弟选择器 body + p{}
通用选择器 body~p{}

(3)结构伪类选择器
加冒号的条件
ul li:first-child{}

(4)属性选择器
a[id]{}

2、span标签
作用:重点突出的文字用span套起来

3、文本样式
排版:text-align
段落缩进:text-indent:
行高:line-height

4、a的结构伪类
鼠标悬浮的状态: a:hover

5、列表
列表类型 list-style
去掉原点: none

6、盒子模型
外边距:margin
内边距:padding
边框:border

7、display
块级元素作用及举例:独占一行,h1~h6,p,div,列表
行内元素作用及举例:不独占一行,span,a,img

块元素标签:block
行内标签:inline
写在一行的块级标签:inline-block
不显示:none

8、浮动
浮动标签:float
清除浮动:clear:both
解决父级边框塌陷的方法:增加空div并清除浮动

9、定位:
相对定位:relative,相对原文档流位置的偏移,原位置仍保留
绝对定位:absolute,相对于父级(非static定位)或浏览器的位置进行偏移,原位置不保留
固定位置:fixed

10、z-index
最高层级:999

11、透明度标签:opacity

——————————————详细说明——————————————

教程链接:2、什么是CSS和发展史_哔哩哔哩_bilibili

1、选择器

作用:选择页面上的某一个或者某一类元素

(1)基本选择器:

标签选择器: html标签{ … }

类选择器:class   .class的名称{ … },可以复用

ID选择器:id     #id名称{ … } , 唯一的不能复用

优先级:ID选择器 > 类选择器 > 标签选择器

(2)层次选择器

后代选择器:在某个元素的后面,

              祖爷爷  爷爷   爸爸   你

       body p{

        background: red;

}

影响所有的p标签

子选择器:一代,儿子

       body>p{

           background: red;

}

       只影响body下一级的p标签

相邻兄弟选择器:同辈

       .active + p {

              background: red;

}

       只影响下一个的相邻的兄弟

通用选择器:当前选中元素的向下的所有兄弟元素

       .active~p{

background: red;

}

影响向下的所有同级元素

(3)结构伪类选择器

伪类:条件

ul的第一个子元素:

ul li:first-child{

       background: red;

}

ul的最后一个子元素

ul li:last-child{

       background: red;

}

选中p1:定位到父元素,选择当前的第一个元素

       选择当前p元素的父级元素,选中父级元素的第一个

p:nth-child(1){

       background: red;

}

(4)属性选择器(常用)

可以是属性名,或者属性名=属性值(正则)

=为精确匹配, *=为包含

存在id属性的元素 a[]{},

a[id]{

       background: yellow;

}

a[id=first]{

       background: yellow;

}

class中有links的元素,

a[class*=”links”]{

       background: yellow;

}

2、span标签

作用:重点要突出的字,使用span标签套起来

3、文本样式

text-align: 排版 center左右居中

text-indent: 2em;  段落首行缩进。 2Em是2个字,2px是2个像素

行高line-height和块的高度height一致,就可以上下居中。

水平对齐,参照物a,b

img, span{

       vertical-align: middle;

}

 

4、a的结构伪类

a:hover   鼠标悬浮的状态

a:active   鼠标按住未释放的状态

5、列表

ul li

list-style:

       none 去掉原点

       circle 空心圆

decimal 数字

square  正方形

6、盒子模型

margin:外边距

padding:内边距

border:边框

外边距的妙用,居中元素。要求:外层为块元素,且有固定的宽度

margin: 0 auto;

margin: 0; 上下左右  都为0

margin: 0 1px;    上下为0,左右为1px

margin: 0 1px 2px 3px;  上0 下1px 左2px 右3px

7、display

块级元素: 独占一行

h1 ~ h6,p,div,列表…

行内元素:不独占一行

span  a  img  strong …

行内元素可以被包含在块级元素中,反之则不可以。

block:块元素

inline:行内元素

inline-block:保持块元素的特性,但是可以写在一行

none:不显示

8、浮动float

当元素设置浮动后,会自动脱离文档流。

向左浮动或者向右浮动,向左或向右移动,直到自己的边界紧贴着包含块(一般是父元素)或者其他浮动元素的边界为止。

9、float父级边框塌陷问题

clear: right;  右侧不允许有浮动元素

clear: left;   左侧不允许有浮动元素

clear: both;  两侧不允许有浮动元素

解决方案:

(1)增加父级元素的高度

(2)增加一个空的div标签,清除浮动

<div class=”clear”></div>

.clear{

        clear: both;

        margin: 0;

        padding: 0;

}

(3)在父级元素中增加一个 overflow: hidden;

原因:

隐藏溢出:当内容超过其父元素时,可以使用该属性和值将溢出的部分裁剪掉。

清除浮动:当子元素浮动时,按照上一个特性应该将子元素超出的部分截掉。但是子元素有浮动无法裁剪,所以只能由父元素增加高度去包裹住子元素,使得父元素拥有了高度,而这个高度是跟随子元素自适应的高度,这样就把浮动的子元素包含在父元素内了。

(4)父类添加一个伪类: after

#father:after{

        content: ‘’;

        display: block;

        clear: both;

}

小结:

(1)浮动元素后面增加空div

简单,代码中尽量避免空div

(2)设置父元素的高度

简单,元素假设有了固定的高度,就会被限制

(3)overflow

简单,下拉的一些场景避免使用

(4)父类添加一个伪类:after(推荐)

写法稍微复杂一点,但是没有副作用

10、display和float对比

display的方向不可以控制

float浮动起来的话会脱离标准文档流,所以要解决父级边框塌陷的问题

11、定位

(1)相对定位 relative

相对于自己原来的位置进行偏移,需要加额外的定位

它仍然在标准文档流中,原来的位置会被保留

上下左右 比如:top: -20px;

(2)绝对定位 absolute

基于xx定位,上下左右

  1. 没有父级元素定位的前提下,相对于浏览器定位
  2. 假设父级元素存在定位,通常会相对于父级元素进行偏移
  3. 在父级元素范围内进行移动

相对于父级(非static定位)或浏览器的位置进行指定的偏移,绝对定位的话,它不在标准文档流中,原来的位置不会被保留。

(3)固定定位fixed

12、z-index

最低层级为0,最高层级为999

13、透明度

opacity: 0.5;  背景透明度

相关文章:

CSS读书笔记

——————————————精华部分—————————————— 1、选择器 &#xff08;1&#xff09;基本选择器&#xff1a; 标签选择器 body{} 类选择器 class .class名称{} ID选择器 id #id名称{} 优先级&#xff1a;ID选择器 > 类选择器 > 标签选择器 &am…...

Qt使用QSqlDatabase remoeDatabase()连接提示仍在使用解决方案

问题描述 调用QSqlDatabase的removeDatabase函数的时候&#xff0c;出现了如下错误 QSqlDatabasePrivate::removeDatabase: connection 05465461654654 is still in use, all queries will cease to work官方示例 [static] void QSqlDatabase::removeDatabase(const QString &…...

管易云与金蝶云星空对接集成仓库查询打通仓库新增

管易云与金蝶云星空对接集成仓库查询打通仓库新增 接通系统&#xff1a;管易云 管易云是金蝶旗下专注提供电商企业管理软件服务的子品牌&#xff0c;先后开发了C-ERP、EC-OMS、EC-WMS、E店管家、BBC、B2B、B2C商城网站建设等产品和服务&#xff0c;涵盖电商业务全流程。 对接目…...

ubuntu 安装 Mongodb 4.0、4.2、4.4

1. 安装 # 配置apt Repository mongodb 4.0&#xff0c; 4.2&#xff0c; 4.4 $ sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 68818c72e52529d4 #4.0 $ sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 4B7C549A058F8B6B #4.2 $ …...

详解Hugging Face Transformers的TrainingArguments

前言&#xff1a; TrainingArguments是Hugging Face Transformers库中用于训练模型时需要用到的一组参数&#xff0c;用于控制训练的流程和效果。 使用示例&#xff1a; from transformers import Trainer,TrainingArguments training_args TrainingArguments(output_dir&q…...

【LeetCode-中等题】17. 电话号码的字母组合

文章目录 题目方法一&#xff1a;递归回溯 题目 方法一&#xff1a;递归回溯 参考讲解&#xff1a;还得用回溯算法&#xff01;| LeetCode&#xff1a;17.电话号码的字母组合 首先可以画出树图&#xff1a; 先将数字对应的字符集合 加入到一个map集合 这里需要一个index来控…...

读高性能MySQL(第4版)笔记06_优化数据类型(上)

1. 良好的逻辑设计和物理设计是高性能的基石 1.1. 反范式的schema可以加速某些类型的查询&#xff0c;但同时可能减慢其他类型的查询 1.2. 添加计数器和汇总表是一个优化查询的好方法&#xff0c;但它们的维护成本可能很 1.3. 将修改schema作为一个常见事件来规划 2. 让事情…...

mac如何创建mysql数据库

使用mac创建mysql数据库十分简单&#xff0c;我们只需要按照以下步骤即可完成。 首先&#xff0c;我们需要安装mysql&#xff0c;我们可以通过官网下载对应的安装包&#xff0c;或者通过Homebrew进行安装。 接下来&#xff0c;我们需要启动mysql服务&#xff0c;在终端中输入以…...

Ceph入门到精通-centos8 install brctl

在centos7上是可以直接yum安装bridge-utils的&#xff0c;但是centos8不行 经过分析 brctl有提供centos的rpm包&#xff0c;里面只有一个二进制脚本&#xff0c;所以直接下载安装即可 rpm -ivh http://mirror.centos.org/centos/7/os/x86_64/Packages/bridge-utils-1.5-9.el7…...

sqli第一关

1.在下使用火狐访问sqlilabs靶场并使用burpsuite代理火狐。左为sqlilabs第一关&#xff0c;右为burpsuite。 2.输入?id1 and 11 与?id1 and 12试试 可以看出没有变化哈&#xff0c;明显我们输入的语句被过滤了。在?id1后面尝试各种字符&#xff0c;发现单引号 包…...

入行IC | 新人入行IC选择哪个岗位更好?

很多同学入行不知道怎么选择岗位。IC的岗位一般有设计、验证、后端、封装、测试、FPGA等等。但是具体到每个人身上&#xff0c;就要在开始的时候确定下你要找的职位&#xff0c;可以有两个或三个&#xff0c;但是要分出主次&#xff0c;主次不分会让你纠结整个找工作的过程。 …...

时间旅行的Bug 奇怪的输入Bug

故事一&#xff1a;时间旅行的Bug 在一个普通的工作日&#xff0c;程序员小明正在开发一个时间旅行的应用程序。这个应用程序可以让用户选择一个特定的日期和时间&#xff0c;然后将用户的意识传送到过去或未来的那个时刻。小明对这个项目非常兴奋&#xff0c;他认为这将是一个…...

解决nbsp;不生效的问题

代码块 {{title}} title:附 \xa0\xa0\xa0件,//或者 <span v-html"title"></span> title:附 件&#xff1a;,效果图...

【Lidar】Cloud Compare介绍安装包

CloudCompare是一款基于GPL开源协议的3D点云处理软件&#xff0c;最初被设计用来对稠密的三维点云进行直接比较。它依赖于一种特定的八叉树结构&#xff0c;在进行点云对比这类任务时具有出色的性能。在2005年后&#xff0c;CloudCompare实现了点云和三角形网格之间的比较。 Cl…...

Java中的Maven是什么?

Maven是一个开源的项目管理和构建工具&#xff0c;用于Java项目的构建、依赖管理和项目信息管理。它提供了一种标准的项目结构、规范的构建过程和丰富的插件生态系统&#xff0c;简化了项目的管理和构建过程。 Maven基于项目对象模型&#xff08;Project Object Model&#xf…...

计算机操作系统

计算机操作系统 1.进程管理 1.1 基础概念 进程&线程 进程是操作系统资源分配的基本单位。一个进程运行时&#xff0c;会获取必要的CPU、内存地址空间&#xff0c;以及运行时必要的IO设备。 线程则是执行调度的最小单位。一个进程会由一个线程或者多个线程执行调度任务。…...

海学会读《乡村振兴战略下传统村落文化旅游设计》2023年度许少辉八一新书

海学会读《乡村振兴战略下传统村落文化旅游设计》2023年度许少辉八一新书...

tkinter树形图组件

文章目录 初步回调函数绑定滚动条 初步 Treeview是ttk中的树形表组件&#xff0c;功能十分强大&#xff0c;非常适用于系统路径的表达。为了知道属性图到底是什么&#xff0c;下面先做个最简单的树形图 其代码如下 import tkinter as tk from tkinter import ttkdct {"…...

多线程的创建

一、基本概念 1 cpu CPU的中文名称是中央处理器&#xff0c;是进行逻辑运算用的&#xff0c;主要由运算器、控制器、寄存器三部分组成&#xff0c;从字面意思看就是运算就是起着运算的作用&#xff0c;控制器就是负责发出cpu每条指令所需要的信息&#xff0c;寄存器就是保存运…...

【django】APPEND_SLASH 路由末尾的斜杠问题

url路由末尾是否加斜杠的规范 加斜杠&#xff1a;表示是目录不加斜杠&#xff1a; 表示是文件 在django中的setting中&#xff0c;默认APPEND_SLASH True, 即当请求的路由末尾没有加斜杠&#xff0c; 如果尝试加上斜杠后&#xff0c;能在后端路由里匹配到&#xff0c;则会自…...

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

Spark 之 入门讲解详细版(1)

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

华为云Flexus+DeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...