| CSS | 您所在的位置：网站首页 › 哪个属性能设置盒模型的左侧外边距 › CSS |
CSS
|
CSS——盒子模型及内外边距
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 CSS——盒子模型及内外边距什么是盒子模型（Box Model）Border(边框)的使用外边距和内边距 什么是盒子模型（Box Model）所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)：
不同部分的说明： Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，内边距是透明的。Content(内容) - 盒子的内容，显示文本和图像。 Border(边框)的使用边框的属性 边框的粗细 边框的样式 边框的样色 border:2px solid red; /*粗细，(solid)实线，颜色*/ /*(dashed)虚线*/边框的测试 边框的使用 #box{ width:300px; border:2px solid red; } h2{ font-size:16px; background-color:white; color:red; } form{ background:green; } div:nth-of-type(1) input{ border:2px solid #FF0011 } div:nth-of-type(2) input{ border:2px solid #cc00FF } div:nth-of-type(3) input{ border:2px dashed #FF00FF /*dashed虚线*/ } 会员登录 用户名： 密码： 邮箱：边框的效果图（三个不同样式的边框）
Margin(外边距)的属性 Margin-top 上内边距 Margin-bottom 下内边距 Margin-left 左内边距 Margin-right 右内边距 margin的作用：让元素居中 居中的要求：1.块元素2. 有固定的宽度 Padding(内边距)的属性 padding-top 上内边距 padding-bottom 下内边距 padding-left 左内边距 padding-right 右内边距 /*padding:0; 内边距的上下左右都为0 padding:1,2;内边距的上下为1，左右为2 padding:0，1,2,3;内边距的上，左，下，右为0,1,2，3，按顺时针排序 外边距同理 */ 内外边距 /*初始化操作*/ body,h2{ /*body总有一个默认的外边距margin=8 在初始化的时候通常将body，h1，ul，li，a等标签的margin设置为0 */ margin:0; padding:0; /*padding:0; 内边距的上下左右都为0 padding:1,2;内边距的上下为1，左右为2 padding:0，1,2,3;内边距的上，左，下，右为0,1,2，3，按顺时针排序 */ } #box{ width:300px; border:2px solid red; margin:0 auto; /*margin的作用：让元素居中*/ } h2{ font-size:16px; background-color:green; color:red; } form{ background:green; } input{ border:1px solid black;/*给三个文本框设置样式*/ } div:nth-of-type(1){ padding:20px 10px;/*设置第一个文本的内边距*/ } 会员登录 用户名： 密码： 邮箱：效果图
补充：盒子模型的长度=外边距+边框的长度+内边距+内容的长度 |
【本文地址】
公司简介
联系我们