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+上下内边距之和+上下边框宽度之和+上下外边距之和
CSS相关文章
《CSS简介,语法,选择器分类使用,属性设置》
《CSS盒子模型、内外边距、边框、行高、背景》
《CSS浮动、定位详解、标签嵌套显示隐藏、CSS初始化》
《CSS精灵图、滑动门详解》
我是楚简约，感谢您的阅读，
喜欢就点个赞呗，“❤喜欢”，
鼓励又不花钱，你在看，我就继续写~
非简书用户，可以点右上角的三个“...”，然后"在Safari中打开”，就可以点赞咯~
网友评论