HTML+CSS 查漏补缺

目录

  • 1,HTML
    • 1,尺寸的百分比
      • 1,普通元素
      • 2,绝对(固定)定位元素
      • 3,常见百分比
    • 2,form 表单元素
      • 1,form
      • 2,button
      • 3,label
      • 4,outline
      • 5,text-indent
      • 6,radio
    • 3,布尔属性
    • 4,contenteditable
  • 2,CSS
    • 1,透明度颜色样式值
    • 2,resize
    • 3,浮动
    • 4,vertical-align
    • 5,兄弟选择器
    • 6,伪类选择器
    • 7,精灵图(雪碧图)使用
    • 8,定位

1,HTML

1,尺寸的百分比

相对于元素参考系(包含块)。

1,普通元素

相对于最近祖先块元素(一般为父元素)的内容区域(width | height)

举例

.box {width: 500px;height: 300px;padding: 50px; /* 没有影响 */
}
.item {width: 50%; /* == 500px * .5 = 250px */height: 50%; /* == 300px * .5 = 150px */
}
.box {width: 500px;height: 300px;padding: 50px; /* 有影响 */box-sizing: border-box;
}
.item {width: 50%; /* == 500px * .5 - 50 = 200px */height: 50%; /* == 300px * .5 - 50 = 100px */
}

2,绝对(固定)定位元素

相对于祖先元素中,最近的 position 不是 static 的元素的内边距区域((width | height) + padding)

3,常见百分比

常见百分比,除了height 之外,都是相对于 width

css 属性百分比参考系备注
height, top, bottom包含块 height参考系高度受自身内容变化时,设置无效
width, left, right, padding, margin, border包含块 width

2,form 表单元素

1,form

具体参考 阻止表单提交

2,button

MDN - button

1,type。默认值 submit。如果 button 在 form 标签内,默认行为会执行提交表单操作。可设置为 button ,让 button 没有默认行为。

2,form。表示关联的 form 元素。值为 form.id,这样让 button 元素不用放在 form 元素内。

3,reset,重置已选(不会重载页面)。

3,label

MDN - label

可以通过 for="id" 来关联,也可以通过 <label> 包裹来关联。

<form><div><label for="basketball">喜欢篮球</label><input type="checkbox" name="basketball" id="basketball" /></div><div><label><span>喜欢足球</span><input type="checkbox" name="football" /></label></div>
</form>

在这里插入图片描述

4,outline

外边框。表单元素一般设置 outline: none,再自定义样式。

另外,outline不占用盒子尺寸。有的 UI 设计图的尺寸用的是外边框。所以前端开发对尺寸要求严格时,可以用这个。

5,text-indent

定义一个块元素首行文本内容之前的缩进量。效果和 padding-left 类似。

6,radio

通过 name 来关联唯一性

<input type="radio" name="contact" value="mail" />
<input type="radio" name="contact" value="address" />

3,布尔属性

在 html 标签中只需要写属性名即可,不用写属性值。该属性就是 true。

举例

<select multiple disabled><option selected>123</option>
</select><input type="checkbox" checked>

4,contenteditable

contenteditable 表示元素是否可被编辑。富文本编辑器使用该属性实现。

虽然是一个枚举属性,但可以像布尔属性一样,只写属性名默认表示 true。

<div class="box" contenteditable></div>
.box {width: 200px;height: 200px;outline: 1px solid;overflow: auto;resize: both; /* 可调整尺寸 */
}

效果:

在这里插入图片描述

2,CSS

1,透明度颜色样式值

下面3种写法效果相同

div {color: rgba(0, 0, 0, 0.5);color: rgb(0 0 0 / 50%);color: #00000080;
}

2,resize

resize

一般用于控制 <textarea> 是否可以调整尺寸。resize: none 禁止调整。

1,但也能够单独控制一个方向的尺寸变化 vertical horizontal both

2,也能控制其他元素。但不适用下列元素:

  • 内联元素
  • overflow 属性设置为 visible 的块元素

举例:

<div class="box"></div>
.box {outline: 1px solid;width: 200px;height: 200px;overflow: auto;resize: both;
}

效果:

在这里插入图片描述

3,浮动

float 导致父级高度坍塌。
解决:

  • 父级 overflow: hidden 形成BFC
  • 父级增加子元素设置清除浮动 clear:both

一般会设置为通用类

clearfix::after {content: '';display: block;clear: both;
}

4,vertical-align

vertical-align

只对inline inline-block table-cell元素生效。用于控制垂直方向的对齐。

属性值可以是具体数值

<div><input type="checkbox"><span style="font-size: 14px;">这是value</span>
</div>

下面2种方式都可以对齐,具体情况微调即可。

input {vertical-align: -2px;
}
/* 或 */
span {vertical-align: 2px;
}

5,兄弟选择器

CSS组合选择器

/*  一般兄弟组合器,匹配同一父元素下,p 元素后的所有 span 元素。 */
p ~ span {}/*  紧邻兄弟组合器,紧邻 p 元素的第一个 span 元素 */
p + span {}

