首页
首页
AI Coding
NEW
沸点
课程
直播
活动
AI刷题
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
CSS
药师kabuto
创建于2023-02-27
订阅专栏
css基础知识
等 1 人订阅
共14篇文章
创建于2023-02-27
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
CSS FlexBox布局全面详解
1. 什么是FlexBox FlexBox(”弹性布局”)是CSS3提供的用于布局的一套新属性,这套属性包括针对容器(弹性容器,flex container)和针对其直接子元素(弹性项,flex it
基于Viewport的移动端web屏幕适配方案详解
1. 前言 随着手机,平板等移动设备的普及,现如今的绝大多数web应用会对桌面端和移动端进行网页适配的兼容处理。由于移动端和桌面端设备的型号和分辨率种类比较繁杂,如果专门为这些不同设备和终端分别建立网站显然成本太高,很不现实,并且它们之间的界限也很模糊。所以创建可以适配多种设备…
CSS Position定位属性大揭秘
CSS position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left 属性(值可为CSS数值单位,正负决定其方向)则决定了该元素的最终位置。 1. static定位 position属性的默认值,指定元素使用正常的布局行为,即元素在文档常规…
CSS常用伪类选择器详解
1. 用户行为伪类 selector:hover 表示匹配鼠标经过的selector选择器元素。 :hover不适用于移动端,虽然也能触发,但消失并不敏捷,体验反而奇怪。 selector:active 表示匹配激活状态的selector选择器元素(通过鼠标主键点击或触屏触摸的…
CSS选择器优先级详解
1. 优先级分级 1. ! important !important是顶级优先级,唯一推荐使用它的场景为忽略JS脚本设置的样式,使js设置样式无效。对于其他场景都没有使用它的理由,切勿滥用 2. style属性内联样式 3. ID选择器 4. class类选择器,属性选择器和伪…
CSS常用伪元素详解
1. 伪元素概念 CSS 在渲染文档的时候,伪元素可以通过 css 给 HTML 添加一个元素(叫标签也行),这个元素在文档树中是找不到的。伪元素被当做 CSS 的样式来进行展现,用法和普通的元素用法是一样的。 2. 伪元素特点 不占用 DOM 节点,减少 DOM 节点数。 让…
CSS之三角形的奥妙
1. 实现原理 这是我们使用border的常规代码——往往只给border一个较小的宽度(通常为1-2px);然而这样的日常用法就会容易让大家对border的形成方式产生误解,即认为元素的border是由四个矩形边框拼接而成。 然而事实并不是这样。实际上,元素的border是由…
CSS 格式化上下文(BFC,IFC,FFC和GFC)基本介绍
Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性,决定了这个 Box 的类型。 不同类型的 Box, 会参与不同的 Formatting Context(一个决定如何渲染文档的容器),因此Box内…
CSS 元素水平/垂直居中方法总结
容器元素为块级元素,欲居中元素为行级元素。实现水平居中。 容器元素为块级元素,欲居中元素设置了宽度。实现水平居中。 (1)当child元素宽度或高度已知,且欲让其水平或垂直居中。则child元素样式为(若想同时水平垂直居中,则样式代码综合即可) (2)当child元素宽度/高度…
全面了解CSS“浮动”
1. 浮动的初心 最初float属性的出现主要是为了实现浮动元素周围文字环绕的效果。如下示例: 可以发现,对于浮动元素后面的第一个同级正常元素,其文本会环绕在其周围(尤其是当浮动元素未占满一行时这一表现更加明显)。这是我们初始浮动所观察到的现象。实际上,这还不够全面和准确! 2…
CSS 关于margin你应该要知道的
我们知道,在W3C盒模型下(即box-sizing:content-box)给一个元素设置padding内边距的时候,会改变元素原有的实际尺寸(即使你设置该元素的width属性)。而margin属性虽然其本意为外边距,让人以为只会影响其与其他元素间的距离。实际上,当元素处于“充…
深入CSS vertical-align属性
欢迎访问个人博客网站:http://www.zhuxin.club1. 前置知识在真正讲解vertical-align属性之前,我们需要了解下面一些前置的知识1.1 x-Height在各种内联相关模型
浅谈CSS层叠上下文与z-index
1. 层叠的定义 层叠上下文,英文称作 stacking context,是 HTML 中的一个三维的概念。如果一个元素含有层叠上下文,我们可以理解为这个元素在 z 轴上就有一定优先级 层叠水平,英文
CSS变量(自定义属性)的基本使用
前言 复杂的网站都会有大量的CSS代码,通常也会有许多重复的值。举个例子,同样一个颜色值可能在成千上百个地方被使用到,如果这个值发生了变化,需要全局搜索并且一个一个替换(很麻烦哎~)。自定义属性在某个