小李带你玩转html—05

最新推荐文章于 2024-07-18 15:09:01 发布
最新推荐文章于 2024-07-18 15:09:01 发布
阅读量56 收藏
点赞数
分类专栏： html 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44171009/article/details/109297062
版权

还是盒模型

  • 盒模型清空样式，一些标签自带样式，需要清空
    在这里插入图片描述
  • 效果图如下

在这里插入图片描述

margin

  • 当两个盒子在垂直方向时，外边距小的会被外边距大的重合，这个现象叫做外边距塌陷。

  • 在这里插入图片描述
    在这里插入图片描述

  • 父盒子和子盒子也会出现margin塌陷现象
    在这里插入图片描述
    在这里插入图片描述

  • 解决办法：①给父盒子加一个边框在这里插入图片描述
    在这里插入图片描述

  • 方法② 用父盒子的padding 属性挤出来
    在这里插入图片描述

在这里插入图片描述

  • 居中问题

  • 文字水平居中-text-align属性
    在这里插入图片描述

  • 文字垂直居中List item

  • 在这里插入图片描述

  • 子盒子在父盒子内居中
    盒子水平居中

在这里插入图片描述
在这里插入图片描述
盒子垂直居中
在这里插入图片描述
在这里插入图片描述

  • 父子盒模型
    父盒子的内容区域≥子盒子的width+padding2+border2
    溢出现象
    在这里插入图片描述
    在这里插入图片描述
    如果不设置子盒子宽度，它会自动撑满父盒子的宽度
    在这里插入图片描述
    在这里插入图片描述