6,伪类选择器

1,nth-child,所有元素都参与计数,再找指定的元素。

<div><span>span1</span><p>p1</p><span>span2</span><span>span3</span>
</div>
span:nth-child(-n + 3) {color: red;
}span:nth-child(2n + 1) {color: red;
}

上面2种效果相同:

在这里插入图片描述

2,nth-of-type,先确定元素的类型,然后在相同类型的元素中计数。

<div><div>div1</div><p>p1</p><p>p2</p><div>div2</div><p>p3</p><p>p4</p>
</div>
p:nth-of-type(2n + 1) {color: red;
}

效果

在这里插入图片描述

7,精灵图(雪碧图)使用

sprite

降低图片请求次数,提升浏览器加载效率。

通过 background-position 来确定目标图片位置。

div {width: 30px;height: 30px;background: url() no-repeat -100px -100px;/* 简写用的下面的属性 *//* background-position: -100px -100px; */
}

8,定位

1,一个占满全屏的蒙层。

/* 百分比相对视口 */
.mask {position: fixed;left: 0;top: 0;width: 100%;height: 100%;
}

.mask {position: fixed;left: 0;top: 0;bottom: 0;right: 0;
}

,2,绝对定位实现垂直水平居中,居中元素必须有宽高。left top 的百分比,相对于参考系(参考最上面的尺寸百分比)。

3,全屏弹窗 dialog 打开时,通过设置 body { overflow: hidden} 来阻止页面滚动。

4,绝对定位和浮动元素,display: block 并无法更改。


以上,待续。

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

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

相关文章

Multisim软件安装包分享(附安装教程)

目录 一、软件简介 二、软件下载 一、软件简介 Multisim软件是一款电路仿真和设计软件&#xff0c;由美国国家仪器公司&#xff08;National Instruments&#xff09;开发。它提供了一个交互式的图形界面&#xff0c;使用户能够轻松地构建和仿真电路。以下是Multisim软件的详…

《扩散模型 从原理到实战》Hugging Face (一)

文章目录 前言第一章 扩散模型简介1.1 扩散模型的原理1.1.1 生成模型1.1.2 扩散过程 前言 Hugging Face最近出版了第一本中文书籍《扩散模型 从原理到实战》&#xff0c;其中内容关于扩散模型&#xff08;Diffusion Model&#xff09;&#xff0c;和AIGC相关的内容较多&#x…

2023企业网盘产品排行榜揭晓:选择最适合你的企业网盘工具

企业网盘产品已成为企业文件管理协作的主要选择之一&#xff0c;无论是在文件管理方面&#xff0c;还是团队协作上&#xff0c;企业网盘都表现优秀。为了帮助企业选到心怡的企业网盘产品&#xff0c;我们综合了不同的产品测评网站意见&#xff0c;整理了2023企业网盘产品排行榜…

【游戏开发教程】Unity Cinemachine快速上手,详细案例讲解(虚拟相机系统 | 新发出品 | 良心教程)

文章目录 一、前言二、插件下载三、案例1&#xff1a;第三人称自由视角&#xff0c;Free Look character场景1、场景演示2、组件参数2.1、CinemachineBrain&#xff1a;核心2.2、CinemachineFreeLook&#xff1a;第三人称自由视角相机2.2.1、设置Follow&#xff1a;跟随2.2.2、…

phpstorm动态调试

首先在phpstudy搭建好网站&#xff0c;在管理拓展开启xdebug拓展 查看php.ini配置已经更改 需要增添修改一下设置 [Xdebug] zend_extensionD:/phpstudy_pro/Extensions/php/php5.6.9nts/ext/php_xdebug.dll xdebug.collect_params1 xdebug.collect_return1 xdebug.auto_trace…

[Open-source tool] 可搭配PHP和SQL的表單開源工具_Form tools(1):簡介和建置

Form tools是一套可搭配PHP和SQL的表單開源工具&#xff0c;可讓開發者靈活運用&#xff0c;同時其有數個表單模板和應用模組供挑選&#xff0c;方便且彈性。Form tools已開發超過20年&#xff0c;為不同領域的需求者或開發者提供一個自由和開放的平台&#xff0c;使他們可建構…

STM32f103入门(1) 配置点亮Led灯

1 安装keil5 MDK 双击 MDK524a.EXE安装成功后管理员模式打开CID复制到破解软件 选择ARM生成代码复制到New License ID CodeAdd LIC破解完毕 2安装stm32芯片 可找资料自行安装 如下 3 创建工程 Project->new project 本篇芯片为stm32f103保存到自定义文件夹下在根目录下…

【SkyWalking】分布式服务追踪与调用链系统

1、基本介绍 SkyWalking是一个开源的观测平台&#xff0c;官网&#xff1a;Apache SkyWalking&#xff1b; 可监控&#xff1a;分布式追踪调用链 、jvm内存变化、监控报警、查看服务器基本配置信息。 2、SkyWalking架构原理 在整个skywalking的系统中&#xff0c;有三个角色&am…

