CSS相关知识点

最新推荐文章于 2024-08-02 13:35:44 发布

娃娃_鱼

最新推荐文章于 2024-08-02 13:35:44 发布

阅读量107

点赞数

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/m0_53360073/article/details/126521800

版权

属性

overflow：对溢出内容的处理

visible:默认值，使溢出部分展示
hidden:隐藏溢出内容且不出现滚动条
scroll:隐藏溢出容器的内容，溢出的内容可以通过滚动呈现
auto:与scroll没有什么区别

当单独设置了overflow-x或者overflow-y为非visible时，另一个属性值默认为auto；尽设置overflow-x：hidden,设置overflow-y：visible，也不能实现水平方向隐藏，垂直防线显示，垂直方向依然时auto

盒子模型

标准盒子模型：增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
IE盒模型：设置 padding 、border 后，真正宽度或高度就会改变。

box-sizing:content-box 标准盒模型
box-sizing:border-box IE盒模型

居中方式

CSS布局方式

table布局：不常见

flex布局

没有使用flex布局前，常用的布局：流式布局，浮动布局，定位布局等等
缺陷时子元素需要控制自己在父元素中的位置，还要注意父元素的高度坍塌
该布局的优点是：避免不灵活的布局形式，创建更多的布局模式，解决子元素对齐和分布与响应式的问题。缺点是只能依靠自身的布局模式

指定flex：给元素声明display:flex或者声明display:linline-flex都会创建弹性布局
给外层元素定义flex，把外层元素当作“容器”元素，来控制其内部的子项元素“项目”的排列方式
设置flex布局以后，子元素的float，clear都失效
设置flex的元素，子元素会“块状化”，即子元素变为块级元素
———————————————————————————————
用于容器的属性
display:flex指定flex布局
flex-direction主轴排序，默认是row（主轴方向）；column：纵轴方向
flex-warp:nowarp;项目在容器中是否换行显示,常用是wary
justify-content主轴对其方式

flex-start：它是用于从容器开始对齐弹性项目的默认值,从容器的开头对齐项目
flex-end：用于对齐容器末端的弹性项目。
center：它在容器的中心对齐弹性项目。

align-items交叉轴的对齐方式（一般用于单轴线）

flex-start：页面效果展示 - 从上到下
center：页面效果展示 - 垂直居中
flex-end:页面效果展示 - 从下到上
stretch:页面效果展示 - 拉伸(子元素不设置高度，否则没有效果)

align-content：属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）

flex-start：与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center 与交叉轴的中点对齐。
space-between 与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

float布局

特点：

漂浮在普通流的上面。float 属性会让盒子漂浮在标准流的上面
浮动的盒子，把自己原来的位置漏给下面标准流的盒子，就是不占有原来位置
任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。生成的块级框和我们前面的行内块极其相似。但是元素之间没有空白缝隙
浮动元素位置尽量靠上

响应式布局

面对不同分辨率设备灵活性强，能够快捷解决多设备显示适应问题
使用 rem
rem 指的是 html 元素的 font-size，html 元素的 font-size 默认是 16px，所以 1 rem = 16px；然后根据 rem 来计算各个元素的宽高，然后配合 media query 就可以实现自适应。

Grid布局（网格布局）：不常用

什么是响应式布局，原理以及实现方式

实现响应式布局的方式

媒体查询：我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表；

@media (max-width: 480px) {.box: {column-count: 1;}}

百分比
VW/VH
rem

垂直居中

