day47
高级布局
一、文档流(normal flow)
1、概念
本质为normal flow(普通流、常规流)将窗体自上而下分成一行一行,块级元素从上至下、行内元素在每行中从左至右的顺序依次排放元素。
v_hint:本质不存在文档流概念,当一个错误的概念被绝大数人认为是对的,那么它就是对的
2、BFC(Block formatting context)
块级格式化上下文,它是一个独立的渲染区域,只有Block-level box参与,它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
3、BFC规则
① 内部的Box会在垂直方向,一个接一个地放置;
② Box自身垂直方向的位置由margin-top决定,属于同一个BFC的两个相邻Box的margin会发生重叠;
③ Box自身水平方向的位置由margin左或右决定(具体已经参照BFC方位),属于同一个BFC的两个相邻Box的margin会发生叠加。
二、浮动布局
1、解决的经典案例
<style type="text/css">
.box {
width: 300px;
border: 1px solid black;
}
.box img {
width: 150px;
float: left;
}
</style>
<div class="box">
<img src="bg.gif" alt="">
浮动布局解决的经典案例,浮动布局解决的经典案例,浮动布局解决的经典案例,浮动布局解决的经典案例,浮动布 局解决的经典案例,浮动布局解决的经典案例,浮动布局解决的经典案例,浮动布局解决的经典案例,浮动布局解决 的经典案例,浮动布局解决的经典案例,浮动布局解决的经典案例,浮动布局解决的经典案例,浮动布局解决的经典 案例,浮动布局解决的经典案例,浮动布局解决的经典案例,浮动布局解决的经典案例。
</div>
2、基本语法
float: left | right
3、浮动布局问题
- 在不做清浮动情况下,父级不会获取子级的高度
4、清浮动
- 目的:对父级所在容器中的Block-level Box布局不产生影响
- 原理:在浮动布局情况下,让父级获得合适的高度
① 浮动的父级设置高度
super {
height: npx;
}
② 浮动的父级设置overflow
super {
overflow: hidden;
}
③ 浮动的父级兄弟设置clear
brother {
clear: left | right | both;
}
④ 浮动的父级伪类清浮动
super:after {
content: "";
display: block;
clear: left | right | both;
}
三、流式布局
1、解决的经典案例
<style type="text/css">
.wrap {
max-width: 1200px;
min-width: 800px;
width: 90%;
height: 600px;
margin: 0 auto;
background-color: orange;
}
</style>
<div class="wrap"></div>
2、流式布局相关操作
① 百分比设置 %
② 窗口比设置 vw | vh
③ 字体控制 em | rem
四、定位布局
1、解决的经典案例
<style type="text/css">
.ad {
width: 150px;
height: 320px;
background-color: orange;
position: fixed;
top: calc(50vh - 160px);
left: 0;
}
</style>
<div class="ad"></div>
br*100
2、定位的语法
position: static | relative | absolute | fixed
布局方位:left | right | top | bottom
3、相当定位(relative)
① 未脱离文档流
② 以自身原有位置作为参考坐标系
4、绝对定位(absolute)
① 脱离文档流
② 以最近定位父级作为参考坐标系
5、固定定位(fixed)
① 脱离文档流
② 以文档窗口作为参考坐标系
6、z-index
day47的更多相关文章
- day47——css介绍、语法结构、选择器、css权重
day47 今日内容 css介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 语法结构 div{ color:gree ...
- day47 选择器优先级及嵌套关系
复习 1.前端: 网页, html + css + js 2.html三个组成部分:标签,指令和转义字符 标签: <>包裹, 以字母开头, 可以结合-|数字, 能被浏览器解析的标记 3.常 ...
- python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- 前端关于列表的基础 day47
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8&qu ...
- js的鼠标事件整理-------Day47
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/marSmile_tbo/article/details/34202437 今天回来的有些晚了,实在是 ...
- MySQL 数据备份,Pymysql模块(Day47)
阅读目录 一.IDE工具介绍 二.MySQL数据备份 三.Pymysql模块 一.IDE工具介绍 生产环境还是推荐使用mysql命令行,但为了方便我们测试,可以使用IDE工具 下载链接:https:/ ...
- Python9-前端基础知识-day47
web开发本质: 1.浏览器输入网址回车都发生了什么? 1.浏览器给服务端发送一个消息 2.服务端拿到消息 3.服务端返回消息 4.浏览器展示页面C/S架构----B/S架构客户端和服务端 消息的格式 ...
- Pyhton学习——Day47
# 转载:http://www.cnblogs.com/yuanchenqi/articles/6357507.html# 外键:一种约束条件,与主键对应# 主表:被绑定的表:字表# 外键约束:# - ...
- (day47)作业
一.链式表达式完成菜单栏 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
随机推荐
- linux 新建用户和权限分配
1.创建新用户:testuser 命令:#useradd 选项 用户名 选项: -c comment 指定一段注释性描述. -d 目录 指定用户主目录,如果此目录不存在,则同时使用-m选项,可以创建主 ...
- git基础使用——TortoiseGit
一.初识git Git是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制 ...
- js柯里化
这篇文章讲的很好啊~例子很好 http://www.zhangxinxu.com/wordpress/2013/02/js-currying/ 这篇是讲函数式编程的,其中也有涉及到,说明了柯里化是一种 ...
- 安装Wamp时出现无法启动此程序,因为计算机中丢失MSVCR110.dll
一.问题描述 安装Wamp时出现无法启动此程序,因为计算机中丢失MSVCR110.dll 二.解决方法 首先进入 http://www.microsoft.com/zh-CN/download/det ...
- Android Studio 使用AChartEngine制作饼图
前言: 在很多项目中都会使用到图表,具体表现形式为饼图.折线图.柱状图等,但是网上有很多图表架包都是需要收费的,而Google的AChartEngine是免费的,于是AChartEngine就变成了首 ...
- 想涨工资吗?那就学习Scala,Golang或Python吧
[编者按]据薪水调查机构 PayScale 提供的数据显示,掌握 Scala,Golang 和 Python 语言以及诸如 Apache Spark 之类的大数据技术,能带来最大的薪水提升.本文作者为 ...
- LeetCode题解之Merge Two Sorted Lists
1.题目描述 2.题目分析 题目要求合并有序的两个链表,要求不能额外申请空间. 3.代码 ListNode* mergeTwoLists(ListNode* l1, ListNode* l2) { i ...
- PHP的CURL的POST/GET访问
本文出至:新太潮流网络博客 /** * [curl以GET的方式访问] * @E-mial wuliqiang_aa@163.com * @TIME 2017-04-07 * @WEB http:// ...
- MySQL-死锁查询
1.查询是否锁表 show OPEN TABLES where In_use > 0; 查询到相对应的进程 === 然后 kill id 2.查询进程 show processlist 补 ...
- 转:ASP.NET MVC 多语言实现技巧 最简、最易维护和最快速开发
说说传统做法的缺点 1.做过多语言的都知道这玩意儿太花时间 2.多语言架构一般使用资源文件.XML或者存储数据库来实现.这样就在一定程序上降低了性能 3.页面的可读性变差,需要和资源文件进行来回切换 ...