CSS架构

1.浮动；

是以float属性设置容器指定的位置

<style>

        div {

            width: 200px;

            height: 200px;

        }

        #qq {

            background-color: lightcoral;

            /*float: right;*/

        }

        #yy {

            /*width: 300px;

            height: 300px;*/

            background-color: yellowgreen;

            /* 当前元素设置为浮动后，只影响当前元素后面的所有元素的位置 */

            /*float: left;*/

        }

        #cc {

            background-color: lightskyblue;

            float: left;

        }

    </style>

</head>

<body>

<div id="qq"></div>

<div id="yy"></div>

<div id="cc"></div>

</body>

块级元素；

不再独占一行，多元素之间会水平方向排列设置浮动后，会从页面的文档流脱离

  <style>

        div{

            width: 200px;

            height: 200px;

            background-color: blue;

            /*默认宽度是父级宽度的100%

              高度是后者的所有元素高度之和*/

            float: left;

            /*左浮动*/

               /*

                * 宽度默认是 0 或者所有后代元素宽度之和

                * 高度默认是 0 或者所有后代元素高度之和

                多个块级元素都设置为浮动后 -> 垂直方向排列变为水平方向排列

                * 如果占满父级元素宽度的100%后，会自动换行

                */

        }

    </style>

</head>

<body>

<div></div>

</body>

示意图；

内联元素；

<style>

        span{

            background-color: red;

            width: 200px;

            height: 200px;

            /*宽和高是以内容撑起*/

            /*设置宽高属性是无效的*/

            float: left;

            /*设置完浮动后

              其宽高属性才有效

              多个内联元素之间依旧是水平方向的排列*/

        }

    </style>

</head>

<body>

<span>呼延觉罗</span>

<span>爱新觉罗</span>

</body>

示意图；

清除浮动；

以clear属性来设置清除浮动

<style>

        div{

            width: 200px;

            height: 200px;

            float: left;

        }

        #qq{

            background-color: red;

        }

        #yy{

            background-color: blue;

            clear: both;

            /*清除浮动*/

        }

        #cc{

            background-color: yellow;

        }

    </style>

</head>

<body>

<div id="qq"></div>

<div id="yy"></div>

<div id="cc"></div>

</body>

示意图；

高度塌陷；

在没有给父级容器设置高度，而且设置子元素浮动，父级失去高度

<style>

        .qq{

            border: 10px solid black;

            overflow: hidden;

        }

        .hh{

            width: 200px;

            height: 200px;

            background-color: blue;

            float: left;

        }

    </style>

</head>

<body>

<div class="qq">

    <div class="hh"></div>

</div>

</body>

示意图；

