盒子属性

1. 宽度

width 属性用于设置元素的宽度，你需要注意的是，通过该属性设置的宽度有的时候未必就是元素真实的宽度，这是由于盒子模型类型的影响，IE盒子模型的 width = content + padding + boder，而标准盒子模型的 width = content。

width 属性最常用的两种设置方式为“像素（px）”设置和“百分比（%）”设置。他们的特点如下：

像素设置

优点：该方式去设置宽度更为的稳定，也就是说当一个元素是通过像素去设置元素宽度的时候，该元素的内容，特别是用像素去设置的文本内容也相对稳定，不会因为设备分辨率的不同而在排版显示上有所不同。

缺点：在不同设备上，需要对元素宽度进行修改才能得到最佳的布局效果。如一个在PC端宽度为“960像素”的元素，在手机端就会出现右半部分，甚至右大半部分的显示都会被裁切的情况（如“iphone 4”的浏览器显示分辨率为“320*480”）。
百分比设置

优点：能对不同显示分辨率做出更好的适应。最外层的标签元素（的子节点）若宽度设为“100%”，那无论是在具有“4K”显示分辨率的高清投影大屏幕上，还是在分辨率在几百像素的移动设备上，都能横向占满整个屏幕。现在有人将“百分比布局”称作“流式布局”，是一种应对“移动浪潮”布局的新趋势。

缺点：若采用百分比布局的方式，很多因素难以控制，如采用默认大小的表单元素，HTML5的功能标签，都会给这种布局方式带来麻烦,若是采用多列布局的页面，这种布局方式在移动端上的效果绝对是“灾难性”的。特别是对于缺乏前端开发经验的开发人员而言，这种布局方式经常会出现一些布局效果在意料之外的情况。

tips：百分比设置的布局有一个“相对性”的特点，也就是它的百分比是对于父级元素而言的。
inherit：继承

2. 高度

height 属性用于设置元素的高度，它绝大部分特征、度量单位和盒子模型的计算方式基本上和 width 属性一样。

width 属性的表现和 height 属性的差异在于，在同样不设置或宽高的条件下，任意“块级元素”和“行内块级元素”在不考虑盒子模型的前提下使用 widht 属性设置百分比（%）单位都能达到预期的效果，而 height 则不然，除非父级元素设置 height 属性，否则无论用多少的百分比去设置元素的高度，该元素的高度都始终为 0 。

html, body {height: 100%;
}

3. 内间距

padding 属性用于设置盒子内容与边框之间的间距，即内间距（填充）。它有四个分支属性：

padding-top：设置该元素的边界与自身的内容在上方的间距。
padding-right：设置该元素的边界与自身的内容在右方的间距。
padding-bottom：设置该元素的边界与自身的内容在下方的间距。
padding-left：设置该元素的边界与自身的内容在左方的间距。

padding 可以接收的值为：像素（px）、百分比（%）、inherit（继承）以及auto（浏览器自计算）。我们也可以使用组合值的形式直接设置四个方向的间距，如下所示：

padding: 10px; -> 即将元素边界与内容四个方向“padding-top”、“padding-right”、“padding-bottom”和“padding-left”的间距都设置为10像素。
padding: 10px 20px; -> 即将元素边界与内容上下两个方向“padding-top”、“padding-bottom”的间距都设置为10像素，与内容左右两个方向“padding-left”和“padding-right”的间距都设置为20像素。
padding: 10px 20px 15px; -> 即将元素边界与内容上方“padding-top”的间距设置为10像素，与内容左右两个方向“padding-left”和“padding-right”的间距都设置为20像素，与内容下方“padding-top”的间距设置为15像素。
padding: 10px 20px 15px 30px; -> 即将元素边界与内容上方、右方、下方以及左方的间距分别设置为10像素、20像素、15像素及30像素。

4. 外间距

margin 属性主要用于设置某元素相对于同级元素和父级元素的一个距离值，常用单位像素“px”。该属性对文本类元素（即“行内元素”）标签是无效的。和 padding 一样，其拥有4个分支属性：

margin-top

距离上方同级元素在垂直方向的距离，若上方元素含有“margin-bottom”，则会重叠该值，并且取较大值作为间距值。

