标签：border 模型 元素 笔记 H5 padding 设置 边框 margin

 

盒模型

• 概念

　　盒模型是由内容、补白、边框、边界组成的   盒模型组成

• 内容区域

　　也就是你设置的宽高或者你没设置宽高，内容的多少

• 补白区域padding

　　　会撑大盒模型 长胖了

　　　一般用于内容和边界/边框之间的距离

　　　块元素可以设置上下左右padding 行内块元素只能设置左右padding

• padding的简写

1 一个值 当上下左右都相同时 padding:value;
2 两个值 上下相同 左右相同时 padding：上下值 左右值；
3 三个值 当上下不同 左右相同时 padding：上值 左右值 下值；
4 四个值 上下左右各不相同 padding：上下左右；

 

• 边框 border

　　 会撑大盒子 长胖了 　　块元素可以设置上下边框 行内元素只能设置左右边框 　　  去除边框 border：0；

• 边界 margin

　　不会改变盒子本身大小 　　一般用于元素和元素之间的距离 　　块元素可以设置上下左右margin 行内元素只能设置左右margin 　　块元素居中 margin：0 auto； 　　简写 用padding一样

• margin的特点

　　  margin左右值相加 　　margin上下值重合取最大值 　　子元素设置margin-top；父元素跟随子元素下移解决方式有三种 　　给父元素设置overflow:hidden; 　　给父元素设置padding-top:1px缺点会撑大父元素 　　给父元素设置border-top：1px solid transparent 缺点会撑大父元素  

• 当你设置宽高之后；再设置padding或者border是会改变原来盒子大小 如果希望是原来大小；要做减法

• 元素不设置宽高；直接设置 padding/border;是不需要做减法的

 

• button按钮 比较特殊！！！  当你设置宽高后：无论再怎么设置padding/border;他的大小不会变 不会长胖

• 书写页面时；可能你的数据都是正确的；但是存在被挤下来的风险 自己如果遇到 稍微 微调一下就好

 

   

 

标签：border,模型,元素,笔记,H5,padding,设置,边框,margin
来源： https://www.cnblogs.com/YiShuizhou/p/14655106.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。