盒子模型的基础

盒子模型
- 边框（border）
- border可以设置元素的边框，边框分成三部分，边框的（粗细）边框的样式，边框的颜色
- ```
<style>div {width: 100px;height: 100px;border-width: 200;border-style: 边框的样式 border-style: solid 实线边框 dashed 虚线边框 dotted 点线边框border-color: 边框颜色}
</style>
<body><div></div>
</body>
```
- 边框的简写：没有顺序，一般规定。
- ```
border-width: 200;
border-style: 边框的样式 
border-color: 边框颜色
```
- 简写后：border: 5px solid pink;
- 可以分别让四个边框各自修改
- border-top: 大小边框样式边框颜色。这是让上边框改变，还有bottom left right
- border: 1px solid bule;
- border-top: 1px solid red;//这个最靠近body里面的容器故呈现上边框是红色，其他边其他颜色
- 当想合并两个方框的边框使其1+1=1则
- ```
border-collapse:collapse;
```
- 测量盒子的大小的时候，不量边框
- 测量包括边框时需要，width/height剪切边框的宽度
- 让内容与边框有距离则利用填充的方法
- ```
padding-left: 200px;//将左边的进行填充
padding-top: 38px;//将上边进行填充
```
如果固定了和盒子的大小使用padding就会使盒子变大，故当使用padding时要将其与盒子一起相加
当父类有witch/height时，子类无需在定义。定义会超出父类的范围。在子类padding不会超出父类的范围
外边距margin-left: 数值
右外边距margin-right: 数值
上外边距margin-top: 数值
下外边距margin-bottom: 数值
让盒子水平居中
1、盒子必须指定了宽度（width)
2、盒子左右的外边距都设置为auto

<style>div {width: 100px;height: 100px;background-color: aqua;margin: 0 auto;//0代表上下外边框为0，auto自动水平对齐}</style><body><div></div>
</body>

以上的方法是让让块级元素水平居中，行内元素或者行内块元素水平居中需要给其父类元素添加text-align: center即可
嵌套块元素垂直外边距的塌陷
由于两个父子关系的块元素，两个都用margin-top: 59px；最终执行的是父类的塌陷
解决方法一、父类定义上边框
border: 1px solid transparent；//transparent是全透明
方法二、给父类上内边框
padding: 1px ；
方法三、给父类添加overflow.hidden

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/150256.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

盒子模型的基础

盒子模型

相关文章

时序分解 | Matlab实现CEEMDAN完全自适应噪声集合经验模态分解时间序列信号分解

基于SSM的旅游网站设计与实现

Springboot+vue的开放性实验室管理系统（有报告）。Javaee项目，springboot vue前后端分离项目。

python开发幸运水果抽奖大转盘

Qt 设置软件的版本信息:QMake、CMake工程

CDN是什么？(网络零基础入门篇)

黑豹程序员-架构师学习路线图-百科：JSON替代XML

高数：第三章:一元函数积分学

7 航空公司客户价值分析

3D孪生场景搭建：模拟仿真

王道考研计算机网络——传输层

【CMU15-445 Part-15】Query Planning Optimization II

几种开源协议的区别（Apache、MIT、BSD、MPL、GPL、LGPL）

26358-2022 旅游度假区等级划分思维导图

Labview 实战 99乘法表

【成像光敏描记图提取和处理】成像-光电容积描记-提取-脉搏率-估计（Matlab代码实现）

MySQL存储结构

黑马点评-01基于Redis实现短信登陆的功能

spark on hive

Vue中如何进行拖拽与排序功能实现