行高=高：line-height
绝对定位top50%，自身宽度的50%的负值(top:50% ;transform: translateY(-50%);
flex布局：align–center

水平居中

绝对定位left50%,自身宽度的50%的负值(left:50% ;transform: translateX(-50%);
flex布局： justify-content: center;
text-align:center;

各种单位的含义

px：绝对单位，页面按精确像素展示
em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身计算，整个页面的1em不是一个固定值
rem：相对单位，可以理解为rooot em，相对根节点html的字体大小计算
vh,vw：用于页面视口大小布局，在页面布局上更加方便简单

rem是相对于根元素进行计算，而em是相对于当前元素或父元素的字体大小。
rem不仅可以设置字体的大小，还支持元素宽、高等属性。
em是相对于当前元素或父元素进行换算，层级越深，换算越复杂。而rem是相对于根元素计算，避免层级关系。

选择器

常用选择器

id选择器
类选择器
标签选择器
全局选择器（如：*号）。
后代选择器（#box div)
子选择器（.one>one_1)
相邻同胞选择器(.one+.two)
群组选择器(div,p)

伪类选择器

:hover：鼠标指针浮动在上面的元素
:visited：选取已被访问的链接
:link：选择未被访问的链接
:active：匹配被点击的链接
:focus：选择具有焦点的
:first-child：父元素的首个子元素
:nth-child(n)：选择父元素中第n个子元素
:nth-last-child(n)：选择父元素中倒数第n个子元素

属性选择器

[attribute*=value]：选择attribute属性包含value的元素
[attribute ^=value]：选择attribute属性以value开头的元素
[attribute$=value]：选择attribute属性以value结尾的元素

伪元素

:before：在元素之前添加内容。
:after：在元素之后添加内容

优先级

内联>ID选择器>类选择器>标签选择器>子选择器>后代选择器>伪类选择

!important的优先级是最高的，但出现冲突时则需比较”四位数“;优先级相同时，则采用就近原则，选择最后出现的样式;继承得来的属性，其优先级最低。

浏览器渲染机制

1、创建DOM树
2、构建渲染树，CSS渲染
3、布局渲染，每个元素的大小、位置
4、绘制渲染树、再画出来
重绘：改变元素的外观属性例如div的color、background-color、等属性发生改变时
重排（回流）：元素的规模尺寸、布局、隐藏改变时
代价：耗时，导致浏览器卡慢

盒子塌陷及解决方式

盒子塌陷

外部的盒子没有包裹住内部的浮动盒子，导致盒子塌陷

原因

父元素没有设置高度，且子元素脱离了文档流，导致内部没有元素可以撑起当前父元素：
a:内部子元素是用了浮动导致内部元素脱离了文档流，且脱离文档流的元素无法撑起当前父元素
b:内部子元素使用了绝对定位或者固定定位脱离文档流

如何清除塌陷

将盒子大小写死，给每个盒子设置高度和宽度
优点：简单方便；缺点：非自适应，浏览器的窗口大小直接影响用户体验
给父元素也添加浮动，让其脱离标准流文档
优点：方便；缺点：对页面的布局不是很友好，不易维护。
给父元素添加overflow:auto；或者overflow:hidden
优点浏览器支持好，简单；缺点：子元素有定位属性时，有可能出现滚动条或者内容不可见等问题
给父盒子里最下方引入清除浮动 <div style="clear:both>< /div >
优点：所有浏览器都支持，并且容器溢出不会被裁剪；缺点：引入了不必要的冗余元素
为父元素盒子外部添加::after伪类，设置clear属性清除浮动
优点：不会造成代码冗余，剩余代码性能优化，推荐使用

常见的块级元素

块级元素（div,p,h1…h6,ol,ul,table）
每个块级元素都是独自占一行、元素的高度宽度都是可以设置的
行内元素（span,a,img,input,strong）
可以和其他元素处于一行上，元素的高度宽度顶部和底部边距不可设置

position属性

static:静态定位，是position属性的默认值，表示无论怎么设置top、bottom、right、left属性元素的位置（与外部位置）都不会发生改变。
relative：相对定位，表示用top、bottom、right、left属性可以设置元素相对于其初始位置的相对位置。元素仍处于文档流中，定位是相对于原本自身的位置
absolute：绝对定位，表示用top、bottom、right、left属性可以设置元素相对于其父元素（除了设置了static的父元素以外）左上角的位置，如果父元素设置了static，子元素会继续追溯到祖辈元素一直到body。元素会脱离文档流
fixed：固定定位，相对于浏览器窗口进行定位，同样是使用top、bottom、right、left。