【静态页面架构】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(绝对/相对/固定/静态(默认))通过定位属性可以设 ...
随机推荐
- VUE3 之 使用标签实现动画与过渡效果 - 这个系列的教程通俗易懂，适合新手
1. 概述 巴纳姆效应告诉我们: 人们更容易相信笼统的.常见的人格描述,并觉得特别适合自己,认为该描述真实地反映了自己的人格面貌. 这也是所有算命先生的小把戏,算命先生通常把话说的很笼统,很通用,基本 ...
- 从零开始Pytorch-YOLOv3【笔记】（一）配置文件解读
前言 这是github上的一个项目YOLO_v3_tutorial_from_scratch,它还有相应的blog对其详细的解读.机器之心翻译了他的tutorial:从零开始PyTorch项目:YOL ...
- springboot-jta-atomikos多数据源事务管理
背景 我们平时在用springboot开发时,要使用事务,只需要在方法上添加@Transaction注解即可,但这种方式只适用单数据源,在多数据源下就不再适用: 比如在多数据源下,我们在一个方法里执行 ...
- javaScript阻止浏览器F5刷新
1 <script type="text/javascript"> 2 //禁止用F5键 3 document.onkeydown = function (e) { 4 ...
- LGP6144题解
冲了50分钟外加10分钟厕所才冲出来,请问我还有救吗. 看上去像是金组题目的加强版,实际上是金组题目的魔改版. 还是考虑像弱化版那样按照左端点排序,并且记录答案的 \(0\sim k\) 次幂和. 然 ...
- OpenTracing 简介
自从 Google Dapper 的论文发布之后,各大互联网公司和开源社区开发的分布式链路追踪产品百花齐放,同时也给使用者带来了一个问题,各个分布式链路追踪产品的 API 并不兼容,如果用户在各个产品 ...
- MATLAB绘制一幅中国地图
今天博主跟大家讲一下如何用MATLAB制作一幅中国地图,那废话不多说,我们先看一下最终效果吧. mercator墨卡托圆柱投影地图 lambert兰伯特圆锥投影地图 一张中国地图大概包括以下要素: 中 ...
- mysqkl修改存放位置 列的数据
1.表一旦创建后,列的数据是否可以修改?如果可以说明语法 update 表名称 set 列名='新内容' where 列名=某值 橙色代表条件列 2.修改存放数据的文件夹 先关闭mysql 把da ...
- Mybatis——xml配置
注:该文档参考了 https://mybatis.org/mybatis-3/zh/configuration.html 狂神的视频:https://www.bilibili.com/video/BV ...
- 6月19日 python学习总结 Django之路由系统
Django之路由系统 Django的路由系统 Django 1.11版本 URLConf官方文档 URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调 ...