做自己的网站要多久,注册公司步骤,湖北网站制作公司,网站推广的具体内容什么是盒子模型
盒子模型#xff0c;也可以称为框模型。
所有 HTML 元素可以看作盒子。在 CSS 中#xff0c;“box model” 这一术语是用来设计和布局时使用。
CSS 盒模型本质上是一个盒子#xff0c;封装周围的 HTML 元素#xff0c;它包括#xff1a;边距#xff0c…什么是盒子模型
盒子模型也可以称为框模型。
所有 HTML 元素可以看作盒子。在 CSS 中“box model” 这一术语是用来设计和布局时使用。
CSS 盒模型本质上是一个盒子封装周围的 HTML 元素它包括边距边框填充和实际内容。 不同部分的说明:
Margin外边距: 清除边框区域。Margin没有背景颜色它是完全透明。Border边框: 边框周围的填充和内容。边框是受到盒子的背景颜色影响。Padding内边距: 清除内容周围的区域。会受到框中填充的背景颜色影响。Content内容: 盒子的内容显示文本和图像。
为了在所有浏览器中的元素的宽度和高度设置正确的话你需要知道的盒模型是如何工作的。
元素的宽度和高度
下面的例子中的元素的总宽度为 300px:
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;完整的 HTML 代码如下:
!DOCTYPE html
html
headmeta charsetutf-8 title/title
stylediv.ex{width:220px;padding:10px;border:5px solid gray;margin:0px;}
/style
/headbodydiv classexThe picture above is 250px wide.The total width of this element is also 250px./div/body
/html上述示例运行的结果如下: 值得注意的是: 当指定一个 CSS 元素的宽度和高度属性时只是设置内容区域的宽度和高度。要知道完全大小的元素还必须添加填充边框和边距。 边框
CSS 边框属性允许指定一个元素边框的样式和颜色。
CSS 边框属性常见如下:
border-width: 设置边框的宽度border-color: 设置边框的颜色border-style: 边框的样式
设置边框的宽度
如果设置一个值则同时设置边框的四个方向的宽度。如下代码:
border-width: 10px;上述代码则表示同时四个方向的边框宽度为 10px。
如果设置两个值则第一个值表示设置边框的上下方向宽度第二个值表示设置边框的左右方向宽度。
border-width: 10px 20px;如果设置三个值则第一个值表示设置边框的上边宽度第二个值表示设置边框的左右方向宽度第三个值表示设置边框的下边宽度。
border-width: 10px 20px 30px;如果设置四个值则分别表示设置上、右、下和左四个方向的边框宽度。
border-width: 10px 20px 30px 40px;除了上述方式设置边框宽度CSS 还提供如下方式分别设置上、右、下和左边框的宽度。
属性名称描述border-top-width设置一个元素的顶部边框的宽度。border-right-width设置一个元素的右边框的宽度。border-bottom-width设置一个元素的底部边框的宽度。border-left-width设置一个元素的左边框的宽度。
设置边框的颜色
如果设置一个值则同时设置边框的四个方向的颜色。如下代码:
border-color: red;上述代码则表示同时四个方向的边框颜色为 red。
如果设置两个值则第一个值表示设置边框的上下方向颜色第二个值表示设置边框的左右方向颜色。
border-color: red orange;如果设置三个值则第一个值表示设置边框的上边颜色第二个值表示设置边框的左右方向颜色第三个值表示设置边框的下边颜色。
border-color: red orange yellow;如果设置四个值则分别表示设置上、右、下和左四个方向的边框颜色。
border-color: red orange yellow blue;除了上述方式设置边框颜色CSS 还提供如下方式分别设置上、右、下和左边框的颜色。
属性名称描述border-top-color设置一个元素的顶部边框的颜色。border-right-color设置一个元素的右边框的颜色。border-bottom-color设置一个元素的底部边框的颜色。border-left-color设置一个元素的左边框的颜色。
设置边框的样式
边框样式的常用备选想如下:
边框样式描述none定义无边框。hidden与 “none” 相同。不过应用于表时除外对于表hidden 用于解决边框冲突。dotted定义点状边框。在大多数浏览器中呈现为实线。dashed定义虚线。在大多数浏览器中呈现为实线。solid定义实线。double定义双线。双线的宽度等于 border-width 的值。inherit规定应该从父元素继承边框样式。
如果设置一个值则同时设置边框的四个方向的样式。如下代码:
border-style: dotted;如果设置两个值则第一个值表示设置边框的上下方向样式第二个值表示设置边框的左右方向样式。
border-style: dotted solid;如果设置三个值则第一个值表示设置边框的上边样式第二个值表示设置边框的左右方向样式第三个值表示设置边框的下边样式。
border-style: dotted solid dashed;如果设置四个值则分别表示设置上、右、下和左四个方向的边框样式。
border-style: dotted solid dashed double;除了上述方式设置边框样式CSS 还提供如下方式分别设置上、右、下和左边框的样式。
属性名称描述border-top-style设置一个元素的顶部边框的样式。border-right-style设置一个元素的右边框的样式。border-bottom-style设置一个元素的底部边框的样式。border-left-style设置一个元素的左边框的样式。
简写设置边框
CSS 提供了 border 属性允许同时设置边框的宽度、颜色和样式。
border: 5px solid red;值得注意的是: 设置的顺序没有明确要求。 除了上述方式设置边框CSS 还提供如下方式分别设置上、右、下和左边框。
属性名称描述border-top设置一个元素的顶部边框。border-right设置一个元素的右边框。border-bottom设置一个元素的底部边框。border-left设置一个元素的左边框。
内边距
CSS Padding内边距属性定义元素边框与元素内容之间的距离。
如果设置一个值则同时设置内边距的四个方向。如下代码:
padding: 25px;如果设置两个值则第一个值表示设置内边距的上下方向第二个值表示设置内边距的左右方向。
padding: 25px 50px;如果设置三个值则第一个值表示设置内边距的上边第二个值表示设置内边距的左右方向第三个值表示设置内边距的下边。
padding: 25px 50px 75px;如果设置四个值则分别表示设置上、右、下和左四个方向的内边距。
padding: 25px 50px 75px 100px;除了上述方式设置内边距CSS 还提供如下方式分别设置上、右、下和左边的内边距。
属性名称描述padding-top设置一个元素的顶部内边距。padding-right设置一个元素的右边内边距。padding-bottom设置一个元素的底部内边距。padding-left设置一个元素的左边内边距。
外边距
CSS Margin外边距属性定义元素周围的距离。
外边距不会影响元素的可见大小但是会影响元素的位置。
属性名称描述margin-top设置元素的上外边距。margin-right设置元素的右外边距。margin-left设置元素的左外边距。margin-bottom设置元素的下外边距。
设置上和左外边距
margin-top: 100px;
margin-left: 50px;由于元素在 HTML 页面中默认是靠左靠上显示的。所以默认情况下修改左外边距和上外边距时会影响当前元素的位置。
设置下和右外边距
margin-bottom: 100px;
margin-right: 50px;修改右和下外边距时会影响其他元素相对于当前元素的位置。
简写设置外边距
如果设置一个值则同时设置外边距的四个方向。如下代码:
margin: 25px;如果设置两个值则第一个值表示设置外边距的上下方向第二个值表示设置外边距的左右方向。
margin: 25px 50px;如果设置三个值则第一个值表示设置外边距的上边第二个值表示设置外边距的左右方向第三个值表示设置外边距的下边。
margin: 25px 50px 75px;如果设置四个值则分别表示设置上、右、下和左四个方向的外边距。
margin: 25px 50px 75px 100px;外边距重叠
当同时为两个相邻的 div 标签设置外边距为第一个 div 标签设置下外边距为第二个 div 标签设置上外边距。具体代码如下:
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css.box1{width: 100px;height: 100px;background-color: red;/*为上边的元素设置一个下外边距*/margin-bottom: 100px;} .box2{width: 100px;height: 100px;background-color: blue;/*为下边的元素设置一个上外边距*/margin-top: 100px;}/style/headbodydiv classbox1/divdiv classbox2/div /body
/html上述示例代码最终运行的结果是: 两个 div 之间的距离为 100px。
垂直方向的相邻的外边距会发生外边距的重叠现象兄弟元素的相邻外边距会取最大值。 值得注意的是: 外边距的重叠现象只会出现在垂直方向而水平方向并不存在外边距重叠现象。 如果定义两个 div 标签是父子关系的话当为作为子元素的 div 设置上外边距该上外边距会传递给作为父元素的 div。具体代码如下:
!DOCTYPE html
htmlheadmeta charsetUTF-8title/title style typetext/css .box3{width: 300px;height: 200px;background-color: skyblue;}.box4{width: 100px;height: 100px;background-color: red;/*设置一个margin-top*/margin-top: 100px;} /style/headbody div classbox3div classbox4/div/div/body
/html上述外边距的重叠现象可以通过为作为父元素的 div 下内边距解决。
!DOCTYPE html
htmlheadmeta charsetUTF-8title/title style typetext/css .box3{width: 300px;height: 100px;background-color: skyblue;padding-top: 100px;}.box4{width: 100px;height: 100px;background-color: red;} /style/headbody div classbox3div classbox4/div/div/body
/html内联元素的盒子模型
内联元素的宽度和高度
内联元素不支持设置宽和高内联元素元素的大小由内容决定。
内联元素的内边距
内联元素支持水平方向的内边距。内联元素可以设置垂直方向的内边距但是不会影响布局。
内联元素的边框
内联元素支持水平方向的边框。内联元素可以设置垂直方向的边框但是不会影响布局。
内联元素的外边距
内联元素支持水平方向的外边距 , 不支持垂直方向的外边距。
