css盒子模型的相关属性有哪些 - 行业资讯 - 肥雀云

　　介绍

这篇文章将为大家详细讲解有关css盒子模型的相关属性有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

<强> 1盒子模型图

<强>

<强> 2,一个简单的盒子模型
。html

 & lt; !doctype html> & lt; html> & lt; head>
　　& lt;元charset=皍tf-8"祝辞
　　& lt; title>盒子模型& lt;/title>
　　& lt;链接的href=https://www.yisu.com/zixun/box.css " type=" text/css " rel="样式表">  <身体>
　　
　　标准文件流不能制作精美的网页;只有脱离标准文档流(脱标),才可以制作我们想要的网页。
　　脱标的方法:浮动,绝对定位,固定定位;
　　浮动(浮动):可以让元素并排显示,并设置宽高;
　　属性值:左(左浮动);正确(右浮动);
　　浮动的元素会贴父盒子边显示,如果显示不下,在下一行根据浮动方向(贴上一个相同浮动方向的盒子)显示在父盒子中
　　
　　浮动的性质:
　　1浮动的元素脱离标准流,不再区分块级元素和行内元素
　　能够让浮动的元素并排在一行显示,并设置宽和高。
　　2 .浮动的元素没有边缘塌陷,盒子的距离是margin-top和margin-bottom之和
　　3 .浮动的元素会贴边显示,有方向之分,
　　4 .浮动的元素不会钻盒子
　　5 .浮动的元素会让出标准流的位置(两层)
　　6.字围效果

<强> 3,css盒子模型相关属性之宽/高是指内容的宽度和高度

盒子。css

.box1 { 　　边界:2 px固体红; 　　身高:200 px; 　　宽度:700 px; 　　} 　　.box2 { 　　边界:2 px固体# 123456; 　　身高:150 px; 　　宽度:670 px; 　　}

<强> 4,css盒子模型相关属性之边框(宽度,样式,颜色)
边界:px风格颜色;
border-top: px风格颜色;

宽度:边框宽度;单个边框:border-top-width;

盒子。css

 .box1 {
　　边界:2 px固体红;
　　身高:200 px;
　　宽度:700 px;
　　border-top-width: 23 px;
　　}

样式:边框样式
属性值:虚线(点)
　　,,,,冲(虚线)
　　,,,,固体(实线)
　　,,,,双(双线)

盒子。css

 .box1 {
　　边界:5 px双红;
　　身高:200 px;
　　宽度:700 px;
　　border-top-width: 11 px;
　　border-top-style:破灭;
　　}
　　.box2 {
　　边界:2 px固体# 123456;
　　身高:150 px;
　　宽度:670 px;
　　}

<强> 5,css盒子模型相关属性之内边距填充
设置单个方向:padding-top/padding-bottom/padding-left/padding-right

盒子。css

 .box2 {
　　padding-top: 22 px;
　　padding-left: 11 px;
　　padding-right: 22 px;
　　padding-right: 24 px;
　　边界底部:2 px固体# 123456;
　　身高:150 px;
　　宽度:670 px;
　　}

<强> 6,css盒子模型相关属性之外边距保证金
设置单个方向:margin-top/margin-bottom/margin-left/margin-right
。css

 .box2 {
　　padding-top: 22 px;
　　padding-left: 11 px;
　　padding-right: 22 px;
　　padding-right: 24 px;
　　边界底部:2 px固体# 123456;
　　身高:150 px;
　　宽度:670 px;
　　margin-top: 23 px;
　　margin-bottom: 45 px;
　　margin-left: 45 px;
　　margin-right: 45 px;
　　}

<强> 7,css盒子模型相关属性之轮廓:作用在边境之外的样式
outline-width
outline-style:
　　,,,,,,,,隐藏(隐藏)
　　,,,,,,,,点(点)
　　,,,,,,,,冲(虚线)
　　,,,,,,,,固体(实线)
　　,,,,,,,,双(双线)
边框色:
或者:
大纲:px风格颜色;

关于css盒子模型的相关属性有哪些就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。