css学习（2）

来源：互联网发布：php 实现微信网页授权编辑：程序博客网时间：2024/04/29 23:28

22、css盒子模型

1盒子中的内容：content

2盒子的边框：border

3盒子的边框与内容之间的距离，称为填充，padding，内边距

4多个盒子存在，盒子与盒子之间的距离，称为边界，margin，外边距

盒子所占的实际宽度=左右边界+左右边框+填充+内容

padding:20px 0 0 30px(上右下左，顺时针方向)

padding-top:20px; padding-right:0; padding-bottom:0;padding-left:30px;

padding:10px;(上下左右)

padding：20px 50px;(上下，左右)没值的就到对面找

padding:20px 50px 20px;(上，左右就，下)没值的就到对面找

***margin:10px auto 10px;(水平居中)

******设置所以浏览器的默认内外边距为0，用到哪些元素，就加上去{padding:0;margin:0;}

列表ul{list-style:none;}(不使用列表的符号)

边框样式{border:2px solid blue;}

{border-top:2px solid blue;}

***让盒子中的内容垂直居中，设置元素行高等于盒子行高

23、CSS中元素的分类

块元素：<div> <p> <body> h1-h6等，宽高值起作用

内联元素（行元素）：<a><em><span>等宽高值不起作用

a{display:block;width:10px;height:10px;}宽高将起作用

div{display:inline;width:10px;height:10px;}宽高值将不起作用

24、CSS控制背景

background：background-color:gold;background-image:url(“”);

background-repeat:repeat,no-repeat,repeat-x,repeat-y;

background-position:right buttom;(右下角)(第一个参数水平方向，第二个参数垂直方向)

background-position:100px 200px;

background-attachment:scroll,fixed;

25、CSS精灵(按钮：当鼠标移动过去时变色，准备两张按钮图片)

1.body{margin:0;padding:0;}

body{padding:100px;}

a{width:88px;height:44px;background:#ccc;background:url(“一张图片”);display:block;}

a:hover{background:url();}

2.#btn{margin-top:100px;background:url(“两张图片合成一张图片”);}

#btn:hover{background-position:0 -44px;

a{width:88px;height:44px;background:#ccc;background:url(“一张图片”);display:block;}

ui会被p{}

0 0