# web
**Repository Path**: wxvirus/web
## Basic Information
- **Project Name**: web
- **Description**: 前端，html、css、JavaScript学习记录和笔记
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: css
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-05-22
- **Last Updated**: 2021-10-23
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# web
## css的三种引入方式的优先级
内联式 > 嵌入式 > 外部式
嵌入式大于外部式的前提是有一个内联式。外加浏览器有一个从上而下的顺序执行。
> 后代选择器
```css
/* 只针对 div 下的 a 标签进行设置颜色 */
div a {
color: orange;
}
```
> 子代选择器
上述的div下面的a，可能一个网页里有很多地方都有，所以就得确定这个只是你的子孙标签，再在最外层设置一层标签设置类选择器
语法为:`>`
```css
/*亲儿子*/
.wrap>a {
color: orange;
}
```
> 交集选择器
```css
选择器1 选择器2 {
样式属性: 属性值
}
```
```css
h2 {
color: red;
}
.active {
font-weight: lighter;
}
/*交集选择器*/
h2.active {
font-size: 14px;
}
```
> 伪类选择器
```css
/*没有被访问过的a的状态*/
a:link {
color: orange;
}
/*访问过后的a的状态*/
a:visited {
color: green;
}
/*鼠标悬浮时a的状态*/
a:hover {
color: black;
}
/*鼠标按住时a的状态*/
a:active {
color: cyan;
}
.form-control:hover {
color: aqua;
}
```
```html
伪类选择器
```
> 选择器权重
- 内联样式权重1000
- id选择器权重100
- 类选择权重10
- 元素选择器权重为1
权重计算用不进位；继承来的属性权重非常低
> `!important`
为了覆盖行内的样式
```html
小米商城
a
```
一般不在当前页面里面使用
## 元素分类
块元素：
- 独占一行
- 可以设置宽高，如果不想设置宽度，默认是父标签的100%宽度
行内元素：
- 在一行内显示
- 不能设置宽高，默认的宽高为文本内容占据的宽高
行内块元素的特点
- 在一行内显示
- 可以设置宽高
## display显示属性
控制元素显示的属性，显示方式
块级元素：`display: block;`
行内元素：`display: inline;`
行内块元素：`display: inline-block;`
## 盒模型
`css model` 这一术语是用来设计和布局时使用
所有`html` 元素可以看做盒子
它包括：`外边距、边框、内填充和实际内容`。
方向都遵循：顺时针方向，上右下左
### 案例：小米商城顶部导航栏
```html
小米商城
```
### padding
```html
padding
wujie
```
### border
按照三要素编写border
```html
边框border
手机壳
```
按照方向来编写order
```html
边框border
手机壳
```
### margin：外边距，一个盒子到另外一个盒子的距离
也有四个方向
```html
margin
熊大
熊二
```
## float浮动
属性
[浮动的属性](https://www.notion.so/f1b56511ca834f82b36fe49cd1b8500a)
### 浮动现象
```
浮动的现象
1. 文字环绕
2. 脱离了标准文档流
3. 浮动元素相互贴靠
4. 浮动元素有收缩现象 且收缩的宽度和内容的宽度一致
```
### 清除float方式
1. 给父元素设置固定高度
缺点： 使用不灵活，后期不易维护
应用：网页中盒子固定高度的区域，比如固定的导航栏
2. 内墙法
规则：在最后一个浮动元素的后面加空的块级元素，并且设置该属性为 clear：both
缺点：结构冗余
3. 伪元素清除
4. overflow: hidden;
默认为static静态定位
### 相对定位
不脱离标准文档流，可以调整元素
参考点：以原来的位置为参考点
```html
定位: 相对定位
one
two
three
```
## 绝对定位
```
特点：
1. 脱离标准文档流，不在页面上占位置
2. 压盖现象
```
参考点：
单独给一个盒子设置绝对定位，以根元素页面左上角为参考点
> 相对于最近的非static祖先元素定位，如果没有非static祖先元素，那么以页面根元素左上角进行定位。
网站中的实战应用："子绝父相"
```html
绝对定位
```
## 固定定位
和绝对定位相似
特点：
1. 脱离标准文档流
2. 一旦设置固定定位，在页面中滚动网页，固定不变
参考点：
以浏览器的左上角为参考点
应用：
小广告，回到顶部，固定导航栏