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. shell-if表达式（-f,-d,-s,-r,-w,-x,-eq,-ne,-ge,-gt,-le,-lt ）

    文件表达式 if [ -f file ] 如果文件存在if [ -d - ] 如果目录存在if [ -s file ] 如果文件存在且非空if [ -r file ] 如果文件存在且可读if [ -w ...

  2. ts转js运行报错:“tsc : 无法加载文件

    一.在typescript.ts转换成.js运行时报错解决办法: 1.第一步:鼠标在vscode软件上右击打开属性–>兼容性–>以管理员的身份运行此程序,如下图: 2.第二步:打开vsco ...

  3. 为什么 Vue3.js / Element+ 组件属性前面有的需要添加冒号，有的不需要？

    背景 使用 Element+ Layout 布局: <el-row> <el-col :span="12"><div class="grid ...

  4. LeetCode-039-组合总和

    组合总和 题目描述:给定一个无重复元素的数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合. candidates 中的数 ...

  5. hadoop分布式集群部署①

     Linux系统的安装和配置.(在VM虚拟机上) 一:安装虚拟机VMware Workstation 14 Pro 以上,虚拟机软件安装完成. 二:创建虚拟机. 三:安装CentOS系统 (1)上面步 ...

  6. php压缩zip文件类

    使用文件压缩类, 注意传的路径是相对路径.如果传绝对路径就把addFile里面的第二个参数去掉/ $zip = new ZipFolder(); $zipFile = './autoloadClass ...

  7. python的数据结构和基本语法

    1.支持的数据类型 str(字符串类型).int(整型).flout(浮点型).bool(逻辑值).complex(复数[数学上的]).bytes(字节型).list(列表).tuple(元组[不可以 ...

  8. 制作自己的rpm包，并为其制作patch包。

    本文分为两个部分,第一部分是制作一个简单的自己的rpm包,并安装运行它.第二部分是为其制作一个patch包,并通过spec配置文件去打补丁,安装.运行打补丁后的程序. 一.安装工具 [yh@local ...

  9. 打靶笔记-03-vulhub-Moriarty Corp

    打靶笔记-03-vulhub-BoredHackerBlog 一.靶机信息 Name: BoredHackerBlog: Moriarty Corp(中-高级难度) Date release: 29 ...

  10. python爬虫-使用线程池与使用协程的实例

    背景:爬取豆瓣电影top250的信息 使用线程池 import re from concurrent.futures import ThreadPoolExecutor import requests ...