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;  背景透明度

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

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

相关文章

cf 交互题

今天cf遇到了交互题&#xff0c;这个交互题的算法很很很简单&#xff0c;但是在交互上卡了&#xff0c;导致交上的代码都不算罚时。&#xff08;更伤心了。 所以&#xff0c;现在写一下交互题的做法&#xff0c;印象深刻嘛。 交互题&#xff0c;就是跟机器进行交互。你代码运…

道路积水监测-路面积水监测系统

随着城市化的不断发展&#xff0c;城市面临着越来越多的交通挑战&#xff0c;其中之一就是道路积水问题。道路积水不仅影响了交通安全&#xff0c;还会引发交通堵塞、交通事故和城市洪涝等问题。因此&#xff0c;开展道路积水监测是十分必要的。 城市排水、供水、燃气、供热、桥…

基于大规模MIMO通信系统的半盲信道估计算法matlab性能仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 %EM算法收敛所需的迭代 nIter 1; Yp Y(:,1:L_polit,:); %与导频序列相对应的部分 q…

建议收藏!TCP协议面试灵魂12 问

先亮出这篇文章的思维导图: TCP 作为传输层的协议&#xff0c;是一个IT工程师素养的体现&#xff0c;也是面试中经常被问到的知识点。在此&#xff0c;我将 TCP 核心的一些问题梳理了一下&#xff0c;希望能帮到各位。 001. 能不能说一说 TCP 和 UDP 的区别&#xff1f; 首先…

如何查询成绩或工资

为什么每次查询成绩或者工资的时候都觉得麻烦又耗时呢&#xff1f;在过去&#xff0c;我们可能需要去学校或公司的相关部门&#xff0c;填写繁琐的表格&#xff0c;然后等待工作人员进行查询和处理。这不仅浪费了我们宝贵的时间&#xff0c;还可能出现查询结果不准确或者遗漏的…

芯科蓝牙BG27开发笔记4-SSV5 IDE的使用

1. 如何转移工作区的项目文件到新的文件夹&#xff0c;并且可以继续使用ssv5编辑、编译&#xff1f; 从默认的工作区将目标工程整体拷贝出来 目标文件夹&#xff1a; 进入ssv5点击导入工程&#xff0c;并选择目标文件夹 继续下一步&#xff0c;修改项目文件夹所在位置为其源码…

tcp与udp

tcp 服务端回复完SYNACK之后&#xff0c;就建立连接 1.为什么是三次&#xff0c;而不是两次&#xff1f;服务端回复完SYNACK之后&#xff0c;就建立连接 这是为了防止因为已失效的请求报文&#xff0c;突然又传到服务器引起错误 意思就是&#xff1a;假设采用两次握手建立连…

聚观早报|华为Mate 60 Pro支持面容支付;特斯拉重回底特律车展

【聚观365】9月8日消息 华为Mate 60 Pro已支持面容支付 特斯拉将重回底特律车展 iPhone在美国有1.67亿用户 韩国半导体8月份出口85.6亿美元 比亚迪元PLUS冠军版将于9月15日上市 华为Mate 60 Pro已支持面容支付 毫无预热的华为Mate 60 Pro突然在华为商城首批开售&#xf…

kafka增加磁盘或者分区,topic重分区

场景&#xff1a;kafka配置文件log.dirs增加了几个目录&#xff0c;但是新目录没有分区数据写入&#xff0c;所以打算进行重分区一下。 1.生成迁移计划 进入kafka/bin目录 新建 topic-reassign.json,把要重分区的topic按下面格式写。 { "topics": [{ …

云原生Kubernetes:Kubeadm部署K8S单Master架构

目录 一、理论 1.kubeadm 2.Kubeadm部署K8S单Master架构 3.环境部署 4.所有节点安装docker 5.所有节点安装kubeadm&#xff0c;kubelet和kubectl 6.部署K8S集群 7.安装dashboard 8.安装Harbor私有仓库 9.内核参数优化方案 二、实验 1.Kubeadm部署K8S单Master架构 …

