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

零基础学前端（四）重点讲解 CSS

news 文章来源：https://blog.csdn.net/tengyuxin/article/details/132895122 2024/11/20 20:29:21

1. 该篇适用于从零基础学习前端的小白

2. 初学者不懂代码得含义也要坚持模仿逐行敲代码，以身体感悟带动头脑去理解新知识

3. 初学者切忌，不要眼花缭乱，不要四处找其它文档，要坚定一个教授者的方式，将其学通透，才是好的学习方式。

4. 本篇css我不会讲具体样式如何写，因为这些小细节，你只需搜索自己便可以学会。我侧重于css的核心概念

（盒子模型---认识元素的构成、选择器---找到被操作的元素、flex布局---操作元素位置摆放）

一、CSS概念

它名字叫 层叠样式表(英文全称：Cascading Style Sheets)是用来设计HTML表现的。

我们最重要的是明白它的“层叠”的意义，也就是样式之间可以覆盖。 

二、盒子模型

盒子模型的概念有助于我们认识元素的基本构成

1. 盒子模型的基本组成 

我们把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。

宽度(width) = content宽度 + padding-left(左内边距) + padding-right(右内边距) +

borde-left + border-right + margin-left + margin-right

=》高度组成同理

2. 使用chrome的开发者工具查看元素结构

使用chrome的开发者工具，查看css样式、网络请求是常用的开发手段，可以方便开发者快速定位到问题，目前我只介绍查看css样式

当然也可以直接按f12，有的电脑可能需要按Fn + F12才可以打开开发者工具

三、CSS 的常用选择器：class(类选择器) 、id 、标签选择器

选择器的意义就是帮助开发者找到要被操作的元素

1. class 和 标签选择器的使用

经过之前的实践你应该至少使用过 class 和 标签选择器。如下代码

<style>/* class 类选择器 */.leftTopBox{  }/* 标签选择器：它表示leftTopBox这个类选择器，下面的所有li标签 */.leftTopBox li{}</style><body><ul class="leftTopBox"><li>新闻</li><li>hao123</li><li>地图</li><li>贴吧</li><li>视频</li><li>图片</li><li>网盘</li><li>更多</li></ul>
</body>

2. id 选择器的使用方法

 <style>/*id选择器*/#head{color: aquamarine;}</style><body><div id="head"></div></body>

3. 层叠样式，就是样式之间可以覆盖

接下来我们样式，假设id、class 两个选择器，都对同一个元素赋值了样式，效果会如何

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>#head{color: green;}.head2{color: red;}</style></head><body><div id="head" class="head2">我到底是什么颜色</div></body>
</html>

经过实我们看到 id 选择器，大于 class选择器，剩下初学者自己实践就好。

四、flex布局

为什么直接推荐学习使用flex布局呢？

因为在pc端、App、小程序都是统一支持Flex布局的，一劳永逸。

这里我不想重复介绍，直接借用阮一峰老师的博文。初学者学习基本布局就好，以后实战逐步深入

Flex 布局教程：实例篇 - 阮一峰的网络日志

五、结束语

没有任何一篇博客可以百分百将知识讲完、讲透，学习只能是一步一步实践才会学的更多更深入。我个人认为初学时，学的内容逻辑简单、思路清晰最重要，所以我只是挑取核心部分，初学者理解后，可直接上手项目，这就是我的思想逻辑。

css知识有很多，我不建议初学者去事无巨细的学每个知识点，我的看法是，带着问题，以实践的方式先将我博客逻辑跑通，让你对前端有个整体观念（从基础到最后发布网站，别人可以访问），到时你自己补充剩余。

记下来看我js更新吧（努力中。。。）

相关文章：

零基础学前端（四）重点讲解 CSS

