CSS - 随笔分类 - 香香鲲

CSS：什么是文档流？什么是浮动？浮动的原理（面试题）

摘要：文档流概念：文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中特点：（块元素，行内元素）所有的块级元素在父元素直接从上到下排列。所有的行内元素在父元素中从左到右排列。浮动：什么是浮动？元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，浮动的阅读全文

posted @ 2022-09-22 09:59 香香鲲阅读(177) 评论(0) 推荐(0)

CSS：浏览器的内核及了解，有哪些常见的浏览器内核？（面试题）

摘要：浏览器的内核及了解？有哪些常见的浏览器内核？浏览器要渲染出网页给用户看必须加载htm编码和js脚本渲染引擎渲染页面的UI和jd执行引擎操作内存，就是浏览器的内核根据不同的浏览厂商他们使用了不同的内核，内核的程序时很难实现的根据我的了解有一些内核是公司自己实现的浏览器内核分渲染引擎（Ren 阅读全文

posted @ 2022-09-22 09:43 香香鲲阅读(245) 评论(0) 推荐(0)

CSS：面试题

摘要：1、前端如何进行SEO优化？ 1、title（） 2、descripion（内容摘要） 3、keywords（关键字） link、visited、hover、active顺序：1、效果只有顺序才能正常显示；2、link、visited是静态伪类，hover、active是动态伪类；若不在前面，则会被阅读全文

posted @ 2022-07-20 11:11 香香鲲阅读(47) 评论(0) 推荐(0)

CSS：设置透明度

摘要：1、opcity 2、rgba（）例： <style> body{ background-color: rgba(215, 187, 187, 0.5); opacity: 0.5; } </style> html效果：阅读全文

posted @ 2022-07-18 09:21 香香鲲阅读(89) 评论(0) 推荐(0)

CSS：轮播图

