前端学习——CSS学习

已于 2024-03-20 10:42:58 修改
阅读量1k 收藏 24
点赞数 7
分类专栏： 前端 文章标签： 前端 学习 css
于 2024-02-23 10:22:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46638350/article/details/136228947
版权

文章目录

1. 盒子模型

margin、border、padding、content的关系

  • margin：外边距（块元素之间的距离）
  • border：边框
  • padding：内边距（边框跟内容的距离）
  • content：内容

在这里插入图片描述
样式设置

（1）padding-left:10px; 左内边距

（2）padding-right:10px; 右内边距

（3）padding-top:10px; 上内边距

（4）padding-bottom:10px; 下内边距

（5）padding:10px; 四边统一内边距

（6）padding:10px 20px; 上下、左右内边距

（7）padding:10px 20px 30px; 上、左右、下内边距

（8）padding:10px 20px 30px 40px; 上、右、下、左内边距

2. px、em、rem 设置大小

  • 一、px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
  • 二、em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。

em

  • 子元素font-size的em，是相对于父元素font-size
  • 元素的width/height/padding/margin的em，是相对于该元素的font-size
<div>
    父元素div
    <p>
       子元素p
        <span>孙元素span</span>
    </p>
</div>

div {
	font-size: 40px;
    width: 7.5em; /* 7.5 * 40px == 300px */
    height: 7.5em;
    border: solid 2px black;
}

p {
    font-size: 0.5em; /* 0.5 * 40px == 20px */
    width: 7.5em; /* 7.5 * 20px == 150px */
    height: 7.5em;
    border: solid 2px blue ;
    color: blue;
}

span {
    font-size: 0.5em;
    width: 7em;
    height: 6em;
    border: solid 1px red;
    display: block;
    color: red;
}

在这里插入图片描述
rem

  • rem是全部的长度都相对于根元素，根元素是谁？元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。
<div>
    父元素div
    <p>
       子元素p
        <span>孙元素span</span>
    </p>
</div>

html {
        font-size: 10px;
    }

div {
	font-size: 4rem; /* 40px */
	width: 20rem;  /* 200px */
	height: 20rem;
	border: solid 2px black;
}

p {
	font-size: 2rem; /* 20px */
    width: 10rem;
    height: 10rem;
    border: solid 1px blue;
    color:blue ;
}

span {
	font-size: 1.5rem;
    width: 7rem;
    height: 6rem;
    border: solid 2px red;
    display: block;
    color: red;
}

在这里插入图片描述

3. position 布局

  • static：HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。
  • fixed：元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。
  • relative：相对定位元素的定位是相对其正常位置。
  • absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于< html >

这里relative与absolute比较抽象，所以这里只对这两者进行说明

  • 首先设置正常的文档流
<body>
    <div class="div1">第一个div</div>
    <div class="div2">第二个div</div>
    <div class="div3">第三个div</div>
    <div class="div4">第四个div</div>
</body>

在这里插入图片描述

区别一：

  • relative会占用其原有的位置，并且飘到设定位置
  • absoulte不会占用其原有的位置，而是飘到设定的位置
    在这里插入图片描述
    在这里插入图片描述

区别二：

  • relative是相对于原有的正常位置，移动到指定位置
  • absolute是相对于父元素的正常位置，移动到指定位置
    在这里插入图片描述
    在这里插入图片描述

区别三

  • relative会影响父元素大小
  • absolute不会影响父元素大小
    在这里插入图片描述
    在这里插入图片描述

4. 文本流与文档流

  • 文档流：指的是HTML中元素在计算布局排版。（元素顺序）
  • 文本流：简单来说就是元素内部的一系列的字符的排列规则。（文字顺序）

示例：float脱离文档流，但不脱离文本流。absolute脱离文档流与文本流
在这里插入图片描述
在这里插入图片描述

5. float 浮动

  • 浮动：浮动以后使元素脱离了文档流，但不脱离文本流。（参考上述第4点）
  • 位置：浮动是碰到（父元素、未脱离元素、浮动元素），就会停止，所以不会重叠
  • 方向：浮动只有左右浮动，没有上下浮动

6. z-index属性如何生效

  • 首先将position定义为，absolute、relative或fixed。
    【必须position为以上三个属性，z-index才能层级体现出来，才能起作用】
  • 设置 style 中 z-index:auto
    auto可定义为一个值(整数数字)，越大代表越置前，如可定义为： z-index:9999。
  • 若定义为-1，代表为最底层。
    如果要让div1不被div2遮挡，则将div1的z-index设置比div2大就可以了。

