CSS（盒模型）

来源：互联网发布：js引用高德地图编辑：程序博客网时间：2024/06/04 01:28

一、盒模型

任何一个显示的页面元素，都显示为一个矩形框（称为元素框）。
一个盒子中主要的属性就5个：width、height、padding、border、margin。

width “宽度”，CSS中width指的是内容的宽度，而不是盒子的宽度。 height “高度”，CSS中height指的是内容的高度，而不是盒子的高度 padding “内边距” border “边框” margin “外边距”，是与其他盒子之间的距离。为透明色

内容区大小与元素框大小
w3c定义：
内容区大小是指内容区宽度和高度，由width和height设置；
元素框大小：包括内容区，内边距，边框，外边距四个部分。
元素框宽度：width+（左内边距+左边框+左外边距）+（右内边距+右边框+右外边框）；
元素框高度：height+（上内边距+上边框+上外边距）+（下内边距+下边框+下外边框）。
但是有一个奇葩是IE：width包含了边框和padding。
元素框宽度：width+margin*2
元素框高度：height+margin*2
一个盒子的实际占比大小应为内容区加padding再加border
下面两个盒子的实际大小是一样的，只是写法不同。所以在实际开发中，保证盒子大小不变，减width，height就要增加padding

   .box1 {        width: 300px;        height: 300px;        background-color: red;    }    .box2 {        width: 250px;        height: 250px;        padding: 20px;        border: 5px solid pink;    }

1.内边距(padding)
padding就是内边距。padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。
也就是说，background-color将填充所有boder以内的区域。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。

    <style>    .box2 {        width: 250px;        height: 250px;        padding: 20px;        border: 5px dashed pink;        background-color: red;    }    </style></head><body>    <div class="box2">        这里是内容 这里是内容 这里是内容 这里是内容    </div></body></html>

padding

padding的设置：
padding分四个方向：上、右、下、左，可以综合写，也可以单独设置padding-top、padding-right、padding-bottom、padding-left
1)只写一个

padding：20px;  默认四个方向都是20px

2)写两个

padding: 20px 40px; 默认下上20px,左右40px

3)写三个

padding: 20px 40px 50px; 默认上、右、下、左边和右边一样

4)写四个

padding：20px 30px 40px 50px; 默认上、右、下、左

要懂得，用小属性层叠大属性（不能把小属性写在大属性的前面）：
padding: 20px;
padding-left: 30px;
padding

一些元素，默认带有padding，比如ul标签。

2.border
边框有三个要素：宽度、样式、颜色。
颜色如果不写，默认是黑色。另外两个属性不写，显示不出来边框。
边框宽度属性取值可以是：thin、medium、thick或长度值，默认值是medium；
边框样式属性取值可以是：none、dotted（点状线）、dashed（虚线）、solid（实线）、double（双线）、groove（3d凹槽边框）、ridge（3d垄状边框）、inset或outset，默认值none。

所有的border：常用solid dashed dotted
border

border的综合写法： border: 5px solid #000;
border属性能够被拆开，有两大种拆开的方式：
1）按3要素:border-width、border-style、border-color

border: 5px solid #000等价于border-width：5px;border-style:solid;border-color:red;
每个小项也可以按上右下左的顺序分开设置：
同padding：指定一个值，所有都相同。指定2个或3个，则为指定的采用对边的值。上下相同，左右相同。
border-width:10px 20px;
border-style:solid dashed dotted;
border-color:red green blue yellow;

2）按方向：border-top、border-right、border-bottom、border-left

border-top:10px solid red;
border-right:10px solid red;
border-bottom:10px solid red;
border-left:10px solid red;等价于border:10px solid red;
按方向还能再拆一层，就是把每个方向的，每个要素拆开，一共12条语句：

border-top-width:10px; border-top-style:solid; border-top-color:red; border-right-width:10px; border-right-style:solid; border-right-color:red; border-bottom-width:10px; border-bottom-style:solid; border-bottom-color:red; border-left-width:10px; border-left-style:solid; border-left-color:red;

等价于
border:10px solid red;

实际开发中大多数写的都是综合属性。

border可以没有：
border:none;
某一条边没有：
border-left: none;
也可以调整某边的宽度为0：
border-left-width: 0。
3.margin
margin就像是在元素外面加了一层透明的围墙。
外边距属性：
可以综合写，也可分开写margin-top、margin-right、margin-bottom、margin-left。
同padding：指定一个值，所有都相同。指定2个或3个，则为指定的采用对边的值。上下相同，左右相同。
margin特质：
当两个元素外边距相遇时，垂直方向上去最大值，水平方向相加。
当元素浮动了，垂直方向相加。
margin

IE6双倍margin bug
当出现连续浮动的元素，携带和浮动方向相同的margin时，队首的元素，会双倍marign。
所有我们写代码时：浮动代码和margin方向相反就行了。
比如：float：left ;margin-right:20px;

通常我们把margin用于兄弟之间，如果用于父级。父级没有border，则父级会下移。
margin

所有在布局的时候，我们用父级的padding去挤孩子，让孩子下移。

盒子居中
标准流下盒子水平居中：margin:0 auto;
注意：
1）盒子必须有明确的width
2）只有标准流的盒子，才能使用margin:0 auto; 居中。
当一个盒子浮动、绝对定位、固定定位，都不能使用margin:0 auto;
定位盒子居中：用left：50%；margin-left：width的一半。
3） margin:0 auto;是在居中盒子，不是居中文本。文本的居中，要使用
text-align:center;

阅读全文

0 0