WPS右键新建没有docx pptx xlsx 修复

解决wps右键没有新建文档的问题 右键没有新建PPT和Excel 1 wps自带的修复直接修复没有用 以上不管咋修复都没用 2 先编辑注册表 找到 HKEY_CLASSES_ROOT CTRLF搜文件扩展名 pptx docx xlsx 新建字符串 三种扩展名都一样操作 注册表编辑之后再次使用wps修复 注册组件&am…

K8S如何部署ZooKeeper以及如何进行ZooKeeper的平滑替换

前言 在之前的章节中&#xff0c;我们已经成功地将Dubbo项目迁移到了云环境。在这个过程中&#xff0c;我们选择了单机ZooKeeper作为注册中心。接下来&#xff0c;我们将探讨如何将单机ZooKeeper部署到云端&#xff0c;以及在上云过程中可能遇到的问题及解决方案。 ZooKeeper…

picGo+gitee+typora设置图床

picGogiteetypora设置图床 picGogitee设置图床下载picGo软件安装picGo软件gitee操作在gitee中创建仓库在gitee中配置私人令牌 配置picGo在插件设置中搜索gitee插件并进行下载 TyporapicGo设置Typora 下载Typora进行图像设置 picGogitee设置图床 当我了解picGogitee可以设置图床…

Vue3 [Day11]

Vue3的优势 create-vue搭建Vue3项目 node -v npm init vuelatest npm installVue3项目目录和关键文件 Vetur插件是Vue2的 Volarr插件是Vue3的 main.js import ./assets/main.css// new Vue() 创建一个应用实例 > createApp() // createRouter() createStore() // 将创建实…

TensorFlow中slim包的具体用法

TensorFlow中slim包的具体用法 1、训练脚本文件&#xff08;该文件包含数据下载打包、模型训练&#xff0c;模型评估流程&#xff09;3、模型训练1、数据集相关模块&#xff1a;2、设置网络模型模块3、数据预处理模块4、定义损失loss5、定义优化器模块 本次使用的TensorFlow版本…

【C++】—— C++11之可变参数模板

前言&#xff1a; 在C语言中&#xff0c;我们谈论了有关可变参数的相关知识。在C11中引入了一个新特性---即可变参数模板。本期&#xff0c;我们将要介绍的就是有关可变参数模板的相关知识&#xff01;&#xff01;&#xff01; 目录 序言 &#xff08;一&#xff09;可变参…

0基础学习VR全景平台篇 第90篇:智慧眼-数据统计

【数据统计】是按不同条件去统计整个智慧眼项目中的热点&#xff0c;共包含四大块&#xff0c;分别是数据统计、分类热点、待审核、回收站&#xff0c;下面我们来逐一进行介绍。 1、数据统计 ① 可以按所属分类、场景分组、所属场景、热点类型以及输入热点名去筛选对应的热点&…

文生图模型之Stable Diffusion

原始文章地址 autoencoder CLIP text encoder tokenizer最大长度为77&#xff08;CLIP训练时所采用的设置&#xff09;&#xff0c;当输入text的tokens数量超过77后&#xff0c;将进行截断&#xff0c;如果不足则进行paddings&#xff0c;这样将保证无论输入任何长度的文本&…

Kaniko在containerd中无特权快速构建并推送容器镜像

目录 一、kaniko是什么 二、kaniko工作原理 三、kanijo工作在Containerd上 基于serverless的考虑&#xff0c;我们选择了kaniko作为镜像打包工具&#xff0c;它是google提供了一种不需要特权就可以构建的docker镜像构建工具。 一、kaniko是什么 kaniko 是一种在容器或 Kube…

【Linux】进程状态|僵尸进程|孤儿进程

前言 本文继续深入讲解进程内容——进程状态。 一个进程包含有多种状态&#xff0c;有运行状态&#xff0c;阻塞状态&#xff0c;挂起状态&#xff0c;僵尸状态&#xff0c;死亡状态等等&#xff0c;其中&#xff0c;阻塞状态还包含深度睡眠和浅度睡眠状态。 个人主页&#xff…

Diffusion Models for Image Restoration and Enhancement – A Comprehensive Survey

图像恢复与增强的扩散模型综述 论文链接&#xff1a;https://arxiv.org/abs/2308.09388 项目地址&#xff1a;https://github.com/lixinustc/Awesome-diffusion-model-for-image-processing/ Abstract 图像恢复(IR)一直是低水平视觉领域不可或缺的一项具有挑战性的任务&…

算法竞赛入门【码蹄集新手村600题】(MT1220-1240)C语言

算法竞赛入门【码蹄集新手村600题】(MT1220-1240&#xff09;C语言 目录MT1221 分数的总和MT1222 等差数列MT1223 N是什么MT1224 棋盘MT1225 复杂分数MT1226 解不等式MT1227 宝宝爬楼梯MT1228 宝宝抢糖果MT1229 搬家公司MT1230 圆周率MT1231圆周率IIMT1232 数字和MT1233 数字之…