CSS
像风一羊的女孩
生活总要有一些乐趣。
展开
-
Web前端入门到实战:CSS块级格式化BFC规则
BFC概念 BFC(Block Formatting Context)是Web页面中盒模型布局的CSS渲染模式——直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。BFC盒子 ,那么这个盒子内部不影响外部,外部不影响内部 ,这个盒子是密闭的独立的区域!! 生成BFC的条件 w3c规范中的BFC定义:浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks,原创 2021-10-06 21:23:49 · 126 阅读 · 0 评论 -
Web前端入门到实战:css3解决透明度IE8兼容性问题
rgba() 背景透明,内容不透明 - 语法:rgba(r,g,b,a), 说明:r表示red,g表示green,b表示blue,a表示alpha透明度 - 取值: r,g,b取值范围 0-255 a透明度,取值0-1 - 使用说明:设置颜色的不透明度, 一般用于调整background-color、color、box-shadow等的不透明度。 - 兼容性:IE6、7、8【不支持】,IE9及以上版本和标准浏览器都支持 opacity 背景和内容一起透明 - 语法:opacity...原创 2021-10-06 20:35:13 · 337 阅读 · 0 评论 -
CSS入门到实战之三角箭头的实现
在生活中经常会遇到如下图所示一个大框旁边有一个三角箭头 那么它是如何实现的呐 首先,我们先来讨论三角箭头的实现 平常通过边框来实现的三角是无法设置边框的,毕竟三角本身就是边框来实现的,所以换一种思考方式来想,通过定位来完成 是的,方法就是白色的三角压盖灰色三角,使用定位是非常简单的。 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l.原创 2021-09-23 22:12:32 · 400 阅读 · 0 评论 -
CSS元素的分类:行内元素、块类元素、行内块元素及其相互转换
元素分类 行内元素 常见元素:span a p ... 特性: 1. 并排 中间间隙(原因: 和标签后面的空格文本解析在了一起,具有文本的特性) 2. 设置宽高不起作用 宽高就取决于内容的大小 3. 设置上下外边距不起作用 设置左右外边距可以 不能设置内边距和边框 4. 行高撑不开盒子 只会上下移动行内元素而已! 块类元素 常见元素:div 特性: 1.独立成行 一行一个 垂直排放 2. 设置所有盒模型属性都起作用 3. 行高可以撑开盒子 4. 默认宽度是父盒子所有有效...原创 2021-09-22 22:19:42 · 135 阅读 · 0 评论 -
前端初识到入门:CSS常用复合选择器
复合选择器 概述:由两个或多个基础选择器通过不同的方式组合而成的选择器 常用复合选择器 后代元素选择器 语法:E F{ 样式声明 } 空格连接一个或多个选择器 作用:选择E元素内部包含的所有F元素 代码示例: .box a{ color:red; } 子元素选择器 语法:E>F{ 声明样式 } >大于号 连接一个或多个选择器 作用:选择E元素内部包含的所有直接子元素F 代码示例: .box > a{ color:Red; } <di...原创 2021-09-22 21:50:39 · 129 阅读 · 0 评论 -
初识前端到实战,CSS代码实现三角形,典型面试题
CSS代码实现三角形是一道典型的面试题,不难但是要理解代码的思维逻辑,达到熟练的程度,仔细看代码就会发现其中的规律,编程就是要不断地写代码,熟能生巧,也就体会到了其中的奥秘,写代码是一件很有成就感的事情,真正理解代码的时候就会感觉代码很简单,每个人都有他的天赋,所以大胆地学习吧! 加油,少年! 废话不多说,上代码。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> .原创 2021-09-22 21:11:41 · 131 阅读 · 0 评论