高级布局

一、文档流(normal flow)

1、概念

  1. 本质为normal flow(普通流、常规流)将窗体自上而下分成一行一行,块级元素从上至下、行内元素在每行中从左至右的顺序依次排放元素。
v_hint:本质不存在文档流概念,当一个错误的概念被绝大数人认为是对的,那么它就是对的

2、BFC(Block formatting context)

  1. 块级格式化上下文,它是一个独立的渲染区域,只有Block-level box参与,它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

3、BFC规则

  1. 内部的Box会在垂直方向,一个接一个地放置;
  2. Box自身垂直方向的位置由margin-top决定,属于同一个BFC的两个相邻Boxmargin会发生重叠;
  3. Box自身水平方向的位置由margin左或右决定(具体已经参照BFC方位),属于同一个BFC的两个相邻Boxmargin会发生叠加。

二、浮动布局

1、解决的经典案例

  1. <style type="text/css">
  2. .box {
  3. width: 300px;
  4. border: 1px solid black;
  5. }
  6. .box img {
  7. width: 150px;
  8. float: left;
  9. }
  10. </style>
  11. <div class="box">
  12. <img src="bg.gif" alt="">
  13. 浮动布局解决的经典案例,浮动布局解决的经典案例,浮动布局解决的经典案例,浮动布局解决的经典案例,浮动布 局解决的经典案例,浮动布局解决的经典案例,浮动布局解决的经典案例,浮动布局解决的经典案例,浮动布局解决 的经典案例,浮动布局解决的经典案例,浮动布局解决的经典案例,浮动布局解决的经典案例,浮动布局解决的经典 案例,浮动布局解决的经典案例,浮动布局解决的经典案例,浮动布局解决的经典案例。
  14. </div>

2、基本语法

  1. float: left | right

3、浮动布局问题

  • 在不做清浮动情况下,父级不会获取子级的高度

4、清浮动

  • 目的:对父级所在容器中的Block-level Box布局不产生影响
  • 原理:在浮动布局情况下,让父级获得合适的高度
  1. 浮动的父级设置高度
  2. super {
  3. height: npx;
  4. }
  5. 浮动的父级设置overflow
  6. super {
  7. overflow: hidden;
  8. }
  9. 浮动的父级兄弟设置clear
  10. brother {
  11. clear: left | right | both;
  12. }
  13. 浮动的父级伪类清浮动
  14. super:after {
  15. content: "";
  16. display: block;
  17. clear: left | right | both;
  18. }

三、流式布局

1、解决的经典案例

  1. <style type="text/css">
  2. .wrap {
  3. max-width: 1200px;
  4. min-width: 800px;
  5. width: 90%;
  6. height: 600px;
  7. margin: 0 auto;
  8. background-color: orange;
  9. }
  10. </style>
  11. <div class="wrap"></div>

2、流式布局相关操作

  1. 百分比设置 %
  2. 窗口比设置 vw | vh
  3. 字体控制 em | rem

四、定位布局

1、解决的经典案例

  1. <style type="text/css">
  2. .ad {
  3. width: 150px;
  4. height: 320px;
  5. background-color: orange;
  6. position: fixed;
  7. top: calc(50vh - 160px);
  8. left: 0;
  9. }
  10. </style>
  11. <div class="ad"></div>
  12. br*100

2、定位的语法

  1. position: static | relative | absolute | fixed
  2. 布局方位:left | right | top | bottom

3、相当定位(relative)

  1. 未脱离文档流
  2. 以自身原有位置作为参考坐标系

4、绝对定位(absolute)

  1. 脱离文档流
  2. 以最近定位父级作为参考坐标系

5、固定定位(fixed)

  1. 脱离文档流
  2. 以文档窗口作为参考坐标系

6、z-index

day47的更多相关文章

  1. day47——css介绍、语法结构、选择器、css权重

    day47 今日内容 css介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 语法结构 div{ color:gree ...

  2. day47 选择器优先级及嵌套关系

    复习 1.前端: 网页, html + css + js 2.html三个组成部分:标签,指令和转义字符 标签: <>包裹, 以字母开头, 可以结合-|数字, 能被浏览器解析的标记 3.常 ...

  3. python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  4. 前端关于列表的基础 day47

    <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8&qu ...

  5. js的鼠标事件整理-------Day47

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/marSmile_tbo/article/details/34202437 今天回来的有些晚了,实在是 ...

  6. MySQL 数据备份,Pymysql模块(Day47)

    阅读目录 一.IDE工具介绍 二.MySQL数据备份 三.Pymysql模块 一.IDE工具介绍 生产环境还是推荐使用mysql命令行,但为了方便我们测试,可以使用IDE工具 下载链接:https:/ ...

  7. Python9-前端基础知识-day47

    web开发本质: 1.浏览器输入网址回车都发生了什么? 1.浏览器给服务端发送一个消息 2.服务端拿到消息 3.服务端返回消息 4.浏览器展示页面C/S架构----B/S架构客户端和服务端 消息的格式 ...

  8. Pyhton学习——Day47

    # 转载:http://www.cnblogs.com/yuanchenqi/articles/6357507.html# 外键:一种约束条件,与主键对应# 主表:被绑定的表:字表# 外键约束:# - ...

  9. (day47)作业

    一.链式表达式完成菜单栏 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

随机推荐

  1. 让一个小div在另一个大div里面 垂直居中的四种方法

    方法一 .parent { width:800px; height:500px; border:2px solid #000; position:relative; } .child { width: ...

  2. Css 基础知识(一)

    1.Css概念 CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表),Css是用来美化html标签的,相当于页面化妆. ◆样式表书写位置 2. 选择器 2.1.写法 选 ...

  3. Spring boot初入门

    1. Spring的Java配置方式 Java配置是Spring4.x推荐的配置方式,可以完全替代xml配置. 1.1. @Configuration 和 @Bean Spring的Java配置方式是 ...

  4. Flutter dart:convert

    引用 mport 'dart:convert'; JSON 解码(JSON String->Object) // NOTE: Be sure to use double quotes (&quo ...

  5. Vue -- vue-cli(vue脚手架) npm run build打包优化

    这段时间公司新项目立项,开发组选用 Vue2.0 进行开发.当然也就一并用到 vue cli 进行自动化构建.结果在基础版本开发完成后,用 npm run build 命令打包上线时,发现以下几个问题 ...

  6. 前端需要掌握的后台基础:HTTP协议

    什么是HTTP? 以下来自度娘最为专业的解释: 超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议.所有的WWW文件都必须遵守这个标 ...

  7. windows 服务器MYSQL 数据库安装配置

    一.到官网下载MYSQL 打开官网地址:www.mysql.com, 选择 DOWNLOADS,进入到MySQL的下载页面,在页面的底部有一个MySQL Community Edition, 并且下面 ...

  8. sql Server插不进数据,以及Id自增的教程及注意事项

    参考于:https://jingyan.baidu.com/article/fec4bce244f902f2608d8b7a.html 使用SQL Server 2014 数据库做web的项目出现错误 ...

  9. 报错:java.net.bindexception: address already in use: jvm_bind:8080

    原因:8080端口被占用 这说明80端口(该端口是Tomcat的监听端口)已经被其他程序占用,先用命令提示符 " netstat -ano " 命令显示端口状态,再在结果中找到端口 ...

  10. mysql瑞士军刀–pt工具

    Percona-Toolkits Percona-toolkit 简介 percona-toolkit是一组高级命令行工具的集合,用来执行各种通过手工执行非常复杂和麻烦的mysql任务和系统任务,这些 ...