html+css 布局篇
float
做了float后有一些不好的影响。
1 、父div设置合适高度
2 、在要做float的div后,可以在html加一个空的div,或者在css在其父元素用after中 content:'';,
而后写
clear:both;(有一些浏览器不写这句就不作用
display:block;
(最好再写上width:0;height:0;visibility:hidden;保证这个元素看不见,不影响布局)
(建议是用after)
3、父级div定义overflow:hidden(或overflow:auto)
(注意:给导航栏单独每一项加下划线时不要用3,因为会把下划线隐藏)
(还有一些奇奇怪怪不好用的方法,比如把父元素也设置浮动,就不提了)
div
默认一个div占一行,那么如何让多个个div同一行?
1、用float
如果分两列,可以先把两列的div分别包含在两个div里面
如果分三列,要都float:left,或者两个float:left一个float:right;
缺点:如果右边div没有设置宽度,右边div的宽度会根据div里的内容自动调整,不易控制。
2、只有左侧div设置为float:left,右侧div设置overflow:auto;,右侧div将会占据整个右侧剩余宽度。
缺点:如果有多个div 比如三个及以上了?
3、使用display的inline-block属性(不用inline,inline高度不可控)
(会上下错位,原因:
①同一行的行内元素对齐方式默认是底部对齐,即vertical-align:baseline
②对于内容为空的inline-block元素而言,该元素的基线就是它的margin底边缘,否则就是元素的内部最后一行内联元素的基线
解决方案:
改变vertical-align属性(右侧div设置vertical-align: top;)
4、①对于两个div并排,左边为绝对宽度,右边为相对宽度的,需要用到这种布局的情况比较多见,如左边为导航,右边为内容的页面
②左边固定宽度,使用position:absolute
③右边margin-left为左边一块的固定宽度
(此处暂时不考虑弹性盒子,我先练习不用弹性盒子的)
html+css 布局篇的更多相关文章
- 深入css布局篇(3)完结 — margin问题与格式化上下文
深入css布局(3) - margin问题与格式化上下文 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下 ...
- 深入css布局篇(2) — 定位与浮动
深入css布局(2) - 定位与浮动 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识 ...
- 深入css布局篇(1) — 盒模型 & 元素分类
深入css布局(1)-- 盒模型 & 元素分类 " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...
- css布局篇
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
- CSS布局篇——固宽、变宽、固宽+变宽
学了前端挺久了.近期写一个项目測试系统,布局时发现自己对变宽+固宽的布局还没有全然掌握,所以在这里总结一下,以后须要的时候回头看看. 1.最简单的当然是一列或多列固宽 比如两列固宽: <1> ...
- 3.实战HTML+CSS布局(实例入门篇)
转自:https://www.cnblogs.com/hmyprograming/archive/2012/03/23/2414373.html 学习这篇入门教程我们假定你已经具有了一定的HTML基础 ...
- CSS篇之DIV+CSS布局
<div></div> div与其他标签一样,也是一个XHTML所支持的标签. div是XHTML中指定的,远门用于布局设计的容器标记. 简单的CSS布局 头部 内容 页脚 & ...
- 第九篇、CSS布局
<!--css布局 标准流:从上到下 从左到右 脱离标准流:(浮在父控件的最左边或者最右边)(类似ios在window上添加的控件) 1.float: 2.position: absolute( ...
- [面试仓库]CSS面试题汇总--布局篇
一,盒模型 说到 CSS 布局这块的内容,首当其冲的就是我们的盒模型宽度计算问题,在开始我们的问题之前,我们首先要搞懂这些概念: 盒模型里面的内容(content): 也就是实实在在要展现的内容, ...
随机推荐
- vue开发的一些设置以及技巧
引入其它css样式 需要加~ @找到的是src目录 对于常用的路径可以设置别名 @代表src 常用的地址在webpack.base.conf.js中 ...
- 《大数据日知录》读书笔记-ch15机器学习:范型与架构
机器学习算法特点:迭代运算 损失函数最小化训练过程中,在巨大参数空间中迭代寻找最优解 比如:主题模型.回归.矩阵分解.SVM.深度学习 分布式机器学习的挑战: - 网络通信效率 - 不同节点执行速度不 ...
- ORACLE迁移GP实践
最近在做oracle到greenplum的迁移实践,步骤如下: 1. 使用ora2pg实现Oracle的数据结构迁移到GP的实现过程 2. Oracle的数据迁移到GP的实现过程 1. ora2p ...
- Flink安装极简教程-单机版
一:安装 Flink官网下载地址:https://flink.apache.org/downloads.html 选择1.6.3版本 下载: wget http://mirrors.hust.edu. ...
- 【Nginx】关于域名转发proxy_pass
在配置nginx的时候,有一个需求,访问m.XXX.com的时候,需要实际访问www.YYY.com/m,并且域名不能发生变化. 达成这个需求有两种做法: 第一种就是301跳转,使用rewrite来跳 ...
- WPF获取程序启动路径(StartupPath)
1. 在传统的Winform中获取 可以使用: Application.StartupPath Application.ExecutablePath 很可惜,这些方法,在WPF中都失效啦 2. 在WP ...
- input输入提示历史记录
一般便于用户的输入习惯,我们都会提示历史消息,让用户有更好的使用体验,以前可能比较多朋友会用js来实现,现在HTML5的datalist可以轻松帮我们实现这个功能!只需以下几行代码 <!doct ...
- Mybatis 关联查询(三)
多对多的管理查询结果映射 1. 需求: 查询用户购买的商品信息 2. 分析: (1)用户和商品没有直接关联 (2)用户和订单进行了关联,订单和订单明细进行了关联,订单明细和商品进行了关联,因此 ...
- IE678下,select 诡异的样式
我没有IE6,我用IE5测试的. IE5下的测试结果:貌似只能设置 width ,设置其他的都失效,连 height 都不例外. IE7下的测试结果:垂直居中失效.边框失效,宽高生效. IE8下的测试 ...
- js中的特殊符号含义
一. !! js中的!! var o ={flag:4}; var test = !!o.flag; console.log(test); // true 二.~~,<< (~~(Mat ...