![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 75
杜小白Zero
这个作者很懒,什么都没留下…
展开
-
Flex布局应用实例
1、flex设置元素水平垂直居中<div class="box"> <h3>Flex实现水平垂直居中</h3> <p> flex-direction决定主轴的方向:row|row-reverse|column|column-reverse<br/> justify-content决定主轴的对齐方式:fle...原创 2018-07-25 16:04:05 · 15902 阅读 · 0 评论 -
浅析BFC原理及作用
一、常见布局模式在讲BFC之前,我们先来看一下常见的CSS三种布局模型:CSS中的三种布局模型:流动模型(Flow)、浮动模型(Float)和层模型(Layer)。详解在我的另一篇博文中讲到,CSS中的三种布局模型。二、BFC概念 BFC 即 Block Formatting Contexts (块级格式化上下文),它属于上述布局模式的流动模型。是W3C CSS2.1规范中的一个概念,决定了...原创 2018-05-21 17:34:33 · 12182 阅读 · 1 评论 -
用css3实现求婚小动画
昨天在微信公众号中看到这一篇文章,瞬间觉得css太强大了,只要你想做,everything is possible!首先放张效果图然后一步步分析一下:首先是刚出现的新郎的动画.w-m img{ margin-right: 0; float: right; margin-top: 60px; animation: toWoman 0.5s ease .5s both;}@keyframe...原创 2018-05-08 10:52:49 · 1135 阅读 · 0 评论 -
CSS3渐变Gradients
CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。CSS3 定义了两种类型的渐变(gradients):线性渐变(Linear Gradients)-...原创 2018-05-17 10:30:50 · 330 阅读 · 0 评论 -
CSS的子选择器与后代选择的区别
一、子选择器还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。这行代码会使class名为food下的子元素li(水果、蔬菜)加入红色实线边框。.food>li{border:1px solid red;}/*添加边框样式(粗细为1px, 颜色为红色的实线)*/ <h1>食物</h1> <ul class="foo...原创 2018-04-12 17:01:01 · 5060 阅读 · 1 评论 -
CSS清除浮动的三种方法
一、clear:both清除浮动最原始的清除浮动方式,兼容性最好,在浮动的内容的后面加个div定义它的sytle为clear:both。具体代码如下:.clear{ clear:both}.box{ float:left;}<div class="content"><div class="box">box</box><div class="...原创 2018-04-12 16:23:36 · 1026 阅读 · 0 评论 -
CSS浮动(float,clear)通俗讲解
开始之前,我们先来了解一下两个概念:标准文档流 说白了就是一个“默认”状态。文档流指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素。浮动使元素脱离标准文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。教程开始: 首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传...原创 2018-04-12 16:21:00 · 191 阅读 · 0 评论 -
CSS中的三种布局模型
CSS中的三种布局模型为: 流动模型(Flow)、浮动模型(Float)、层模型(Layer)一、流动模型流动布局模型具有2个比较典型的特征:第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div,h1,p)宽度显示为100%。第二点,在流动模型下,内联...转载 2018-04-11 15:26:10 · 1323 阅读 · 0 评论 -
CSS3中的box-sizing属性实例详解
box-sizing是CSS3的box属性之一,box-sizing 属性允许你以特定的方式定义匹配某个区域的特定元素。什么是以特定的方式呢,下面我们来分析一下:一、box-sizing属性包括content-box(default),border-box,inherit。 1、content-box:border和padding不计算入width之内,即width直接就是内容区的宽度 ...原创 2018-04-11 11:44:04 · 1689 阅读 · 1 评论 -
5分钟学会CSS Grid布局
这是一篇快速介绍网站未来布局的文章。Grid 布局是网站设计的基础,CSS Grid 是创建网格布局最强大和最简单的工具。CSS Grid 今年也获得了主流浏览器(Safari,Chrome,Firefox,Edge)的原生支持,所以我相信所有的前端开发人员都必须在不久的将来学习这项技术。在本文中,我将尽可能快速地介绍CSS网格的基本知识。我会把你不应该关心的一切都忽略掉了,只是为了让你了解最基础...原创 2018-04-14 11:49:47 · 530 阅读 · 0 评论 -
CSS选择器的权重及优先级
最近在牛客网上刷题遇到过各类选择器优先级的比较问题,经查阅,现总结如下:总体来说:内联样式 > id>class=属性选择器=伪类选择器=伪元素选择器>标签,大致分为四个等级:一等:代表内联样式,如: style=””,权值为1000;二等:代表ID选择器,如:#content,权值为100;三等:代表类,伪类和属性选择器,如.content,权值为10;四等:代表类型选择器和伪...原创 2018-03-06 10:04:13 · 2421 阅读 · 0 评论 -
CSS3新增属性用法总结
首先,总结为以下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...原创 2018-03-13 09:34:23 · 2708 阅读 · 0 评论 -
CSS盒模型
盒模型是CSS布局的最基本组成部分,它指定页面元素如何显示及在某种方式上如何交互,在页面上的每个元素都是以一个矩形的表现形式存在的,每个矩形是由元素的内容、内补丁(padding)、边框(border)和外补丁(margin)组成的。 如果给某元素加上背景色或者背景图片,那么该元素的背景色或背景图片也将出现在内补丁(padding)之中! 元素的总宽度=margin-l...原创 2018-03-12 19:57:03 · 230 阅读 · 0 评论 -
CSS绘制三角形原理剖析
首先,从对border的应用开始,以前一直以为边框是矩形的,其实不然,如下:.border { width:50px; height:50px; border: 2px solid; border-color: #ADFF2F #BA55D3 #F4A460 #FF0000; }当我们增大border值时:.border { width:50px; ...原创 2018-11-26 16:56:50 · 319 阅读 · 0 评论