若该元素为父元素内的首个子元素，则是设置父元素距离上方元素的距离（解决方案：父级元素添加 overflow:hidden;），若上方元素含有“margin-bottom”，则同样会重叠该值，取较大值作为间距值。
margin-right

距离父级元素右边框的距离，若父元素有内间距“padding-right”，则还需要加上该值。

距离右方同级元素在水平方向的距离，若右方元素含有“margin-left”，则会和该值相加，取两个元素之间间距值的和作为间距值。
margin-bottom

距离下方同级元素在垂直方向的距离，若下方元素含有“margin-top”，则会重叠该值，并且取较大值作为间距值。若该元素是DOM内最后一个元素，则相当于是给父元素设置了一个下间距（padding-bottom），若父元素已经设置了“padding-bottom”，则与父元素的该值相加取和作为与页面底部的间距。
margin-left

距离父级元素左边框的距离，若父元素有内间距“padding-left”，则还需要加上该值。

距离左方同级元素在水平方向的距离，若左方元素含有“margin-right”，则会和该值相加，取两个元素之间间距值的和作为间距值。

同样的，“margin” 也可以以组合值的形式出现，其单位及设值方法和“padding”一致，在设置值的时候从顶部顺时针（即上右下左的顺序）设置。

5. 边框

border 属性的作用是为设定该属性的元素添加边框。在“标准盒子模型”中，该属性的分支属性“border-width”所设置的值会增加元素的实际宽度和高度，而在“IE盒子模型中”该属性的分支属性“border-width”所设置的值会和“padding”（若设置或标签自带该属性）共同占据内容的空间。该属性能对任何显示类型的元素设置，包括“行级元素（inline）”。

该属性有三个分支属性：

1）、border-width

设置边框宽度，单位为像素。设定边框的宽度。可以为Web技术中常用的度量单位，通常为像素“px”。

2）、border-style

设置边框的类型，主要有以下可以设定的值：

属性值	描述
none	无边框
solid	实线边框
dotted	点线边框
dashed	虚线边框
double	双线边框
groove	3D凹槽边框
ridge	3D凸槽边框
inset	内浮雕边框
outset	外浮雕边框

边框效果如下图所示：

示例代码：

<div class="wrap"><section class="box none">none</section><section class="box solid">solid</section><section class="box dotted">dotted</section><section class="box dashed">dashed</section><section class="box double">double</section><section class="box groove">groove</section><section class="box ridge">ridge</section><section class="box inset">inset</section><section class="box outset">outset</section>
</div>

.wrap {width:  800px;height: 300px;border: 1px solid #808080;border-radius: 5px;/*flex：弹性布局*/display: flex;flex-flow: row wrap;justify-content: center;align-items: center;
}
.box {width: 100px;height: 60px;display: inline-block;margin: 0 10px;color: #fff;letter-spacing: 2px;text-align: center;line-height: 60px;background-color: orange;border: 5px none purple;
}.none   { border-style: none;   }
.solid  { border-style: solid;  }
.dotted { border-style: dotted; }
.dashed { border-style: dashed; }
.double { border-style: double; }
.groove { border-style: groove; }
.ridge  { border-style: ridge;  }
.inset  { border-style: inset;  }
.outset { border-style: outset; }

3）、border-color

设置边框颜色，支持英文单词、十六进制以及rgb颜色。

4）、border

同样地，你也可以通过 border 属性直接设置四个方向的边框样式，其语法形式为：

border：border-width border-style border-color;

当然 border 属性的各个分支属性也能单独地对某个方向上的值进行设置。

border-top：设置上边框
border-right：设置右边框
border-bottom：设置下边框
border-left：设置左边框
border-top-width：设置上边框宽度
border-top-style：设置上边框样式
border-top-color：设置上边框颜色
border-right-width：设置右边框宽度
border-right-style：设置右边框样式
border-right-color：设置右边框颜色
border-bottom-width：设置下边框宽度
border-bottom-style：设置下边框样式
border-bottom-color：设置下边框颜色
border-left-width：设置左边看宽度
border-left-style：设置左边看样式
border-left-color：设置左边看颜色