1. 该篇适用于从零基础学习前端的小白 2. 初学者不懂代码得含义也要坚持模仿逐行敲代码&#xff0c;以身体感悟带动头脑去理解新知识 3. 初学者切忌&#xff0c;不要眼花缭乱&#xff0c;不要四处找其它文档&#xff0c;要坚定一个教授者的方式&#xff0c;将其学通透&#xff…...

编程日记 2023/9/16 3:00:38

类和对象【初始化列表与友元】

全文目录 初始化列表特性 explicit关键字static成员特性 友元友元函数友元类内部类特性 初始化列表 构造函数体中的语句只能将其称为赋初值&#xff0c;而不能称作初始化。因为初始化只能初始化一次&#xff0c;而构造函数体内可以多次赋值。 对象的初始化是在初始化列表进行…...

编程日记 2023/9/16 2:59:37

ActiveRecord::Migration.maintain_test_schema!

测试gem&#xff1a; rspec-rails 问题描述 在使用 rspec-rails 进行测试时&#xff0c;出现了以下错误 ActiveRecord::StatementInvalid: UndefinedFunction: ERROR: function init_id() does not exist这个错误与数据库架构有关。 schema.rb中 create_table "users…...

编程日记 2023/9/16 2:57:32

逆向-beginners之helloworld

#include <stdio.h> int _main() { printf("hello world.\n"); return 0; } // 上面的代码等效于&#xff1a; char *SG3830[] {"hello, world\n"}; int main() { printf("%s", *SG3830); return 0; } #if 0 /* * i…...

编程日记 2023/9/16 2:56:30

如何微调甜甜圈模型——使用示例

Python 中的 Donut 模型可用于从给定图像中提取文本。这在各种场景中都很有用，例如扫描收据。 您可以轻松地。但与人工智能模型一样，您应该根据您的特定需求微调模型。 我编写本教程是因为我没有找到任何资源来准确展示如何使用我的数据集微调 Donut 模型。因此，我必须从其…...

编程日记 2023/9/16 2:54:27

小程序中如何查看指定会员的付款记录

在小程序中&#xff0c;我们可以通过一些简单的步骤来查看指定会员的付款记录。下面是具体的操作流程&#xff1a; 1. 找到指定的会员卡。在管理员后台->会员管理处&#xff0c;找到需要查看付款记录的会员卡。也支持对会员卡按卡号、手机号和等级进行搜索。 2. 查看会员卡…...

编程日记 2023/9/16 2:52:25

LeetCode_贪心算法_困难_630.课程表 III

目录 1.题目2.思路3.代码实现&#xff08;Java&#xff09; 1.题目 这里有 n 门不同的在线课程&#xff0c;按从 1 到 n 编号。给你一个数组 courses &#xff0c;其中 courses[i] [durationi, lastDayi] 表示第 i 门课将会持续上 durationi 天课&#xff0c;并且必须在不晚于…...

编程日记 2023/9/16 2:51:24

Drozer安装

Drozer安装包下载 https://labs.withsecure.com/tools/drozer Drozer需要的python包下载 pip install "pip<21.0" pyOpenSSL pip install "pip<21.0" service_identity pip install "pip<21.0" twisted pip install "pip<…...

编程日记 2023/9/16 2:50:23

752. 打开转盘锁

链接&#xff1a; 752. 打开转盘锁 题解&#xff1a; class Solution { public:int openLock(vector<string>& deadends, string target) {std::unordered_set<std::string> table(deadends.begin(), deadends.end());if (table.find("0000") ! t…...

编程日记 2023/9/16 2:49:22

Bearly：基于人工智能的AI写作文章生成工具

【产品介绍】 名称 Bearly 具体描述 Bearly是一个AI人工智能内容创作工具。你可以用Bearly来阅读、写作、创作&#xff0c;提高你的效率。包括使用Bearly来生成网页的摘要、标题、关键点&#xff0c;也可以用Bearly来生成创意内容、艺术图片、文案编辑等。帮助你克…...

编程日记 2023/9/16 2:48:22

详解哈希，理解及应用

