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. AHUACM寒假集训I（基础数据结构+串串）

    H.超级钢琴 luoguP2048 题目大意: 求出一个长N序列中所有长度在L到R的子序列中序列和最大的K个,并求这K个的和 思路: 暴力的话可以求出所有满足要求的子序列然后排序,然后显然会T. 所以 ...

  2. IndexError:list assignment index out of range

    L=[] L[0]=2 L[1]=3 报错:IndexError: list assignment index out of range,列表超过限制 一种情况是:list[index]的index超 ...

  3. URI/URL/URN都是什么

    URI : Uniform Resource Identifier,统一资源标志符 URL : Universal Resource Locator,统一资源定位符 URN : Universal R ...

  4. tensorflow源码解析之common_runtime-session

    目录 核心概念 session session_factory 1. 核心概念 session可以认为是一个执行代理.我们在客户端构建计算图,提供输入,然后把计算图丢给session去执行.因此,se ...

  5. vant中tab标签切换时会改变内容滚动高度

    vant的tabs标签页,标签切换时会改变内容区的滚动高度,这是因为内容区共用同一个父元素为滚动区域引起的,解决办法:在tabs的内容区域嵌套一层滚动区域,让每个内容区域使用单独的滚动元素就行了.   ...

  6. Java的jinfo命令使用详解

    jinfo命令简介 jinfo(Java Virtual Machine Configuration Information)是JDK提供的一个可以实时查看Java虚拟机各种配置参数和系统属性的命令行 ...

  7. CacheManager Net Core Redis 缓存

    using CacheManager.Core; using System; using System.Collections.Generic; using System.Text; namespac ...

  8. Hive框架

    1.什么是Hive? Hive 是基于Hadoop之上的数据仓库.2.什么是数据仓库? 数据仓库其实就是一个数据库 数据仓库是一个面向主题的,集成的,不可更新的,随时间不变化的数据集合,它用于支持 企 ...

  9. ASP.NET Core 6.0对热重载的支持

    .NET 热重载技术支持将代码更改(包括对样式表的更改)实时应用到正在运行的程序中,不需要重启应用,也不会丢失应用状态. 一.整体介绍 目前 ASP.NET Core 6.0 项目都支持热重载.在以下 ...

  10. Centos,Xshell和一些简单命令练习

    先连接Xshell: 在虚拟机中查看IP,使用命令  ip addr: 然后在Xshell上,   ssh 用户@虚拟机ip ,当前是   ssh root@192.168.13.235 : 如果想要 ...