<!-- HTML 部分 -->
<div class="box"></div><!-- CSS 部分 -->
<style type="text/css">.box {width:  160px;height: 100px;border-top: 10px dotted #CC0066;border-right: 15px double #CCCC00;border-bottom: 20px ridge #9933FF;border-left-width: 8px;border-left-style: inset;border-left-color: #CC9900;}
</style>

盒子圆角

border-radius 属性可以设置边框圆角，该属性虽然带了一个 border 字样，同样也是用来设置元素的边界，但它和“border”并无太大的关系，它是对元素的“左上”、“右上”、“右下”和“左下”四个角的“圆度”进行设置。该属性能对任何显示类型的元素设置，包括“行级元素（inline）”。

border-radius 实现的原理是根据该属性所设置的值，在元素内建立一个以该值为半径的“看不见的圆”，并以该圆的边缘形状来设置边角的圆度。

border-radius 单位可以是像素或百分比，如果采用百分比如 50%，并且元素宽高相等，则会呈现一个正圆，否则会呈现出一个椭圆。使用百分比时，其上限值为50%，增加这个值并不会出现任何效果。

设值时，你也可以设置两个值，如：border-radius: 100px/120px，用 “/” 符号进行分割，第一个值表示水平方向圆的半径，第二个表示垂直方向圆的半径。

border-radius 属性除了能统一对元素的边角进行设置，还能分别对一个矩形元素的四个角分别进行设置，如：

border-top-left-radius：左上角
border-top-right-radius：右上角
border-bottom-left-radius：左下角
border-bottom-right-radius：由下角

<div class="wrap"><section class="t1"></section><section class="t2"></section><section class="t3"></section><section class="t4"></section><section class="t5"></section>
</div>

div.wrap > section {width:  100px;height: 100px;background-color: purple;display: inline-block;margin: 0 10px;
}.t1 { border-radius: 50%; }
.t2 { border-radius: 10px/50px; }
.t3 {border-top-right-radius: 30%;border-top-left-radius: 100px;border-bottom-left-radius: 30%;border-bottom-right-radius: 100px;
}
.t4 {border-top-right-radius: 50%;border-bottom-right-radius: 50%;
}

元素轮廓

outline 属性用于设置一个元素的轮廓线，和 border 不一样，outline 无论在什么“盒子模型”下，都不会占据页面的空间，并且它不能分别去设置各个方向的值，即不能对“top”、“right”、“bottom”和“left”方向的“outline”进行分别设置，只能进行统一设置。在使用“webkit（老版本Chrome浏览器、Safari浏览器以及iOS和Android系统自带浏览器）”内核或 “blink（以新版的Chrome浏览器和Opera浏览器为代表）”内核的浏览器中，该属性会在表单元素在获得焦点后自动出现，本意是让用户获得更好的交互体验，但该设定很多时候反而会影响我们对“Web”页面的风格设置，这个时候我们都是将它的值设置为“none”。另外，“outline”属性并不受圆角属性“border-radius”的影响。

和 “border” 属性大体一致，“outline” 有以下分支属性：

outline-width：设置轮廓线的宽度，能为Web技术中常用的度量单位，最常用的为像素“px”。
outline-style：设置轮廓线的样式，和“border-style”一致，这里就不在赘述。
outline-color：设置轮廓线的颜色，和“border-color”一样支持Web的四种“颜色模式”。
outline-offset：设置轮廓线相对元素边界的距离，通常以像素“px”为单位。

元素阴影

box-shadow 属性能够让元素获得一个“阴影”效果，根据颜色的不同，有时候也可以叫做“发光”效果。box-shadow 属性没有分支属性，它的值是以“组合值”的形式设置的，它最多允许6个值的组合，按值的顺序分别代表：

H-Skwing：阴影在水平方向的偏移，负数是向左偏移，正数是向右偏移，单位为“px”。
V-Skwing：阴影在垂直方向的偏移，负数是向上偏移，正数是向下偏移，单位为“px”。
blur：阴影的“模糊距离”或“模糊程度”，单位为“px”。
spread：阴影的扩展范围，若将“blur”设为“0”，该值则相当于一个可以进行位置偏移但不具备“outline-offset”的“outline”，单位为“px”。
color：阴影的颜色，支持Web技术中的常用颜色模式：“颜色英文单词”、“HEX”、“RGBa”、“HSLa”。
inset：将默认向外的阴影方向改为向内。

<!-- HTML 部分 -->
<div class="box">CHINA</div><!-- CSS 部分 -->
<style type="text/css">.box {width: 100px;height: 100px;text-align: center;line-height: 100px;letter-spacing: 2px;text-shadow: 2px 2px 1px #000;text-decoration: underline;box-shadow: 0px 0px 5px 5px gray;}
</style>

CSS布局模型

css布局模型

css 布局模型能够决定盒模型直接如何排列

css的布局模式分类

1、流动模型（Flow）

2、浮动模型 (Float)

3、层模型（Layer）

Flow 流动模型

流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

流动布局模型具有2个比较典型的特征：

块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。

<div id="box2">box2</div><!--块状元素，由于没有设置宽度，宽度默认显示为100%-->
<h1>标题</h1><!--块状元素，由于没有设置宽度，宽度默认显示为100%-->
<p>文本段文本段段文本段文本段文本段文本段文本段。</p><!--块状元素，由于没有设置宽度，宽度默认显示为100%--><div id="box1">box1</div>

第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）

右侧代码编辑器中内联元素标签a、span、em、strong都是内联元素。

```
<em>emmmm..</em><strong>strong..</strong><b>b..</b>```

float 浮动模型

块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。

任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。

<head><meta charset="UTF-8"><title>Title</title><style>div{width:200px;height:200px;border:2px red solid;float:left;}</style>
</head>
<body><div id="div1"></div>
<div id="div2"></div>

还可以把div分布到两边

        #div3{width:200px;height:200px;border:2px red solid;float:left;}#div4{width:200px;height:200px;border:2px red solid;float:right;}<div id="div3"></div>
<div id="div4"></div>

层模型

层模型能让层一样可以对每个图层能够精确定位操作

层模型有三种形式：

1、绝对定位(position: absolute)

2、相对定位(position: relative)

3、固定定位(position: fixed)

1. 绝对定位,把图形定义在绝对的位置

```<!DOCTYPE HTML>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>absolute样式</title><style type="text/css">#div1{width:200px;height:200px;border:2px red solid;position:absolute;left:10px;top:200px;}#div2{width:200px;height:200px;border:2px red solid;position:absolute;left:20px;top:300px;}</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
```

2. 相对定位

如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

```<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#div1{width:200px;height:200px;border:2px red solid;position:relative;left:100px;top:50px;}</style>
</head>
<body><div id="div1"></div>
</body>
</html>
```

3.固定定位

fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>p{width:200px;height:200px;border:2px red solid;position:fixed;left:100px;top:50px;}div{width:200px;height:200px;border:2px red solid;left:100px;top:50px;}</style>
</head>
<body><p>文本文本文本文本文本文本本文本文<p></body>
</html>

相对定位和绝对定位的组合使用

概述

上面看到绝对定位是基于整个html的原点来进行位移的,其实我们也可以让绝对定位的参照点为某个元素,这就涉及到他们的组合使用了

使用

参照定位的元素必须是相对定位元素的前辈元素：

<div id="box1"><!--参照定位的元素--><div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>

参照定位的元素必须加入position:relative;

#box1{width:200px;height:200px;position:relative;
}

定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
```
#box2{position:absolute;top:20px;left:30px;
}
```

组合使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#d1 {position: relative;border: 1px solid red;height: 50px;width: 50px;}#d2 {position: absolute;top: 10px;left: 10px;border: 1px solid red;height: 10px;width: 10px;}</style>
</head>
<body>
<div id="d1"><div id="d2"></div>
</div>
</body>
</html>

6、背景固定

background-attachment 属性用于固定背景图，其主要有两个值：

fixed：页面出现滚动条后就算页面滚动，背景图也会固定在原来的位置不会跟随页面滚动。
scroll：默认值，当页面滚动的时候，背景图也跟随页面同步滚动。

参考示例

7、背景裁切

background-clip 属性是规定背景显示的范围，是从“border”开始，是从“padding”开始，还是从“content”开始，它有以下值：

border-box：默认，背景的覆盖范围从“border”开始
padding-box：背景的覆盖范围从“padding”开始
content-box：背景的覆盖范围从“content”开始

<div class="bg-clip-wrap"><section class="item border-box"></section><section class="item padding-box"></section><section class="item content-box"></section>
</div>

.bg-clip-wrap {text-align: center;
}
.bg-clip-wrap .item {width:  200px;height: 130px;display: inline-block;margin: 0px 30px;padding: 10px;border: 10px dashed #800080;background-image: url("../images/sights.jpeg");
}.bg-clip-wrap .border-box  { background-clip: border-box; }
.bg-clip-wrap .padding-box { background-clip: padding-box;}
.bg-clip-wrap .content-box { background-clip: content-box;}

8、背景起始位置

background-origin 设置背景图像开始的位置，它和 background-clip 的使用方式十分相似，二者的区别在于 background-clip 主要是设置裁切范围，而 background-origin 主要是设置背景图片的起始位置，即从什么位置开始显示图片。该属同样的有以下3个属性值：

border-box：默认，背景的覆盖范围从“border”开始
padding-box：背景的覆盖范围从“padding”开始
content-box：背景的覆盖范围从“content”开始

<div class="bg-origin-wrap"><section class="item border-box"></section><section class="item padding-box"></section><section class="item content-box"></section>
</div>

.bg-origin-wrap {text-align: center;
}.bg-origin-wrap .item {width:  200px;height: 130px;display: inline-block;margin: 0px 30px;padding: 10px;border: 10px dashed #800080;background-image: url("../images/sights.jpeg");
}.bg-origin-wrap .border-box  { background-origin: border-box;}
.bg-origin-wrap .padding-box { background-origin: padding-box;}
.bg-origin-wrap .content-box { background-origin: content-box;}

9、背景组合值

在实际的开发过程中为了节省代码量，减小维护难度，我们通常会采用组合值的写法去设置背景，通常是下面这种模式：

background: color image repeat attachment position;

以上属性也可以省略，只设置其中一个，其中“background-clip”、“background-size”及“background-orign”需单独设置。

#css 盒子div属性相关推荐

从零开始学前端：CSS盒子模型属性 --- 今天你学习了吗？（CSS：Day14）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:伪元素和盒子模型 - 今天你学习了吗?(Day13) 文章目录从零开始学前端:程序猿小白也可以完全掌握! ...
html div虚线背景,关于CSS（DIV属性，背景，连接，边框，虚线，实线，布局与命名）...
div属性 div属性 color : #999999 文字颜色 font-family : 宋体文字字型 font-size : 10pt 文字大小 font-style:itelic 文字斜体育 ...
html css样式div属性,div css
DIV+CSS是WEB设计标准,它是一种网页的布局方法.与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离.提起DIV+CSS组合,还要从XHTML说起.XHTML是 ...
css设置float,【CSS】float属性
float浮动属性 1.作用: 将页面元素浮动起来,使其能够向左或者向右排列 2.应用: 实现页面中布局的左右排版实现图文环绕的版式效果 3.值: 4.原理: 浮动元素将脱离默认的文档流,漂浮在默认 ...
css盒子教程,彻底弄懂css盒子模式(div布局快速入门)_css教程
实现结构与表现分离在真正开始布局实践之前,再来认识一件事--结构和表现相分离,这也用CSS布局的特色所在,结构与表现分离后,代码才简洁,更新才方便,这不正是我们学习CSS的目的所在吗?举个例来说P是 ...
CSS盒子模型之CSS3可伸缩框属性（Flexible Box）
CSS盒子模型(下) 一．CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...
【Web前端】落地成盒？达咩之——CSS盒子模型及属性
目录前言什么是盒子模型盒子的组成盒子的大小盒子成分分析 1.外边距--margin 2.padding--内边距 3.border--边框 border-style:边框样式 border- ...
html div css盒子,CSS盒子模式一(DIV布局快速入门)_html/css_WEB-ITnose
中心最新招了几十个人,我也成小旋风了,看来这个山头还得呆几天.毕竟有几十口子人哪,咋能撒手不管啊!我就先发个贴热热身!也希望前几届的师哥师姐多多指教. 我们在网页设计中常听的属性名:内容(conte ...
彻底弄懂CSS盒子模式一(DIV布局快速入门)
彻底弄懂CSS盒子模式一(DIV布局快速入门) 作者:唐国辉实例网页网址:http://www.blueidea.com/articleimg/2007/03/4545/css2.ht ...

#css 盒子div属性