検索
ホームページウェブフロントエンドhtmlチュートリアル3つのHTML CSSレイアウト(自然レイアウト/流動レイアウト/位置決めレイアウト)_HTML/Xhtml_Webページ制作

1. 自然なレイアウト
何も変更しないレイアウトが自動的に残ります。
2. 流体レイアウト
上記の float:left の状況。
3. レイアウトの配置
相対配置と絶対配置はどちらも親 div タグに対して相対的です。
相対 -- この要素の元の位置を参照点として取得します
絶対 -- 親 div タグの原点 (左上隅) を参照点として取得します。

外層は位置:相対であるため、内層が絶対であれば外層の左上隅が変位基準として位置合わせされます。もちろん、外層にはposition:relativeだけが書かれ​​ており、leftとtopの2つの値が書かれています。つまり、この要素の元の位置が左揃えと上揃えのレイアウト基準原点として使われることになります。 。

もう 1 つの状況は、外側の層にposition:absolute があるだけで、position:relative がないということです。この場合、どの点が参照として見つかるでしょうか。このときの原則は、親要素にrelativeがある場合は親要素を基準原点とし、position:relativeがない場合はbodyを基準原点とします。 Position:absolute の外側の層にrelativeがない場合、2つのレイアウト間に違いはありません。

もちろん、最後の状況は次のとおりです: 外側の層はposition:absolute; 内側の層はposition:relative、どうなるでしょうか?本来の原理では、絶対は本体を、相対は元の位置をレイアウト原点としますが、このとき実際には外層の左上隅をレイアウト原点とします。 。
その他は実際の状況によって異なります。
声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前端面试官常问的问题前端面试官常问的问题Mar 19, 2024 pm 02:24 PM

在前端开发面试中,常见问题涵盖广泛,包括HTML/CSS基础、JavaScript基础、框架和库、项目经验、算法和数据结构、性能优化、跨域请求、前端工程化、设计模式以及新技术和趋势。面试官的问题旨在评估候选人的技术技能、项目经验以及对行业趋势的理解。因此,应试者应充分准备这些方面,以展现自己的能力和专业知识。

如何通过纯CSS实现瀑布流布局的方法和技巧如何通过纯CSS实现瀑布流布局的方法和技巧Oct 20, 2023 pm 06:01 PM

如何通过纯CSS实现瀑布流布局的方法和技巧瀑布流布局(WaterfallLayout)是一种在网页设计中常见的布局方式,它通过将内容以多列的方式排列,每一列的高度不一致,从而形成像瀑布般的视觉效果。这种布局常常被应用于图片展示、商品展示等需要展示大量内容的情景中,具有良好的用户体验。实现瀑布流布局的方法有很多种,可以使用JavaScript或CSS来完成。

CSS布局单位的演变与应用:从像素到根据根元素字体大小的相对单位CSS布局单位的演变与应用:从像素到根据根元素字体大小的相对单位Jan 05, 2024 pm 05:41 PM

从px到rem:CSS布局单位的演变与应用引言:在前端开发中,我们经常需要用到CSS来实现页面布局。在过去的几年间,CSS布局单位也经历了演变和发展。最开始我们使用的是像素(px)作为单位来设置元素的大小和位置。然而,随着响应式设计的兴起和移动设备的普及,像素单位逐渐暴露出一些问题。为了解决这些问题,新的单位rem应运而生,并逐渐被广泛应用于CSS布局中。一

CSS布局技巧:实现圆形网格图标布局的最佳实践CSS布局技巧:实现圆形网格图标布局的最佳实践Oct 20, 2023 am 10:46 AM

CSS布局技巧:实现圆形网格图标布局的最佳实践在现代网页设计中,网格布局是一种常见且强大的布局技术。而圆形网格图标布局则是一种更加独特和有趣的设计选择。本文将介绍一些最佳实践和具体代码示例,帮助你实现圆形网格图标布局。HTML结构首先,我们需要设置一个容器元素,在这个容器里放置图标。我们可以使用一个无序列表(<ul>)作为容器,列表项(<l

CSS Positions布局实现响应式图片排版的方法CSS Positions布局实现响应式图片排版的方法Sep 26, 2023 pm 01:37 PM

CSSPositions布局实现响应式图片排版的方法在现代Web开发中,响应式设计已成为一种必备的技能。而在响应式设计中,图片排版是一个重要的考虑因素之一。本文将介绍如何使用CSSPositions布局实现响应式图片排版,并提供具体的代码示例。CSSPositions是CSS的一种布局方式,它可以让我们根据需要在网页中任意定位元素。在响应式图片排版中,

CSS布局教程:实现圣杯布局的最佳方法CSS布局教程:实现圣杯布局的最佳方法Oct 19, 2023 am 10:19 AM

CSS布局教程:实现圣杯布局的最佳方法,附带代码示例引言:在网页开发中,布局是非常重要的一部分。好的布局能够使网页达到更好的可读性和可访问性。其中,圣杯布局是一种非常经典的布局方式,它能够在实现自适应的情况下使内容居中,保持优雅的显示效果。本文将为大家介绍如何使用最佳的方法实现圣杯布局,并给出具体的代码示例。一、什么是圣杯布局?圣杯布局是一种常见的三栏布局,

前端SEO—详细讲解前端SEO—详细讲解Mar 12, 2024 pm 06:13 PM

一、搜索引擎工作原理当我们在输入框中输入关键词,点击搜索或查询时,然后得到结果。深究其背后的故事,搜索引擎做了很多事情。在搜索引擎网站,比如百度,在其后台有一个非常庞大的数据库,里面存储了海量的关键词,而每个关键词又对应着很多网址,这些网址是百度程序从茫茫的互联网上一点一点下载收集而来的,这些程序称之为“搜索引擎蜘蛛”或“网络爬虫”。这些勤劳的“蜘蛛”每天在互联网上爬行,从一个链接到另一个链接,下载其中的内容,进行分析提炼,找到其中的关键词,如果“蜘蛛”认为关键词在数据库中没有而对用户是有用的便

CSS布局教程:实现两栏响应式布局的最佳方法CSS布局教程:实现两栏响应式布局的最佳方法Oct 18, 2023 am 11:04 AM

CSS布局教程:实现两栏响应式布局的最佳方法简介:在网页设计中,响应式布局是一种非常重要的技术,它能使网页根据用户设备的屏幕大小和分辨率自动调整布局,提供更好的用户体验。在本教程中,我们将介绍如何使用CSS来实现一个简单的两栏响应式布局,并提供具体的代码示例。一、HTML结构:首先,我们需要创建一个基本的HTML结构,如下所示:<!DOCTYPEht

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。