今日学习一点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;
注意:也可以用百分比表示,以左上角为坐标原点。