CSS学习-20180825

今日学习一点CSS；
一、盒子模型
一般的块状元素（div、p、pre、h1~h6）都具有盒子模型属性。

属性	含义
margin	外边距
border	边框
padding	内边距
content	文本等内容

1.margin属性
①调节border与网页和下一个盒子模型的border的边距。
注意：两个盒子模型同时调整时，取二者中的较大值。
②示例

margin:80px 60px 40px 20px; 
顺时针调节分别为top、right、bottom、left。
margin:80px 60px 40px;
       上   左右   
margin:80px 60px;
       上下  左右
margin:80px;    上下左右相同
注意：该属性值可以是数字、百分比。也可以单独设置如margin-top:80px;

2.border属性
①调节边框的粗细、线条、线条颜色。
②示例

border:1px solid black;
注意：该属性值可以是数字、百分比。

3.padding属性
①调节content与border的间距。
②示例

padding:80px 60px 40px 20px; 
顺时针调节分别为上、右、下、左。
padding:80px 60px 40px;
          上  左右  下
padding:80px 60px;
        上下  左右
padding:80px;   上下左右相同
注意：该属性值可以是数字、百分比。

4.content
①自身属性
——文字的属性、图片的属性。
②位置属性
——上下左右居中。
③背景属性
——颜色、图片背景及其属性。
二、背景
1.背景颜色
三种表示方法。

①.直接用英文单词表示
background-color:blue;
②.以#开头后接六位数的十六进制表示。
background-color:#123456;
③.以红绿蓝（范围1~255）三基色表示
background-color: rgb(120,120,130);

2.背景图片
①引入图片
background-image: url(“../logo.png”);
②图片自身调节
background-size:20px 20px;
③图片数量位置调节
a.数量
background-repeat: no-repeat;
仅有一张，未填充。
background-repeat: repeat-x;
水平方向向右填充。
background-repeat: repeat-y;
垂直方向向下填充。
注意：若无上述三句话，则自动全填充。
b.位置
background-position:10px 50px;
注意：也可以用百分比表示，以左上角为坐标原点。