【静态页面架构】CSS之定位
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之定位的更多相关文章
- 用手机自带uc浏览器查看静态页面，css样式不显示
问题描述: 这个问题是一个同事在写手机页面用UC浏览器测试以后遇到的,其他浏览器静态页面显示正常,唯独UC浏览器不显示页面样式. 我测试过代码是没有问题的,因为临时没有找到安卓手机,就猜想PC端的应该 ...
- 前端开发工程师 - 04.页面架构 - CSS Reset & 布局解决方案 & 响应式 & 页面优化 &规范与模块化
04.页面架构 第1章--CSS Reset 第2章--布局解决方案 居中布局 课堂交流区 水平列表的底部对齐 如图所示,一个水平排列的列表,每项高度都未知,但要求底部对齐,有哪些方法可以解决呢? & ...
- 【静态页面架构】CSS之链接和图像
CSS架构 一.链接: 链接元素:通过使用a元素的href属性设置跳转到指定页面地址 <style> a{ color: blue; text-decoration: none; } a: ...
- 量体裁衣方得最优解：聊聊页面静态化架构和二级CDN建设
量体裁衣方得最优解:聊聊页面静态化架构和二级CDN建设 上期文章中我们介绍了CDN和云存储的实践,以及云生态的崛起之路,今天,我们继续聊一聊CDN. 我们通常意义上讲的CDN,更多的是针对静态资源类的 ...
- mvc伪静态<四> 伪静态后静态页面或者引用的css和图片失效
引用的css和图片失效的解决办法 把样式引用文件的相对路径改成绝对路径就可以了 比如原先的引用路径为:<link href="~/Content/css/style.css" ...
- html+css实现小米商城首页静态页面
学了一个星期的html和css,用新学的东西写点东西,仿照小米商城的首页按照它的页面布局盗用它的图片写了个小米商城的静态页面. 源代码:链接:https://pan.baidu.com/s/1qf63 ...
- web自动化测试---css方式定位页面元素
css方式定位的方法也有很多,相较于xpath更灵活一点,下面就介绍下使用方法(以百度输入框为例) 1.通过tag来定位,可以写成如下: driver.find_element_by_css_sele ...
- 天猫浏览型应用的CDN静态化架构演变
原文链接:http://www.csdn.net/article/2014-01-22/2818227-CDN-Architecture 在天猫双11活动中,商品详情.店铺等浏览型系统,通常会承受超出 ...
- CSS之定位布局（position，定位布局技巧）
css之定位 1.什么是定位:css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设 ...
随机推荐
- Python：在一个Python程序中，运行另一个Python程序
学习自: 1~3学习自如何在python中执行另一个py文件_python_脚本之家 4~6学习自Python中四种运行其他程序的方式 - hankleo - 博客园 1.os.system方法 用法 ...
- MySQL：修改MySQL登录密码
在MySQL cmd中: 1.1:ALTER USER 'root'@'localhost' IDENTIFIED BY 'password' PASSWORD EXPIRE NEVER; #修改加密 ...
- Tableau学习Step6一如何制作炫彩地图
Tableau学习Step6一如何制作炫彩地图 本文首发于博客冰山一树Sankey,去博客浏览效果更好. 一.统计地图概述 1.1 统计地图的基本概念 统计地图的本质:数据的正确对应 将数据信息和地理 ...
- MaRVIN
[ResourceRegistration] 加给Resource类 [ResourceReference(--)] 加给Resource类中引动到的Resource类,引用多个的话用IReferen ...
- 用Vue编写一个简单的仿Explorer文件管理器
大家一定很熟悉你桌面左上角那个小电脑吧,学名Windows资源管理器,几乎所有的工作都从这里开始,文件云端化是一种趋势.怎样用浏览器实现一个Web版本的Windows资源管理器呢?今天来用Vue好好 ...
- joblib保存模型和joblib的并行化处理和tqdm
keep首先是默认first
- Azure DevOps (四) 创建第一条流水线
前几篇文章,我们记录了一下azure代码仓库的使用,这篇开始,我们来搞一下azure的流水线. 流水线这个东西我觉得是devops中对于开发人员的灵魂组件,只要我们配置好了一次,剩下的所有部署都是自动 ...
- 流量回放专题-jvm-sanbox-repeater
流量回放介绍 一.前言 你是否和我一样遇到过以下的问题? 1)服务重构,一堆接口需要回归,让人头疼 2)每次迭代,都要花很多精力来进行回归测试 3)线上bug,线下复现不了 4)接口自动化用例写辛苦, ...
- k8s.gcr.io、gcr.io仓库的镜像下载
镜像下载.域名解析.时间同步请点击 阿里巴巴开源镜像站 获取这类镜像的方法一般有2种: 1.通过拉取国内镜像仓库的内容(操作简单直接拉取即可,缺点是镜像的版本更新可能较慢,可能无法获取最新的镜像) 2 ...
- [SPDK/NVMe存储技术分析]001 - SPDK/NVMe概述
1. NVMe概述 NVMe是一个针对基于PCIe的固态硬盘的高性能的.可扩展的主机控制器接口. NVMe的显著特征是提供多个队列来处理I/O命令.单个NVMe设备支持多达64K个I/O 队列,每个I ...