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. MySQL[练习|面试题]-我的租房网

    1 # 创建数据库 2 CREATE DATABASE Tenement; 3 4 # 切换数据库 5 USE Tenement; 6 # 创建客户信息表 sys_user 7 CREATE TABL ...

  2. JZ-018-二叉树的镜像

    二叉树的镜像 题目描述 操作给定的二叉树,将其变换为源二叉树的镜像. 题目链接: 二叉树的镜像 代码 /** * 标题:二叉树的镜像 * 题目描述 * 操作给定的二叉树,将其变换为源二叉树的镜像. * ...

  3. 学习linux(centos7)记录的笔记

    此随笔用于记录学习<linux鸟哥的私房菜>过程中1.遇到的问题及解决的过程 2.有必要记录的重要内容 3.对应书上操作的记录 开始于2021年6月18号 一个磁盘的分区通过格式化后成为一 ...

  4. [ Skill ] 文件读写 & IO 句柄

    https://www.cnblogs.com/yeungchie/ 在 Skill 中使用一种叫做 ioport 类型的变量来操作文件.不过我一般更习惯称为 IO 句柄 (IO/File Handl ...

  5. linux作业--第一周

    1.按系列罗列Linux的发行版,并描述不同发行版之间的联系与区别. 目前三大主流发行版分别为Debian.Redhat.SUSE. redhat: RHEL: Red Hat公司发布的面向企业用户的 ...

  6. jq 简易购物车功能实现

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...

  7. svn服务支持网页显示并增加在线预览功能，支持视频在线播放

    1.svn服务器支持网页显示 VisualSVN Server是一个非常不错的SVN Server程序,方便,直观,用户管理也异常方便.不过,它本身并没有提供在线修改密码的功能.由于在实际使用过程中, ...

  8. LGP6667题解

    既然看到了这道"板子",那还是来写一下题解吧... 如果有机会希望能推一下 载谈binominial sum 的做法. \[\sum_{k=0}^nf(k)\binom n kx^ ...

  9. margin 塌陷bug 触发bfc

    1.bfc block format context 2.如何触发一个盒子的bfc position:absolute; display: inline-block float:left/right; ...

  10. 一文让你明白CPU上下文切换

    我们都知道,Linux 是一个多任务操作系统,它支持远大于 CPU 数量的任务同时运行.当然,这些任务实际上并不是真的在同时运行,而是因为系统在很短的时间内,将 CPU 轮流分配给它们,造成多任务同时 ...