css(2)
一、css属性及用法
1.1css样式操作
块级标签的长度和宽度都是可以设置的，但是行级标签不可以直接设置长度和宽度。如：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> div {
width:200px;
height:300px;
background-color: fuchsia;
}
span{
width:100px;
height:150px;
background-color: aqua;
}
</style>
</head>
<body>
<div>
我是div
</div>
<span>
我是span
</span>
1.2字体属性
1.2.1文字字体
font-family可以将多个字体名保存起来，如果浏览器不支持第一个字体会依次尝试后面的字体。
body{
font-family:"华文行楷","微软雅黑","Arial", sans-serif
}注意：sans-serif必须要加上，否则不能用。
1.2.2字体大小
body{
font-family:"华文行楷","微软雅黑","Arial", sans-serif;
font-size:50px;
}可以更改整个body的字体，也可以只更改某一行的字体，以及字体的大小。
1.2.3font-weight
值 | 描述 |
|---|---|
normal | 默认值，标准粗细 |
bold | 粗体 |
bolder | 更粗 |
lighter | 更细（更淡） |
100~900 | 设置具体的粗细 |
inherit | 继承父元素字体的粗细 |
这里需要说明，上面这些都是font-weight的属性，具体用法和上面的字体、字体大小用法相同。
1.2.4文本的颜色
方法1：color用于修改文本的颜色，color直接选取对应的颜色单词。
方法2：使用pycharm的取色版取出色值，在取出的色值前面加#作为color的值，如：color: #FF00FF;
方法3：使用RGB设置颜色，如：color: rgb(255,255,255);
另外设置RGB值的方式还有color:rgba(123,123,123,0.6);最后一个值用来调节字体的透明度。
1.3文字属性
1.3.1文字对齐
text-again属性规定了元素中文本的水平对齐方式。
值 | 描述 |
|---|---|
left | 左对齐，默认这种方式 |
right | 右对齐 |
center | 居中 |
justify | 两端对齐 |
1.3.2文字装饰
text-decoration给文字添加特殊的效果。
值 | 描述 |
|---|---|
none | 定义的标准文本 |
underline | 文本下方画的一条线 |
overline | 文本上方画的一条线 |
line | 穿过文本的一条线 |
继承父元素的text-decoration的值 |
常用的应用场景：去掉a标签自带的的下划线。
a{
text-decoration: none;
}1.3.3首行缩进
p{
text-indent:40px ;
}1.4背景属性
添加背景图片
background-image: url("图片1.jpg");
background-color:black;只有不设置背景图片时可以用
background-repeat:repeat-x;只在水平方向上平铺背景图片
background-repeat:repeat-y;只在竖直方向上平铺背景图片
background-repeat:no-repeat;不平铺背景图片
这三个功能只有在背景图片小于网页大小时才能够使用，否则看不到效果，所谓平铺就是几个背景图片把规定的区域铺满。
background-position: center;背景图片的位置，可以设置x,y轴，也可以直接设置x，y轴的数值。
如background-position: 200px 200px;可以对以上程序进行简写：
background: url("捕获.PNG")no-repeat left top;1.5边框
1.5.1边框的属性
- border-width
- border-style
- border-color
直接对其边框进行设置：
#a1{
border-width: 5px;
border-style: solid;
border-color: darkslateblue;
}可简写为如下：
border:5px solid darkslateblue;边框样式
值 | 描述 |
|---|---|
none | 无边框 |
dotted | 点状虚线边框 |
dashed | 矩形虚线边框 |
solid | 实线边框 |
边框的上、下、左、右等的设置：
border-top-style: dotted;
border-top-color: cornflowerblue;
border-right-style: dotted;
border-bottom-style: dotted;
border-left-style: none;1.5.2border-radius
border-radius给边框的四角加弧度，当边框是正方形时，设置半径是边框的一半可以得到一个圆形，如果边框是长方形则可以得到一个椭圆。
border-radius: 50%;1.6display属性
display用于控制HTML元素的显示效果。
值 | 描述 |
|---|---|
none | HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用 |
block | 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分,使行内元素变成块级元素 |
inline | 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。使块级元素变成行内元素 |
inline-block | 使元素同时具有行内元素和块级元素的特点 |
display的none和visibility的hidden的区别：两者都可以隐藏元素，但是display将元素隐藏之后，元素所占用的位置也会被其他元素占用，而visibility的hidden只隐藏了元素，元素的位置还是存在的。
1.7css盒子模型
值 | 描述 |
|---|---|
margin | 控制元素与元素之间的距离 |
padding | 控制内容与边框之间的距离 |
border | 内容外面的边框 |
content | 内容 |
margin的设置与border的设置类似：
margin-top: 10px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 20px; 也可以使用简写方式：
margin: 10px 10px 15px 20px;
这里如果只写第一个参数默认所有的边框都按第一个参数，如果只写两个参数，默认第一个参数控制上下，第二个参数控制左右，如果写三个参数则第一个控制上，第二个控制左右，第三个控制下，如果四个全写则控制顺序为上、右、下、左（顺时针）。此外padding的使用方式和margin相同。
1.8float（浮动）
在css中任何元素都可以浮动，浮动的特点：
浮动的框可以左右移动，直到碰到网页的边框或者另一个浮动的框，浮动的框可以覆盖固定的框，而且浮动的框会把原来框占有的位置让出来。（需要说明的，浮动的框可以覆盖固定的框，但是覆盖不了固定框的文本内容，这些文本内容会被挤出到浮动框下方显示）（另外本人试的浮动的p标签改成的块标签无法覆盖固定的块标签div，但是浮动的div可以。）
浮动的应用场景：
浮动多用于页面的功能块的搭建，如小米商城的页面，就大量使用了浮动。
浮动常用的三种方式：l
- left 向左浮动
- right 向有浮动
- none 默认值，不浮动
1.8.1浮动带来的影响
会使浮动框的父标签塌陷，就是当边框是父标签的时，如果子标签设置为浮动，则外边框就会塌陷成一条线。
如：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width:200px;
height: 200px;
background: cornflowerblue;
float: right;
}
.c2{
border: 1px solid black ;
}
#d2{
width:200px;
height: 200px;
background: red;
}
p{
width: 100px;
height: 300px;
display: block;
background: blueviolet;
float: left;
margin-top: 0px;
}
</style>
</head>
<body>
<div id="d1" class="c2">
<div class="c1"></div></div>
<div id="d2">div2</div>
<p>p</p>
</body>clear属性规定元素的哪一册不允许其他浮动元素。
值 | 描述 |
|---|---|
left | 左侧不允许浮动元素 |
right | 右侧不允许浮动元素 |
both | 两侧不允许有浮动元素 |
none | 默认值，允许浮动元素 |
inherit | 从父元素继承clear属性的值 |
clear只会对自身起作用。
1.8.2清除浮动带来的影响
解决浮动带来的父标签塌陷问题。
主要有三种方式：
- 固定高度（给父标签加固定高度）
- 伪元素清除法（clearfix）
- overflow:hidden
伪元素清除法（使用较多）：
.clearfix:after {
content: "";
display: block;
clear: both;
}具体使用如下程序：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width:200px;
height: 200px;
background: cornflowerblue;
float: right;
}
.c2{
border: 1px solid black ;
}
#d2{
width:200px;
height: 200px;
background: red;
}
p{
width: 100px;
height: 300px;
display: block;
background: blueviolet;
float: left;
margin-top: 0px;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div id="d1" class="c2 clearfix">
<div class="c1"></div></div>
<div id="d2">div2</div>
<p>p</p>
</body>1.9overflow溢出属性
溢出发生的原因是标签的文本内容太多，标签的尺寸放不下这么多内容，导致标签文本内容的溢出。
值 | 描述 |
|---|---|
visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
hidden | 内容会被修剪，并且其余内容是不可见的。 |
scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
inherit | 规定应该从父元素继承 overflow 属性的值。 |
- overflow（水平和垂直均设置）
- overflow-x（设置水平方向）
- overflow-y（设置垂直方向）
具体程序如下：
#d2{
width:200px;
height: 200px;
background: red;
overflow: auto;
}
可以直接在id,或者继承的类里写。1.9.1 圆形头像示例
<head>
<meta charset="UTF-8">
<title>圆头像</title>
<style>
body{
background-color: cornflowerblue;
}
.c3{
height: 120px;
width:120px;
border: 5px solid black;
border-radius: 50%;
overflow: hidden;
}
img{
width: 150%;
}
</style>
</head>
<body>
<div class="c3">
<img src="小狗.png" alt="">
</div>
</body>效果：
1.10定位（position）
1.10.1static
static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。
1.10.2relative（相对定位，了解）
相对定位是相对于该标签原来的位置进行定位。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。
1.10.3absolute（绝对定位，重要）
定义：相对于已经定位过得父标签再做定位。已经定位过指的是这个标签的position不是static状态。
重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。
另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
粉红色框借助蓝色框进行了绝对定位，具体程序如下：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0px 0px ;
}
.c1{
width: 100px;
height: 100px;
background-color: aqua;
position: relative;
}
.c2{
position: absolute;
height: 100px;
width: 150px;
background-color: fuchsia;
left :100px;
}
</style>
</head>
<body>
<div class="c1">
</div>
<div class="c2"></div>
</body>1.10.4固定定位（fixed）
固定定位实现的功能是比如侧边功能调，不管你怎么滑动网页，它都会固定在某一个位置不变。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0px 0px ;
}
.c1{
height: 1000px;
background-color: blue;
}
.c2{
height: 1000px;
background-color: fuchsia;
}
.c3{
border: 5px solid black;
background-color: aqua;
position: fixed;
bottom: 50px;
right: 50px;
}
</style>
</head>
<body>
<div class="c1">
</div>
<div class="c2"></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3">回到顶部</div>
</body>脱离文档流：
浮动的元素、绝对定位、固定定位
不脱离文档流：
相对定位
1.10.5z-index
#i2 {
z-index: 999;
}设置对象的层叠顺序。
- z-index 值表示谁压着谁，数值大的压盖住数值小的，
- 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
- z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位的元素，永远压住没有定位的元素。
- 从父现象：父亲怂了，儿子再牛逼也没用
1.10.6opacity
用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。
腾讯云开发者
