css学习_css浮动
1、文档流介绍
网页布局的核心就是利用css来摆放盒子,
把盒子摆放在合适的位置。
css的定位机制有以下3种(网页布局一般需要3种搭配使用):
a、普通流(标准流)
b、浮动
1、浮动只有左右。
2、浮动后找离他最近的父元素靠左/右对齐。
3、!!!一个父盒子里的子盒子,如果其中一个子元素有浮动的话,则其他子元素都需要浮动,这样才能一行显示。
4、浮动飘在标准流的上面,压住标准流。
5、浮动元素有哪些特性?(浮动影响盒子显示模式)
1、块级元素浮动后会有行内块特性
2、行内元素浮动后也具有行内块特性
6、!!!浮动的使用方式:浮动首先要用标准流父级包裹起来
!!!浮动的元素要用标准流的块级包裹
浮动的目的:就是为了让多个块级元素一行显示
7、 浮动的特性:
c、定位
后面更新。。。
2、版心和布局流程
版心:
布局流程:
注意:先看行再看列,一行一行的做。
常见案例:
一:
二:所有列的必定有个行包裹,类似于表格(因为浮动会影响后面的别人)
css学习_css浮动的更多相关文章
- CSS学习之浮动
首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...
- css学习_css清除浮动
若元素没有设置宽高,那元素实际宽高是被内容撑起来, 若元素自己有设置宽高,那实际面积于自己的盒子模型有关 1.清除浮动的本质 清除浮动主要是为了解决父级元素因为子级浮动而引起的内部高度为0的问题. ( ...
- CSS学习摘要-浮动与清除浮动
以下从浮动到BFC的段落 摘自MDN 网络开发者 float 浮动 float CSS属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它.该元素从网页的正常流动中移除,尽管仍然保持部 ...
- css学习_css布局案例
1.中间栏先加载 !!!(若不是这个条件的话 ,那可以用 calc 或者flex布局来实现 中间栏自适应,左右栏定宽) 2.中间栏自适应 width:100% 3.左右栏固定宽 左中右 ...
- css学习_css补充知识
1.渐进增强,优雅降级 2.浏览器前缀 3.背景渐变 4.css 验证工具 2种方式:第2种支持验证本地的css(推荐) 5.css压缩 ----(节约空间,节省带宽) 6.旋转轮播图 案例: ...
- css学习_css BFC特性(块级格式化上下文)
块级元素会有bfc条件------可以触发bfc--------利用bfc的特性来解决一些问题 1.什么是BFC? 就是一个封闭独立的渲染的区域 2.什么元素会有BFC的条件? ---块级元素会有,行 ...
- css学习_css用户界面样式
1.css用户界面样式 a.鼠标样式(记住几个兼容性好的) cursor:default/pointer/move/text; b.轮廓 outline outline:2px solid red: ...
- css学习_css常见属性用法
1.元素的显示模式 a.被动转换:浮动.绝对定位.固定定位(转换为行内块元素特性的模式---不设置宽度时,模式换行为行内块模式后宽度是内容宽度.) b.主动转换:display:block / in ...
- css学习_css定位
1.定在某个位置:简称定位 2.浮动和定位的区别 定位的分类:定位模式 a.静态定位:(标准流) b.相对定位(不脱离文档流)---以自己左上角为基准点定位 c.绝对定位absolute (拼爹型: ...
随机推荐
- 【Linux】关于ffmpeg的一些常见用法
一.FFmpeg简介 FFmpeg是一款非常快速的视频和音频转换器, 是开源项目 FFmpeg (Fast Forward moving pictures expert group) 的命令行程序. ...
- jqGrid时间转换
colModel: [ { label: '注册时间', name: 'createDate', index: 'create_date', width: 80, formatter:function ...
- Hive 根据表中某个字段动态分区 以及临时表创建
使用hive储存数据时,需要对做分区,如果从kafka接收数据,将每天的数据保存一个分区(按天分区),保存分区时需要根据某个字段做动态分区,而不是傻傻的将数据写到某一个临时目录最后倒入到某一个分区,这 ...
- [MSSQL]表变量和临时表的区别
一.表变量 表变量在SQL Server 2000中首次被引入.表变量的具体定义包括列定义,列名,数据类型和约束.而在表变量中可以使用的约束包括主键约束,唯一约束,NULL约束和CHECK约束(外键约 ...
- shell md5sum
md5sum out.a echo "fd_limit=$(ulimit -n), fd_used=$(ll /proc/4741/fd | wc -l)" 需找句柄,及fd ...
- Go的json解析:Marshal与Unmarshal
https://blog.csdn.net/zxy_666/article/details/80173288 https://www.jianshu.com/p/98965b3ff638
- Maven-设置默认Java编译版本
有两种方式,一种针对项目,一种针对全局 针对项目,需要在pom.xml中添加如下配置: <build> <plugins> <plugin> <groupId ...
- org.hibernate.InvalidMappingException: Could not parse mapping document from无法创建sessionFactory
把 "http://www.hibernate.org/dtd/hibernate-mapping-3.0.dtd" 改为 "http://hibernate.sourc ...
- js版的in_array的实现方法
这是一个JS版的判断数组内的元素的方法. var arr = ['a','b','c']; console.log(in_array('b',arr)); // true function in_ar ...
- rmq区间最值
时间复杂度O(NlogN)+O(Q) int a[N]; int dpmax[N][20],dpmin[N][20]; void first(int n) { mm(dpmax,0); mm(dpmi ...