主要介绍盒子模型。
盒子模型
生活中的盒子
网页中的盒子模型
盒子模型的概念
- 盒子模型用来“放”网页中的各种元素。
- 网页设计中内容，如文字、图片等元素，都可是盒子(DIV嵌套)
那些html元素可以设置高和宽属性
- 块级元素
、
、~
、
、
- 、
、
- 、
- 等复制代码
- 替换元素
、、
html标签分类
- 块级标签:占据一行，换行。
、、
、
- 、
、
- 、
~
、
、
- 行内标签:在一行，不换行。 非替换元素:
、、、......复制代码
- 替换元素:
、、
边框属性
- 边框宽度(border-width)
- 边框颜色(border-color)
- 边框样式 ( border-style)
- 4个方向来表示(上、下、左、右)
设置元素边框宽度
border-width : thin | medium | thick | 长度值复制代码
设置元素边框颜色
border-color : 颜色 | transparent复制代码
设置元素边框样式
border-style : 值 | none | hidden复制代码
边框属性
| 值 | 描述 |
|---|---|
| none | 定义无边框，默认值 |
| hidden | 与 “none” 相同。除非在表格元素中解决边框冲突时 |
| dotted | 定义点状边框。在大多数浏览器中呈现为实线 |
| dashed | 定义虚线。在大多数浏览器中呈现为实线 |
| solid | 定义实线 |
| double | 定义双线 |
| groove | 定义 3D 凹槽边框 |
| ridge | 定义 3D 垄状边框 |
| inset | 定义 3D inset 边框 |
| outset | 定义 3D outset 边框 |
| inherit | 规定应该从父元素继承边框样式。 |
不同方向表示:
- 宽度
border-[left | right | top | bottom]-width 复制代码
- 颜色
border-[left | right | top | bottom]-color复制代码
- 样式
border-[left | right | top | bottom]-style复制代码
缩写
- 边框缩写:
border : [宽度] | [样式] | [颜色]复制代码
- 不同方向:
border-top : [宽度] | [样式] | [颜色] border-left : [宽度] | [样式] | [颜色] border-right : [宽度] | [样式] | [颜色] border-bottom :[宽度] | [样式] | [颜色]复制代码
内边距属性
设置元素的内容与边框之间的距离(内边距或填充),
分4个方向 (上、右、下、左)
– padding-top : 长度值 | 百分比– padding-right :长度值 | 百分比– padding-bottom :长度值 | 百分比– padding-left :长度值 | 百分比 说明:值不能为负值复制代码
内边距属性缩写
padding : 值1; //4个方向都为值1padding : 值1 值2 ; // 上下=值1，左右=值2padding : 值1 值2 值3;// 上=值1，左右=值2，下=值3 padding : 值1 值2 值3 值4;// 上=值1，右=值2，下=值3,左=值2复制代码
外边距属性
设置元素与元素之间的距离(外边距),
4个方向(上、右、下、左)
– margin-top : 长度值 | 百分比 | auto– margin-right : 长度值 | 百分比 | auto– margin-bottom : 长度值 | 百分比 | auto– margin-left : 长度值 | 百分比 | auto 说明:值可为负值复制代码
外边距属性缩写
设置元素与元素之间的距离(外边距),
4个方向(上、右、下、左) margin : 值1; //4个方向都为值1
margin : 值1 值2 ; // 上下=值1，左右=值2margin : 值1 值2 值3;// 上=值1，左右=值2，下=值3margin : 值1 值2 值3 值4;// 上=值1，右=值2，下=值3,左=值2复制代码
一般经验
- 默认情况下，相应HTML块级元素存在外边距 body、h1~h6、p......
- 声明margin属性，覆盖默认样式
body, h1, h2, h3, h4, h5, h6, p{ margin: 0;}复制代码 - margin值为auto , 实现水平方向居中显示效果
外边距合并
- 垂直方向，两个相邻元素都设置外边距，外边距会发生合并
- 合并后外边距高度=两个发生合并外边距的高度中最大值
盒子模型计算
标准盒子模型
- 在 CSS 中，width 和 height 指的是内容区域的宽度和高度
- 增加内边距、边框和外边距不会影响内容区域的尺寸
- 但会增加元素框的总尺寸
ie盒子模型
统一起来
增加DOCTYPE
复制代码
display属性
- inline 元素将显示为内联元素，元素前后没有换行符
- block元素将显示为块级元素 , 元素前后会带有换行符
- inline-block 行内块元素，元素呈现为inline，具有block相应特性
- none 此元素不会被显示
-------------------------华丽的分割线--------------------
看完的朋友可以点个喜欢/关注，您的支持是对我最大的鼓励。
个人博客和
想了解更多，欢迎关注我的微信公众号：番茄技术小栈