Hacker white
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小李动态表情 小李动态表情包 v2.0
11-08
【小李动态表情 小李动态表情包 v2.0】是一个专为用户们提供娱乐和社交互动的资源集合，其中包含了一系列与著名演员莱昂纳多·迪卡普里奥（Leonardo DiCaprio）相关的动态表情。这款表情包的更新至v2.0版本，意味着...
小李QQ表情 小李QQ表情包 v2.0
11-08
【小李QQ表情 小李QQ表情包 v2.0】是一个专为QQ聊天平台设计的表情包集合，其中包含了各种以知名演员“小李”为主题的趣味动态和静态表情。这款表情包版本为v2.0，意味着它是经过更新和优化的版本，可能包含了更多的...
小李带你玩转html—08
小李同学的博客
11-26 110
定位 css布局：盒模型、浮动、定位 辅助的功能属性：文本、a、背景等 定位：相对定位、绝对定位、固定定位 脱标：浮动、绝对定位、固定定位 相对定位 定位：元素位置相对于某一参照物进行的位置偏移 相对定位：元素相对于自身的相对偏移 position：定位 属性值：relative 相对的 偏移的数据量由其他属性来表示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title
小李带你玩转html—07
小李同学的博客
11-20 78
222
小李带你玩转html—10
小李同学的博客
12-12 68
图片和透明效果 1.图片的分类 1.1 JPG图片 是我们最常用的一种图片格式 特点：色彩丰富，可以压缩，品质可以调整 缺点：不能保存图层，不能做动图，不能保存背景透明的图片 1.2 PNG图片 不可压缩，可以保存图层，可以保存半透明效果 缺点：文件太大 1.3 GIF图片 无所谓压缩不压缩，色彩单一，色值有256种 文件小，可以存动图 2.盒子的透明 2.1 ...
小李带你玩转html—06
小李同学的博客
10-31 84
标准文档流与浮动 文字必须在div渲染之后写 标准文档流都是高低不齐，底边对齐 块级元素和行内元素划分 标准文档流将我们的html标签分成了块级标签和行内标签 块级标签：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 特点：①自己独占一行②可以设置宽高③如果
小李带你玩转html—09
小李同学的博客
12-07 77
Hack 浏览器兼容问题：针对不同的浏览器写不同的代码，显示相同的效果 分类：html hack 、css hack html hack 根据不同的浏览器写不同的html代码，需要一个辅助的代码，叫做Hack符号 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>html hack</title> <style type="text/css"&
小李带你玩转html—03
小李同学的博客
03-22 53
继承性 css继承性：后代元素能够继承来自祖先元素的文字的样式，不能继承盒子的样式，继承性这个特性很好，我们可以将整体的文字样式全部写在body，后面的标签自动继承。 继承性也是 层叠式的第一个特性。 层叠性 我们学了多个选择器，同一格标签可以同时多个选择器选中。 问题：多个选择器选中一个元素，相同的样式听谁的？ 选择器权重问题： 标签、类、id权重比较 ：通配符权重最低 所以，层叠高的...
小李带你玩转html—02
小李同学的博客
03-20 73
基础选择器 选择器：指的是我们需要添加样式的标签元素的模式。 标签选择器
小李带你玩转html—01
小李同学的博客
03-17 87
CSS css:cascading style sheets,层叠式样式表(通俗来说，定义了html标签你想要在网页上显示的样式) css的本质就是将结构和样式进行分离，不再结合在一起 首先我们得知道前端三层： html 结构层，搭建了网页的框架 css 样式层，让页面更加好看 JavaScript 行为层，实现了页面交互，让网页更加灵活好看 CSS作用 样式：html标签在页面上的显示样式。...
小李带你玩转html—04
小李同学的博客
04-13 100
文本 text-align文本对齐 left——水平左对齐 right——水平右对齐 center——水平居中对齐 text-indent首行缩进 设置的是文本的首行缩进 单位：em px 百分比 text-decoration：文本修饰 正常，没有修饰：none; 下划线：underline; 中划线，删除线:line-through; 上划线：overline; 盒模型 ...
JAVA作业1小李打怪物.docx
08-23
在这个JAVA作业中，小李打怪物的场景是通过面向对象编程来实现的。面向对象编程是一种编程范式，它基于“对象”的概念，这些对象包含了数据（属性）和操作数据的方法（行为）。在这个例子中，有两个主要的类：`Xiao...
html css js 3d元素周期表源码
05-10
标题中的“html css js 3d元素周期表源码”表明这是一个使用HTML、CSS和JavaScript技术构建的3D元素周期表项目。这个项目可能是一个互动的学习工具，通过三维视觉效果来展示化学元素的信息，帮助用户更好地理解和...
小李的数据库之旅（上）
12-14
　小李是这个大学计算机科学与技术系的知名学生，他的编程能力了得，使用Pascal 炉火纯青，这都是高中期间参加青少年信息学奥林匹克竞赛打下的底子， 虽然没有获过奖，但在80年代末，90年代初很多人都不知道计算机...
html 关闭信息窗口
cuisidong1997的博客
07-14 347
如果你想要通过点击favicon来关闭一个窗口，你需要添加一个监听器来监听favicon的点击事件，但是由于favicon通常不支持JavaScript事件监听，你可能需要使用一些特殊的技巧，例如监听鼠标移动到favicon上的事件，并通过这种方式触发窗口关闭。如果你是指的是一个favicon（网页标题前的小图标），并且你想要通过点击这个图标来关闭一个信息窗口，那么你需要使用JavaScript来监听favicon的点击事件，并在事件处理函数中执行关闭窗口的操作。html 关闭信息窗口 ico。
高频面试题-HTML
CSDN20221005的博客
07-15 938
离线存储是基于 .appcache ⽂件的缓存机制(不是存储技术)实现的，通过这个⽂件上的解析清单离线存储资源，这些资源就会像 cookie ⼀样被存储了下 来。块级元素有： div p 列表标签(ul ol li dl dt dd) 标题标签(h1 h2 h3 h4) 表格标签(table)空元素： <br> <hr> <img> <input> <link> <meta>->新增了语义化标签(header/footer/nav/asid)->新增了表单增强控件(data/time/email/url)
DDei在线设计器-HTML渲染
最新发布
hoslay1的专栏
07-18 222
HtmlViewer插件通过将一个外部DIV附着在图形控件上，从而改变原有图形的显示方式。允许使用者自己定义HTML通过HTML元素。本示例演示了通过Html来扩展渲染图形，从而获得更加丰富的图形展现。通常情况下，我们创建的图形控件，如下图所示：通过HtmlViewer插件，我们可以使用表现力更强的HTML元素来替换显示的图形，或者结合业务需要，将一些业务数据显示在图形上，如下：!
ChatGPT对话：如何把Html文件转换为Markdown文件
uestcai的博客
07-15 1394
【编者按】ChatGPT提供了多种方法。编者常用VS Code，所以想使用VS Code解决问题，但ChatGPT提供了一些错误的方法，失败了。最后发现编写python程序最简单。
考考小李ctfxss漏洞
07-25
你好！很高兴回答你的问题。对于CTF（Capture The Flag）比赛中的漏洞，我可以提供一些基本的信息。CTF比赛是一个网络安全竞赛，旨在通过解决各种网络安全挑战来测试参赛者的技能。 在CTF比赛中，常见的漏洞类型包括但不限于： 1. Web漏洞：如跨站脚本（XSS）、SQL注入、跨站请求伪造（CSRF）等。 2. 二进制漏洞：如缓冲区溢出、格式化字符串漏洞等。 3. 密码学漏洞：如弱加密算法、随机数生成问题等。 4. 网络协议漏洞：如DNS劫持、ARP欺骗等。 关于CTF漏洞的具体细节和解决方法，我需要更多的信息才能给出准确的答案。你可以提供更具体的问题或者给出一个具体的CTF题目，我将尽力帮助你。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值