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. vue项目npm run dev 报错error in ./src/main.js Module build failed: ReferenceError: Unknown plugin "transform-vue-jsx" specified in......

    问题: vue项目npm run dev运行时报错,如下图:  原因: 缺少组件 解决办法: 安装相应的组件:  npm install babel-plugin-transform-vue-jsx ...

  2. 爬虫之爬取豆瓣top250电影排行榜及爬取斗图啦表情包解读及爬虫知识点补充

    今日内容概要 如何将爬取的数据直接导入Excel表格 #如何通过Python代码操作Excel表格 #前戏 import requests import time from openpyxl impo ...

  3. JZ-001-二维数组中的查找

    二维数组中的查找 题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数 ...

  4. tensorflow源码解析之framework-function

    目录 什么是function FunctionDef 函数相关类 关系图 涉及的文件 迭代记录 1. 什么是function 在讲解function的概念之前,我们要先回顾下op.op是规定了输入和输 ...

  5. Nebula Graph 在企查查的应用

    本文首发于 Nebula Graph Community 公众号 背景 企查查是企查查科技有限公司旗下的一款企业信用查询工具,旨在为用户提供快速查询企业工商信息.法院判决信息.关联企业信息.法律诉讼. ...

  6. Kubernetes：Ingress总结(一)

    Blog:博客园 个人 参考:Ingress | Kubernetes.<Kubernetes进阶实战>.<Kubernetes网络权威指南 > 何谓Ingress?从字面意思 ...

  7. LGP7580题解

    设: \[g(x)=\prod_{i=1}^{k_i}\binom {m} {c_{d,i}+m} \] 那么很明显有: \[f= a * g \] 再看一眼 \(g\),我们发现 \(g\) 是积性 ...

  8. 笔记软件-Obsidian(相关资料分享)

    Obsidian(黑曜石) 是一个功能强大的知识管理软件,是一款功能强大的带有关系图谱功能的双向链笔记,它可基于纯文本Markdown文件的本地文件夹上运行 Obsidian是一个支持markdown ...

  9. MATLAB探索初步问题汇总

    MATLAB命令窗口如果显示:尝试将SCRIPT normrnd作为函数执行:C:\User-- 出错sort 这类问题,一般是你的*.m文件的名与内置函数名重名,改一下文件名即可. 2.MATLAB ...

  10. 做一个能对标阿里云的前端APM工具（上）

    APM 全称是 Application Performance Monitor,即性能监控 这篇文章有三个前提: 从产品形态上看这肯定不是一个能够媲美阿里产品的竞品,所以抱歉我碰瓷了.你可以把这里的阿 ...