CSS/HTML/DOM
关注
分享
扫一扫
文章平均质量分 77
CSS/HTML/DOM
Chx.zhang
这个作者很懒，什么都没留下…
展开
-
【HTML】前端必须要知道的html中的meta标签，有哪些属性？
meta标签的自定义属性实在太多了。所以只总结了一些常用的，希望对大家有所帮助。原创 2022-07-18 14:58:48 · 4684 阅读 · 0 评论 -
【CSS3】object-fit与object-position及替换元素
object-fit、object-positionCSS3中的两个属性：object-fit和object-position，这两个属性主要是为了处理可替换元素（replaced elements）的自适应问题(长款比例)。那什么是可替换元素呢？可替换元素什么是可替换性元素呢？MDN是这样定义的：在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。简单来说，它们的内容不受当前文档的样式原创 2022-01-04 12:26:20 · 973 阅读 · 0 评论 -
【CSS】基本重要概念：包含块
什么是包含块？关于包含块的定义，引用MDN定义：一个元素的尺寸和位置经常受其包含块(containing block)的影响。大多数情况下，包含块就是这个元素最近的祖先块元素的内容区，但也不是总是这样。由根元素生成的包含块叫做 初始包含块（initial containing block）。包含块的作用包含块内包含的元素的尺寸（width\height\padding\margin）及位置绝对定位元素的偏移值（position: absolute\fixed时的top\bottom\right原创 2021-12-27 10:02:26 · 1801 阅读 · 0 评论 -
【CSS】background各属性一览汇总
前言：某天上班打开未关机电脑，发现电脑自动打补丁，谷歌浏览器也更新了，但打开项目后发现，设置的背景图竟然未铺满整个div box。原本设置： { background: url('../../xxx.png') no-repeat 100% 100%; }必须设置： { background: url('../../xxx.png') no-repeat 100%/cover; }这时才能显示为铺满效果。经过尝试发现，我电脑更新后的谷歌浏览器，按照背景图比例显示图像，未进行拉原创 2021-12-20 14:31:47 · 16819 阅读 · 0 评论 -
【CSS】改掉5 个 CSS 编码坏习惯
今天我要分享的是我总结的一些CSS编程坏习惯。希望你在编写CSS代码时，可以扬长避短，一切顺利。1. 先给所有元素定义相同的属性，然后重置其中之一关于这个如何设置一些属性然后再重新设置的问题，让我觉得很纳闷，因为我本身比较倾向于使用简短的CSS。在元素之间设置边距时很容易出现问题。这个时候大多数人会怎么做呢？首先，他们设置所有元素，然后把第一个或最后一个元素重新设置。不要这样做：.item { margin-right: 1rem;}// 最后一个元素重新设置.item:last-chil原创 2021-09-27 11:39:36 · 103 阅读 · 0 评论 -
HTML+CSS+JS实例——商品展示图片切换及放大镜功能实现
购物商城 展示图片局部放大功能实现图片局部放大效果结合的知识点主要是DOM的操作，以及事件的应用，所以首先要对DOM的操作有一定了解，其次能对事件的应用有一定的累积。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta nam原创 2021-04-09 16:18:11 · 2157 阅读 · 0 评论 -
【DOM】DOM事件中target和currentTarget
DOM事件中target和currentTarget的概念：target和currentTarget都是事件对象中的属性target是指获取事件的目标，是触发事件的真实元素currentTarget是指其事件处理程序当前正在处理事件的那个元素，是事件绑定的元素DOM事件中this和currentTarget的关系：在事件处理程序内部，对象this始终等于currentTarget的值。DOM事件中target和currentTarget的关系:相等：当事件处理程序直接绑定在目标元素上原创 2021-04-08 15:09:56 · 803 阅读 · 0 评论 -
【DOM】DOM事件和DOM操作总结
文章目录前言一、DOM事件1 事件级别2 事件的分类3 事件模型和事件流4 Event 对象常见应用二、常用DOM操作1 在DOM中，创建、添加、删除、移除、替换、插入和查找节点2 一些常用的 HTML DOM 属性：前言DOM是文档对象模型，DOM是W3C的标准。DOM定义了访问HTML和XML文档的标准，即独立于平台和语言的接口。W3C DOM标准分为以下三个标准:核心DOM --针对任何结构化文档的标准模型XML DOM–针对XML文档的标准模型HTML DOM–针对HTML文档的原创 2021-03-10 10:10:45 · 658 阅读 · 0 评论 -
【CSS】CSS元素隐藏：display:none | visibility:hidden | opacity:0 的区别
我们有几种方式可以隐藏一个元素：CSS position绝对定位，使元素位于可视范围外type="hidden"的表单元素。宽度和高度都显式设置为0。CSS display的值是none。CSS visibility的值是hiddenCSS opacity的值是0下面重点是说一下常用即面试常被问到的三种隐藏元素方式：display: none | visibility: hidden opacity: 0基本功能：display: none: 元素自身及后代元素都会隐藏，隐藏后的元素无原创 2021-04-07 09:10:26 · 1395 阅读 · 4 评论 -
【CSS】CSS布局：两栏布局、三栏布局、水平垂直居中
1. 页面布局三栏布局题目：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为 300px，中间自适应。五种方式：float布局：优点： 比较简单，兼容性也比较好。只要清除浮动做的好，是没有什么问题的；缺点：浮动元素是脱离文档流，要做清除浮动，这个处理不好的话，会带来很多问题，比如高度塌陷等。absolute布局：优点：很快捷，设置很方便，而且也不容易出问题；缺点：绝对定位是脱离文档流的，意味着下面的所有子元素也会脱离文档流，这就导致了这种方法的有效性和可使用性是比较差的。flex布局：优点原创 2021-03-04 16:42:54 · 1526 阅读 · 0 评论 -
【CSS】CSS Image Map：图片地图实现
什么是图片地图？用户点击图片的不同区域，就可以获得不同反馈（比如说跳转到不同的页面、触发不同的事件）的技术。实现:源码：<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="keywords" content="JS代码,地图,图片地图,css地图"原创 2021-03-02 11:26:00 · 1105 阅读 · 0 评论 -
【CSS】CSS盒模型
文章目录基本概念：标准模型与IE模型的区别：标准模型与 IE 模型的区别在于宽高的计算方式不同如何设置这两种模型**JS如何设置盒模型的宽和高**BFC基本概念：CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height.Padding box: 包围在内容区域原创 2021-03-01 20:41:47 · 282 阅读 · 0 评论 -
【CSS】几种CSS元素定位方法
自定义网页布局： https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layoutposition定位relativeabsolutefloat布局leftrightclearflex布局概念 让布局变得灵活和直观 容器自己决定如何均匀分配它的子元素 – 包括子元素的大小和相互之间的间隔。 自动调整子元素的高和宽，来很好的填充任何不同屏幕大小的显示设备中的可用显示空间 适用于应用组件和小比例布局 flex item(flex原创 2021-02-24 10:39:22 · 3804 阅读 · 0 评论 -
【CSS】几种尺寸单位
%： 百分比pt： 磅 (1 pt 等于 1/72 英寸)px： 像素 (计算机屏幕上的一个点)em1em 等于当前的字体尺寸; 2em 等于当前字体尺寸的两倍。如果某元素以 12pt 显示，那么 2em 是24pt。在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字体。 缺点：多层嵌套，计算麻烦<body> <div> Test <!-- 14 * 1.2 = 16.8px --> &l.原创 2021-02-23 17:26:49 · 1615 阅读 · 0 评论 -
【CSS】Formatting Context——BFC&IFC
Formatting ContextFormatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，有一套渲染规则决定了其子元素将如何定位，以及和其他元素的关系和相互作用。Formatting context的种类Block fomatting context (BFC）：块级格式化上下文Inline formatting context (IFC）：行内格式化上下文Flex formatting context（FFC）：CSS3中的flex布局原创 2020-08-20 19:00:16 · 350 阅读 · 0 评论