那谁家的博客

BFC（Block Formatting Context）基础分析本文为转载==原文链接常见的文档流分为：定位流、浮动流、普通流3种。BFC是普通流中的一种。本文提出3个问题并给出使用BFC来解决这些问题的方法，这3个问题是：外边距折叠（Collapsing Margins） 让一个没有设置高度的容器包含浮动元素 阻止文字环绕什么是BFC根据W3C对BFC的描述，可以总结...

注意加上兼容代码前缀1、ios用户点击一个链接，会出现一个半透明灰色遮罩,如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0，也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}2、禁止ios 长按时不触...

Grid在线视频推荐第一讲

Sass是成熟、稳定、强大的CSS预处理器，而SCSS是Sass3版本当中引入的新语法特性，完全兼容CSS3的同时继承了Sass强大的动态功能。特性概览CSS书写代码规模较大的Web应用时，容易造成选择器、层叠的复杂度过高，因此推荐通过SASS预处理器进行CSS的开发，SASS提供的变量、嵌套、混合、继承等特性，让CSS的书写更加有趣与程式化。变量变量用来存储需要在CSS中复用的信...

1.行内块级差异，块级元素会独占一行，其宽度自动填满其父元素宽度。默认的值为auto。行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到一行排满，才会换行，其宽度随元素的内容自行变化。块级元素可以设置内外边距（margin 和 padding）。而行内元素的只能设置水平方向的内外边距。但是竖直方向的内外边距不起效果。即水平方向有效，竖直方向无效。2. css calc动...

clear属性值有四个clear:both| left| right| none;clear属性的作用就是“清除”浮动。如果某元素设置clear:left;表示该元素左边不存在浮动元素相应的，clear:right;表示该元素右边不存在浮动元素；clear:both;表示该元素两边都不存浮动元素。clear:none表示两边允许有浮动元素。...

white-space、word-break、word-wrap（overflow-wrap）估计是css里最基本又最让人迷惑的三个属性了，今天我们就把这三个属性彻底搞清楚！测试代码<div id="box"> Hi&nbsp;&nbsp;, This is a incomprehensibilities long word. </br&...

在css3中，我们主要使用的是一个transparent的属性，意思是透明的，比如我们将字体设置为黑色会写color：black，那么如果想把字体的颜色设置为透明，我们可以写color：transparent。同理background-color：transparent可以设置背景为透明。三角形9种分类我们根据三角形的位置分为8种：9种三角形实现实例1.triangle up 上三...

请用 HTML5/CSS3 实现一个双栏布局，顶部有导航栏，底部有网站简介。要求如下：PC 上，侧边栏在左侧，宽度固定，主内容在右侧，宽度自适应，内容区域高度不定手机上，所有区域竖排，依次是内容、导航、侧边栏、底部（假定宽度低于 480px 的设备是手机）答案：结构： 使用 HTML5 语义标签或者使用体现语义的类名，加分 如下写了 viewport 的 meta，加分 样式...

原文参考链接https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/一、什么是层叠上下文层叠上下文，英文称作”stacking context”. 是HTML中的一个三维的概念。如果一个元素含有层叠上下文，我们可以理解为这个元素在z轴上就“高人一等”。这里出...

Media Queries------媒体类型原文链接https://www.jianshu.com/p/0979025df112Media Queries是CSS3新增加的一个模块功能，其最大的特色就是通过CSS3来查询媒体，然后调用对应的样式。在彻底地了解Media Queries之前，我们需要了解其中的两个重要部分，第一个是媒体类型，第二个是媒体特性。一、媒体类型媒体类型...

原文链接垂直居中是布局中十分常见的效果之一，为实现良好的兼容性，PC端实现垂直居中的方法一般是通过绝对定位，table-cell，负边距等方法。有了css3，针对移动端的垂直居中就更加多样化。GRID网格式布局方法1：table-cell<divclass="box box1"><span>垂直居中</span>&lt...

点击此处原文链接首先，我们要在页面中排列出所要展示的框的个数，下面是这个瀑布流的结构图： 这张图片中白色的部分我们就当作是浏览器的可视区域了，那么中间这个灰色的部分我给他取名叫做‘main’，用来存放中间展示的图片，并且与页面中的其他元素分开，那么第一个问题就来了，我们如何知道在这个main中到底改放几张图片呢？而且这个main的宽度又该怎么定呢？上代码！#main{...

::before和::after伪元素的用法一、介绍css3为了区分伪类和伪元素，伪元素采用双冒号写法。常见伪类——:hover,:link,:active,:target,:not(),:focus。常见伪元素——::first-letter,::first-line,::before,::after,::selection。::before和::after下特有的conte...