只要在页面下加入如下css，整个css布局就清晰了

      * { background-color: rgba(255,0,0,.2); }

      * * { background-color: rgba(0,255,0,.2); }

      * * * { background-color: rgba(0,0,255,.2); }

      * * * * { background-color: rgba(255,0,255,.2); }

      * * * * * { background-color: rgba(0,255,255,.2); }

      * * * * * * { background-color: rgba(255,255,0,.2); }

      * * * * * * * { background-color: rgba(255,0,0,.2); }

      * * * * * * * * { background-color: rgba(0,255,0,.2); }

      * * * * * * * * * { background-color: rgba(0,0,255,.2); }

from：https://juejin.im/post/5d730220f265da03e4678453

分析CSS布局神器的更多相关文章

  1. 分析CSS布局中BFC

    1.什么是BFC BFC(Block Formatting Context,块级元素格式化上下文)是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和 ...

  2. CSS 布局说——可能是最全的

    前言 现在,我们被称为前端工程师.然而,早年给我们的称呼却是页面仔.或许是职责越来越大,整体的前端井喷式的发展,使我们只关注了js,而疏远了css和html. 其实,我们可能经常在聊组件化,咋地咋地. ...

  3. CSS布局（下）

    1.CSS布局之浮动 1.1.float之图文混排 float的意思就是元素漂浮在上层. 可以直接通过设置float属性实现图文混排,代码如下: <div style="width:2 ...

  4. 浅析css布局模型1

    css是网页的外衣,好不好看全凭css样式,而布局是css中比较重要的部分,下面来分析一下常见的几种布局. 流动模型 流动模型是网页布局的默认模式,也是最常见的布局模式,他有两个特点: 1.块状元素都 ...

  5. 《深入理解bootstrap》读书笔记：第三章 CSS布局

    一. 概述一下理念 bootstrap基于H5开发.提倡移动先行(媒询声明是必须的),对浏览器支持面不是很广. 响应式图片:max-width:100% height:auto; 可以加上:.img- ...

  6. SEO为什么要求网页设计师用DIV+CSS布局网页?

    问:SEO为什么要求网页设计师用DIV+CSS布局网页? 答:通常情况下,SEOer非常喜欢把一个网站做到最细节,在网页设计方面,有时与设计师沟通时,通常会问到:SEO为什么要求网页设计师用DIV+C ...

  7. (转)Div+CSS布局入门

    在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...

  8. <转载>div+css布局教程之div+css常见布局结构定义

    在使用div+css布局时,首先应该根据网页内容进行结构设计,仔细分析和规划你的页面结构,你可能得到类似这样的几块: 页面层容器.页面头部.标志和站点名称.站点导航(主菜单).主页面内容.子菜单.搜索 ...

  9. web前端教程：CSS 布局十八般武艺都在这里了

      CSS布局 布局是CSS中一个重要部分,本文总结了CSS布局中的常用技巧,包括常用的水平居中.垂直居中方法,以及单列布局.多列布局的多种实现方式(包括传统的盒模型布局和比较新的flex布局实现), ...

随机推荐

  1. 关于Django auth注册登录模块的具体使用

    from django.urls import path from . import views urlpatterns = [ #主页,用来显示类别等其他数据 path('',views.index ...

  2. 创建yum私有库

    简述 ​ 在Linux系统中安装软件的方法有三种,分别是rpm软件包安装.yum源安装与源代码编译安装,在用rpm软件包安装软件时会经常出现依赖性问题,导致安装繁琐,用源代码编译安装就更不用说了,相信 ...

  3. FRDM-KL43开发板驱动段式液晶SLCD的实现方法

    LCD的驱动不像LED那样,加上电压(LED实际上是电流驱动)就可以长期显示的. LCD驱动必须使用交流电压驱动才能保持稳定的显示,如果在LCD上加上稳定的直流电压, 不但不能正常显示,时间久了还会损 ...

  4. python----print线程安全问题

    在Python2中print是非线程安全的,Python3中是安全的 https://www.jianshu.com/p/acdaf2ffd81b

  5. 除了不要 SELECT * ，程序员使用数据库还应知道的11个技巧

    SQL:sum里加条件SELECT SUM( CASE WHEN "V7010" BETWEEN 0 AND 0.1 THEN 1 ELSE 0 END) FROM "C ...

  6. TOMCAT与http

    一.Tomcat是什么?Tomcat是一个Web应用服务器,同时也是一个Servlet/JSP容器.Tomcat作为Servlet容器,负责处理客户端请求,把请求传送给Servlet,并将Servle ...

  7. pandas 数据类型研究（一）数据转换

    当利用pandas进行数据处理的时候,经常会遇到数据类型的问题,当拿到数据的时候,首先需要确定拿到的是正确类型的数据,一般通过数据类型的转化,这篇文章就介绍pandas里面的数据类型(data typ ...

  8. LightOJ - 1179-Josephus Problem(约瑟夫环）

    链接: https://vjudge.net/problem/LightOJ-1179 题意: The historian Flavius Josephus relates how, in the R ...

  9. GO语言基本数据类型

    一.整型 Go语言的数值类型分为以下几种:整数.浮点数.复数,其中每一种都包含了不同大小的数值类型,例如有符号整数包含 int8.int16.int32.int64 等,每种数值类型都决定了对应的大小 ...

  10. 005__C#修改软件图标

    (一)项目右键属性 (二)应用程序-->图标          图标转换:http://www.faviconico.org/ (三)窗体右键属性更改窗体里面的图标 (四)修改名字