02-CSS基础与进阶-day7_2018-09-07-20-25-28

盒子模型布局稳定性
1 什么时候用内边距什么时候用外边距
绝大多数情况下可以混用，想用什么就用什么，但是总有一个
最好用的，建议
优先使用width > padding > margin
浮动(float)
1 标准流（文档流普通流）
一个网页的标签元素正常是从上往下，从左到右排列，块级元素独占一行，行内元素按照顺序依次前后排列
三种布局标准流浮动定位
2 什么是浮动
元素设置了浮动属性会脱离标准流的控制(脱标)
float:left
float: right
float: none
3 浮动特性
* 脱离标准流不占位置会影响标准流
* 子盒子浮动不会压住父盒子的padding和margin
* 浮动元素改变元素的模式,无论行内元素还是块级元素设置浮动后都具有行内块元素特性

02浮动最初的作用.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">div {width: 500px;height: 500px;border: 1px solid #ccc;margin: 0 auto;}img {float: right; /*浮动最初 用文字环绕效果的*/}</style>
</head>
<body><div>1991年1月，发行专辑《一起走过的日子》，专辑同名主打歌获得十大劲歌金曲奖以及十大中文金曲奖[116-117] ；2月，发行粤语专辑《爱不完》[118]  ；该专辑发行首日录音带的销量达到16万张，而激光唱片的销量则有7.2万张[119] ；6月，发行国语专辑《我和我追逐的梦》；同年，获得十大劲歌金曲奖最受欢迎男歌手奖[116] 。 1992年，在洛杉矶、旧金山等地举行美加巡回演唱会；9月，发行加入 刘德华 刘德华(3张) 华纳唱片公司以后的首张专辑《真我的风采》；该专辑发行后销量达到40万张[119] ；同年，在提前录制的央视春晚视频中，刘德华与毛阿敏合唱歌曲《心中常驻芳华》[120] <img src="data:images/img.jpg" height="220" width="171" alt="">；此外，他还发行了专辑《谢谢你的爱》，同名主打歌曲获得第十六届十大中文金曲奖[121] 。 1993年1月至2月，在香港红磡体育馆举行20场“真我的风采演唱会”；4月，推出加入飞碟唱片公司后的首张专辑《真情难收》，其中的主打歌曲《一辈子的错》由刘德华作词；11月，推出专辑粤语专辑《答案就是你》，专辑中的歌曲《永远寂寞》获得第16届十大中文金曲获奖[121] 。 1994年，发行国语专辑《忘情水》，同名主打歌获得第17届十大中文金曲奖最受欢迎国语歌曲金奖以及第1届华语榜中榜Channel [V]中文Top 20榜中榜歌曲奖[122-123] ；8月6日至25日，在香港红磡体育馆举行20场演唱会；11月25日，发行国语专辑《天意》；专辑中表达友情的主打歌曲《友谊历久一样浓》是刘德华个人填词的作品；同年，获得十大劲歌金曲奖最受欢迎男歌手奖[11] 。</div>
</body>
</html>

03浮动初体验.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">div {width: 200px;height: 200px;background-color: red;/*  display: inline-block; *//* 转化为行内块 并排并且宽高有效 元素之间有间隙 不方便处理*/float: right;}</style>
</head>
<body><div>111</div><div>222</div><div>333</div>
</body>
</html>

04浮动全解.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">div:first-child {width: 200px;height: 200px;background-color: red;float: left; /* 浮动的元素漂在标准流的上面 压住标准流*/}div:last-child {height: 320px;width: 140px;background-color: blue;}</style>
</head>
<body><div></div><div></div>
</body>
</html>

05浮动特性.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.fa {width: 500px;height: 500px;background-color: red;border: 8px solid green;padding: 20px;margin: 10px;}.son {width: 100px;height: 100px;float: left;background-color: yellow;}</style>
</head>
<body><div class="fa"><div class="son"></div></div>
</body>
</html>

06浮动特性续.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">section {width: 800px;height: 500px;background-color: #f40;}section div:first-child {width: 200px;height: 200px;background-color: pink;}/*熊大熊二都浮动 会顶对齐熊大不浮动 熊二浮动 熊二会下一行*/section div:last-child {width: 249px;height: 300px;background-color: skyblue;float: left;}</style>
</head>
<body><section><div>熊大</div><div>熊二</div></section>
</body>
</html>

07浮动元素改变显示模式.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">div {height: 200px;width: 400px;background-color: pink;float: left; /* 块级元素设置浮动 具有行内块元素的特征*/}span {height: 200px;width: 100px;float: left;background-color: red;}</style>
</head>
<body><div>刘强东上头条</div><span>抹茶妹妹</span>
</body>
</html>

转载于:https://www.cnblogs.com/HiJackykun/p/11062054.html

02-CSS基础与进阶-day7_2018-09-07-20-25-28相关推荐

Java EE之旅02 CSS基础
###css的简介 ####什么是css 概念:层叠样式表,css是对html进行样式修饰语言层叠:就是层层覆盖叠加,如果不同的css样式对同一html标签进行修饰,样式有冲突的部分应用优先级高的, ...
02.CSS基础笔记及导入
CSS是什么 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS样式 CSS引 ...
css无效 https_【CSS非全解02】CSS基础-文档流
基本概念文档流 mdn 块.内联.内联块? margin合并两种盒模型文档流 Normal Flow 流式布局 mdn 文档流动方向从左到右:"https://developer.m ...
Docker基础、进阶笔记，为k8s的学习预预热
标题 Docker基础.进阶笔记,为k8s的学习预预热笔记来源于视频: 狂神docker基础篇狂神docker进阶篇笔记中图片有些取自于:这位博主的两篇docker笔记中的一些图片百度云笔记工 ...
JQuery-学习笔记02【基础——JQuery选择器】
Java后端学习路线笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
Docker基础与进阶梳理(干货满满)
目录一,简介 1.1 什么是虚拟化 1.2 什么是 Docker 1.3 为什么选择Docker? 1.4 容器与虚拟机的比较二,Docker 组件 2.1 Docker 服务器与客户端 2.2 ...
1204、基础查询进阶、连接查询
文章目录一.基础查询进阶 1.常用函数 1.1 字符函数 1.2 数学函数 1.3 聚集函数 1.4 日期函数 1.5 数学计算的使用 + - \* / % **2.流程控制函数:查询表记录事可以加 ...
字节跳动前端面试题：CSS 基础
实战教程全栈技术精选好文注意:每道题前面出现的 (xx) 数字代表这道题出现的频次,此 CSS 基础是基于 30+ 篇前端面经整理出的问题和对应的回答.参考链接等.文章内容为拿到 Offer ...
Java基础-02（基础语法）
Java基础-02(基础语法) 一注释加粗样式注释用来解释和说明程序的文字,注释是不会被执行的. 1.1单行注释 //这是一条单行注释 public int i; 1.2多行注释 /* 这是 * ...
CSS基础_Day04
CSS基础一.CSS继承 1.给 HTML 的 body 元素添加样式每一个 HTML 页面都有一个 body 元素. 我们可以通过设置 background-color 的属性值为黑色,来证明 ...

02-CSS基础与进阶-day7_2018-09-07-20-25-28

02-CSS基础与进阶-day7_2018-09-07-20-25-28相关推荐

最新文章

热门文章