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

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

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

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

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

行内块元素不指定宽度的时候,浮动的时候不是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++语言socket库函数实现服务端客户端聊天室

    客户端 /* * 程序名:client.cpp,此程序用于演示socket的客户端 * 作者:C语言技术网(www.freecplus.net) 日期:20190525 */ #include < ...

  2. iOS全埋点解决方案-时间相关

    前言 ​ 我们使用"事件模型( Event 模型)"来描述用户的各种行为,事件模型包括事件( Event )和用户( User )两个核心实体.我们在描述用户行为时,往往只需要描述 ...

  3. 521. Longest Uncommon Subsequence I - LeetCode

    Question 521. Longest Uncommon Subsequence I Solution 题目大意:给两个字符串,找出非共同子串的最大长度 思路:字符串相等就返回-1,不等就返回长度 ...

  4. linux篇-Linux逻辑卷详解总结

    LVM是逻辑卷管理(Logical Volume Manager)的简称,它是建立在物理存储设备之上的一个抽象层,允许你生成逻辑存储卷,与直接使用物理存储在管理上相比,提供了更好灵活性. LVM将存储 ...

  5. vscode的一些优化设置

    @ 目录 编辑代码区的字体设置 控制台字体设置 设置文件自动保存 自动猜测文件编码,防止乱码 关闭vscode的受限模式 取消每一次打开vscode都默认打开上次编辑的文件 编辑代码区的字体设置 控制 ...

  6. Android Jetpack Navigation基本使用

    Android Jetpack Navigation基本使用 本篇主要介绍一下 Android Jetpack 组件 Navigation 导航组件的 基本使用 当看到 Navigation单词的时候 ...

  7. Bika LIMS 开源LIMS集——ERD实体关系定义(数据库设计)

    系统数据分类 数据分为四类: template 模板,基础静态数据 static 静态数据,核心静态数据,检测方法等 dynamic 动态数据,样品检测流程数据 organisation 组织机构数据 ...

  8. redis入门,linux安装

    1.下载 https://redis.io/download 2.上传到linux服务器tools文件夹下 3.解压到安装目录 tar -zxf /app/redis/redis-5.0.4.tar. ...

  9. 实测:云RDS MySQL性能是自建的1.6倍

    1. 摘要 基于之前写的「云厂商 RDS MySQL 怎么选」的文章,为了进一步了解各云厂商在RDS MySQL数据库性能上的差异,本文将对自建MySQL.阿里云.腾讯云.华为云和AWS 的 RDS ...

  10. Servlet 体系结构

    Servlet体系结构 Servlet -- 接口 Genericservlet -- 抽象类 继承类接口 实现了空方法  只需要复写service方法 HttpServlet -- 抽象类  对Ht ...