摘要：完美轮播图实例：部分代码—— <style> * { padding: 0; margin: 0; } html { font-size: calc(100vw / 750); } .swiper { width: 100vw; height: 280.3rem; overflow: hidden 阅读全文

posted @ 2022-07-17 11:31 香香鲲阅读(132) 评论(0) 推荐(0)

CSS：calc计算属性-拓展

摘要：（1）calc() 只作用于属性值你唯一可以使用calc()函数的地方是在值中。 .el { font-size: calc(3vw + 2px); width: calc(100% - 20px); height: calc(100vh - 20px); padding: calc(1vw + 阅读全文

posted @ 2022-07-17 11:29 香香鲲阅读(200) 评论(0) 推荐(0)

CSS：文本效果（white-space、overflow、text-overflow）

摘要：（1）white-space 设置元素对内容中的空格的处理方式值描述 normal 默认。文本空白换行会被浏览器忽略。 pre 保留文本原样式比如空格或换行 nowrap 文本不会换行，文本会在在同一行上继续，直到遇到br标签为止。 pre-wrap 保留空白符序列，保留换行符。如果文本超出容阅读全文

posted @ 2022-07-17 11:27 香香鲲阅读(277) 评论(0) 推荐(0)

CSS：移动端布局（视口，rem单位（视窗单位））

摘要：移动端布局（1）布局概念 1. 静态布局直接使用px作为单位不推荐不会适应屏幕 2. 流式布局宽度使用%百分比，高度使用px作为单位通常还会加上最大值和最小值 3. 自适应布局创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。使用 @media媒体查询来切换多个布局 <meta n 阅读全文

posted @ 2022-07-17 11:20 香香鲲阅读(531) 评论(0) 推荐(0)

CSS3：多媒体查询 Media Queries

摘要：@media可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则，实现适应显示。媒体查询可用于检测很多事情，例如： viewport(视窗) 的宽度与高度设备的宽度与高度朝向 (智能手机横屏，竖屏) 。分辨率目前很多针对苹果手机，Android 手机，平板等设备都会阅读全文

posted @ 2022-07-17 11:16 香香鲲阅读(131) 评论(0) 推荐(0)

CSS3：弹性盒子-Flexbox

摘要：CSS3弹性盒子 -Flexbox display:flex; 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 flex-direction:指定主轴的方向；：column；列：row；水平，左->右：column-reverse ：row- 阅读全文

posted @ 2022-07-17 11:12 香香鲲阅读(59) 评论(0) 推荐(0)

CSS3：多列显示

摘要：CSS3多列显示（流式布局） column-count：指定某个元素应分为的列数数值/auto； column-width：指定列的宽度； length/auto； cloumn-span：指定某个元素应该跨越多少列； none/allnone/all； column-gap：指定列之间的间隙；阅读全文

posted @ 2022-07-17 11:06 香香鲲阅读(61) 评论(0) 推荐(0)

CSS3：动画：animation

摘要：CSS3动画：animation animation：动画名字所需时间运动曲线延迟时间循环次数(n>0 整数/无限次infinite) 反省运动； animation:mymove(name) 3s ease-in-out 1s reverse（反向） alternate（交替效果） alt 阅读全文

posted @ 2022-07-17 11:05 香香鲲阅读(62) 评论(0) 推荐(0)

CSS3：转换transform（平移，旋转，缩放，倾斜，透视）

摘要：CSS3转换：是元素改变形状、尺寸和位置一种的效果； transform： translate() 平移例：水平X轴 -translateX（200px）垂直Y轴 -translateY（200px） X、Y轴同时设置上一个会被下一个覆盖；同时写： transfrom：translate（阅读全文

posted @ 2022-07-17 11:04 香香鲲阅读(714) 评论(0) 推荐(0)

CSS3：过渡 transition

摘要：transition：property（要过渡的属性）-duration（花费的时间）-timing-function（运动曲线）-delay（延迟时间）例： transition：all（所有的属性都变化） 2s linear 2s； transition：width 2s linear，hei 阅读全文

posted @ 2022-07-17 11:04 香香鲲阅读(63) 评论(0) 推荐(0)

CSS：盒子定位居中

摘要：盒子定位居中：文字居中：text-align：center（inline inline-block）单行文本在盒子垂直居中：line-height：盒子的高度；盒子在父盒子中水平居中：margin ： 0 auto；盒子在父元素中水平垂直居中：一般情况下，设置父元素相对定位；子元素绝对阅读全文

posted @ 2022-07-17 10:56 香香鲲阅读(283) 评论(0) 推荐(0)

CSS：隐藏元素的方式

摘要：隐藏元素的方式： 1、display：none；真实隐藏后元素不在占空间，子元素一起隐藏；子元素不能通过设置display进行反隐藏 2、visibility：visible；显示 hidden；隐藏 3、opacity：0；透明隐藏元素；还是会占据空间；（0-1：1）；子元素不能通过设置opaci 阅读全文

posted @ 2022-07-17 10:55 香香鲲阅读(212) 评论(0) 推荐(0)

CSS：定位，边偏移

摘要：定位：定位模式-position： static：静态定位标准文档流表现形式一样 fixed：固定定位相对于body进行定位 -不写偏移量；脱离文档流；不再是父元素的100%； top:0️⃣ relative：相对定位特性：一般用在父元素上；默认宽度依旧是父元素的100%；相对于阅读全文

posted @ 2022-07-17 10:42 香香鲲阅读(440) 评论(0) 推荐(0)

CSS：标准盒模型、IE盒模型（面试题）

摘要：页面布局的本质是盒子（box），是 CSS 布局的对象和基本单位，一个页面就是由 n 个盒子组成的。一个基本的盒模型，包括 content（width/height）、padding、border、margin。盒模型分成两类：标准盒子模型和 IE 盒子模型。标准盒模型的 width 指 co 阅读全文

posted @ 2022-07-17 10:40 香香鲲阅读(76) 评论(0) 推荐(0)

CSS：设置边框三角形

摘要：边框三角形 border:大小-线性- 透明（transparent）宽高为零背景颜色为边框颜色具体属性可查看：https://www.cnblogs.com/LIXI-/p/16486047.html 阅读全文

posted @ 2022-07-17 10:33 香香鲲阅读(132) 评论(0) 推荐(0)

CSS：外边距盒子水平居中，外边距合并-同层级

摘要：外边距盒子水平居中在父元素中居中：上下0px；左右auto；必须满足两个条件： 1 必须是块元素； 2 盒子制定了宽度；因为块元素的宽度默认是父元素的100% auto 左右外边距平分父元素宽度空间方法：只需要给左右的外边距都设置为auto，就可以使块级元素水平居中。margin: 0 a 阅读全文

posted @ 2022-07-17 10:30 香香鲲阅读(213) 评论(0) 推荐(0)

随笔分类 - CSS