7. 层级规律

脱离状态：未脱离 < 半脱离 < 全脱离
全脱离元素：相同位置、相同z-index的元素，后面的元素会覆盖前面的元素
z-index：全脱离元素，z-index数值大的元素，覆盖z-index数值小的元素

8. 修改样式的两种方式

直接修改元素的样式

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

使用类选择器修改元素样式

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

9. 样式嵌套

规则
在这里插入图片描述
示例
在这里插入图片描述

总结

1. 未脱离、半脱离、全脱离

1. 位置

  • 未脱离：元素按照文档流的顺序，依次排列。
  • 半脱离：碰到（父元素、未脱离元素、浮动元素），就会停止。
  • 全脱离：按照position各自的特性，移动到指定位置

2. 层级

  • 脱离状态：未脱离 < 半脱离 < 全脱离
  • 全脱离元素：相同位置、相同z-index的元素，后面的元素会覆盖前面的元素
  • z-index：全脱离元素，z-index数值大的元素，覆盖z-index数值小的元素
后端漫漫
关注
  • 7
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html与css中em怎么用,css中em什么意思
weixin_33577842的博客
06-16 1240
em是css中的一个相对长度单位，相对于当前对象内文本的字体尺寸；如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器默认字体尺寸。可以作用在width、height、line-height、margin、border等样式的设置上。本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。CSS中有众多单位，常用的px是绝对单位，em则是相对单位。在响...
前端学习——页面布局
weixin_51748707的博客
05-20 2783
1.常见的五种布局方式 1.静态布局： 给页面元素设置固定的宽度和高度，单位用px，当窗口缩小，会出现滚动条，拉动滚动条显示被遮挡内容。 优点：设计简单。 缺点：对于不同尺寸屏幕的兼容性不好，特别是移动端。 2.流式布局： 元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化。 优点：页面元素宽高可以自适应调整。 缺点：屏幕尺度跨度过大的情况下，页面不能正常显示。 3.自适应布局： 屏幕尺寸或分辨率变化时，页面元素会跟着变化。 缺点：页面元素不会随着窗口大小的调整而发生变化
CSS中强大的EM（转）
萌萌的It人 www.itmmd.com
05-24 3913
使用CSS也好久了，但一直都是在使用“px”来设置Web元素的相关属性，未敢使用“em”。主要原因是，对其并不什么了解，只知道一点概念性的东西，前段时间在项目中要求使用“em”作为单位设置元素，所以从头对“em”学习了一回。稍为有一点理解，今天特意整理了一份博文与大家一起分享，希望对童子们有些许的帮助。 这篇教程将引导大家如何使用“em”来创建一个基本的弹性布局，从而学习其如何计算？又是如何使用
CSS相对单位em
热门推荐
要和代码过一辈子的博客
08-20 1万+
在web环境下，用户可以将浏览器窗口设置为任意大小，且CSS需要去适应它。 响应式 —— 在CSS中，这指的针对不同大小的浏览器窗口，用不同的方式响应更新页面的样式。我们要对不同尺寸的手机、平板电脑或桌面显示器多花心思了。 CSS支持一些绝对长度单位，其中最常见也最基本的是像素（px）。较不常见的绝对单位有毫米（mm，millimeter）、厘米（cm，centimeter）、英寸（in.，i...
css中em的使用方法
weixin_30235225的博客
03-17 507
css中em的使用方法 em的使用方法的总结： 　　1. 浏览器的默认字体大小是16px，可以在浏览器中设置默认的字体大小（下面的Chrome浏览器的设置方法） 　　2. em是一个相对的单位，是当前元素相对于父元素字体的大小而言的；例如：父元素设置font-size: 32px ，子元素设置font-size: 1em ，那么子元素的字体大小也是32px 　　3. ...
css单位em用法
lianflower的博客
09-01 307
【代码】css单位em用法。
前端学习————css实现简单登录页面
qq_63606575的博客
03-13 6279
css实现简单登录页面一、页面展示二、思路1.设置背景图片2.设置登录框框并使其处于靠右位置3.设置登录框框内容三、代码展示1.HTML2.css 一、页面展示 二、思路 1.设置背景图片 2.设置登录框框并使其处于靠右位置 3.设置登录框框内容 三、代码展示 1.HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>个人中心</
前端系列——CSS
qq_51553982的博客
08-29 596
px是指像素的意思，1px就是一个像素点，是我们常用的长度单位。
前端学习笔记——CSS篇
qq_44776454的博客
07-03 65
** 前端学习笔记——CSS篇 ** 字体图标（1）——iconfont阿里巴巴矢量图 简单说说字体图标的优点： 1.轻量性：一个图标字体要比一系列的图像要小，一旦字体加载了，图标就会马上渲染出来，减少服务器请求压力。 2.灵活性：字体图标其实本质上是字体，可以很随意得改变颜色，产生阴影，做出透明效果，旋转等等… 3.兼容性几乎支持所有主流浏览器。 ————————————————————————————————————————————— 说到字体图标就不得不提一下精灵图（Sprites）： Spr
【前端学习——css模块化】
Everglowwwwww的博客
05-08 292
在外部管理 CSS，然后将类名映射到组件内部，他会为每个 class 都分配一个全局唯一 hash。为选择器增加冗长的前缀或后缀，来生成全局唯一的命名。
web前端基础——CSS入门
01-20
web前端基础——CSS入门 1.css的引入方式 内部样式： 直接在style里面写 内联样式： 外部样式表 2.css选择器 id选择器： #id名{} Hello World! #para1 { text-align:center; color:red; } ID属性不要以...
前端学习（二）——css3学习
08-09
前端学习（二）——css3学习
狂神Java学习笔记————前端入门——html、css、JavaScript学习代码
06-17
【狂神Java学习笔记——前端入门——HTML、CSS、JavaScript学习代码】是针对初学者的一份详实的学习资料，这份笔记记录了跟随B站知名up主“遇见狂神说”的java系列视频中关于前端开发的基础内容。笔记内容不仅与视频...
WEB前端面试——常见CSS知识点
06-30
WEB前端面试——常见CSS知识点 CSS是一种标记语言，用于描述网页的样式和布局。以下是常见的CSS知识点： 一、CSS盒子模型 CSS盒子模型分为标准盒模型（content-box）和怪异盒模型（border-box）。标准盒模型的...
CSSCheckStyle——CSS的解析、检查、修复与压缩
04-24
《CSSCheckStyle——CSS的解析、检查、修复与压缩》 在前端开发中，CSS（层叠样式表）是构建网页样式的重要工具，它决定了页面的布局和视觉表现。然而，随着项目规模的扩大，CSS代码往往变得越来越复杂，易读性和可...
Vuex 核心揭秘：打造高效前端状态库
a3098448071的博客
07-03 1035
状态（State）类似于 Vue 组件的data属性，用于存储组件的响应式数据。在 Vuex 中，state用于存储整个应用的全局状态。Getters类似于 Vue 组件的computed计算属性，它们用于从其他数据派生出新的数据。在 Vuex 中，getters用于从state中派生出一些状态，这些状态可以根据state的变化而缓存或重新计算。Mutations类似于 Vue 组件的methods中的方法，用于改变组件的data。在 Vuex 中，mutations用于改变state。
WHAT - NextJS 的路由系统和 react-router-dom
最新发布
weixin_58540586的博客
07-04 808
不，Next.js 的路由系统并不基于。Next.js 本身内置了自己的路由系统，并且在其生命周期和工作方式上与有所不同。
在 .NET 8 Web API 中实现弹性
技术探索驿站
07-03 547
通过执行这些步骤，您已使用 Microsoft.Extensions.Http.Resilience 库将弹性集成到 .NET 8 Web API 项目中。重试策略、断路器设置和超时将有助于确保您的 API 能够抵御瞬时故障，从而提高其可靠性和用户体验。
【vueUse库Component模块各函数简介及使用方法--上篇】
xiejunlan的博客
07-02 1307
vueUseComponent函数理解 `computedInject` 的概念模拟 `computedInject`使用场景总结构想`createReusableTemplate`的用途可能的实现方式方法一：使用高阶组件（HOC）方法二：使用插槽（Slots）和默认插槽内容结论构想`createTemplatePromise`的用途可能的实现方式使用Vue 3的异步组件构想中的`createTemplatePromise`结论使用Vue的`ref`属性在模板中引用元素或组件示例：引用模板中的DOM元素。
前端学习笔记-黑马程序员CSS
01-09
前端学习笔记-黑马程序员CSS

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值