【静态页面架构】CSS之定位的更多相关文章

  1. 用手机自带uc浏览器查看静态页面，css样式不显示

    问题描述: 这个问题是一个同事在写手机页面用UC浏览器测试以后遇到的,其他浏览器静态页面显示正常,唯独UC浏览器不显示页面样式. 我测试过代码是没有问题的,因为临时没有找到安卓手机,就猜想PC端的应该 ...

  2. 前端开发工程师 - 04.页面架构 - CSS Reset & 布局解决方案 & 响应式 & 页面优化 &规范与模块化

    04.页面架构 第1章--CSS Reset 第2章--布局解决方案 居中布局 课堂交流区 水平列表的底部对齐 如图所示,一个水平排列的列表,每项高度都未知,但要求底部对齐,有哪些方法可以解决呢? & ...

  3. 【静态页面架构】CSS之链接和图像

    CSS架构 一.链接: 链接元素:通过使用a元素的href属性设置跳转到指定页面地址 <style> a{ color: blue; text-decoration: none; } a: ...

  4. 量体裁衣方得最优解：聊聊页面静态化架构和二级CDN建设

    量体裁衣方得最优解:聊聊页面静态化架构和二级CDN建设 上期文章中我们介绍了CDN和云存储的实践,以及云生态的崛起之路,今天,我们继续聊一聊CDN. 我们通常意义上讲的CDN,更多的是针对静态资源类的 ...

  5. mvc伪静态<四> 伪静态后静态页面或者引用的css和图片失效

    引用的css和图片失效的解决办法 把样式引用文件的相对路径改成绝对路径就可以了 比如原先的引用路径为:<link href="~/Content/css/style.css" ...

  6. html+css实现小米商城首页静态页面

    学了一个星期的html和css,用新学的东西写点东西,仿照小米商城的首页按照它的页面布局盗用它的图片写了个小米商城的静态页面. 源代码:链接:https://pan.baidu.com/s/1qf63 ...

  7. web自动化测试---css方式定位页面元素

    css方式定位的方法也有很多,相较于xpath更灵活一点,下面就介绍下使用方法(以百度输入框为例) 1.通过tag来定位,可以写成如下: driver.find_element_by_css_sele ...

  8. 天猫浏览型应用的CDN静态化架构演变

    原文链接:http://www.csdn.net/article/2014-01-22/2818227-CDN-Architecture 在天猫双11活动中,商品详情.店铺等浏览型系统,通常会承受超出 ...

  9. CSS之定位布局（position，定位布局技巧）

    css之定位 1.什么是定位:css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设 ...

随机推荐

  1. 人工智能之深度学习-初始环境搭建（安装Anaconda3和TensorFlow2步骤详解）

    前言: 本篇文章主要讲解的是在学习人工智能之深度学习时所学到的知识和需要的环境配置(安装Anaconda3和TensorFlow2步骤详解),以及个人的心得体会,汇集成本篇文章,作为自己深度学习的总结 ...

  2. kubernetes配置后端存储 rook-ceph

    一 Rook概述 1.1 Ceph简介 Ceph是一种高度可扩展的分布式存储解决方案,提供对象.文件和块存储.在每个存储节点上,将找到Ceph存储对象的文件系统和Ceph OSD(对象存储守护程序)进 ...

  3. qt（一）

    一.Qt安装 qt离线安装地址:http://download.qt.io/archive/qt/ 参考教程:https://blog.csdn.net/u013934107/article/deta ...

  4. python面试_总结02_代码题

    - 代码题 1.创建一个函数,接收一个字符串参数,判断其做为Python标识符是否合法. 具体要求: 如果合法则输出 True,否则输出 False. 如果该字符串与Python内置的关键字,或Bif ...

  5. Spring入门一：IOC、DI、AOP基本思想

    Spring框架是一个集众多涉及模式于一身的开源的.轻量级的项目管理框架,致力于javaee轻量级解决方案.相对于原来学过的框架而言,spring框架和之前学习的struts2.mybatis框架有了 ...

  6. 随机数据生成工具Mockaroo

    测试用例生成工具:https://www.mockaroo.com/ 网站描述是:Random Data Generator and API Mocking Tool | JSON / CSV / S ...

  7. 泛型的类型擦除后，fastjson反序列化时如何还原？

    原创:微信公众号 码农参上,欢迎分享,转载请保留出处. 哈喽大家好啊,我是Hydra~ 在前面的文章中,我们讲过Java中泛型的类型擦除,不过有小伙伴在后台留言提出了一个问题,带有泛型的实体的反序列化 ...

  8. ElasticSearch安装 --- windows版

    文件下载地址: 链接:https://pan.baidu.com/s/1_Cy_Sy1-vOvsUxliM-EZHQ 提取码:qpcv 定义: Elasticsearch 是一个分布式的搜索和分析引擎 ...

  9. Python文件读写--错误一

    在学习python的文件读写操作的时候,我遇到了一点麻烦事,觉得可以记录下来,先上代码吧. with open('test.txt') as file: file.write('test') prin ...

  10. Python列表生成

    # For More :http://www.codebelief.com/article/2017/02/python-advanced-programming-list-comprehension ...