CSS 框模型(Box Model)_html/css_WEB-ITnose
Jun 24, 2016 am 11:51 AM
CSS 框模型(Box Model)
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了框模型(Box Model):
不同部分的说明:
Margin - 清除边框区域。Margin没有背景颜色,它是完全透明
Border - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
Padding - 清除内容周围的区域。会受到框中填充的背景颜色影响
Content - 盒子的内容,显示文本和图像
摘自:W3CSCHOOL
http://www.w3cschool.cc/css/css-boxmodel.html
-------------------------------------------------------------------------------------------------------------------------------
BoxModule就像一个快递包裹:
Margin:快递塑料包装
Border:快递纸盒
Padding:纸盒里紧贴内壁的一层泡沫板
Content:你的东西

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version?

Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?

Comment ajouter efficacement les effets de course aux images PNG sur les pages Web?

Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?

Quel est le but du & lt; datalist & gt; élément?

Quel est le but du & lt; Progress & gt; élément?

Quel est le but du & lt; mètre & gt; élément?

Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?