三维模型3DTile格式轻量化压缩处理效率提高的技术方浅析

三维模型3DTile格式轻量化压缩处理效率提高的技术方浅析 随着三维模型在各个领域的广泛应用&#xff0c;对于其格式的轻量化压缩处理和效率提高的需求也越发迫切。本文将介绍一些技术方法&#xff0c;帮助实现三维模型3DTile格式的轻量化压缩处理并提高处理效率。 首先&#x…

Python + Jmeter 实现自动化性能压测

Step01: Python脚本开发 文件路径&#xff1a;D://wl//testproject//Fone-grpc//project1//test_client.py Python 脚本作用&#xff1a; 1.通过 grpc 调用底层 c 的接口&#xff0c;做数据库的数据插入与查询操作&#xff0c;然后将返回的结果进行拼接与输出。 2.代码里面…

华为OD七日集训第4期 - 按算法分类,由易到难,循序渐进,玩转OD

目录 一、适合人群二、本期训练时间三、如何参加四、7日集训第4期五、精心挑选21道高频100分经典题目&#xff0c;作为入门。第1天、数据结构第2天、滑动窗口第3天、贪心算法第4天、二分查找第5天、分治递归第6天、深度优先搜索dfs算法第7天、宽度优选算法&#xff0c;回溯法 六…

14.Xaml ProgressBar控件 进度条控件

1.运行效果 2.运行源码 a.Xaml源码 <Grid Name="Grid1"><!--Orientation="Horizontal" 进度条的方向 水平的还是垂直的Value="40" 进度的数值Minimum="0" 最小值Maximum

2023最新计算机信息管理毕设选题分享

文章目录 0 前言1 java web 管理系统 毕设选题2 java web 平台/业务系统 毕设选题3 游戏设计、动画设计类 毕设选题 (适合数媒的同学)4 算法开发5 数据挖掘 毕设选题6 大数据处理、云计算、区块链 毕设选题7 网络安全 毕设选题8 通信类/网络工程 毕设选题9 嵌入式 毕设选题10 开…

【大数据】基于 Flink CDC 高效构建入湖通道

基于 Flink CDC 高效构建入湖通道 1.Flink CDC 核心技术解析2.CDC 数据入湖入仓的挑战2.1 CDC 数据入湖架构2.2 CDC 数据 ETL 架构 3.基于 Flink CDC 的入湖入仓方案3.1 Flink CDC 入湖入仓架构3.2 Flink CDC ETL 分析3.3 存储友好的写入设计3.4 Flink CDC 实现异构数据源集成3…

网络编程套接字 | 预备知识

在之后的文章中我们将来讲解网络编程中的相关知识点&#xff0c;再本文中我们首先来讲解一下网络编程中的预备知识&#xff1a; 预备知识 源IP地址和目的IP地址 在IP数据包中有两个IP地址分别是源IP地址和目的IP地址&#xff0c;此时这里就会出现一个问题就是&#xff1a;如…

Flullter学习第一天:什么是Flullter与Flullter安装

1.简介 Flutter使用dart作为主要开发语言,开发后可多端编译,并且能调用原生api 2.安装 官网:Install | Flutter 让我们读下为中国用户特制的文档,访问中国官网 Flutter: 为所有屏幕创造精彩 - Flutter 中文开发者网站 - Flutter 获取 Flutter SDK 点击下方的安装包&#x…

JavaScript中的原型链(prototype chain)

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ JavaScript中的原型链⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏…

video标签自动播放音视频并绘制波形图

html中的<video>标签可以用来播放常见的音视频格式&#xff0c;支持的格式包括:MP3、Ogg、WAV、AAC、MP4、WebM、AVI等&#xff0c;当然支持的格式也和浏览器和操作系统有关。这里以一个可以自动播放音视频并绘制波形图的页面为例说明一下<video>标签的用法。 vid…