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 ...
随机推荐
- python内置函数每日一学 -- all()
all(iterable) 官方文档解释: Return True if all elements of the iterable are true (or if the iterable is em ...
- react 传递非state给子元素的注意事项
我们是使用react的时候,其实很多情况都不需要使用state去存储值,如果不涉及页面渲染的值,我们往往可以使用 this.xxx的方式:这样可以提高组件的性能,避免不必要的 re_render 带来 ...
- SD从零开始21-24
[原创]SD从零开始21 输出(Output) 销售的输出类型Output types in SD Output是用于和商业伙伴及系统交换信息的通信方式:你可以为不同的销售凭证如报价单,订单,交货单, ...
- Hbase到Solr数据同步及Solr分离实战
1. 起因 由于历史原因,公司的数据是持久化在HBase中,查询是通过Solr来实现,这这样的设计必然涉及到要把Hbase中的数据实时同步到Solr,但所有的服务都在一个同一个集群及每台机子都安装了很 ...
- JavaScript Data.parse()转化时间戳安卓和ISO不兼容
Data.parse()获取时间戳,在Android是没有问题的,但是在ISO就不行了,原因在于转化成时间戳的时间格式不一样. Android的格式是如“2017-12-12 12:12:12”,IS ...
- Pytest+Allure环境的搭建
参考博客 测试报告解释 pytest+allurre进阶 1. pytest的安装: 1.1. windows下: pip install pytest 1.2. linux下: pip instal ...
- 前端需要掌握的后台基础:HTTP协议
什么是HTTP? 以下来自度娘最为专业的解释: 超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议.所有的WWW文件都必须遵守这个标 ...
- .Net 环境
更多系统版本下载:https://www.microsoft.com/net/download VSCode :https://code.visualstudio.com/
- python urllib库
python2和python3中的urllib urllib提供了一个高级的 Web 通信库,支持基本的 Web 协议,如 HTTP.FTP 和 Gopher 协议,同时也支持对本地文件的访问. 具体 ...
- 【转】Redis学习---哈希结构内存模型剖析
[原文]https://www.toutiao.com/i6594624365906625032/ 概述 在前文<Redis字符串类型内部编码剖析>之中已经剖析过 Redis最基本的 St ...