css基础04
所有浮动都是贴着浮动的。一左一右的话就毫无联系了。
浮动元素和标准流是两个级别了,浮起来了,后面的人会补上空缺的位置,让其他标准流的盒子占有。
很容易形成叠加效果,(蓝色的标准流会上去补上浮动的位置,浮动压着标准流)
上沿对其,而且不说明左浮右浮就会贴着左浮,原来是竖着排列的盒子会在一行内完成浮动。缩小页面,装不下四个的时候就会另起一行,但还是左边对齐,
无论是块元素还是行内元素都是一样的可以浮动,
行内块元素不指定宽度的时候,浮动的时候不是100%,是你里面的内容多宽他就显示多宽。
父元素管上下,子元素管左右。父盒子给一个固定的高度宽度位置大小,可以让子浮动盒子在里面自由浮动。有父盒子约束起来,要不然太free了。
也可以用ul和li来做。
这个案例就是前两个案例的综合。
三个盒子。
第一准则:标准流是上下排列,浮动是左右排列。
第三种最常见。
浮动只会压住后面的标准流不会压住前面的。
只要都不在一行显示了,都要检查一下是否都是浮动盒子,
浮动元素不占位置。父盒子一定没有高度。
闭合浮动是吧浮动元素关在父级元素里面管理。
孩子有多高父亲就有多高,下面加一个div标签就是限制的。
span是错的。
缺点:会把溢出部分切掉。
是用css帮我们生成了一个标签。这种方法只要复制这段代码然后在div加上clearfix调用就好了。
和上一个方法一样只要复制这段代码然后在div加上clearfix调用就好了。
不影响就不用清除浮动。
第三第四种方法没有在结构里 生成标签,在HTML里面找不到这个标签的,是在css方法额外生成这个标签,也是通过闭合浮动的观点,把元素闭合在里面去。
前三种可以直接放在页面中的,但是第四种的psd不能,它是一种设计稿文件,是帮助写页面的,用于写相关文字和测量相关距离。
可以先看官网的使用教学视频。
要引入css文件。
所有导航栏的固定写法!!!
必须全加float。
会有默认的边框,手动去掉,也要考虑浮动才能完美贴合。
还要再精品推荐里面清除ul的浮动。
margin会存在外边距合并和情况,padding不会。
css基础04的更多相关文章
- CSS基础知识筑基
01.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),对HTML网页内容进行统一外观样式设计和管理,给网页进行各种装饰,让她变得美观,是HTML的化妆师.(Cas ...
- 前端开发:css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- CSS基础总结
CSS基础总结链接地址:http://segmentfault.com/a/1190000002773955
- javaSE基础04
javaSE基础04 一.三木运算符 <表达式1> ? <表达式2> : <表达式3> "?"运算符的含义是: 先求表达式1的值, 如果为真, ...
- CSS基础篇之了解CSS和它的基本属性
CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...
- HTML5 -入门 (---css样式-------------(css基础与css选择器)---------------------—)
---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...
- css 基础---选择器
1.css基础 selector {property: value} eg: h1 {color:red; font-size:14px;} p { text-align: center; color ...
- javascript基础04
javascript基础04 1.循环语句 1.While 语句: while (exp) { //statements; } var i = 1; while(i < 3){ alert(i) ...
- 妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
随机推荐
- 如何使用Python实现图像融合及加法运算?
摘要:本篇文章主要讲解Python调用OpenCV实现图像融合及加法运算,包括三部分知识:图像融合.图像加法运算.图像类型转换. 本文分享自华为云社区<[Python图像处理] 五.图像融合.加 ...
- 百万数据 mysql count(*)优化
一.故事背景有一张 500w 左右的表做 select count(*) 速度特别慢. 二.原 SQL 分析Server version: 5.7.24-log MySQL Community Ser ...
- mysql allow remote host
GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY 'password' WITH GRANT OPTION; FLUSH PRIVILEG ...
- PostGIS 扩展创建失败原因调查
Issue 升级 PostgreSQL 9.1 的一个集群,由于该集群用到了 PostGIS,在升级 PostgreSQL 时也需要升级一下 PostGIS.PostGIS 相关软件安装好后,在 Po ...
- 142_Power BI之同比预测
博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 一.背景 最近刚好在做一个简单同比预测的模型,预测方法很简单,就是累计同比预测,把MTD展示出来. [video widt ...
- 139_Power BI之某制造企业HR相关数据年度复盘
博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 一.背景 最近在忙一个关于制造企业HR年度数据复盘分析:数据已脱敏. 先来看看效果. 1.视频效果 [video widt ...
- 今天才发现ThinkPad的触摸板简直好用!傻乎乎的自己
最近经常看到这句话,天下武功,唯快不破. 今天才发现ThinkPad的触摸板简直好用! 今天才发现,傻乎乎的自己. 前一阵鼠标不好用了,没有滚轮,一直傻瓜式操作点击浏览器的滚动条... 遇到没有滚动条 ...
- 一次生产环境的docker MySQL故障
问题 昨天下午本来要去吃下午茶,然后前端小伙伴突然说接口怎么崩了,我登上sentry一看,报错了 (2005, "Unknown MySQL server host 'mysql' (-3) ...
- CMU 15-445 数据库课程第四课文字版 - 存储2
熟肉视频地址: CMU数据库管理系统课程[熟肉]4.数据库存储结构2(上) CMU数据库管理系统课程[熟肉]4.数据库存储结构2(下) 1. 面向日志的存储 上节课我们讲完了面向元组的存储,这节课从面 ...
- 第6章 字符串(上)——C风格字符串
6.1 C-strings(C 风格字符串) C风格字符串: 字符数组是元素为字符型的数组,字符串是以空字符'\0' 作为数组最后一个元素的字符数组. 如果指定了数组的大小,而字符串的长度又小于数组大 ...