目录
#博学谷IT学习技术支持#
一、基础认识
css的中文又叫做：层叠样式表。
语法：选择器 + {属性名： 属性值}、
css引入方式：1.内嵌式，写在style标签中。通常放在head中。2.行内式：写在style标签中，写在标签中。3.外联式：单独写一个css文件，通过link把该文件引入。
二、选择器
| 选择器 | 在html中写法 | 在css中写法 |
|---|---|---|
| 标签选择器 | 就是标签本身 | div{ } |
| 类选择器 | class= "banner" | .banner { } |
| id选择器 | id = “wrapper” | #wrapper { } |
| 通配符选择器 | 无 | * { } |
此外还有：后代选择器、子代选择器、交集选择器、并列（兄弟）选择器、伪类选择器。
三、字体和文字样式
| 字体样式 | css属性 | 属性值 |
|---|---|---|
| 大小 | font-size | 数字+px |
| 粗细 | font-weight | 数字/英文 |
| 是否倾斜 | font-style | normal/italic |
| 字体系列 | font-family | |
| 文字颜色 | color | 英文/#333/rgba() |
| 行高 | line-height | 数字/数字+px |
| 文本缩进 | text-indent | 数字+px/数字+em |
| 水平居中 | text-align | left/right/center |
| 文本修饰 |
text-decoration
| 一般用none |
四、背景相关属性
1.背景颜色
属性名：background-color，值可以写 ：例子：red/#fff/rgba(0,0,0,0)
2.背景图片
属性名：background-image
属性值：ul(加入图片的连接)
3.背景平铺
属性名：background-repeat
属性值：
| repeat | 默认值，水平和垂直方向都平埔 |
| no-repeat | 不平铺 |
| repeat-x | 沿着水平方向平铺 |
| repeat-y | 沿着垂直方向平铺 |
4.背景位置
属性名：
background-position
属性值：水平方向 垂直方向；
可以使用方位名词，例如：right top;表示右上
可以使用坐标系 ：0 0；表示盒子的左上角
5.背景相关属性连写方式
属性值：background
属性值：color image repeat position
五、元素的显示模式
元素一共有三种显示模式：
第一种，行内元素 ：a、span 、b、u、i、s、strong、ins、em、del……
第二种：块级元素 ：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……
第三种：行内块元素 ：input、textarea、button、select……
元素模式转换：
属性名 ：display
属性值：
inline :转换成行内元素；
block：转换成块级元素；
inline-block :转换成行内块元素。
六、css特性
1.继承性
子元素继承父元素的相关属性
像文字全部属性子元素都可以继承
但元素如果有浏览器默认的样式，继承就会失效。
例如: a标签的颜色不可以继承；h系列的标签字体大小不可以继承。
2.层叠性
当给一个标签的属性设置了不同的值时，浏览器工作方式是从上往下进行，所以落在最后的值会生效。
3.优先性
七、盒子模型
盒子模型的组成部分：
内容部分 ：content 设置宽高
内边距：padding 在内容与边框之间的边距
边框：border 盒子周围
外边距 ：margin 边框以外的边距
设置 内容区域：
width : 100px;
height :100px;
设置边框：
border : solid 10px #333;
此时盒子的大小会变大，宽 = width + 左右边框 =120px ；高 = height + 上下边框 =120px;
设置内边距：
padding : 20px 20px 20px 20px;
这四个值分别表示：上 右 下 左 边距
此时盒子的大小也会变化·，具体大小不予计算。
设置外边距：
margin : 10px 10px 10px 10px;
这四个值分别表示：上 右 下 左 边距
注意： CSS3中，给出一个属性 ：
box-sizing : border-box
只要给出了宽和高，设置边框和内边距都不会影响盒子的大小。
清除元素默认的内外边距：
比较通用的写法：
* {
margin ： 0；
padding ： 0；
}
让盒子水平居中：
margin : 0 auto ;
外边距合并现象：
对于两个垂直的块级元素，设定上下margin值时，外边距会合并，计算的时候按照外边距大的计算。
外边距塌陷现象：互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上，导致父元素一起往下移动 ，解决变法：
八、结构伪类选择器
| 选择器 | 说明 |
| E：first-child () | 选出E元素的第一个子元素 |
| E：last-child () | 选出E元素的最后一个子元素 |
| E：nth-child (n) | n可以取1，2，3....，n=1,选取E元素的第一个子元素 |
| E：nth-last-child (n) | n=5,选取E元素倒数第5个子元素 |
说明：
对于 ： nth-child(n)
里面的n可以去n,2n,2n+1,odd,-n+5..................
取4n表示：选取父元素里面第4个、第8个、第12个.......子元素。
取-n+5表示找的子元素是前五个
n+5表示找的子元素是从第五个以后的子元素
九、伪元素
| 伪元素 | 说明 |
| ：：before | 在元素内容之前添加一个行内元素 |
| ：：after | 在元素内容之后加一个行内元素 |
代码：
.footer .wrapper li::before {
content: '';
display: inline-block;
margin-right: 19px;
width: 58px;
height: 58px;
background-image: url(../images/sprites.png);
background-position: 0 0;
vertical-align: middle;
}其中conner : ' ' ;是必须要添加的。
十、浮动
属性名：float
属性值：
left : 左浮动
right ： 右浮动
小米布局：
代码 ：
<div class="box">
<div class="fl"></div>
<div class="fr">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div><style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.box {
margin: 0 auto;
margin-top: 50px;
width: 1210px;
height: 450px;
background-color: pink;
}
.fl {
float: left;
width: 300px;
height: 450px;
background-color: green;
}
.fr {
float: right;
width: 910px;
height: 450px;
}
.fr li {
float: left;
margin-bottom: 10px;
margin-right: 10px;
width: 220px;
height: 220px;
background-color: blue;
}
.fr li:nth-child(4n) {
margin-right: 0;
}
</style>显示的结果：
网页导航案例 ：
代码：
<div class="nav">
<ul>
<li><a href="#">腾讯视频</a></li>
<li><a href="#">爱奇艺</a></li>
<li><a href="#">B站</a></li>
<li><a href="#">淘宝</a></li>
<li><a href="#">芒果视频</a></li>
<li><a href="#">天下足球</a></li>
<li><a href="#">抖音</a></li>
</ul>
</div><style>
* {
margin: 0;
padding: 0px;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.nav {
margin: 100px auto;
width: 611px;
height: 50px;
background-color: pink;
}
.nav li {
float: left;
height: 50px;
}
.nav li a {
display: block;
padding: 0 20px;
height: 50px;
line-height: 50px;
color: #333;
}
.nav li a:hover {
background-color: green;
color: #fff;
}
</style>
十一、定位
属性名：
position
静态定位： static
相对定位： relative
绝对定位 ：absolute
固定定位 ：fixed
设定偏移值：
| 方向 | 属性名 | 属性值 | 含义 |
|---|---|---|---|
| 水平 | left | 数字+px | 距离左边的距离 |
| 水平 | right | 数字+px | 距离右边的距离 |
| 垂直 | top | 数字+px | 距离上边的距离 |
| 垂直 | bottom | 数字+px | 距离下边的距离 |
相对定位
position ： relative;
相对自己原来的位置进行移动
在页面中占位置-不脱标
绝对定位
position ： absolute;
默认相对于浏览器可视区域进行定位
在页面中不占有位置-脱标
让盒子水平居中的案例（子绝父相）
1.先让盒子水平移动父亲盒子宽度一半；left：50%
2.然后移动自己盒子的一半：
<div class="big">
<div class="small"></div>
</div><style>
.big {
position: relative;
margin: 0 auto;
width: 800px;
height: 300px;
background-color: pink;
}
.small {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 100px;
background-color: blue;
}
</style>显示结果：
垂直居中的做法相类似。
固定定位
position : fixed;
522
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
