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 ...
随机推荐
- 让一个小div在另一个大div里面 垂直居中的四种方法
方法一 .parent { width:800px; height:500px; border:2px solid #000; position:relative; } .child { width: ...
- Css 基础知识(一)
1.Css概念 CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表),Css是用来美化html标签的,相当于页面化妆. ◆样式表书写位置 2. 选择器 2.1.写法 选 ...
- Spring boot初入门
1. Spring的Java配置方式 Java配置是Spring4.x推荐的配置方式,可以完全替代xml配置. 1.1. @Configuration 和 @Bean Spring的Java配置方式是 ...
- Flutter dart:convert
引用 mport 'dart:convert'; JSON 解码(JSON String->Object) // NOTE: Be sure to use double quotes (&quo ...
- Vue -- vue-cli(vue脚手架) npm run build打包优化
这段时间公司新项目立项,开发组选用 Vue2.0 进行开发.当然也就一并用到 vue cli 进行自动化构建.结果在基础版本开发完成后,用 npm run build 命令打包上线时,发现以下几个问题 ...
- 前端需要掌握的后台基础:HTTP协议
什么是HTTP? 以下来自度娘最为专业的解释: 超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议.所有的WWW文件都必须遵守这个标 ...
- windows 服务器MYSQL 数据库安装配置
一.到官网下载MYSQL 打开官网地址:www.mysql.com, 选择 DOWNLOADS,进入到MySQL的下载页面,在页面的底部有一个MySQL Community Edition, 并且下面 ...
- sql Server插不进数据,以及Id自增的教程及注意事项
参考于:https://jingyan.baidu.com/article/fec4bce244f902f2608d8b7a.html 使用SQL Server 2014 数据库做web的项目出现错误 ...
- 报错:java.net.bindexception: address already in use: jvm_bind:8080
原因:8080端口被占用 这说明80端口(该端口是Tomcat的监听端口)已经被其他程序占用,先用命令提示符 " netstat -ano " 命令显示端口状态,再在结果中找到端口 ...
- mysql瑞士军刀–pt工具
Percona-Toolkits Percona-toolkit 简介 percona-toolkit是一组高级命令行工具的集合,用来执行各种通过手工执行非常复杂和麻烦的mysql任务和系统任务,这些 ...