css
关注
分享
扫一扫
DOM曼珠沙华
学如逆水行舟，不进则退
展开
-
纯CSS画三角形（带边框）【转】
实例一：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> .find-div-body{ position: relative; top:30px; right:0px;转载 2021-02-22 23:33:08 · 404 阅读 · 0 评论 -
纯CSS画三角形（带边框）【转】
实例一：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> .find-div-body{ position: relative; top:30px; right:0px;转载 2020-08-24 13:52:41 · 556 阅读 · 0 评论 -
CSS伪类和为元素
CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。/* 所有用户指针悬停的按钮 */button:hover { color: blue;}伪类连同伪元素一起，他们允许你不仅仅是根据文档 DOM 树中的内容对元素应用样式，而且还允许你根据诸如像导航历史这样的外部因素来应用样式（例如 :visited），同样的，可以根据内容的状态（例如在一些表单元素上的 :checked），或者鼠标的位置（例如 :hove转载 2020-07-08 23:30:17 · 799 阅读 · 0 评论 -
CSS预处理器 Sass的基本用法
SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。基本用法1.SASS允许使用变量，所有变量以$开头。 $blue : #1875e7; div { color : $blue; }如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。 $side : left; .rounded { border-#{$side}-radius: 5px; }2.计算功能SASS允许在转载 2020-06-17 16:23:24 · 546 阅读 · 0 评论 -
CSS预处理器 less基本用法
Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。这里呈现的是 Less 的官方文档（中文版），包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。安装npm install -g less浏览器内使用<link rel="stylesheet/less" type="text/css" href="styles.less" /><script转载 2020-06-17 17:28:53 · 512 阅读 · 0 评论 -
CSS calc() 函数
使用CSS函数可以在指定CSS属性值时执行计算。它可以在任何地方使用，，，，，，或者是允许的。句法/* property: calc(expression) */width: calc(100% - 80px);该calc()函数将单个表达式作为其参数，并将表达式的结果用作值。该表达式可以是使用标准运算符优先级规则组合以下运算符的任何简单表达式：+加成。-减法。*乘法。参数中至少一个必须是<number>。/师。右侧必须为<number&g转载 2020-06-16 11:55:22 · 942 阅读 · 0 评论 -
多行元素的 文本省略号
多行元素的 文本省略号使文字数量不同在相同的地方显示，给盒子加固定高度overflow：hidden；display：-webkit-box；将盒子转换为弹性盒子-webkit-line-clamp：2；设置显示多少行text-overflow：ellipsis；文本以省略号显示 -webkit-box-orient：vertical；文本显示方式，默认水平多行代码的文本后省略号代码样例：<!DOCTYPE html><html> &..原创 2020-06-16 10:30:48 · 1699 阅读 · 0 评论 -
CSS权重、CSS继承、默认样式
css权重权重：当多个选择器选择同一个元素时，哪个样式优先级高可以通过约分的方式比较两个组合的选择器，将相同的选择器月份，剩余的进行比较。css常用的选择器通配选择器 * 标签选择器 div 类选择器 .class id选择器 #id 内联样式 style="" !important权重选择器 权重 内联样式 style="" 1000 id选择器 #id 100 类、属性、伪类选择器 10 标签选择器、伪元素选择器 ...原创 2020-05-23 18:26:03 · 505 阅读 · 0 评论 -
文档流、文本流、定位流、浮动流、脱离文档流
文档流文档流(Normal flow)也称为常规流，普通流。从直观上理解，常规流指的是元素按照其在 HTML 中的位置顺序决定排布的过程,主要的形式是自上而下（块级元素）,一行接一行,每一行从左至右（行内元素）。内联元素不会独占一行，而每个非浮动块级元素都独有一行, 浮动元素则按规则浮在行的一端. 若当时行容不下, 则另起新行再浮动。浮动元素不占任何正常文档流空间，而浮动元素的定位照样基于正常的文档流，当一个元素脱离正常文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。文本流原创 2020-05-23 15:10:42 · 6186 阅读 · 2 评论 -
块格式化上下文 BFC
块格式化上下文(Block Formatting Context, BFC)是web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。原创 2020-05-23 11:29:05 · 193 阅读 · 0 评论 -
css3多列布局(columnz)，多列布局相关属性
Css3多列布局(columns)为什么会出现多列布局?当一行文字太长时，读者读起来就比较费劲，有可能读错行或读串行；人们的视点从文本的一端移到另一端、然后换到下一行的行首，如果眼球移动浮动过大，他们的注意力就会减退，容易读不下去。所以，为了最大效率的使用大屏幕显示器，页面设计中需要限制文本的宽度，让文本按多列呈现，就像报纸上的新闻排版一样。浏览器支持状态： Internet Exp...原创 2018-03-15 23:00:25 · 4325 阅读 · 0 评论 -
浮动布局、浮动带来的问题及清除浮动
浮动：让块元素在同一行显示，文档脱离文档流，按照浮动方向移动，遇到父级边界或相邻的浮动元素停住。原创 2020-05-04 20:36:12 · 944 阅读 · 0 评论 -
css实现水平居中、垂直居中、垂直水平居中布局
水平居中1.只需要把行内元素包裹在一个属性display为block的父层元素中，并为父层元素添加如下属性即可：.parent { text-align:center;}2.块状元素解决方案.item { margin: 0 auto;}3.多个块状元素解决方案将元素的display属性设置为inline-block，并且把父元素的text-ali...转载 2020-05-04 18:28:06 · 508 阅读 · 0 评论 -
盒模型：标准盒及怪异盒区别及使用
盒子模型可以用来对元素进行布局，包括内边距，边框，外边距，和实际内容这几个部分。盒子模型分为两种 第一种是W3c标准的盒子模型（标准盒模型）、第二种IE标准的盒子模型（怪异盒模型）区别：标准盒模型：宽度： width = 内容区域(content)的宽度高度： height = 内容区域(content)的高度盒子所占的大小：标准盒 =content+border...原创 2020-05-01 11:42:23 · 770 阅读 · 0 评论 -
Css3的优雅降级和渐进增强
渐进增强和优雅降级的原因：渐进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3，但是 CSS3 特效太优秀不忍放弃，所以在高级浏览器中使用CSS3，而在低级浏览器只保证最基本的功能。二者的目的都是关注不同浏览器下的不同体验，但是它们侧重点不同，所以导致了工作流程上的不同。定义：渐进增强 progressive enhancement：针对低版本浏览器...转载 2020-04-18 12:32:06 · 289 阅读 · 0 评论 -
圣杯布局，双飞翼布局及其优缺点
圣杯布局与双飞翼布局的优点：利用布局，可优先渲染主要部分不同点： 圣杯布局：借助的是其他非主要元素覆盖了其父元素的padding值所占据的宽度，同一个杯子，非主要元素其只是占据了全部容器的padding值部分； 双飞翼布局：给主要部分main-wrap添加一个外层元素main，其他非主要元素所占据的空间是主要部分(main-wrap)的margin空间，像鸟的两个翅膀，与主要部分mai...原创 2018-04-28 01:04:12 · 3221 阅读 · 6 评论 -
css两列布局 一边固定一边自适应
css两列布局一、优先渲染主要部分 当主要部分是自适应且需要优先渲染的时候，可采用以下三种方式： <!-- html结构 --> <div class="main"> <div class="main-content">main</div> </div>原创 2018-03-25 23:03:50 · 2369 阅读 · 0 评论 -
css三列布局--两边固定中间自适应和中间固定两边自适应
三列布局 本篇讲三列布局，面试常考题，自己总结的，如有什么问题，欢迎指出！我会用红色标注出主要作用部分，都是最精简的写法，，没有多余的修饰。布局方式一:两边固定中间自适应1.flex布局 思路：将父元素box设为display:flex;可将box设置为弹性盒模型进行布局（如果对flex不了解，可点击打开链接学习）<!DOCTYPE html><html> ...原创 2018-03-25 21:02:54 · 22267 阅读 · 0 评论