html盒⼦左右边框边距,CSS盒⼦模型、内外边距、边框、⾏
⾼、背景
1.盒⼦模型
所谓盒⼦模型就是把HTML页⾯中的元素看作是⼀个矩形的盒⼦，也就是⼀个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。
以苹果⼿机盒⼦为例:
盒⼦的挡板---------->边框：border
填充的泡沫---------->内边距：padding
盒⼦中装的物体---->内容
盒⼦与盒⼦之间的距离----->外边距：margin
CSS盒⼦模型.png
2.内外边距
内边距属性
padding属性⽤于设置内边距，也是复合属性，相关设置如下：
padding-top：上内边距
padding-right：右内边距
padding-bottom：下内边距
padding-left：左内边距
padding:[上内边距 右内边距 下内边距 左内边距]
还有⼀种是:
padding: 10px 20px 30px;
padding: 上内边距 左右内边距 下内边距;
外边距属性
margin属性⽤于设置外边距，也是复合属性，相关设置如下：
margin-top：上外边距
margin-right：右外边距
margin-bottom：下外边距
margin-left：上外边距
margin: [上外边距 右外边距 下外边距 左外边距]
还有⼀种是:
margin: 0 auto; /*让元素居中 */
为了更⽅便地控制⽹页中的元素，制作⽹页时，可使⽤如下代码清除元素的默认内外边距：
*{
padding:0; /*清除内边距*/
margin:0; /*清除外边距*/
}
内外边距使⽤单位: px
3.边框
border-style 确定边框的显⽰样式
None：没有边框
Solid：实线
Dashed：虚线
Dotted：点线
Double：双线
Border-width 边框宽度： 具体的像素值px
Border-color 边框颜⾊
表单的边框通常改为 0；
border:0 none;
表格的细线边框
table { border-collapse:collapse; }
轮廓 (链接有虚线 和 ⽂本框 有 蓝⾊边框)
outline-style:none;
边框样式的连写⽅式：
Border:Border-width border-style Border-color;
4.⾏⾼ line-height:
两个基线之间的距离叫做⾏⾼。⾏⾼是可以继承。
⾏⾼.png
css鼠标点击样式
百分⽐：
如果⾏⾼使⽤百度⽐，那么这个⾏⾼的基数为当前标签字体⼤⼩。120%,150%
em:
跟百分⽐的使⽤是⼀样⼀样的。唯⼀不同的是它是以倍数出现。1.5em,1.2em
什么单位也不带：
不带单位和em是⼀样的。
直接⽤px作单位,⼀般会配合设置⽔平居中
text-align: center;
5.背景
Background-color 设置背景颜⾊
Background-image 设置背景图⽚ url(图⽚的路径)
background-repeat 背景是否平铺：
No-repeat：不平铺
repeat-x：在x轴平铺
repeat-y：在y轴平铺
Background-position 设置背景图⽚的位置
取值：
top 上center中 bottom下y轴
Left左 center中 right 右 x轴
注意：如果使⽤上⾯的关键字x轴和y轴的设置不分先后。
其实还可以设置成具的像素值:
注意：如果使⽤了具体的像素值那么x，y轴是分先后的，先是x轴，后是y轴。
background-attachment 背景是否固定
Fixed：固定
背景的连写⽅法：
Background: color image repeat position attachment;
eg:
Background:url(图⽚的路径) no-repeat top center;
伪类
每⼀个元素都有⾃⼰的伪类(但是不建议使⽤其它元素的伪类)，伪类⼀般应⽤在a标签上：
爱恨：LOVE HATE 设置a标签的伪类
我们必须按照⼀定的顺序来设置，由此就有了爱恨原则: l v h a
a: link 标签的样式
a: visited 访问之后的样式
a: hover ⿏标悬停的样式
a: active 点击时的样式
focus 得到焦点时候的样式
获得焦点.
⼤多数浏览器，如Firefox、IE6及以上版本都采⽤了W3C规范，符合CSS规范的盒⼦模型的总宽度和总⾼度的计算原则是：盒⼦的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和
盒⼦的总⾼度= height+上下内边距之和+上下边框宽度之和+上下外边距之和
CSS相关⽂章
我是楚简约，感谢您的阅读，
喜欢就点个赞呗，“❤喜欢”，
⿎励⼜不花钱，你在看，我就继续写~
⾮简书⽤户，可以点右上⾓的三个“...”，然后"在Safari中打开”，就可以点赞咯~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。