全文目录 概念哈希冲突及原因解决哈希冲突的方法闭散列线性探测二次探测扩容 开散列扩容 哈希的应用位图布隆过滤器 概念 通过映射关系将关键字映射到存储位置&#xff0c;并实现增删改查操作。 通过上面的方法构造出来的结构就叫哈希表&#xff08;散列表&#xff09;&#x…...

编程日记 2023/9/16 2:47:19

解决js加减乘除精度丢失问题

公共类, 将科学计数法的数字转为字符串(以下加减乘除依赖该方法) var toNonExponential (num)> {if(num null) {return num;}if(typeof num "number") {var m num.toExponential().match(/\d(?:\.(\d*))?e([-]\d)/);return num.toFixed(Math.max(0, (m[1] …...

编程日记 2023/9/16 2:46:18

八股——const 关键字

1.const作用 作用&#xff1a;const用于保护指针指向数据不被修改 测试代码1 显示数组的函数不小心修改了指针指向的值&#xff0c;这时候没有加const关键字&#xff0c;编译器不会报错 #include <stdio.h> void showar(int ar[]);int main(void) {int ar[4]{2,3,4,5…...

编程日记 2023/9/16 2:45:16

QT object元对象

qt中的元对象系统提供了对象间通信的信号和槽机制、运行时类型 信息和动态属性系统&#xff1b; 1.该类必须继承自QObject类&#xff1b; 2.必须在类的私有声明区声明Q_OBJECT宏&#xff08;在类定义时&#xff0c;如果没有指定&#xff0c;public或private,则默认为private&a…...

编程日记 2023/9/16 2:41:11

互斥锁，条件变量，信号量的三个小demo

仨demo 一、 一个线程读文件&#xff0c;另一个线程将读取的内容输出到终端 1.1 要求 创建两个线程&#xff0c;其中一个线程读取文件中的数据&#xff0c;另外一个线程将读取到的内容打印到终端上&#xff0c;类似实现cat一个文件。 cat数据完毕后&#xff0c;要结束两个线…...

编程日记 2023/9/16 2:40:10

【UE 材质】力场护盾和冲击波效果

目录 效果 步骤 一、制作力场护盾材质 二、制作冲击波材质效果 三、制作冲击波粒子效果 四、制作震动效果 效果 步骤 一、制作力场护盾材质 1. 首先新建一个第一人称角色游戏模板 2. 新建一个材质&#xff0c;用于作为力场护盾的材质&#xff0c;这里命名为“Mat_for…...

编程日记 2023/9/16 2:37:04

类和对象三大特性之多态

全文目录 虚函数虚函数的重写接口继承和实现继承重载、重写&#xff08;覆盖&#xff09;、隐藏&#xff08;重定义&#xff09;C11 override 和 final抽象类 多态的概念多态原理虚函数表 单继承和多继承的虚函数表打印虚函数表单继承的虚函数表多继承的虚函数表 常见面试问答题…...

编程日记 2023/9/16 2:36:03

为何红黑树在B/B+树之上仍然占据重要地位？

为何红黑树在B/B树之上仍然占据重要地位&#xff1f; 引言二、红黑树和B/B树的基本原理2.1、红黑树的特点和性质2.2、B/B树的特点和性质2.3、红黑树和B/B树的比较 三、B/B树相对于红黑树的优势四、红黑树仍然占据重要地位的原因总结 博主简介 &#x1f4a1;一个热爱分享高性能服…...

编程日记 2023/9/16 2:35:02

【算法专题突破】滑动窗口 - 水果成篮（13）

目录 1. 题目解析 2. 算法原理 3. 代码编写 写在最后&#xff1a; 1. 题目解析 题目链接&#xff1a;904. 水果成篮 - 力扣&#xff08;Leetcode&#xff09; 题目有很长一段话&#xff0c;但是我们读一遍题目可以提炼转化出题目的要求 &#xff1a; 其实就是找出一个最长…...

编程日记 2023/9/16 2:33:00

Peppercontent.io：人工智能驱动的内容生成工具

【产品介绍】​ 名称 Peppercontent.io 成立时间​ 成立于2017年 具体描述 Peppertype.ai 是一种基于GPT-3的AI辅助工具&#xff0c;而GPT-3则是一种深度学习自回归语言模型。这一技术潜藏着巨大的潜力&#xff0c;可以立刻为企业和创作者提供创意内容&…...

编程日记 2023/9/16 2:31:59

docker镜像管理-实操

一.docker镜像管理 1.拉取镜像 docker image pull <repository>:<tag> 镜像名称和标签使用 : 进行分隔&#xff0c;如果省略了标签&#xff0c;则默认为 latest docker image pull nginx:latest 或者docker pull nginx:latest 拉取下来的镜像默认保存在&#xff1…...

编程日记 2023/9/16 2:28:56

SpringMVC-----JSR303以及拦截器

目录 JSR303 什么是JSR303 JSR303的作用 JSR303常用注解 入门使用 拦截器是什么 拦截器的工作原理 拦截器的作用 拦截器的使用 JSR303 什么是JSR303 JSR303是Java为Bean数据合法性校验提供给的标准框架&#xff0c;已经包含在JavaEE6.0中1。 JSR303通过在Bean属性中标…...

编程日记 2023/9/16 2:26:52

基于若依框架实现markdown在线编辑

基于若依框架实现markdown在线编辑 1. 下载mavon-editor npm install mavon-editor --save2. 打开main.js文件, 添加如下 // markdown组件 import { mavonEditor } from "mavon-editor"; import "mavon-editor/dist/css/index.css";// markdown组件 Vue…...

编程日记 2023/9/16 2:23:49

CentOS7上从0开始搭建Zookeeper集群

CentOS7上搭建Zookeeper集群 环境准备安装jdk安装zookeeper下载zookeeper解压zookeeper修改zookeeper配置文件 搭建zookeeper集群修改zoo.cfg文件添加myid文件启动zookeeper集群 环境准备 首先你需要准备三台zookeeper&#xff08;待会会讲zookeeper的安装流程&#xff09;&am…...

编程日记 2023/9/16 2:22:48

康耐视读码器DataMan软件详细使用步骤

1、 点击桌面已经安装好的 dataman 软件并打开 2、 打开之后，点击刷新，刷出来读码器的图标，双击进行连接，或者选中后，点击右下角 的连接。（也可先进行第 9—（2）步更改读码器的 IP，对应的连接对象也更改到同一网 段）如图 3、 连接之后，在设置 快速设置下面把实时显…...

编程日记 2023/9/16 2:21:47

408强化（番外）文件管理

有点看不下去书&#xff0c;408&#xff0c;哎好久没看了&#xff0c;死磕数学时完全不想看其他科目&#xff0c;数学分数也尚未质变。 突然想到一个好点子&#xff0c;只看大纲尝试回忆一下这章的内容。 文件就是为了方便用户使用&#xff0c;按名访问而提出的&#xff0c;从…...

编程日记 2023/9/16 2:19:45

iptables 防火墙配置

文章目录 iptables 防火墙配置规则链的分类–五链处理的动作iptables 常用参数和作用iptables 防火墙配置查看规则链清空规则链设置默认规则将流入的流量丢弃允许ICMP协议流量通过删除默认策略允许所以流量通过设置将所有流入22端口的流量全部拒绝允许指定网段的22端口通过设置…...

编程日记 2023/9/16 2:18:44

面试官：我们深入聊聊Java虚拟机吧

哈喽&#xff01;大家好&#xff0c;我是奇哥&#xff0c;一位专门给面试官添堵的职业面试员 文章持续更新&#xff0c;可以微信搜索【小奇JAVA面试】第一时间阅读&#xff0c;回复【资料】更有我为大家准备的福利哟&#xff01; 文章目录 前言面试Java虚拟机内存模型垃圾收集器…...

编程日记 2023/9/16 2:17:43

【电源专题】案例：异常样机为什么只在40%以下电量时与其他样机显示电量差异10%，40%以上电量差异却都在5%以内。

本案例发生在一个量产产品的测试中，因为产品带电池，所以需要测试产品对于电池电量显示的精确程度。产品使用的是最简单的开路电压查表法进行设计。 案例测试报告的问题在于不同样机之间电量百分比存在差异，大部分是在3%~4%之间。但在7.2V电压时，能够差异10%左右。 在文章：…...

编程日记 2023/9/16 2:16:42

React 全栈体系（七）

第四章 React ajax 一、理解 1. 前置说明 React本身只关注于界面, 并不包含发送ajax请求的代码前端应用需要通过ajax请求与后台进行交互(json数据)react应用中需要集成第三方ajax库(或自己封装) 2. 常用的ajax请求库 jQuery: 比较重, 如果需要另外引入不建议使用axios: 轻…...

编程日记 2023/9/16 2:14:40

网站后台管理产品排序/搜索引擎优化的主要工作

目录&#x1f6a9; 一、起因✈️ 二、经过⌛ 1、开始准备&#x1f4d5; 2、学习过程&#x1f5a5;️ 3、练习过程&#x1f33b; 三、总结本文非广告&#xff01; 仅复盘前段时间考CSDN认证的经历&#xff0c;将归纳和总结分享给大家&#xff0c;如果对您有帮助的话&#xff0c;…...

编程日记 2024/11/20 16:51:00

网站优化免费软件/安卓系统最好优化软件

分享一个php版本的查询天气接口。免费查询天气的接口有很多&#xff0c;比如百度的apistore的天气api接口&#xff0c;我本来想采用这个接口的&#xff0c;可惜今天百度apistore死活打不开了。那就用聚合数据的天气api接口吧&#xff0c;也是免费的&#xff0c;不过聚合数据的接…...

编程日记 2024/11/20 15:10:42

做彩票网站要什么接口/网络推广优化方案

一、函数的基本概念 1.1 函数在数学中的概念 函数指一个量随着另一个量的变化而变化。 函数的数学形式&#xff1a;yf(x) f是一种定义好的关系&#xff0c;可以简称为函数&#xff0c;在函数f中&#xff0c;只要x值的确定&#xff0c;那么y的值一定是确定的。y的值随x值的变化…...

编程日记 2024/11/20 11:42:34

html5 网站建设方案/长沙百度关键词排名

在日前召开的“2016中国无线技术与应用大会”上&#xff0c;工业信息化部无线电管理局副局长阚润田表示&#xff0c;经过多年努力&#xff0c;我国已建成了世界上最大的4G网络&#xff0c;拥有了全球第一的用户数&#xff0c;成为全球最具增长性的信息消费市场。 同时&#xff…...

编程日记 2024/11/20 10:43:39

如何用浏览器访问本地的wordpress/小程序怎么开发自己的小程序

链接&#xff1a;https://www.luogu.org/problemnew/show/P3919 分析 很明显我们可以用主席树来维护&#xff0c;所谓主席树就是可持久化线段树&#xff0c;能够查询历史版本而且可以实现修改操作&#xff0c;反正就是复制了一遍。其原理就是动态开点复制前驱版本&#xff0c;在…...

编程日记 2024/11/20 9:49:51

主题之家wordpress/百度点击器找名风

前几天有朋友问到歌词滚动应该怎么做&#xff0c;针对歌词滚动这个功能做了一个简单的案例&#xff0c;仅供参考&#xff0c;大家如果有更好的做法记得call我们一下&#xff01;按照惯例&#xff0c;我们先看一下这个效果是怎样的点这里预览&#xff1a;https://o0piel.axshare…...

编程日记 2024/11/20 9:08:45