五、css的常用属性
1、颜色属性
1、color:red;直接颜色的英文
2、color:#ffee33;十六进制表示
3、color:rgb(255,0,0);rgb三原色表示，取值0~255
4、color:rgba(255,0,0,0.5);a表示透明度
2、字体属性
1、font-size:50px/50%/larger (大小)
2、font-family:'lucida Bright' （字体）
3、font-weight:lighter/bold/border/（粗细）
4、style="font-style:oblique" （斜体）
3、背景属性（重要）
1、background-color:red; 背景颜色
2、background-image: url("F://我鱼//1//-1c4f77f2262c4c10.jpg");
背景图片，当图片小于设置的大小时，会重复，平铺
3、background-repeat: no-repeat;不铺满
4、background-repeat: repeat-x/y;横向/纵向 铺满
5、background-position: center（左右）center（上下）;图片居· 中
注意：将背景属性加在body上，要记得给body加上一个height，否则结果异常，这是因为body为空，无法撑起背景图片，另外，如果此时要设置一个width=100px，，你也看不出效果，除非你设置出html。
eg：举例
<!DOCTYPE html>
<html>
<head>
<title>背景图片</title>
<style type="text/css">
span{
display: inline-block;
/*可以让内联标签变块级标签，也可以反过来，也可以让一个标签有块级标签和内联标签的特性*/
width: 18px;
height: 20px;
background: no-repeat 0 -100px url("F://我鱼//1//-1c4f77f2262c4c10.jpg");
}
</style>
</head>
<body>
<span></span>
</body>
</html>
4、文本属性
font-size:10px;
text-align:center;横向排列
line-height:200px;文本行高 通俗讲：文字高度加上文字上下的空白区域的 高度 50%：基于字体大小的百分比
vertical-align:-4px;设置元素内容的垂直对齐方式，只对行内元素有效， 对块级元素无效
text-indent:150px;首行缩进
letter-spacing:10px;每个字之间的属性
word-spancing:20px;单词之间的间距
text-transform:capitalize;所有单词首字母大写
<!DOCTYPE html>
<html>
<head>
<title>文本属性</title>
<style type="text/css">
div{
height: 100px;
background-color: yellow;
text-align: center;
text-indent: 35px;
word-spacing: 20px;
}
</style>
</head>
<body>
<div>hello word
</div>
</body>
</html>
5、边框属性
border：边框粗细、实虚线（solid/dashed）、颜色
上面是下面三个的简写
border-style:solid;
border-color:yellow;
border-width:20px;
简写:border:30px rebeccapurple solid;
eg：举例：
<!DOCTYPE html>
<html>
<head>
<title>边框属性</title>
<style type="text/css">
.div1{
width: 100px;
height: 100px;
border-color: red;
border-style: dashed;
border-width: 4px;
border-top-color: yellow;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
6、列表属性
ul,ol{
list-style:decimal-leading-zero;01、02、03.。。。。
list-style:none;什么都没有<br> list-sytle:circle;小圆圈
list-style:upper-alpha;大写英文字母
list-style:disc;小黑点
list-style: lower-latin;小写英文字母
}
eg：举例：
<!DOCTYPE html>
<html>
<head>
<title>列表标签属性</title>
<style type="text/css">
ol{
list-style:decimal-leading-zero;
}
ul{
list-style: lower-latin;
}
</style>
</head>
<body>
<ol>
<li>www</li>
<li>zzz</li>
<li>qqq</li>
</ol>
<ul>
<li>xxx</li>
<li>jjj</li>
<li>yyy</li>
</ul>
<dl>
<dt>中国</dt>
<dd>陕西</dd>
<dd>四川</dd>
<dd>河北</dd>
</dl>
</body>
</html>
7、display属性(重要)
display：none隐藏
display:block(可以将一个内联标签改为块级标签)
displayinline（可以将一个块级标签改为内联标签）
display:inline-bolock（让一个标签有块级标签和内联标签共同的特点）
display:inline-bolock可做列表布局，其中的类似于图片间的间隙小bug可以通过如下设置解决：
inline-block默认的空格符就是标签与标签之间空格。
1、我们可以通过margin：-3px来解决，但是：
1)、我们布局肯定有很多元素，不可能每个都添加margin负,这样维护成本太大了
2）、我们线上代码如果压缩，那么我们就不存在哪个4px的问题了，那么 我们的margin负就会造成布局混乱
2、我们可以给几个标签加上一个父级div,然后：
div{word-spacing:-5px}
eg：举例：
<!DOCTYPE html>
<html>
<head>
<title>display属性</title>
<style type="text/css">
#a,p,span,a{
width: 100px;
height: 100px;
display: inline-block;
}
#a{
background-color: red;
}
p{
background-color: green;
}
span{
background-color: blue;
display: none;
}
a{
background-color: yellow;
}
#b{
word-spacing: -8px;
}
</style>
</head>
<body>
<div id="b">
<div id="a">wzqwzq</div>
<p>wzq</p>
<span>xjy</span>
<a href="#">你过来啊</a>
</div>
</body>
</html>
六、css的内外边距
1、margin：用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
2、padding：用于控制内容与边框之间的距离。
3、border（边框）：围绕在内边距和内容外的边框。
4、content（内容）：盒子的内容，显示文本和图像。
重要：当指定一个css元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道完全大小的元素，你必须添加填充、边框和边距。
思考：margin collapse(边界塌陷或者说边界重叠)
外边界的重叠只产生在普通流文档的上下外边距之间，这个看起来有点奇怪的规则，其实有现实意义。设想，当我们上下排版一系列规则的块级元素（如段落p）时，那么块级元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离。
1、兄弟div：上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值。
2、父子div：如果父级div中没有border，padding，inline content，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline content中的其中一个，然后按照此div进行margin；
margin：上 右 下 左
margin：上 左右 下
margin：上下 左右
margin：上下左右
eg：举例：
<!DOCTYPE html>
<html>
<head>
<title>css的内外边距</title>
<style type="text/css">
.div1{
width: 100px;
height: 100px;
background-color: red;
border:20px solid yellow;
padding: 30px;
margin-top: 40px;
}
.div2{
width: 100px;
height: 100px;
background-color: green;
border: 2px solid blue;
}
.div3{
height: 400px;
background-color: rgb(25,78,96);
border:1px solid red;
}
.div4{
width: 50px;
height: 50px;
background-color: rgb(96,50,99)
}
body{
border: 2px solid green;
margin: 0px;
}
</style>
</head>
<body>
<div class="div4"></div>
<div class="div3">
<div class="div1"></div>
<div class="div2"></div>
</div>
</body>
</html>
173
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
