如何seo网站推广,南通高端网站建设机构,东莞横沥中学,杭州 网站建站所有HTML元素都可以看作盒子#xff0c;在CSS中盒子模型是用来设计和布局的#xff0c;CSS盒子模型本质上是一个盒子#xff0c;分装周围的HTML元素包括#xff1a;外边距#xff0c;边框#xff0c;内边距和实际内容。 Margin#xff08;外边距#xff09;
清除边框…所有HTML元素都可以看作盒子在CSS中盒子模型是用来设计和布局的CSS盒子模型本质上是一个盒子分装周围的HTML元素包括外边距边框内边距和实际内容。 Margin外边距
清除边框外的区域外边距是透明的。
Border边框
围绕在内边距和内容外的边框。
Padding内边距
清楚内容周围的区域。
Content内容
盒子的内容显示文本图像。
如果把盒子模型看作是一个生活中的快递那么内容部分等同于实物部分内边距等同于盒子中的泡沫边框等同于快递盒子外边距等同于快递与快递之间的距离。
例
首先添加内容
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 200px;height: 200px;background-color: red;}/style
/head
bodydiv classcontiner/div
/body 添加内边距
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 200px;height: 200px;background-color: red;padding: 50px 50px;/*第一个值表示上下内边距的大小第二个值表示左右的大小*/}/style
/head
bodydiv classcontiner/div
/body
注可以通过使用padding-left/right/top/bottom来实现单个边距的添加。 添加边框
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 200px;height: 200px;background-color: red;padding: 50px 50px;/*第一个值表示上下内边距的大小第二个值表示左右的大小*/border: 5px solid black;/*第一个值表示边框的粗细第二个值表示实线第三个之为边框的颜色*/}/style
/head
bodydiv classcontiner/div
/body 添加外边距 headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 200px;height: 200px;background-color: red;padding: 50px 50px;/*第一个值表示上下内边距的大小第二个值表示左右的大小*/border: 5px solid black;/*第一个值表示边框的粗细第二个值表示实线第三个之为边框的颜色*/margin: 100px 100px;/*第一个值表示上下外边距的大小第二个值表示左右边距的大小*/ }/style
/head
bodydiv classcontiner/div
/body 注 可以使用margin-left/right/top/bottom来单个更改某一边距离。
