前端开发笔记(3)css基础(中)
上一篇中我们学习了html的标准文档流,下面我们先来看看如何脱离标准流。
脱离标准流
css中一共有三种方法脱离标准流
- 浮动
- 绝对定位
- 固定定位
浮动
我们要搞清楚什么是浮动,先来看一个标准文档流的例子
<style type="text/css">
div{
width:100px;
height:100px;
margin:10px;
border:1px solid red;
}
</style>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
浏览器执行效果:
会发现标准文档流这4个div不能并排,下面我们设置浮动让他们可以并排。
<style type="text/css">
div{
width:100px;
height:100px;
margin:10px;
border:1px solid red;
float:left; /* 设置浮动(向左浮动) */
}
</style>
浏览器运行结果:
浮动的特点:
- 浮动的元素脱离标准流。(这个已经在上面看到了)
浮动的元素相互贴靠。
我们去掉上面样式中的margin看看是否使靠帖的div{
width:100px;
height:100px;
/* margin:10px; */
border:1px solid red;
float:left; /* 设置浮动(向左浮动) */
}浮动的元素有“字围”效果。
<head>
<style type="text/css">
img{
float:left;
}
</style>
</head>
<body>
<img src="img1.jpg"/>
<p>
这里是文字...(此处省略1000字)
</p>
</body>浏览器执行结果:
绝对定位
演示一个绝对定位脱离标准流的例子,下面详细介绍几种定位。
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div{
border: 1px solid red;
width:100px;
height:100px;
position:absolute; /* 绝对定位 */
top:20;
}
.div1{
left:20;
}
.div2{
left:120px;
}
.div3{
left:230px;
}
.div4{
left:340px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>
固定定位
将上面例子中的position值改为fixed后效果和上面一样
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div{
border: 1px solid red;
width:100px;
height:100px;
position:fixed; /* 固定定位 */
top:20;
}
.div1{
left:20;
}
.div2{
left:120px;
}
.div3{
left:230px;
}
.div4{
left:340px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>
浮动的清除
清除浮动的原因
先来看一个小案例
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
li{
float:left;
background-color:yellow;
padding:20px;
}
</style>
</head>
<body>
<div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>APP</li>
</ul>
</div>
<div>
<ul>
<li>数据结构</li>
<li>设计模式</li>
<li>操作系统</li>
</ul>
</div>
</body>
我们会发现上面的第二个div中的li元素会去贴靠第一个div中的最后一个元素。原因是因为div没有设置高度,那么此时你可能会问了,给div设置一个高度不就可以了,为什么要想办法去清除浮动呢?有的小朋友可能就问了,刚刚不是学习了怎么浮动,浮动能脱离标准文档流,现在怎么又要清除浮动了?
一般我们给容器不去设置固定的高度,而是由它的内容的高度自适应,这样才能适配到更多浏览器并且容易维护和修改。这只是清除浮动的一个原因,总之有的时候我们并不希望我们的块标签跟随着另一个标签,此时就需要清除浮动。
给父标签添加高度
给上面的案例中的div添加高度
div{
height:50px;
}
浏览器执行结果:
这个方法并不为一种很好的清除浮动的方法,如果确实需要设置高度可以这样做。
clear:both;属性清除
将上面的div样式改为clear:both;
div{
clear:both;
}
浏览器执行结果和上面一致,但是这种方法有一个不好的地方margin在一定程度上会存在失效。
div{
clear:both;
margin:50px;
}
会发现上面设置的margin没有效果
隔墙法
在两个div中间放置一个clear:both;样式的div
<style type="text/css">
.splite{
clear:both;
}
li{
float:left;
background-color:yellow;
padding:20px;
}
</style>
<body>
<div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>APP</li>
</ul>
</div>
<div class="splite"</div> <!-- 这是一堵墙 -->
<div>
<ul>
<li>数据结构</li>
<li>设计模式</li>
<li>操作系统</li>
</ul>
</div>
内墙法
内墙法和上面的隔墙法很相似,是将“这堵墙”放到了第一个div内部
<body>
<div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>APP</li>
</ul>
<div class="splite"</div> <!-- 这是一堵墙 -->
</div>
<div>
<ul>
<li>数据结构</li>
<li>设计模式</li>
<li>操作系统</li>
</ul>
</div>
overflow:hidden;属性清除
overflow:hidden;的本意是隐藏超出部分的内容,但是实际开发中发现这个属性可以巧妙的清除浮动。
<style type="text/css">
div{
overflow: hidden;
}
li{
float:left;
background-color:yellow;
padding:20px;
}
</style>
<body>
<div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>APP</li>
</ul>
</div>
<div>
<ul>
<li>数据结构</li>
<li>设计模式</li>
<li>操作系统</li>
</ul>
</div>
</body>
IE6不兼容overflow:hidden;清除浮动,解决办法添加一个属性zoom:1;
overflow: hidden;
_zoom:1;
前端开发笔记(3)css基础(中)的更多相关文章
- 〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...
- day44前端开发2之css基础
web前端开发1一.前端三剑客之css 1.选择器:由标签/类/id单独或组合出现 2.作用域:{}内部区域 3.样式块:满足css链接语法的各种样式 eg:引入的基本样式 <head> ...
- 从零开始学习前端开发 — 2、CSS基础
一.CSS简介 1.CSS是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表.特点:实现了表现与结构相分离 2.css基础语法 css是由选择符和声明两大部分组成 ...
- 前端开发笔记(1)html基础
HTML介绍 HTML是HyperTextMarkupLanguage超文本标记语言的缩写 HTML是标记语意的语言 编辑器 任何纯文本编辑器都能够编辑html,比如记事本,editplus,note ...
- Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行
H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题.重要栏目.重要标题等情形下. H1在一个网页中最好只使用一次,如对一个网页唯一标题使用.H2.H3.H4标签则可以在一个网页中多次出现, ...
- web前端开发笔记(2)
一.什么是作用域. 所有变量都存在于一个执行环境中(也称作用域),这个执行环境决定了变量的生命周期,以及哪一部分代码可以访问其中的变量.总结: 执行环境有全局执行环境和函数执行环境. 每次进入一个新执 ...
- web前端开发笔记(1)
一.HTML标签书写有哪些规范? 页面编码. 文档声明. 关键字与描述. 行内元素不能包含块级元素. a标签不能嵌套a标签. 标签名和属性必须用小写字母书写,属性必须加引号,标签必须闭合,单标签页必 ...
- 好程序员web前端开发测验之css部分
好程序员web前端开发测验之css部分Front End Web Development Quiz CSS 部分问题与解答 Q: CSS 属性是否区分大小写? <p><font si ...
- Linux及Arm-Linux程序开发笔记(零基础入门篇)
Linux及Arm-Linux程序开发笔记(零基础入门篇) 作者:一点一滴的Beer http://beer.cnblogs.com/ 本文地址:http://www.cnblogs.com/bee ...
- 【Linux开发】Linux及Arm-Linux程序开发笔记(零基础入门篇)
Linux及Arm-Linux程序开发笔记(零基础入门篇) 作者:一点一滴的Beer http://beer.cnblogs.com/ 本文地址:http://www.cnblogs.com/beer ...
随机推荐
- C、C++打包成.dll .so .a 给Unity使用
C.C++打包成.dll .so .a 给Unity使用 打包.dll库 工具:VS 使用VS新建项目 选择不大于.NET3.5的版本 选择Visual C++ -> Win32 控制台应用程序 ...
- MySQL命令行登陆,远程登陆MySQL
注: MySQL图形界面管理工具[navicat 10.1.8中文绿色版] 下载地址:http://www.t00y.com/file/18393836 备用地址:http://ProCircle.q ...
- git提交的问题
1. Pull is not possible because you have unmerged files.症状:pull的时候$ git pull Pull is not possible be ...
- python实战问题记录
开发环境搭建 1.安装aiohttp这个异步的http框架失败 提示使用pip更高版本,但是更新之后,还是无法使用.所以,我们采用anaconda中的aiohttp,即打开anaconda,然后进入E ...
- 【从0到1学jQuery】jQuery中each()和$.each()的使用
引子: 最近遇到一个问题,就是在each()函数中怎么模拟for循环中的break和continue的操作.所以就查看了jQuery关于这个函数的文档,并且总结一下. 演示代码如下: <div& ...
- Windows 8.1 GetVersionEx返回6.2.9200 的问题!
http://msdn.microsoft.com/en-us/library/windows/desktop/dn302074.aspx http://tunps.com/getversionex- ...
- mysql关于timestamp字段相关内容
发现5.6和5.7版本的创建表不一致,从5.6导出数据表创建sql文件,然后导入到5.7表会报错,timestamp不能为空 查看的sql_mode mysql5.0以上支持的三种模式 1. ANSI ...
- es-06-java创建mapping和setting
说实话, java的方式太繁琐, 不如直接使用DSL进行创建 1, create package com.wenbronk.elasticsearch.usage.index; import com. ...
- 从QQ音乐开发,探讨如何利用腾讯云SDK在直播中加入视频动画
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯游戏云发表于云+社区专栏 看着精彩的德甲赛事,突然裁判一声口哨,球赛断掉了,屏幕开始自动播放"吃麦趣鸡盒,看德甲比赛&q ...
- Git 管理项目
一个很小的HTML项目,使用.Git来记录和跟踪这个项目.包括以下内容: 创建版本库. 添加与修改文件. 创建新分支. 打标签并整理版本库. 克隆版本库. 创建版本库 Creating a Repos ...