盒子模型
认识盒子模型
盒子模型:网页布局的基础
一个盒子可以分成四个部分:margin(外边距)、border(边框)、padding(内边距)、content(内容)。
margin、border、padding是CSS属性,因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。
盒子的大小:
- 盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和
- 盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和
盒子模型的相关属性
边框属性
border 边框:盒子的边框线
设置内容 | 样式属性 | 常用属性值 |
---|---|---|
边框的样式 | border-style:[上、右、下、左] | solid(单实线) dashed(虚线) dotted(点线) double(双实线) |
边框的宽度 | border-width: [上、右、下、左] | 像素值px |
边框的颜色 | border-color :[上、右、下、左] | |
边框的综合设置 | border:宽度 样式 颜色(顺序任意不分先后) | |
表格的边框合并 | border-collapse: | collapse(表示相邻边框合并在一起) |
圆角边框 | border-radius:水平半径参数/垂直半径参数(也可设置border-top-left-radius) 左上 或者右上、左下、右下) | 像素值px或者百分比 |
图片边框 | border-images:图片路径 裁剪方式、边框宽度、边框扩展距离 |
注意:
- 设置边框宽度时,必须同时设置边框样式才有效
- 边框会影响盒子的大小
内边距属性
padding 又称填充、内部白:盒子中的内容与盒子边框间的距离
样式属性:
padding:四条边
- 5px 上下左右5
- 5px 10px 上下5 左右10
- 5px 10px 15px 上5 左右10 下15
- 5px 10px 15px 20px 上5 右10 下15 左20
padding-top(right、bottom、left):上(右、下、左)边距
注意:
- 内边距会影响盒子的大小
- 为了保证盒子和效果图大小保持一致,让width/height减去多出来的内边距大小
- 如果盒子没有width/height属性,则padding不会撑开盒子的大小
- padding不允许使用负值
外边距属性
margin 又称边界:盒子边框与包含该盒子容器间的距离
样式属性:
margin:四条边(同上)
margin-top(right、bottom、left):上(右、下、左)边
注意:
- 块级元素水平居中,必须设置宽度属性width,将左右外边距都设置为auto 即margin:0 auto
- 行内元素或者行内块元素水平居中,给其父元素添加text-align:center
- margin允许使用负值
外边距合并
1.相邻块元素垂直外边距的合并
当上下相邻两个块元素(兄弟关系),上有margin-bottom,下有margin-top,垂直间距为两个值的较大者
解决: 尽量只给一个盒子添加margin值
2.嵌套块元素垂直外边距的塌陷
两个嵌套关系(父子关系)的块元素,父元素和子元素都有上外边距,父元素会塌陷较大的外边距值
解决:
- 为父元素定义边框
- 为父元素定义内边距
- 为父元素添加 overflow:hidden
- 浮动、固定,绝对定位的盒子不会塌陷
内、外边距的清除:为了更方便地控制网页中的元素,制作网页时,通常先清除元素的默认内外边距,让值等于0。
*{
padding:0
margin:0
}
注意: 行内元素照顾兼容性,不设置上下内外边距,只设置左右内外边距。但是转换为块级和行内块元素即可
背景属性
背景属性 | 用法 | 常用属性值 |
---|---|---|
背景颜色 | background-color | |
背景图像 | background-image | url(“图像路径”) |
背景图像平铺 | background-repeat | ①repeat (默认):水平垂直均平铺 ② no-repeat:不平铺 ③ repeat-x(y):水平(垂直)平铺 |
背景图像位置 | background-position | ①单位数值(px)②方向(top、left、center、right、bottom)③百分比(%) |
背景图像固定 | background-attachment | ①scroll(默认):图像随页面元素一起滚动②fixed:固定在屏幕上,不随页面元素滚动 |
背景综合设置 | background:背景色 图像url(“ ”) 平铺 定位 固定 |
元素类型转换
块级元素
- 在页面中以区域块的形式出现。
- 每个块元素通常都会独自占据一整行或多整行。
- 可以对其设置宽度、高度、对齐等属性。
- 是一个容器及盒子,里面可以放行内或者块级元素
- 常见块级元素:div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、th、hr等
注意: 文字类元素内不能使用块级元素,如<p>
标签,不能放<div>
标签, 或者<h1>~<h6>
标签放内容文字既可
行内元素
- 不占有独立的区域。
- 仅仅靠自身的字体大小和图像尺寸来支撑结构。
- 一般不可以设置宽度、高度、对齐等属性。
- 行内元素只能收纳文本或者其它行内元素
- 常见行内元素:span、ins、a、u、b、label、strong、em等
注意: 链接里面不能再放链接,特殊情况链接<a>
里面可以放块级元素,并且给<a>
转换一些块级模式
行内块元素
- 和相邻行内元素在一行上,之间可以显示多个
- 默认宽度就是本身内容宽度
- 行高、高度、外边距、内边距都可以控制
- 常见行内块元素:img、input、td 同时具有块元素和行内元素特点
div和span标签
<div>
<div>
标记是一个块容器标记。- 可以将网页分割为独立的部分,以实现网页的规划和布局。
- 大多数HTML标记都可以嵌套在
<div>
标记中,<div>
中还可以嵌套多层<div>
。 - 可以替代大多数的块级文本标记。
<span>
<span>
标记是一个行内标记。<span>
与</span>
之间只能包含文本和各种行内标记。- 标记常用于定义网页中某些特殊显示的文本,配合class属性使用。
- 当其他行内标记都不合适时,就可以使用
<span>
标记。
元素类型转换
disply:属性值
- inline:显示为行内元素
- block:显示为块元素
- inline-block:显示为行内块元素,可以对其设置宽高、对齐等属性,但是该元素不会独占一行
- none:隐藏,不显示,不占有页面空间
元素的显示与隐藏
1、disply:属性值
- block:显示元素
- none:隐藏元素,不再占有原来位置
2、visibility:属性值
- visible:元素可视
- hidden:元素隐藏,继续占有原来位置
3、overflow溢出:属性值
- visible:溢出部分也显示
- hidden:溢出部分隐藏(有定位盒子时,慎用)
- scroll:溢出部分显示滚动条,不溢出也显示
- auto:溢出显示滚动条,不溢出不显示
CSS3新增盒子模型属性
颜色透明度:
- background-color:(r,g,b,0~1)
- opoacity:0~1
图片边框:
阴影 :box-shadow
属性值 | 描述 |
---|---|
h-shadow | 必需,水平阴影的位置,允许负值 |
v-shadow | 必需,垂直阴影的位置,允许赋值 |
blur | 可选, 模糊距离,虚实 |
spread | 可选,阴影的尺寸,大小 |
color | 可选,阴影的颜色 |
inset | 可选,默认outset,不可以写,只能写outset改为内阴影 |
注意: |
- outset不可以写,否则阴影无效
- 盒子阴影不占用空间,不会影响其它盒子排列
渐变: background-image
- 线性渐变:linear-gradient(渐变角度 颜色值1,…颜色值n)
- 径向渐变:radial-gradient(渐变形状 圆心位置,颜色值1,…颜色值n)
- 重复渐变:repeat-linear(radient)-gradient(渐变角度(形状) 颜色值1, …颜色值n)
多背景图像: background-image: url() , url()…
修剪背景图像:
background-size:属性值1 …属性值n
background-origin:属性值
- padding-box:背景图像相对于内边距区域来定位
- border-box:背景图像相对于边框来定位
- content-box:背景图像相对于内容框来定位
background-clip:属性值
- border-box:默认值,从边框区域向外裁剪背景
- padding-box:从内边距区域向外裁剪背景
- content-box:从内容区域向外裁剪背景