CSS深度思考
关注
分享
扫一扫
天心天地生
一切都将逝去，只有死神永生。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
请描述 BFC(Block Formatting Context) 及其如何工作？
什么是BFC BFC(block formatting context）简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。 中文常译为块级格式化上下文。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。 在进行盒子元素布局的时候，BFC提供了一个环境，在这个环境中按照一定...原创 2019-10-13 18:50:40 · 182 阅读 · 0 评论 -
谈谈以前端角度出发做好SEO需要考虑什么？
搜索引擎工作原理在搜索引擎网站，比如百度，在其后台有一个非常庞大的数据库，里面存储了海量的关键词，而每个关键词又对应着很多网址，这些网址是百度程序从茫茫的互联网上一点一点下载收集而来的，这些程序称之为“搜索引擎蜘蛛”或“网络爬虫”。这些勤劳的“蜘蛛”每天在互联网上爬行，从一个链接到另一个链接，下载其中的内容，进行分析提炼，找到其中的关键词，如果“蜘蛛”认为关键词在数据库中没有而对用户是有用的便存...转载 2019-10-13 18:52:34 · 572 阅读 · 0 评论 -
知道css有个content属性吗？有什么作用？有什么应用？
CSS contentcontent 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。实例：<!DOCTYPE html><html><head><style>a:after {content: " (" attr(href) ")";}</style></head><bo...原创 2019-10-13 18:53:03 · 171 阅读 · 0 评论 -
HTML5的离线储存怎么使用？
HTML5 提拱更好的本地存储规范 localStorage 和 sessionStorage , 它们将数据存储在本地，而且在http请求时不会携带 Storage 里的信息, 使用方式也很简单:localStorage.setItem('key', 'value');localStorage.getItem('key');localStorage.removeItem('key');s...原创 2019-10-12 23:42:00 · 130 阅读 · 0 评论 -
渐进增强和优雅降级之间有什么不同?
渐进增强在网页开发中，渐进增强认为应该专注于内容本身。一开始针对低版本的浏览器构建页面，满足最基本的功能，再针对高级浏 览器进行效果，交互，追加各种功能以达到更好用户体验。总结： 以最低要求，实现最基础功能为基本，向上兼容.优雅降级在网页开发中，优雅降级指的是一开始针对一个高版本的浏览器构建页面，先完善所有的功能。然后针对各个不同的浏览器进行测试，修复，保证低级浏览器也有基本功能 就好，低...原创 2019-10-12 23:36:00 · 210 阅读 · 0 评论 -
Quirks模式是什么？它和Standards模式有什么区别？
Quirks怪癖模式是什么从IE6开始，引入了Standards模式，标准模式中，浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。在IE6之前CSS还不够成熟，所以IE5等之前的浏览器对CSS的支持很差， IE6将对CSS提供更好的支持，然而这时的问题就来了，因为有很多页面是基于旧的布局方式写的，而如果IE6 支持CSS则将令这些页面显示不正常，如何在即保证不破坏现有页面...原创 2019-10-12 23:35:27 · 957 阅读 · 0 评论 -
经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？
浏览器兼容性问题出现浏览器兼容性问题的主要原因，是不同浏览器对同一段代码的有不同解析，造成的页面显示效果不统一。在大多数情况下，我们的需求是，无论用户在什么浏览器上查看我们的网站或登录我们的系统，显示效果都应该是一致的。所以浏览器兼容性问题是我们web前端开发人员经常会碰到和必须解决的问题。什么是css hack不同的浏览器对CSS的解析结果是不同的，因此会导致相同的CSS输出的页面效果不...原创 2019-10-12 23:34:43 · 2433 阅读 · 0 评论 -
目前流行的组件库有哪些？css，js各有哪些流行的库？
CSS流行组件库BootstrapBootstrap，让你的页面更简洁、直观、强悍、移动设备优先的前端开发框架,让web开发更迅速、更简单。它还提供了更优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。有着丰富的网格布局系统以及丰富的可重用组件，还有强大的支持十几的JavaScript、jQuery插件以及组件定制等。Bootstrap中文网地址：http://www.boot...原创 2019-10-12 23:34:01 · 869 阅读 · 0 评论 -
移动端有哪些常见布局方式？
响应式布局。可以用px作为像素，网页进行平铺。全屏的用100%。高度可以用px写死，宽度可以用百分比。不管网页怎么拉伸，高度不变，宽度会相应的扩大。em/rem 方式布局。可以设置好html，body的字体大小，然后用不同的尺寸手机访问的时候，我们可以去修改body的字体大小，网页（网页的内容用rem设置宽度、高度）的之内容会自动进行缩放。可以按照设计稿的宽 高 来写css，然后通过js...原创 2019-10-12 23:27:50 · 376 阅读 · 0 评论 -
如何做默认样式重置？resetting 和 normalizing 之间有什么区别？
什么是CSS resetting？在HTML标签在浏览器里有默认的样式，例如 p 标签有上下边距，strong标签有字体加粗样式，em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。所以解决的方...原创 2019-10-12 23:25:37 · 515 阅读 · 0 评论 -
开发过程中应该遵守哪些编码规范和class命名规范？
真正阅读程序的是人，而不是计算机，所以所写代码具有良好的可读性，是优秀程序员必备的素质之一。在大型的系统开发中，往往需要很多人的通力配合，例如，开源软件Linux 之所以能够为全球顶尖程序员共享、协作开发，也得益于规范化和标准化的编码规范。规范应该尽量一致；即使有例外，也只能是少数情况，而不能是很多例外。好的代码规范能够提高代码的可读性便于协作沟通，好的模式能够在上层设计上避免不必要的 bug 出...原创 2019-10-12 23:23:07 · 383 阅读 · 0 评论 -
为什么要做组件库？
传统开发方式的弊端在大型软件系统中，web应用的前后端已经实现了分离，而随着REST软件架构的发展，后端服务逐步倾向于微服务，简单来说就是将一个大型后端服务，拆分成多个小服务，它们分别部署，降低了开发的复杂性，而且提高了系统的可伸缩性。而前端方面，随着技术的发展，开发的复杂度也越来越高，传统开发模式总是存在着开发效率低，维护成本高等的弊端。弊端产生的原因传统开发方式效率低以及维护成本高的主要...原创 2019-10-11 20:30:29 · 233 阅读 · 0 评论 -
固定宽度布局开发WebApp如何实现多终端下自适应？
现在人通过手机浏览网页占了大多数，随着浏览方式的改变，网页在webapp下面实现多终端自适应，无论对于避免工程师无谓的重复劳动或者是项目管理的便捷性上来说重要性都是十分巨大的。固定宽度布局固定宽度式布局是目前国内最常用的布局方法，优点就是固定宽度使得其布局最简便，使得开发人员对布局和定位有更大的控制能力。但是，固定宽度的布局也有缺点，因为它的宽度是固定的，无论窗口尺寸有多大，它的尺寸总是不变...原创 2019-10-11 20:21:19 · 269 阅读 · 0 评论 -
如何使用gulp编辑less？
什么是gulpgulp是自动化构建工具,构建工具可以使繁琐的工作简单化，提高开发人员的工作效率，对于前端开发开发人员来说，我们通常用gulp来合并文件，压缩文件，编译less和sass文件等。安装gulpgulp 是基于 node 实现的，那么我们就需要先安装 node。打开 https://nodejs.org/ 点击绿色的 INSTALL 按钮下...原创 2019-10-12 00:00:01 · 414 阅读 · 0 评论 -
less和sass有什么区别？
1.编译环境不一样Sass的安装需要Ruby环境，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放到项目中，也有 Less.app、SimpleLess、CodeKit.app这样的工具，也有在线编译地址。2.变量符不一样Less是@，而Scss是$，而且变量的作用域也不一样。3.输出设置...原创 2019-10-11 23:59:25 · 443 阅读 · 0 评论 -
如何使用sass?
什么是sass简介Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。sass和scss有什么区别？Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：文件扩展名不同，Sass 是以“.sass”...原创 2019-10-10 22:37:49 · 243 阅读 · 0 评论 -
如何使用less?
什么是lessless是一门动态的css语言，使得css样式更加灵活地作用于html标签。less作为css的一种形式扩展，它并没有减少css的功能，而是在现有的css语法上，为css加入了程序是式语言的特性。less包含一套自定义的语法及一个解析器， 用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的css文件。为什么使用lesscss是一门非程序式语言，没有变...原创 2019-10-10 22:16:03 · 204 阅读 · 0 评论 -
自适应小屏幕设备时，该如何布局？
什么时自适应网页设计页面能适配众多不同的终端设备，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局.2010年，Ethan Marcotte提出了"自适应网页设计"（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。响应式网页设计是自适应网页设计的子集。响应式网页设计指的是页面的布局（流动网格、灵活的图像及媒介查询）。总体目标...原创 2019-10-10 21:54:01 · 421 阅读 · 0 评论 -
如何改变默认radio和select的样式？
改变默认radio样式思路：step1.可以为<label>元素添加生成性内容(伪元素)，并基于单选按钮的状态来为其设置样式；step2. 然后把真正的单选按钮隐藏起来；step3. 最后把生成内容美化一下。编码实战1、可以为<label>元素添加生成性内容(伪元素)，并基于单选按钮的状态来为其设置样式；为label设置样式label::before{di...原创 2019-10-10 21:46:35 · 215 阅读 · 0 评论 -
响应式的优点与缺点？
响应式网站是在2010年提出来的，是为了能让网页在不同设备下兼容多个终端，而不是为每个终端特定一种版本。优点1.在不同设备下能有不同的页面排版，这也是响应式最大的优点，在分辨率不同，设备环境进行一些不同的设计，所有开发维护和运营上，相对多个版本成本会降低很多。2.兼容性好，能在不同的设备下浏览。3.方便后期维护页面，只需要对必要的页面进行修改，不会影响其他页面。缺点1.页面加载过多的代...原创 2019-10-10 13:29:11 · 1851 阅读 · 1 评论 -
媒体查询如何使用？
媒体查询媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。为什么使用媒体查询使用@media媒体查询，可以针对不同的媒体类型定义不同的样式。媒体查询的使用引入方式媒体查询有两种引入方法：link元素中的CSS媒体查询css样式表中媒体查询语法基本语法<!-- link元素中的CSS媒体查询 --...原创 2019-10-10 13:13:12 · 801 阅读 · 0 评论 -
如何使用bootstrap栅格系统？
bootstrap栅格系统bootstrapBootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。bootstrap栅格系统Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。使用规则1、数据行(.row)必须...原创 2019-10-10 12:55:44 · 256 阅读 · 0 评论 -
margin负值在页面布局中有哪些应用？
左右列固定，中间列自适应布局此例适用于左右栏宽度固定，中间栏宽度自适应的布局。由于网页的主体部分一般在中间，很多网页都需要中间列优先加载，而这种布局刚好满足此需求。去除列表右边框项目中经常会使用浮动列表展示信息，为了美观通常为每个列表之间设置一定的间距（margin-right）,当父元素的宽度固定式，每一行的最右端的li元素的右边距就多余了，去除的方法通常是为最右端的li添加class，...原创 2019-10-10 00:54:16 · 168 阅读 · 0 评论 -
css有哪些方式可以实现垂直居中？
背景介绍前端在设计一个版面时，通常都会用到水平，垂直居中，水平居中相对来说比较好处理，而垂直居中就稍微复杂点，但他们两个都是我们需要熟练掌握的知识点。水平居中设置1.行内元素设置 text-align:center2.定宽块状元素设置 左右 margin 值为 auto3.不定宽块状元素在元素外加入 table 标签（完整的，包括 table、tbody、tr、td），该元素写在...原创 2019-10-10 00:43:12 · 133 阅读 · 0 评论 -
bootstrap有哪些常用组件？
什么是组件组件:一般是指软件系统的一部分，承担了特定的职责，可以独立于整个系统进行开发和测试， 一个良好设计的组件应该可以在不同的软件系统中被使用(可复用)。目前常用的bootstrap组件：1.轮播图2.下拉菜单3.响应式导航栏...原创 2019-10-10 00:30:03 · 1260 阅读 · 0 评论 -
div+css的布局较table布局有什么优点？
背景介绍tableE布局是WEB早期CSS不存在的时候兴起的，是对TABLE标签的不正规使用，Table标签就是表格，是用来显示数据的，而不是用来布局网页的，虽然它有时候布局网页很简单。现在绝大多数的网站都是用DIV+CSS布局，现在的网页越来越倾向于使用DIV的方法来布局网页了。 这两种布局各有各的优缺点。div+css布局div+css布局的优点可以通过css样式给框架进行功能强大的...原创 2019-10-10 00:27:27 · 1641 阅读 · 0 评论 -
什么是外边距重叠？重叠的结果是什么？
外边距重叠边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。两个或多个块级盒子的垂直相邻边界会重合。外边距重叠的结果结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。外边距重叠的意义外边距的重叠只产生在普通流文档的上...转载 2019-10-10 00:12:51 · 619 阅读 · 0 评论 -
主流浏览器内核有哪几种？
浏览器内核浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。JS 引擎则是解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果。浏览器最重要或者说最...原创 2019-10-10 00:05:06 · 1416 阅读 · 0 评论 -
如何用css写一个简单的幻灯片效果页面？
CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation。transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。transition是令一个或多个可以用数值表示的css属性值发生变化时产生过渡效果。Animation字面上的意思，就是“动画”的意思.我们使用CSS3的Animation制作动画，实现简单的...原创 2019-10-09 23:57:46 · 336 阅读 · 0 评论 -
如何实现轮播图？
通过以下的5个过程，实现轮播图的轮播效果1.动态生成结构创建元素和插入元素的方法分别是什么？创建元素：document.creatElement( tagName ) var li = document.creatElement(“li”)；插入元素：appendChild( element ) ol.appendChild(“li”);通过什么方法复制第一张图片元素？通过cloneN...原创 2019-10-09 23:55:34 · 537 阅读 · 0 评论 -
如果是在手机上查看投票页，没有hover效果时应该怎么办？
点击对应位置即可转载 2019-10-09 22:51:55 · 411 阅读 · 0 评论 -
描述下z-index和叠加上下文是如何形成的？
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。更为清爽的浏览体验,请移步我的个人博客天心天地生的个人博客...转载 2019-10-07 22:14:45 · 583 阅读 · 0 评论 -
rgba和opacity的透明效果有什么不同？display和visiblity有什么区别？
rgba和opacity的透明效果有什么不同opacity后代元素会随着一起具有透明性，Opacity中的字随着透明值下降越来越看不清楚，而RGBA不具有这样的问题。display和visiblity有什么区别display：通常可以设置为none、inline、blockvisblity：通常可以设置为hidden、visible区别：当display为none，visibility为...原创 2019-10-07 22:07:47 · 448 阅读 · 0 评论 -
什么是浮动？有哪些清除浮动的方法？
浮动指定元素在个方向上浮动。清除浮动方法1：脚底插入clear:both;方法2：父元素BFC(ie8+)或haslayout(ie6/ie7)// 现代浏览器clearfix方案，不支持IE6/7 .clearfix:after { display: table; content: " "; clear: both; } // 全浏览器通用的clearfix方案// 引入了zo...原创 2019-10-07 21:58:11 · 541 阅读 · 0 评论 -
什么是CSS sprites？
简介ss sprites直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。其实就是通过将多个图片融合到一张图里面，然后通过CSS background背景定位技术技巧布局网页背景。为什么要使用CSS sprites这样做的好处也是显而易见的，因为图片多的话，会增加http的请求，无疑促使了网站性能的减低，特别是图片特别多的网站，如果能用css sprites降低图片...原创 2019-10-07 21:54:00 · 858 阅读 · 0 评论 -
HTML中dl、ul、ol用哪个比较好？
简介ul，ol，dl标签是CSS网页布局中常用的列表元素。 列表将具有相似特征或先后顺序的内容按照从上到下的顺序排列起来。具体介绍1.ul标签：无序列表始于 u l 标签。每个列表项始于l i标签，此列项目默认使用粗体圆点（典型的小黑圆圈）进行标记。2.ol标签：有序列表始于ol标签，每个列表项始于li标签，列表项目使用数字进行标记。3.dl标签：dl标签是定义列表，自定义列表不仅仅是一...转载 2019-10-07 21:43:34 · 554 阅读 · 0 评论 -
如何使用IconFont？
step 1:百度iconfont,找到阿里巴巴矢量图标库官网,然后注册登录,或者用github登录也行,此步骤跳过;step 2:找到图标管理->我的项目->然后新建项目:step 3:项目新建完成后,往项目里添加我们要想使用的图标,找到图标库,搜索一个想要的图标,然后添加到购物车;step 4:添加到购物车完成后,购物车徽章数字应该显示1了,点击右上角的购物车图标,选择添加至...原创 2019-10-07 21:36:36 · 176 阅读 · 0 评论 -
title与h1、b与strong、i与em、img的alt与title、src与href有什么区别？
title与h1title的权重高于H1,其适用性要比H1广。b与strong、i与em物理元素：b、i逻辑元素：em、strong物理元素是告诉浏览器我应该以何种格式显示文字，逻辑元素告诉浏览器这些文字有怎么样的重要性。结论：对于搜索引擎来说逻辑元素比物理元素要重视的多。mg的alt与titlealt 用于图片没显示时在图片显示区域显示一个说明文字。 title 表示鼠标在图片...原创 2019-10-07 21:34:50 · 437 阅读 · 0 评论 -
请解释一下CSS3的Flexbox（弹性盒布局模型）以及适用场景？
Flexbox（弹性盒布局模型）2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。参考资料：Flex 布局教程：语法篇适用场景布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便...原创 2019-10-07 21:21:28 · 506 阅读 · 0 评论 -
如何理解vertical-align与line-height？
vertical-align 属性设置元素的垂直对齐方式。line-height 属性设置行间的距离（行高）。参考资料：CSS深入理解vertical-align和line-height的基友关系原创 2019-10-07 21:17:02 · 484 阅读 · 0 评论