所有浮动都是贴着浮动的。一左一右的话就毫无联系了。

浮动元素和标准流是两个级别了,浮起来了,后面的人会补上空缺的位置,让其他标准流的盒子占有。

很容易形成叠加效果,(蓝色的标准流会上去补上浮动的位置,浮动压着标准流)

上沿对其,而且不说明左浮右浮就会贴着左浮,原来是竖着排列的盒子会在一行内完成浮动。缩小页面,装不下四个的时候就会另起一行,但还是左边对齐,

无论是块元素还是行内元素都是一样的可以浮动,

行内块元素不指定宽度的时候,浮动的时候不是100%,是你里面的内容多宽他就显示多宽。

父元素管上下,子元素管左右。父盒子给一个固定的高度宽度位置大小,可以让子浮动盒子在里面自由浮动。有父盒子约束起来,要不然太free了。

也可以用ul和li来做。

这个案例就是前两个案例的综合。

三个盒子。

第一准则:标准流是上下排列,浮动是左右排列。

第三种最常见。

浮动只会压住后面的标准流不会压住前面的。

只要都不在一行显示了,都要检查一下是否都是浮动盒子,

浮动元素不占位置。父盒子一定没有高度。

闭合浮动是吧浮动元素关在父级元素里面管理。

孩子有多高父亲就有多高,下面加一个div标签就是限制的。

span是错的。

缺点:会把溢出部分切掉。

是用css帮我们生成了一个标签。这种方法只要复制这段代码然后在div加上clearfix调用就好了。

和上一个方法一样只要复制这段代码然后在div加上clearfix调用就好了。

不影响就不用清除浮动。

第三第四种方法没有在结构里 生成标签,在HTML里面找不到这个标签的,是在css方法额外生成这个标签,也是通过闭合浮动的观点,把元素闭合在里面去。

前三种可以直接放在页面中的,但是第四种的psd不能,它是一种设计稿文件,是帮助写页面的,用于写相关文字和测量相关距离。

可以先看官网的使用教学视频。

要引入css文件。

所有导航栏的固定写法!!!

必须全加float。

会有默认的边框,手动去掉,也要考虑浮动才能完美贴合。

还要再精品推荐里面清除ul的浮动。

margin会存在外边距合并和情况,padding不会。

css基础04的更多相关文章

  1. CSS基础知识筑基

    01.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),对HTML网页内容进行统一外观样式设计和管理,给网页进行各种装饰,让她变得美观,是HTML的化妆师.(Cas ...

  2. 前端开发:css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  3. CSS基础总结

    CSS基础总结链接地址:http://segmentfault.com/a/1190000002773955

  4. javaSE基础04

    javaSE基础04 一.三木运算符 <表达式1> ? <表达式2> : <表达式3> "?"运算符的含义是: 先求表达式1的值, 如果为真, ...

  5. CSS基础篇之了解CSS和它的基本属性

    CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...

  6. HTML5 -入门 (---css样式-------------(css基础与css选择器)---------------------—)

    ---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...

  7. css 基础---选择器

    1.css基础 selector {property: value} eg: h1 {color:red; font-size:14px;} p { text-align: center; color ...

  8. javascript基础04

    javascript基础04 1.循环语句 1.While 语句: while (exp) { //statements; } var i = 1; while(i < 3){ alert(i) ...

  9. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

随机推荐

  1. 一、深入学习c++先要练好的内功

    掌握进程虚拟地址空间区域的划分 课程讲的内容建立在x86 32位的Linux系统下. 任何的编程语言会产生两种东西:指令和数据.磁盘上的可执行文件在启动时都会加载到内存当中,但是不会加载到物理内存中, ...

  2. Vue路由实现之通过URL中的hash(#号)来实现不同页面之间的切换(图表展示、案例分析、附源码详解)

    前言 本篇随笔主要写了Vue框架中路由的基本概念.路由对象属性.vue-router插件的基本使用效果展示.案例分析.原理图解.附源码地址获取. 作为自己对Vue路由进行页面跳转效果知识的总结与笔记. ...

  3. JVM的类加载过程

    每日一句 人到情多情转薄,而今真个不多情. 每日一句 The frog in the well knows nothing of the great ocean. 井底之蛙,不知大海. JVM 的类加 ...

  4. java对象与Json字符串之间的转化

    public class Test { public static void main(String[] args) { // 实现java对象与Json字符串之间的转化 // 1. Person对象 ...

  5. java中synchronized关键字基础-1

    1.synchronized关键字简介 synchronized是java中的一个关键字,在中文中为同步,也被称之为'同步锁',以此来达到多线程并发访问时候的并发安全问题,可以用来修饰代码块.非静态方 ...

  6. CabloyJS究竟是一款什么样的框架

    CabloyJS是什么样的框架 CabloyJS 是一款自带工作流引擎的 Node.js 全栈框架,一款面向开发者的低代码开发平台,更是一款兼具低代码的开箱即用和专业代码的灵活定制的 PAAS 平台 ...

  7. 喜提JDK的BUG一枚!多线程的情况下请谨慎使用这个类的stream遍历。

    你好呀,我是歪歪. 前段时间在 RocketMQ 的 ISSUE 里面冲浪的时候,看到一个 pr,虽说是在 RocketMQ 的地盘上发现的,但是这个玩意吧,其实和 RocketMQ 没有任何关系. ...

  8. 谷歌浏览器Chrome官方下载地址

    经常看到朋友的电脑上安装是魔改的谷歌浏览器.这里将谷歌浏览器官方的下载地址放在这里.有需要的朋友可以自己去下载. 下载地址 Chrome最新稳定在线安装版:https://www.google.cn/ ...

  9. rpm 系 linux 系统中 repo 文件中的 $release 到底等于多少?

    rpm 系 linux 系统中 repo 文件中的 $release 到底等于多少? 结论 对于 8 来说,通过以下命令 #/usr/libexec/platform-python -c 'impor ...

  10. 9.Linux之iptables防火墙

    Linux之iptables防火墙 目录 Linux之iptables防火墙 iptables防火墙概述 netfilter和iptables之间的关系 netfilter iptables ipta ...