CSS
前言
在前一章节,我们讲述了CSS字体样式和文本样式,本篇的内容要讲述盒子模型,盒子模型在CSS里是一个重点,请细新理解。后续还会有JS 的篇章。
CSS样式无法展示请自行测试。
1.盒子模型的感念。
说到盒子我们就会想到快递的包装盒和物品盒子。
如图片: 我们已带戒指的小盒子为例:
小红框就是为主
1.浅蓝色内区域是 内容(content) 部分,可以理解成生活中的物品。
2.我们向外看,有黄线画的区域是 内边距(padding) 部分,可以理解成物品外的保护棉或者泡沫。
3.红色框则是边框(border),也就是显示生活中的盒子。
4.蓝色划线则是外边距(margin),可以理解成小盒子与大盒子之间的距离。
宽高的值是内容加内边距和边框。
宽高表
属性 | 解释 | 值 |
width | 宽度属性 | 长度值|百分比|auto |
max-width | 最大宽度属性 | 长度值|百分比|auto |
min-width | 最小宽度属性 | 长度值|百分比|auto |
height | 高度属性 | 长度值|百分比|auto |
max-height | 最大高度属性 | 长度值|百分比|auto |
min-height | 最小高度属性 | 长度值|百分比|auto |
盒子表
属性 | 解释 | 值 | 单边值写法 | 多值用法 |
content | 内容 | 参考:http://www.w3school.com.cn/cssref/pr_gen_content.asp | ---- | ---- |
border | 边框 | 请看2.2内容 | ---- | ---- |
padding | 内边距 | 长度值|百分比 | padding-边的方向: | (看多值表)注:单边写法没有多值 |
margin | 外边距 | 长度值|百分比 | padding-边的方向: | (看多值表)注:单边写法没有多值 |
边框样式表
属性 | 解释 | 值 | 单边值写法 | ||||||||||||||||||||||||
border-width | 边框宽(厚度) | thin(薄) ,medium(正常),thick(厚)长度值 | border-边的方向-width: | ||||||||||||||||||||||||
border-color | 边框颜色 | RGB值,RGBA值等 | border-边的方向-color: | ||||||||||||||||||||||||
border-style | 边框样式 |
|
border-边的方向-style: | ||||||||||||||||||||||||
border | 外边框样式的缩写 | border:宽度 样式 颜色; | border-边的方向: |
边的方向表(不是单独属性 配合有单边值属性使用)
属性 | 意 |
---|---|
left | 左边 |
right | 右边 |
top | 上边 |
bottom | 下边 |
多值表(只对本章内容荣中的外边距和内边距)
一个值 | 两个值 | 三个值 | 四个值 |
---|---|---|---|
属性:值1; ( 4个方向都是值1) |
属性:值1 值2; (上下=值1,左右=值2) |
属性:值1 值2 值3; (上=值1,左右=值2,下=值3) |
属性:值1 值2 值3 值4; ( 上=值1,右=值2,下=值3,左=值4) |
2. 盒子的属性
2.1 width属性(宽度属性)和 height属性(高度属性)
宽度:
width:长度值|百分比|auto
(ie6无效)最大宽度:
max-width:长度值|百分比|auto
(ie6无效)最小宽度:
min-width:长度值|百分比|auto
高度:
height:长度值|百分比|auto
(ie6无效)最大高度:
max-height:长度值|百分比|auto
(ie6无效)最小高度:
min-height:长度值|百分比|auto
auto是自适应,高宽设置的是内容的高宽、
那些标签能设置高宽属性
1.块级元素
2.替换元素(如img )
2.2边框
边框宽度 | border-width |
---|---|
边框颜色 | border-color |
边框的样式 | border-style |
2.2.1 border-width属性(边框宽度)
语法
border-width:thin|medium|thick|长度
属性值 | 效果 |
---|---|
thin | 窄边框 |
medium | 中等边框 |
thick | 厚边框 |
长度值 | px,em |
2.2.2 border-color属性(边框颜色)
语法
border-color:RGB值|RGBA值
2.2.3 border-style属性(边框样式)
语法
border-style:none; 默认样式
none | 无边框(默认) |
---|---|
hidden | 与none相同。除非在表格元素中解决边框冲突时。 |
dotted | 定义点状边框。在大多数浏览器中呈现为实现 |
dashed | 定义虚线。在大多数浏览器中呈现为实现 |
solid | 定义实线 |
double | 定义双实线 |
groove | 定义3D 凹槽边框 |
ridge | 定义3D 垄状边框 |
inset | 定义3D inset边框 |
outset | 定义3D outset边抗 |
inherit | 规定应该从父元素继承边框样式。 |
2.2.4 如何设置 单个边框样式
值 | 意 |
---|---|
left | 左 |
right | 右 |
top | 头 |
bottom | 底 |
语法
边框宽度
border-left-width:5px;
border-right-width:10px;
border-top-width:15px;
border-bottom-width:20px;
边框颜色
border-left-color:#f00;
border-right-color:#0f0;
border-top-color:#00f;
border-bottom-color:#ff0;
边框样式
border-left-style:solid; 实线
border-right-color:dashed;虚线
border-top-color:double;双实线
border-bottom-color:dotted;点状线
2.2.5 边框样式的缩写
语法
border:宽度 样式 颜色;
不同方向的设置
border-left:宽度 样式 颜色;
border-right:宽度 样式 颜色;
border-top:宽度 样式 颜色;
border-bottom:宽度 样式 颜色;
如:
border:5px solid #f00;
2.2.6 padding属性 (内边距)
语法
padding:长度值|百分比;
不同方向的设置
padding-left:长度值|百分比;
padding-right:长度值|百分比;
padding-top:长度值|百分比;
padding-bottom:长度值|百分比;
多值含义:
padding:值1;// 4个方向都是值1
padding:值1 值2;// 上下=值1,左右=值2
padding:值1 值2 值3;// 上=值1,左右=值2,下=值3
padding:值1 值2 值3 值4;// 上=值1,右=值2,下=值3,左=值4
注:不能为负值
2.2.7 margin属性 (外边距)
语法
margin:长度值|百分比;
不同方向的设置
margin-left:长度值|百分比;
margin-right:长度值|百分比;
margin-top:长度值|百分比;
margin-bottom:长度值|百分比;
多值含义:
margin:值1;// 4个方向都是值1
margin:值1 值2;// 上下=值1,左右=值2
margin:值1 值2 值3;// 上=值1,左右=值2,下=值3
margin:值1 值2 值3 值4;// 上=值1,右=值2,下=值3,左=值4
margin:auto;居中
注:可以为负值
两个相邻的元素外边距合并,合并值为外边距最大的值。
1.默认情况下,相应HTML块级标签存在外边距。
2.声明margin属性,覆盖默认样式。
bady,h1,h2,h3,h4,h5,h6,p{
margin:0px;
}
2.2.7 盒子模型计算。
盒子的宽度
内容宽度+左内边框宽度+右内边框宽度+左边框宽度+右边框宽度+左外边框宽度+右外边框宽度=盒子总宽度
盒子的高度
内容高度+下内边框宽度+上内边框宽度+下边框宽度+上边框宽度+下外边框宽度+上外边框宽度=盒子总宽度
正常盒子模型
高宽设置的是内容高宽度。
IE盒子模型
高宽设置的是内容高宽加内边距的高宽度。
文件声明后 浏览器使用标准盒子模型
!DOCTYPE HTML
3.display属性
块级元素和内联元素的转换。
inline值:元素奖显示为内联元素,元素前后没有换行符。
block值:元素将显示为块级元素,元素前后会带有换行符。
inline-block值: 行内块元素,元素呈现为inline,具有block相应特性。
none:此元素不会被显示。
display属性更多
4.总结
本篇我们讲述了盒模型和display属性。
如本文章描述有误请尽快联系博主!感谢您的阅读与帮助!