CSS盒子模型、内外边距、边框、行高、背景

2017-07-03 本文已影响141人楚简约

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

百分比：
如果行高使用百度比，那么这个行高的基数为当前标签字体大小。
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+上下内边距之和+上下边框宽度之和+上下外边距之和

我是楚简约，感谢您的阅读，

喜欢就点个赞呗，“❤喜欢”，

鼓励又不花钱，你在看，我就继续写~

非简书用户，可以点右上角的三个“...”，然后"在Safari中打开”，就可以点赞咯~