看谷歌浏览器源码，为什么p标签和div标签为块元素

原创 已于 2023-10-27 11:25:09 修改 · 1.8k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端

于 2023-10-27 11:17:35 首次发布
博客围绕谷歌浏览器源码展开，介绍了谷歌源码路径，重点解释了块级元素独占一行的原因，是因谷歌浏览器设置div默认样式为display:block。还提及p和div为块元素，strong等为行内元素。

看谷歌浏览器源码

谷歌源码路径：third_party/blink/renderer/core/html/resources/html.css

为什么块级元素独占一行？
是谷歌浏览器设置div的默认样式 display:block 它才独占一行

p标签和div标签为块元素

在这里插入图片描述

strong,b,i,em等等标签为行内元素
在这里插入图片描述
在这里插入图片描述

python爬虫之selenium自动化——谷歌驱动（chrome webdriver），超详细！（13）
@CSDN盲敲代码的阿豪的博客
10-11 1385
selenium是模仿人的行为，一种自动化驱动浏览器的工具，当我们运行相应代码，python就会通过安装的谷歌驱动（webdriver）打开谷歌浏览器，执行相应的动作；selenium 抓取的是浏览器渲染后的网页，而不是网页源码，所以只要浏览器能够看到的数据，selenium都能抓取；
【Python】高效的Web自动化测试利器—Python+Playwright快速上手自动化实战指南
墩墩分墩
08-16 8239
**Playwright是微软在` 2020 年初 `开源自动化测试工具，功能和 selenium 类似，都可以驱动浏览器进行各种自动化操作。** - 支持主流浏览器，如Chrome、Firefox、Safari 等，同时支持以**无头模式、有头模式**运行，并提供了**同步、异步的 API**，可以结合 `主流测试框架`使用，并且支持浏览器端的自动化脚本录制等功能。 **特点：** - 跨浏览器：Playwright 支持所有现代渲染引擎，包括Chromium、WebKit 和 Firefox； - 跨
前端开发 html第二课 自结束标签 注释 标签中的属性 文档声明 进制 字符编码 文档使用 VScode 实体 meta标签 语义化标签 块元素和行内元素 布局标签
qq_740785701的博客
08-15 982
1 自结束标签 标签一般成对出现，但是也存在一些自结束标签 如： 多“/”和没有“/”区别不大 2 注释 注释的作用： 注释中的内容会被浏览器忽略，不会在网页中直接显示，但是可以在源码中查看注释，注释用来对代码进行解释说明的；开发中一定要养成良好的编写注释的习惯，注释要求简单明了；注释还可以将一些不希望显示的内容隐藏。 源码 注： 注释不能嵌套！！ 3 标签中的属性 属性，在标签中还可以设置属性 如： 属性是一个名值对（x=y） 属性用来设置标签中内容如何显示 属性和标签或其他属性应该使
从Chrome源码看浏览器如何构建DOM树
thlzjfefe的博客
12-22 612
最近下了Chrome的源码，安装了一个debug版的Chromium研究了一下，虽然很多地方都一知半解，但是还是有一点收获，将在这篇文章介绍DOM树是如何构建的，看了本文应该可以回答以下问题： IE用的是Trident内核，Safari用的是Webkit，Chrome用的是Blink，到底什么是内核，它们的区别是什么？ 如果没有声明<!DOCTYPE html>会造成什么影响？ ...
html页面div相互重叠,Div相互重叠、DIV错位的解决方案
weixin_35149268的博客
05-31 2093
类型：源码相关大小：11.3M语言：中文 评分：5.0标签：立即下载今天，在用不同的浏览器测试自己做的一个平台时，发现了一个比较诡异的问题。在IE下显示正常的两个DIV，在Chrome下竟然发生了错位。在IE下显示正常Chrome下，错位了...让我们仔细看一下不和谐的现象解决的思路：1、百度一下(为什么不同的DIV会重叠)2、用Chrome下的调试工具，发现问题那些百度上的答案虽然不能解决我的问...
HTML标签学习记录
ljp的博客
12-14 872
序言整理谷歌的小弟的笔记，版权归原作者所有，本文仅作整理，原文链接：http://blog.csdn.net/lfdfhl/article/list/2常用标签p标签p标签在HTML中常用于表示段落，它是英文单词paragraph的缩写。p标签的用法非常简单，只需要在标签中放置一段文本即可。<p>2017，顶着刘海的iPhoneX带着“史上升级变动最大”的iOS11，依然碎片化严重的Android带
使用Chrome谷歌浏览器开发者工具进行调试--2015-04-26
热门推荐
ivan0609的专栏
04-26 1万+
主要介绍谷歌浏览器的使用，都是一些自己在工作中用到的技巧，不是很全面，希望可以帮到其他人。 1、打开Chrome开发者工具，总所周知的F12（火狐、IE9/10/11），可以看到如下效果。接下来分别介绍标红部分的内容。 2、第一个带搜索的工具，是用来选取网页上某一个或某一块的元素，然后查看、分析、学习。可以看到这个元素的详细信息和结构（父元素、浮动、颜色、字体大小、行高、外边距、无下划线等等）
从 Chrome 源码看浏览器如何 layout 布局
soindy
04-19 3250
转载自: 野狗《从 Chrome 源码看浏览器如何 layout 布局》假设有以下html/css：<div style="border:1px solid #000; width:50%; height: 100px; margin: 0 auto"></div>这在浏览器上面将显示一个框：为了画出这个框，首先要知道从哪里开始画、画多大，其次是边缘stroke的颜色，就可以把它画出来了：void
Chrome(谷歌) http请求自动转化为https
麦叔
10-25 1万+
雷总镇楼 今天在工作中遇到一个很奇葩的问题,且听说细细说来! 一.问题回顾 本周接到一个优化需求,当我用谷歌浏览器访问首页时,发现静态资源的请求路径由本来的http全部自动变为https. 首先,我想到的是,是不是我把静态资源地址写错了,检查以后,发现的确是http协议开头.在尝试用IE浏览器访问,竟然可以正常访问,什么鬼??? 二.问题探究 经过百度,发现网上的解决方案如下: Chrome 浏...
结合Chrome源码详解浏览器渲染页面的过程以及原理
owo_ovo的博客
12-08 2087
浏览器渲染页面的完整过程以及原理
HTML5（网页基本结构、标签、媒体文件导入、表单）
最新发布
weixin_73749601的博客
12-24 2419
HTML5笔记：网页基本结构、标签、媒体文件导入、表单
Web-拾贝
oscar999的专栏
03-10 1万+
JavaScript MVC框架PK：Angular、Backbone、CanJS与Emberhttp://www.csdn.net/article/2013-04-25/2815032-A-Comparison-of-Angular-Backbone-CanJS-and-Ember一个好的js method 方法查询的网站， 有browser兼容的介绍http://help.dottoro.co...
js 防抖 原理
酱子
09-14 5834
一、在前端中有一些事件会频繁的触发容易造成页面卡顿，例如： window 的 resize、scroll mousedown、mousemove keyup、keydown input 的 input 事件 二、防抖的原理 答：不管触发多少次事件，都会等到事件触发 **n 秒后 **才会执行，如果在事件触发的 n 秒内 又触发了这个事件，那么就以新的事件的时间为准重新计算，总之，就是要等你触发事件 n 秒内 不再触发事件，我才会执行，一般用在用户表单输入实时搜索上 // 第一版 // 缺点：函数的 th
2021 春季 前端最新面试题，js基础到js高阶 从容回答
酱子
01-06 4116
2020回顾-个人web分享JavaScript面试题附加回答 1. JavaScript垃圾回收机制的了解 对于在JavaScript中的字符串，对象，数组是没有固定大小的，只有当对他们进行动态分配存储时，解释器就会分配内存来存储这些数据，当JavaScript的解释器消耗完系统中所有可用的内存时，就会造成系统崩溃。 内存泄漏，在某些情况下，不再使用到的变量所占用内存没有及时释放，导致程序运行中，内存越占越大，极端情况下可以导致系统崩溃，服务器宕机。 so，JavaScript有自己的一套垃圾回收机制
设计稿750px 配置rem
酱子
08-01 3878
设计稿750px 配置rem 获取设备宽度 750 等于750 <320 等于320 设置字体大小 设备宽度/7.5 1rem=100像素 // 设计稿是750px // 设置1半的宽度，就是375px // 1rem == 100px的设计稿宽度 // 整个屏幕750px宽度7.5rem，屏幕一半的宽度375px就是3.75rem，100px等于1rem 调用 window.onresize = function(){ 调用 } function remSize() {
vue项目 element表格数据行转列数据互转
酱子
07-01 3810
后台返回的格式一个人名里面带有这个人的所有信息，我们需要数据转化(俗称行转列 ) 这个平时可以用在时间日期上比较多，这个案例只是把这个写法记录下来
输入内容后，输入框宽度根据内容自动撑开contenteditable=“true“
酱子
08-06 3658
实在想不到怎么做了，终极大招：百度一下，结果还整知道了方法使用 contenteditable=“true”，但是百度找到的方法只能输入内容后宽度自动变宽，这个需求还不够用，我自己还得加入清空方法。1.使用element-ui 的el-input宽度设置auto (不可行)2.使用input输入框宽度设置 auto (不可行)产品需求：输入内容后，输入框宽度根据内容自动撑开。不需要内容的时候把内容清空掉。...............
Promise 理解 为什么Promise执行是同步，p.then 是异步
酱子
03-07 3560
Promise，异步问题同步化解决方案，Promise包裹异步程序，通过.then获取异步程序结果， 并且不阻塞Promise相关的任何程序，和Promise相关的程序保持异步关系，只是顺便解决回调地狱 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge".
js 递归使用 遍历查找出 树形对象数组 的某特定id
酱子
04-23 3122
需求：找出树形数组里面 canAccess 为true的id var arr = [ { id: 1, canAccess: false }, { id: 2, canAccess: true }, { id: 3, canAccess: false, children: [{ id: 4, canAcce...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端酱紫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值