興味深い CSS ボックスモデル -- [牛ブリスケットプレスリリースシステム]_html/css

興味深い CSS ボックスモデル -- [牛ブリスケットプレスリリースシステム]_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:49:03

オリジナル

1054 人が閲覧しました

前書き

従来のテーブルレイアウトでは、Web コンテンツの配置とレイアウトにさまざまなサイズのテーブルとテーブルネストを使用し、CSS レイアウトに切り替えた後、コンテンツは、によって定義されたさまざまなサイズのボックスとボックスネストを通じて配置および入力されます。 Webページを整理するためのCSSを設定します。 CSS ボックスモデルは div レイアウトの中核です。

端的に言うと、CSS ボックスモデルを使用する前は、HTML 内の要素はリンゴが散らばったようなものでしたが、CSS ボックスモデルを使用すると、リンゴが積み重なった箱に変わりました。この方法で入力された Web ページはコードが簡潔で、更新が簡単で、複数のブラウザと簡単に互換性があります。

CSS ボックスモデルの要素と計算

一連のボックス関連の属性 (コンテンツ、パディング、境界線、境界線マージン) を定義して、各ボックス、さらには全体を制御します。 HTML ドキュメントのパフォーマンスとレイアウト構造の各属性には、上、右、下、左 (時計回り) が含まれます。

以下は標準的なボックスモデルの詳細な画像です:

上の画像から次のことがわかります:

ボックスの実際の幅: margin-left + border- left + padding-left + width + padding-right + border-right + margin-right

ボックスの実際の高さ: margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

Example

以下は私が作成した小さなデモです。 CSS コードと Firebug レンダリングは、上記のボックスモデルの計算を検証したものです。 Firefox を例にとると、F12 に対応する HTML 下の レイアウト は、ボックスモデルの視覚的なアプリケーションです。

DEMO.aspx code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DEMO.aspx.cs" Inherits="牛腩新闻发布系统WM.DEMO" %><!DOCTYPE html><!---	创建人：王美	创建时间：2015-02-25 11:25:35--><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <link href="css/common.css" rel="stylesheet" /></head><body>    <form id="form1" runat="server">    <div>        <div class="box">nice to meet you!</div>                             </div>    </form></body></html>

ログイン後にコピー

common.css code

/*    创建人：王美    *//*实验1*/.box{   background:black;   color:white ;   width:100px;   height:100px;   padding :10px;   border:20px solid pink;   margin:30px;   float:right ;}

ログイン後にコピー

レンダリング、firebug レンダリング

結論複雑なことも、少しずつ分析して実践していくうちに生き生きとして面白くなってきます。実践は真の知識をもたらします。これは古代から当てはまります。