![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
有关CSS
CSS相关的内容
不经寒彻骨哪得梅花香
这个作者很懒,什么都没留下…
展开
-
CSS浮动
浮动 视觉格式化模型,大体上将页面中盒子的排列分为三种方式: 常规流 浮动 定位 应用场景 文字环绕 横向排列 浮动的基本特点 修改float属性值为: left:左浮动,元素靠上靠左 right:右浮动,元素靠上靠右 默认值为none 当一个元素浮动后,元素必定为块盒(更改display属性为block) 浮动元素的包含块,和常规流一样,为父元素的内容盒 盒子尺寸 宽度为auto时,适应内容宽度 高度为auto时,与常规流一致,适应内容的高度 margin为auto,为0. 边框、内边距原创 2020-10-08 16:12:57 · 365 阅读 · 0 评论 -
CSS属性值的计算过程
属性值的计算过程 一个元素一个元素依次渲染,顺序按照页面文档的树形目录结构进行 渲染每个元素的前提条件:该元素的所有CSS属性必须有值 一个元素,从所有属性都没有值,到所有的属性都有值,这个计算过程,叫做属性值计算过程 特殊的两个CSS取值: inherit:手动(强制)继承,将父元素的值取出应用到该元素 initial:初始值,将该属性设置为默认值 ...原创 2020-10-06 22:55:53 · 186 阅读 · 0 评论 -
CSS层叠
层叠 声明冲突:同一个样式,多次应用到同一个元素 层叠:解决声明冲突的过程,浏览器自动处理(权重计算) 1. 比较重要性 重要性从高到底: 作者样式表:开发者书写的样式 1) 作者样式表中的!important样式 2) 作者样式表中的普通样式 3) 浏览器默认样式表中的样式 2. 比较特殊性 看选择器 总体规则:选择器选中的范围越窄,越特殊 具体规则:通过选择器,计算出一个4位数(x x x x) 千位:如果是内联样式,记1,否则记0 百位:等于选择器中所有id选择器的数量 十位:等于选择器中所原创 2020-10-06 22:28:05 · 105 阅读 · 0 评论 -
CSS选择器分类
简单选择器 ID选择器 元素选择器 类选择器 通配符选择器 *,选中所有元素 属性选择器 根据属性名和属性值选中元素 伪类选择器 选中某些元素的某种状态 1)link: 超链接未访问时的状态 2)visited: 超链接访问过后的状态 3)hover: 鼠标悬停状态 4)active:激活状态,鼠标按下状态 爱恨法则:love hate 伪元素选择器 before after 选择器的组合 并且 后代元素 —— 空格 子元素 —— > 相邻兄弟元素 —— + 后面出现的所有兄弟元素原创 2020-10-06 22:17:23 · 60 阅读 · 0 评论 -
如何解决超链接被点击后不再具有hover和active的问题
按以下CSS属性的排列顺序可以解决: L-V-H-A a:link{color: #;} // 正常,未访问过的链接 a:visited{color: #;} // 用户已访问过的状态 a:hover{color: #;} // 当用户鼠标放在链接上时 a:active{color: #;} // 链接被点击的那一刻 ...原创 2020-08-09 17:26:47 · 473 阅读 · 0 评论 -
有关颜色常识
颜色常用三种形式: 1、土鳖式(纯英文单词); 2、颜色代码; 3、颜色函数。 开发过程中不采用第一种形式,因为计算机世界里white不能代表所有的白色,分乳白、纯白啥的很多种。 开发较多采用颜色代码,计算机颜色三原色(即光学三原色): r(red) g(green) b(blue) 采用十六进制数每两位代表一个饱和度(oo - ff) #000000 三色饱和度均为0就是黑色 #ff ff ff 三色饱和度同时最大就是白色 颜色函数 rgb() ...原创 2020-08-06 21:16:43 · 106 阅读 · 0 评论 -
CSS 中 margin 塌陷解决方案
1、垂直方向的margin,父、子元素是绑定在一起的,取最大那个值。 2、bfc(block format context)解决塌陷改变一丁点盒子的语法规则。 如何触发一个盒子的bfc?主要有四种形式: A、position: absolute B、 display: inline-block C、float: left/ right D、overflow: hidden 分别给父级设定四个样式中的一个就可以触发bfc 3、margin塌陷是一个解决不了的bug,智能说通过bfc绕过这个问题。原创 2020-08-06 21:24:59 · 232 阅读 · 0 评论 -
CSS 文本溢出处理
1、单行文本 三件套实现溢出: white-space:nowrap; //不折行 overflow: hidden; // 隐藏 text-overflow: ellipsis; // 省略号 2、多行文本 CSS前端实现不了溢出省略号显示,只能通过后台控制,CSS3有这种技术实现,但是主要针对移动端,PC端很多老版本浏览器支持不好。所以PC端多行文本不显示省略号,直接折行溢出隐藏。 ...原创 2020-08-06 21:43:35 · 179 阅读 · 0 评论 -
html 标签嵌套规则
1、行元素只能嵌套行元素。 2、块元素可以套任何元素,但是有两个特例: A、P 标签不可嵌套div,会被截成两个 P 标签; B、a 标签不可嵌套 a 标签。原创 2020-08-06 21:50:54 · 105 阅读 · 0 评论 -
CSS3过渡 transition
要实现过渡必须规定两项内容: 指定要添加效果的CSS属性 指定效果持续时间 eg: div{ width:100px; height:100px; transition:width 2s, height 2s, transform 2s } div:hover{ width:200px; height:200px; transform:rotate(180deg) } ...原创 2020-08-09 16:14:54 · 146 阅读 · 0 评论