HTML(第六章) 标签： 盒子模型

HTML(第六章)

标签： 盒子模型

---

边框

• border-color 边框颜色 （默认黑色）
• border-width 边框粗细（宽度）
• border-style 边框样式（solid实线 dashed虚线）
• border：粗细 样式 颜色 (其中样式是必要的 )边框样式简写

外边距 margin

mrgin-top 上
margin-right 右
margin-bottom 下
margin-left 左
margin 上 右 下 左；
注：网页居中对齐 margin:0px auto;
网页居中对齐的必要条件
块元素
固定宽度

内边距 padding

padding-left 左
padding-right 右
padding-top 上
padding-bottom 下
padding 上 右 下 左；

盒子型模的尺寸
盒子模型总尺寸=border+padding+margin+内容宽度

box-sizing
box-sizing 属性定义如何计算一个元素的总宽度和总高度。
主要设置是否需要加上内边距(padding)和边框等。

• content-box 默认值。
  如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
• border-box
  告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减 去(border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。
  注：border-box 不包含 margin。
  (最好在使用padding后，结尾加上border-box)

圆角边框

例：border-radius: 20px 10px 50px 30px;
设置元素的外边框圆角
border-radius 属性是一个最多可指定四个border-*-radius属性的复合属性
每个半径的四个值的顺序是：
左上角，右上角，右下角，左下角。
如果省略左下角，右上角是相同的。
如果省略右下角，左上角是相同的。
如果省略右上角，左上角是相同的。
圆形
利用border-radius属性制作圆形的两个要点：
1.元素的宽度和高度必须相同
2.圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%
半圆形
利用border-radius属性制作半圆形的两个要点：
1.制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值
2.制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值
扇形
利用border-radius属性制作扇形遵循“三同，一不同”原则
“三同”是元素宽度、高度、圆角半径相同
“一不同”是圆角取值位置不同

盒子阴影

box-shadow
设置一个或多个下拉阴影的框。

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影