css基础知识

最新推荐文章于 2024-09-03 23:03:56 发布

prozz_

最新推荐文章于 2024-09-03 23:03:56 发布

阅读量1.2k

点赞数 34

文章标签： css 前端

本文链接：https://blog.csdn.net/prozz_/article/details/139162681

版权

css

1.选择器

后代选择器、子代选择器、并集选择器、链接伪类选择器（a{},a:hover{}）、:focus选择器（input:focus{}）

2.css的三大特性

层叠性：根据就近原则，哪个css离元素近则采用哪个
继承性：body定义的样式会继承到该body下的所有子元素
优先级：继承/通配符样式（0,0,0,0）<元素选择器（0,0,0,1）<类选择器、伪类选择器（0,0,1,0）<ID选择器（0,1,0,0）<行内样式（1,0,0,0）<!important（无穷大）

ps:css的权重可以叠加，但不会进位，比如 li{color:red;} ui li{color:green} ，此时为两个元素选择器，故权重为（0,0,0,1）+（0,0,0,1）=（0,0,0,2），要大于li设置的样式

3.盒子模型

边框：border，指定border-collapse:collapse即可实现左右边框合并；边框会影响盒子的大小，意思是盒子的大小包括了边框的大小；
内边距：如果盒子已有宽度和高度，再指定内边距，会撑大盒子；即设置{width:100px;width:100px;padding:20px}此时盒子的实际大小为140 x 140 px ;
- 不撑开盒子的情况：若盒子没有指定宽度和高度，则宽度继承父元素的宽度，且设置padding不会改变宽度，但有可能改变高度。比如块级元素嵌套盒子的情况，div p{ padding:30px;}，此时p会有60px的高
块级元素居中对齐：首先要保证有width属性，其次设置margin:0 auto;
行内元素或行内块元素居中对齐：由于行内元素默认没有width，所以给父元素添加text-aglin:center即可
嵌套块元素垂直外边距合并：若盒子里面嵌套盒子，给父盒子和子盒子都设置margin-top，则浏览器会默认执行最大的margin-top，而忽略较小的值。
- 解决方案：1. 为父元素定义上边框；2. 为父元素定义上内边距；3. 为父元素添加overflow:hidden
圆角边框：border-radius只要设置为正方形盒子的一半，就能够实现圆形的效果；实际原理是拿一个园与矩形做减法，减去四边的角；即border-radius:50%；如果想实现长方形圆角的效果，就设置为高度的一半；
- border-radius简写时默认是从左上角->右上角->右下角->左下角；只写两个则是主对角线到副对角线的角
- 可单独设置border-radius-top-left等属性
text-shadow和box-shadow设置阴影

4. 浮动

特性：

脱标，且不再保留原先的位置
一行显示，如果放不下则换行
行内元素添加浮动后具有行内块属性，可以给宽高
块级元素添加浮动后，大小由内容来决定（相当于行内块元素）

使用：

与标准流父盒子搭配使用，实现在父盒子中居左或居右
想要元素水平排列，就将元素全加浮动
浮动盒子只会影响自己之后的标准流，不会影响前面的标准流——意思就是后面的元素会占用浮动盒子的空间，浮动盒子会在顶层显示
父元素清除浮动的原因是为了不设置高度，随子元素的高度变化而变化
- 额外标签法：在最后一个浮动元素末尾添加一个空div（必须是块级元素），并设置clear:both
- 父元素添加overflow:hidden，可清除浮动，但是无法显示溢出的部分
- 双伪元素法：
```
.clearfix:before,.clearfix:after{
	content:"";
	display:table
}
.clearfix:after{
	clear:both
}
.clearfix{
	*zoom:1;	//IE6,IE7必须使用该属性
}
```

5. 定位

position：static、relative、absoulte、fixed

static：静态定位，相当于无定位
relative：
- 相对与原本的位置偏移
- 原来标准流的位置继续占有，不脱标：其他盒子不会占有它原本的位置
absolute：绝对定位
- 以最近一级有定位的祖先元素为准，如果祖先元素有position，那么会根据祖先元素的位置来进行移动，反之根据浏览器为准来定位
- 不再占用原有的位置，脱标；
fixed：固定定位
- 以浏览器的可视窗口来移动元素，添加left和right属性即可
- 脱标，不占有原有位置，固定定位是一种特殊的绝对定位
- 紧贴中间盒子的右边缘（一键上滑到顶部按钮）显示，要先设置固定盒子left:50%，随后设置margin-left为版心盒子的一半像素宽度即可。
sticky：粘性定位
- 必须加上top、right、left、bottom其中一个偏移，否则相当于相对定位
- 不脱标，保留原有的位置
- 以浏览器的可视窗口为参照点移动元素
5.1拓展
1. z-index：
  - 通过z-index调整前后次序，如果不写的话默认是后来的元素在上方。
  - 只有加了定位position的盒子才有z-index属性
  - 数字后面不跟单位
2. absolute:
  - 绝对定位不能使用margin:0 auto设置水平居中；
  - 通过算法可以实现水平居中——left:50%；margin-left:负（div.width * 0.5），即自己盒子宽度的一半；响应地设置垂直居中也是这种方式。
3. 行内元素加absolute或fixed，则可以直接设置宽高
4. 块级元素加absolute或fixed，且不给宽高，则默认大小是内容的大小
5. 浮动元素、绝对定位、固定定位不会触发外边距合并（加了定位就能解决）

6. 隐藏

display：none，使元素不渲染Dom元素，盒子占据的空间会被后来的元素替代
visibility：hidden，盒子占据的空间不会被替代
overflow：auto，若内容溢出则添加滚动条；如果是有定位的盒子，慎用overflow:hidden，因为有些盒子设计是漏出的

7. flex布局

当我们为父元素设定flex布局后，子元素的float和clear将失效（子元素设置flex:1可实现水平摆放），vertical-align将失效
- 父元素设置flex-direction：row，即设置主轴为行，并从左到右排；对应的，设置flex-direction：column，则主轴为列，从上到下排
- justify-content设置主轴子元素的排列方式：flex-start、flex-end、center、space-around、space-between
- flex-wrap：默认不换行，如果父盒子的宽度不够子元素在主轴排列，子元素会缩小宽度继续放在主轴显示，所以父元素需设置flex-wrap：wrap
- align-item（单行）：设置子元素在侧轴的排列方式；特殊设置为stretch，子元素不给高度，则可以拉伸至父元素这么高
- align-content（多行）：设置子元素在侧轴的排列方式，只用于子元素出现换行的情况，单行时无效；
- flex-flow：row wrap;相当于flex-direction和flex-wrap的简写
子项flex属性：定义子项目分配剩余空间
- flex表示占多少份数，如果有三个子项，都设置flex:1，则会平分空间
- align-self：继承align-items属性，该属性可设置某一子项的排列方式，使用方式：
```
子元素:nth-child(index)：align-self:flex-end;
```
- order设置子项的排序方式，数值越小越靠前，比如设置子元素:nth-child(index)：-1;则会提到最前面