css(2)
- 2019 年 12 月 16 日
- 筆記
一、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是完全不透明。
