4、css盒模型
css盒模型
1、盒模型概念
• 广义盒模型:文档中所有功能性及内容性标签,及文档中所有显示性标签
• 狭义盒模型:文档中以块级形式存在的标签(块级标签拥有盒模型100%特性且最常用)
• 盒模型组成:margin+border+padding+content
2、盒模型成员介绍
1、content
• 通过设置width与height来规定content
• 块级标签可以设置自身宽高,默认宽为父级宽(width=auto),高为0,高度可以由内容决定
• 内联标签不可以设置自身宽度,默认宽高均为0,宽高一定由内容决定
2、border
• border(边框)由border-width(宽度),border-color(颜色),border-style(风格)三部分组成
• border成员:border-left,border-right,border-top,border-bottom
• border-width成员:border-left-width,border-right-width,border-top-width,border-bottom-width
• border-color成员:border-left-color,border-right-color,border-top-color,border-bottom-color
• border-style成员:border-left-style,border-right-style,border-top-style,border-bottom-style
风格 解释
solid 实线
dashed 虚线
dotted 点状线
double 双实线
groove 槽状线
ridge 脊线
inset 内嵌效果线
outset 外凸效果线
3、padding
• padding成员:padding-left,padding-right,padding-top,padding-bottom
• padding整体设置
值得个数 方位 1 上下左右 2 上下 \| 左右 3 上 \| 右 \| 下 4 上 \| 右 \| 下 \| 左
4、margin
• margin成员:margin-left,margin-right,margin-top,margin-bottom
• margin整体设置
赋值个数 方位 1 上下左右 2 上下 \| 左右 3 上 \| 左右 \| 下 4 上 \| 右 \| 下 \| 左
3、边界圆角
• border-radius
• border-radius成员
成员 解释 border-top-left-radius 左上 方位 border-top-right-radius 右上 方位 border-bottom-left-radius 左下 方位 border-bottom-right-radius 右下 方位
• 单方位设置
赋值个数(值类型:长度 \| 百分比) 解释 1 横纵 2 横 \| 纵
• 按角整体设置
赋值个数(值类型:长度 \| 百分比) 解释 1 左上 右上 左下 右下 2 左上 右下 \| 右上 左下 3 左上 \| 右上 左下 \| 右下 4 左上 \| 右上 \| 右下 \| 左下
• 分向整体设置
格式 解释
1 / 1 横向 \| 纵向
4、其他相关属性
• max,min-width,height
• overflow
值 描述
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
• display
值 描述
inline 内联
block 块级
inline-block 内联块