杜小白的博客

1、flex设置元素水平垂直居中<div class="box"> <h3>Flex实现水平垂直居中</h3> <p> flex-direction决定主轴的方向：row|row-reverse|column|column-reverse<br/> justify-content决定主轴的对齐方式：fle...

一、常见布局模式在讲BFC之前，我们先来看一下常见的CSS三种布局模型：CSS中的三种布局模型：流动模型（Flow）、浮动模型（Float）和层模型（Layer）。详解在我的另一篇博文中讲到，CSS中的三种布局模型。二、BFC概念 BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述布局模式的流动模型。是W3C CSS2.1规范中的一个概念，决定了...

昨天在微信公众号中看到这一篇文章，瞬间觉得css太强大了，只要你想做，everything is possible！首先放张效果图然后一步步分析一下：首先是刚出现的新郎的动画.w-m img{ margin-right: 0; float: right; margin-top: 60px; animation: toWoman 0.5s ease .5s both;}@keyframe...

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。CSS3 定义了两种类型的渐变（gradients）：线性渐变（Linear Gradients）-...

一、子选择器还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。.food>li{border:1px solid red;}/*添加边框样式（粗细为1px， 颜色为红色的实线）*/ <h1>食物</h1> <ul class="foo...

一、clear:both清除浮动最原始的清除浮动方式，兼容性最好，在浮动的内容的后面加个div定义它的sytle为clear:both。具体代码如下：.clear{ clear:both}.box{ float:left;}<div class="content"><div class="box">box</box><div class="...

开始之前，我们先来了解一下两个概念：标准文档流    说白了就是一个“默认”状态。文档流指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。浮动使元素脱离标准文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。教程开始：       首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传...

CSS中的三种布局模型为：    流动模型（Flow）、浮动模型（Float）、层模型（Layer）一、流动模型流动布局模型具有2个比较典型的特征：第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。第二点，在流动模型下，内联...

box-sizing是CSS3的box属性之一，box-sizing 属性允许你以特定的方式定义匹配某个区域的特定元素。什么是以特定的方式呢，下面我们来分析一下：一、box-sizing属性包括content-box（default），border-box，inherit。    1、content-box：border和padding不计算入width之内，即width直接就是内容区的宽度   ...

这是一篇快速介绍网站未来布局的文章。Grid 布局是网站设计的基础，CSS Grid 是创建网格布局最强大和最简单的工具。CSS Grid 今年也获得了主流浏览器（Safari，Chrome，Firefox，Edge）的原生支持，所以我相信所有的前端开发人员都必须在不久的将来学习这项技术。在本文中，我将尽可能快速地介绍CSS网格的基本知识。我会把你不应该关心的一切都忽略掉了，只是为了让你了解最基础...

最近在牛客网上刷题遇到过各类选择器优先级的比较问题，经查阅，现总结如下：总体来说：内联样式 > id>class=属性选择器=伪类选择器=伪元素选择器>标签，大致分为四个等级：一等：代表内联样式，如: style=””，权值为1000；二等：代表ID选择器，如：#content，权值为100；三等：代表类，伪类和属性选择器，如.content，权值为10；四等：代表类型选择器和伪...

首先，总结为以下18条新属性：1、box-shadow（阴影效果）2、border-color（为边框设置多种颜色）3、border-image（图片边框）4、text-shadow（文本阴影）5、text-overflow（文本截断）6、word-wrap（自动换行）7、border-radius（圆角边框）8、opacity（透明度）9、box-sizing（控制盒模型的组成模式）10、res...

    盒模型是CSS布局的最基本组成部分，它指定页面元素如何显示及在某种方式上如何交互，在页面上的每个元素都是以一个矩形的表现形式存在的，每个矩形是由元素的内容、内补丁（padding）、边框（border）和外补丁（margin）组成的。    如果给某元素加上背景色或者背景图片，那么该元素的背景色或背景图片也将出现在内补丁（padding）之中！        元素的总宽度=margin-l...

首先，从对border的应用开始，以前一直以为边框是矩形的，其实不然，如下：.border { width:50px; height:50px; border: 2px solid; border-color: #ADFF2F #BA55D3 #F4A460 #FF0000; }当我们增大border值时：.border { width:50px; ...