HTML-CSS

Posted 2020-06-13

1.CSS背景

#box{width:300px;height:300px;background-color:#333; background-image:url(img/img.gif); background-repeat:no-repeat; background-position:-20px -30px; border:10px solid red;}
/*
background 背景
background-color 背景颜色
background-image 背景图片 url(图片路径)
background-repeat 背景平铺
repeat 平铺
no-repeat不平铺
repeat-x 水平平铺
repeat-y 垂直平铺
background-position 背景图定位
关键字
x: left 图的左侧和元素的左侧对齐
center 图的中间和元素的中间对齐
right 图的右侧和元素的右侧对齐
y: top 图的顶部和顶部的左侧对齐
center 图的中间和元素的中间对齐
bottom 图的底部和元素的底部对齐
具体值
x: 正值从左向右移动,负值从右向左移动
y: 正值从下向上移动,负值从上向下移动
*/

 

2.字体

#box{width:300px;border:1px solid #000; font:14px "宋体";}
/*
font
font-size 文字大小
font-weight 文字加粗(bold加粗/normal正常)
font-style 文字倾斜(italic倾斜/normal正常)
line-height 行高 （文字在一行上下居中）
font-family 字体
-------------------------------------
font:font-weight font-style font-size/line-height font-family;
font:font-size font-family(必须要写)
*/

 

#box{width:300px;border:1px solid #000; font:14px/30px Arial,"宋体"; color:red; word-spacing:10px;}
/*
color 文字颜色
text-indent 首行缩进 (1em=1个文字大小)
text-align 文本对齐方式(left/center/right)
text-decoration 文本修饰(underline下划线/line-through 删除线/overline 上划线/none)
letter-spacing 字母间距(字间距)
*/

 

3.填充

#box{width:100px;height:100px;background:red;border:10px solid #000; padding:20px 50px 80px 100px;}
#div{width:100px;height:100px;background:blue;}
/*
padding 内填充(padding在元素的边框以内，内容之外，padding同样显示元素的背景)
padding-top
padding-right
padding-bottom
padding-left

可视宽(高):可视宽(高)=border+padding+width(height);
*/

 

4.边距

#box{width:200px;height:200px;background:Red;border:10px solid #000; margin:30px;}
#div{width:200px;height:200px;background:blue;border:10px solid #ccc; margin:40px;}
/*
margin 外边距(margin元素的边框之外不显示元素背景)
margin:10px 20px;
margin:10px 20px 40px;
margin:10px 20px 40px 60px;
margin-top
margin-right
margin-bottom
margin-left

margin叠加相邻两个元素的上下margin是叠加在一起
*/

/*
margin传递，子元素的上下margin会传递给父级
*/