![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
Jealyn
微信公众号“前端快爆”作者
展开
-
利用CSS3绘制一个简单的操场
伴随着CSS3(CSS Module 3)的发布,我们设计网页时有了更多的选择。对于一些比较简单的小图标和图片,我们可以利用CSS3很方便的进行绘制,从而减少页面的图片数量,增加了网页的访问速度。今天我主要利用CSS3的几个属性,简单的绘制一个操场。我用到的核心属性为: border-radius box-shadow before 和 after 伪元素原创 2018-07-18 22:01:21 · 5316 阅读 · 0 评论 -
理解CSS盒模型
CSS盒模型是网页布局中一个很重要的概念,在前端面试题中也会经常出现。本文将从以下几个方面讲解CSS盒模型: CSS盒模型的概念 标准盒模型和IE盒模型 元素的实际宽高计算 更改盒模型模式 一、CSS盒模型的概念 在网页中,所有的HTML元素都可以看做一个盒子。那么CSS盒模型其本质上就是一个盒子,它封装HTML元素,包括:外边距(margin),边框(border),内边距(paddi...原创 2018-07-15 00:03:09 · 778 阅读 · 0 评论 -
CSS两栏布局
一、前言CSS两栏布局指的是在一个容器(container)中,其中一侧定宽布局,而另一侧自适应,自动填满剩余的空间。下面我们以“左侧定宽,右侧自适应”为例,采用几种不同的方式来实现此布局。二、布局方式1.position布局HTML代码如下:<body> <div class="left"></div> <div class="right">...原创 2018-07-15 11:11:24 · 593 阅读 · 0 评论 -
CSS三栏布局
一、前言 在之前的文章中,我曾经写到过CSS两栏布局(https://blog.csdn.net/qq_30216191/article/details/81050410)。今天,我利用相同的思路来实现三栏布局。所谓的三栏布局,一般指的是“左右侧定宽,中间部分自适应”,在这篇文章中,我们将采用5种方式来实现三栏布局。 在这里我们假设已经对所有元素设置了 margin:0; padding...原创 2018-07-31 22:40:19 · 469 阅读 · 0 评论