H5学习笔记5 盒模型

 

盒模型

• 概念

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

 

盒模型组成

• 内容区域

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

• 补白区域padding

　　　会撑大盒模型 长胖了

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

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

• padding的简写

一个值 当上下左右都相同时 padding:value;
两个值 上下相同 左右相同时 padding：上下值 左右值；
三个值 当上下不同 左右相同时 padding：上值 左右值 下值；
四个值 上下左右各不相同 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;他的大小不会变 不会长胖

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