前端开发之CSS篇三
主要内容：
1️⃣ CSS布局之浮动
float:即浮动，CSS布局用得最多的一个属性。
效果：元素并排，并且两个元素都能够设置宽度和高度。
要想学好必须要知道的四个特性：
（1）浮动的元素脱标；
（2）浮动的元素互相贴靠；
（3）浮动的元素有“字围“效果；
（4）紧凑的效果
1、元素脱标
脱离标准文档流
原本设置标准文档流中的左上方的第一个盒子，设置了浮动（成了浮动元素，飘了起来），便脱离了
标准流，另一个盒子便渲染到了左上方。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>布局之浮动属性</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: #5bc0de;
float: left;
}
.box2{
width:300px;
height: 300px;
background-color: #1c7430;
}
span{
float: left;
background-color: #6f42c1;
width: 200px;
height: 30px;
}
</style>
</head>
<body>
<div class="box1">
<p>我是小黄</p>
</div>
<div class="box2">
<p>我是小蓝</p>
</div>
<!--/* 此处span标签不需要转成块级元素，也能够设置宽高。-->
<!--所有的标签一旦设置浮动，不仅能够并排，还不区分行内、块状元素，设置宽高*/-->
<span>我是一个小小的span标签</span>
<!--<br>-->
<span>我是一个小小的span标签</span>
</body>
</html>
2、 浮动元素互相贴靠
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.box1{
width:200px;
height: 150px;
/*height: 300px;*/
float: left;
background-color: #6f42c1;
}
.box2{
width:300px;
height: 200px;
float: left;
background-color:#b2e567;
}
.box3{
width:400px;
height: 300px;
float: left;
background-color:red;
}
</style>
</head>
<body>
<div class="box1">一哥</div>
<div class="box2">二哥</div>
<div class="box3">三弟</div> </body>
</html>
总结：
如果浏览器页面（父元素）有足够的空间，那么多个盒子（div标签）设置浮动时，则依次从左至右（float设为left时）排列。（以下默认float设置为left）
当浏览器页面（父元素）空间无法容纳并列的盒子的宽度时（比如将浏览器页面缩小），此时位于右侧的盒子就会向左侧贴靠，需要分两种情况讨论：
以上方源码为例：
①当一哥的高度小于二哥时，压缩浏览器页面，三弟向左贴靠，会直接滑到最左侧的边框上，与一哥左侧对齐了。
②当一哥的高度大于二哥时，压缩浏览器页面，三弟向左贴靠，会滑到紧靠一哥的右侧的边框上，与二哥左侧对齐。
3、 浮动元素之字围效果
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动元素自围效果</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{ float: left;
}
p{
background-color: cyan;
}
</style>
</head> <body>
<div>
<img src="lufei.jpg"></img>
</div>
<p>路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞 </p>
</body>
</html>
当div标签设置浮动，p标签不设置浮动时，div挡住了p(div的层级提高)，但是p中的文字不会被遮盖，此时
就形成了字围效果，关于浮动必须要强调的是：浮动一个元素，我们要遵循一个原则，永远不是一个盒子单独浮动，
要浮动就要一起浮动。
4、 浮动元素之紧凑效果
未设置元素的width属性值时，会自动收缩到元素自身的宽度（这一点和行内元素很像）。
· 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动元素自围效果</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
float: left;
background-color: blueviolet;
} </style>
</head>
<body> <div class="box">浮动元素之紧凑效果</div>
</body>
</html>
2️⃣ 清除浮动带来的问题
方法1：给父盒子设置高度
当子元素设置为浮动后，就脱标了（脱离标准流），不在当前页面上占据位置，不再
填充父元素的高度了，所以导致该父盒子无高度，添加下一个父盒子时，就会顶到左上角
（即上一个父盒子位置），导致两个父盒子相互重叠。
方法2：内墙法（clear:both）
给浮动元素最后面添加一个盒子（div），并且不设置浮动，然后设置clear:both，即清除
别人对我的浮动的影响（此时父盒子father2不再顶在左上角，与父盒子father重叠，而是紧贴
在父盒子father下面）
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>消除浮动的方法</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
.father{
width: 600px;
background-color: #c9ff49;
}
.father ul li{
float:left;
width: 150px;
height:200px;
background-color: #a195ff;
}
.clear{
clear: both;
}
.father2{
width: 500px;
height: 300px;
background-color: #ccdeff;
}
</style>
</head>
<body>
<div class="father">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<!--给浮动元素最后面加一个空的div,并且该元素不浮动,然后设置clear:both,-->
</ul>
<div class="clear"></div><!--无缘无故加了div元素，结构冗余-->
</div>
<div class="father2"></div>
</body>
</html>
方法3： 伪元素选择器（给祖先元素加一个类）
<!DOCTYPE HTML>
<html lang="en">
<meta http-equiv="x-ua-compatible" charset="utf-8">
<title>消除浮动元素之伪元素清除法</title>
<head>
<style type="text/css">
*{
padding:0;
margin:0;
}
ul{
list-style: none;
}
div{
width:400px;
}
div ul li{
float:left;
width:100px;
height:200px;
background-color: #b1ffde;
}
.box1{
width:400px;
height:300px;
background-color: #c9ff49;
}
/*伪元素选择器（给祖先元素加一个类）*/
.clearfix:after{
content:" "; /*看作是一个span标签*/
clear: both;
display: block; /*转换为块状元素*/ /*新浪网清除浮动的方式
content：“.”;
clear:both; 清除别人对我的浮动的影响
display:block;
height:0; 配合下一句使用，使占用空间为0
visibility: hidden; 虽然隐藏，但依然占据空间位置
*/ }
</style>
</head>
<body>
<div class="clearfix">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="box1"></div>
</body> </html>
方法4：overflow:hidden（表示超出部分隐藏）-- 需要在父级元素上设置
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="x-ua-compatible" charset="utf-8">
<title>消除浮动元素之伪元素清除法</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
ul{
list-style: none;
}
body{
overflow:auto;
}
.box{
width:200px;
height: 200px;
border:2px solid palegreen;
/*overflow: hidden; !*超出盒子内容部分会被删减，不可见（隐藏）*!*/
/*overflow: auto;!*如果内容被修剪，会以滚动条形式显示其余内容*!*/
/*overflow: scroll; !*内容被修剪，会以滚动条形式显示其余内容*!*/
overflow: inherit;/*继承父级元素的overflow属性*/
} </style>
</head>
<body>
<div class="box"> hello world hello world hello world hello world hello world
hello world hello world hello world hello world hello world
hello world hello world hello world hello world hello world
hello world hello world hello world hello world hello world
hello world hello world hello world hello world hello world
hello world hello world hello world hello world hello world
hello world hello world hello world hello world hello world
hello world hello world hello world hello world hello world
hello world hello world hello world hello world hello world
hello world hello world hello world hello world hello world
</div> </body> </html>
3️⃣ margin塌陷问题
1、当给未设置浮动的两个兄弟盒子设置垂直方向上的margin时，那么以较大的值为准，我们称这种现象为塌陷。
而当给盒子设置浮动时，垂直方向上不塌陷。 需注意：水平方向无塌陷问题。
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin塌陷的问题</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
.father{
width:400px;
border: 2px solid darkslategray;
overflow: hidden;
}
.box1{
width:300px;
height:200px;
background-color: #c3d9ff;
margin-bottom: 20px;
float: left;
}
.box2{
width:400px;
height:300px;
background-color:#b2e567;
margin-top: 40px;
float: left;
} </style>
</head>
<body>
<div class="father">
<!--当给未设置浮动的两个兄弟盒子设置垂直方向上的margin时，那么以较大的值为准，我们称这种现象为塌陷。
而当给盒子设置浮动时，垂直方向上不塌陷。-->
<div class="box1"></div>
<div class="box2"></div>
</div> </body>
</html>
2、设置水平居中（margin:0 auto）
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin塌陷的问题</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
.box3{
width:800px;
height:60px;
background-color: #2aabd2;
margin:0 auto; /*盒子水平居中*/
text-align: center; /*文字水平居中*/
} </style>
</head>
<body>
<div class="box3">水平居中</div>
</body>
</html>
总结：
（1）使用margin:0 auto 水平居中盒子，必须要设置明确的width,
盒子内的文字水平居中需要使用text-align:center.
（2）只有标准流下的盒子，才能使用 margin:0 quto;
当一个盒子设置浮动了，或者固定定位或绝对定位时，margin:0 auto；
就不能用了。
（3）margin:0 auto 表示水平居中盒子，不是文本，文本要单独用 text-align:center。
4️⃣ 善用父级的padding取代子级的margin
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>善用padding替代margin</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
.father{
width:298px;
height:298px;
background-color: #428bca;
/* ① border: 2px solid greenyellow; ①②③三句也可达到效果但不推荐*/ /*推荐方式如下：在父级中写padding替代子级中的margin和父级中的 border */
padding-top:30px;
padding-left: 30px;
}
.son{
width:80px;
height:80px;
background-color: burlywood;
/* ② margin-top:30px;*/
/* ③ margin-left:30px;*/
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
总结：
子盒子在父盒中设置间距，有两种方式：
一、如上①②③式所示，设置父级的border,子级中设置margin（切记盒子总大小要加上边框border）
二、在父盒中设置padding参数，同时对应减小width和height的参数。 原理：如果父级没有设置border,那么子级margin实际上“挤”的是“流”（标准文档流，即行），所以父级就会被挤掉下来。
5️⃣ 文本属性和字体属性
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本属性和字体属性</title>
<style type="text/css">
.box{
width:300px;
height:200px;
border:1px solid #b3d7ff;
/*设置字体大小，单位:px（像素）%（占父级元素空间的百分比） rem em */
font-size: 20px;
font-weight: 200;/*范围100-900，依次加粗*/
font-family: "Microsoft YaHei UI","微软雅黑","Adobe Gurmukhi";/*如果第一个无效或无法使用，则取第二个，其余同理*/
text-align:center;/*水平居中*/
text-decoration: underline blue;/*下划线，默认是none*/
cursor:pointer; /*光标*/
/*行高的公式：
当行高=盒子的高度，让文本垂直居中，但是只适用于单行文本*/
line-height: 200px;/*行高，设置行高和盒子高度相同时，文字垂直居中*/
visibility: hidden;
} .box2{
width:400px;
height:120px;
border:1px solid palegreen;
font-weight: 500;
/*font-size: 15px;*/
/*font-family: "Adobe Fan Heiti Std B";*/
/*line-height: 30px;!*一定要大于font-size,否则会挤到一起，一个行高是文字的顶部到下一行文字的顶部的距离*!*/
font: 15px/30px “宋体”; /*这一行等同于上面三行，依次是字体大小，行高，字体*/
padding-top: 30px;
/*一个行高是30px，一共3个行高，那就是90px,总高度是150px,
如果要让多行文本垂直居中在当前的盒子中，则（150-90）/2=30px，
设置padding-top的值为30px,则height要减少30px（padding增加多少对应height减少多少）*/
text-indent: 2em;/*1em等于缩进一个字体大小，开头空两格就设为2em*/
}
</style> </head>
<body>
<div class="box">
我是一个小盒子
</div>
<div class="box2">
多行文本 多行文本 多行文本 多行文本 多行文本 多行文本
多行文本 多行文本 多行文本 多行文本 多行文本 多行文本
多行文本 多行文本 多行文本 多行文本 多行文本 多行文本
</div>
</body>
</html>
总结：
使用font-family注意几点：
1、网页中我们要注意使用字体（用户可能没有某些字体），没有时，中文默认宋体；
一般页面中，中文只使用：微软雅黑，宋体，黑体；
英语一般用：Arial,Times New Roman；
英语能够显示英文和中文，但设为中文就只能显示对应的中文。 2、为防止用户电脑没有某个字体，就设置多个字体，中间用英语逗号隔开，
备选字体可以有无数个。 3、讲英语字体放在最前面，如此所有的中文都不能匹配，局自动变为后面的中文字体。
如：font-family:"Times New Roman","微软雅黑","宋体"。
6️⃣ 超链接美化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接美化</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
ul{
list-style: none; /*取消超链接的下划线*/
}
.nav{
width:900px;
margin: 30px auto 0; /*居中显示*/
background-color: #428bca;
overflow: hidden; /*消除float带来的影响*/
border-radius: 5px; /*设置圆角，5代表半径为5px*/
}
.nav ul li{
width:150px;
height:40px;
float: left; /*左浮动，贴靠左侧*/
line-height: 40px;
text-align: center; /*文本居中*/
}
.nav ul li a{
width:150px; /*超链接必须设置宽高，要显示可点击范围*/
height:40px;
display:block; /*a相当于span，行内标签，要设置宽高等必须转成块状元素*/
font-size: 20px; /*字体大小*/
color:white; /*字体颜色，不能继承父级*/
text-decoration: none; /*取消超链接默认的下划线*/
font-family: "Microsoft YaHei UI"; /*设置字体*/
}
/*a标签不继承父元素的color*/
.nav ul li a:hover{
background-color:greenyellow; /*鼠标滑到链接上，显示指定背景色*/
font-size: 25px; /*字体变大*/
}
</style>
</head>
<body>
<div class="nav">
<div>
<ul>
<li><a href="">菜单1</a></li>
<li><a href="">菜单2</a></li>
<li><a href="">菜单3</a></li>
<li><a href="">菜单4</a></li>
<li><a href="">菜单5</a></li>
<li><a href="">菜单6</a></li>
</ul>
</div>
</div>
</body>
</html>
7️⃣ 背景属性（颜色，图片，位置）
1、background-color
颜色表示方法有三种：单词、rgb表示法、16进制表示法
（1）单词：如 red,green,blue等。
rgb：红，绿，蓝三原色
rgb（r,g,b） r,g,b的值，每个值的取值范围都是0~255，一共256个值。
如：黑色=rgb(0,0,0)
白色=rgb（255,255,255）
最后显示的颜色是三个数值的叠加。
（2）十六进制表示法
以#开头，后接十六进制数，可以和rgb之间转换（即十六进制转十进制）
十六进制可以简化为3位，所有 #aabbcc的形式，能够简化为 #abc。
如background-color:ff0000;等于background-color:#f00;
background-color:#112233;等于background:#123;
2、background-img
1、平铺图片（铺满盒子）
background-image:url(lufei.jpg);
background-repeat:repeat;
2、不平铺图片
background-image:url(lufei.jpg);
background-repeat:no-repeat;
background-repeat: repeat-x; /*在盒子内仅水平方向平铺*/
background-repeat: repeat-y; /*在盒子内仅垂直方向平铺*/
3、给网页设置背景
body{
background-image:url(lufei.jpg);/*背景如果是一张图片多次填充，图片应选择轴对称的*/
}
4、设置图片位置
background-position: 0 0; /*默认位置为左上角*/
background-position: 100px 100px;
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景属性介绍</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
ul{
list-style: none; /*取消超链接的下划线*/
}
body{
background-image:url(./images/back1.jpg) ;
}
.box{
width:1200px;
height:600px;
/*图片平铺*/
background-image:url(lufei.jpg);
/*background-repeat:repeat;*/
background-repeat: no-repeat; /*图片不平铺*/
/*background-repeat: repeat-x; !*在盒子内仅水平方向平铺*!*/
/*background-repeat: repeat-y; !*在盒子内仅垂直方向平铺*!*/
/*background-position: 0 0; !*默认位置为左上角*!*/
background-position: 100px 100px;
}
</style>
</head>
<body>
<div class="box">我的图片</div> </body>
</html>
前端开发之CSS篇三的更多相关文章
- 前端开发之css篇
一.css简介 css(Cascading Style Sheets)层叠样式表,是一种为html文档添加样式的语言,主要有两个功能:渲染和布局.使用css主要关注两个点:查找到标签,属性操作 二.c ...
- 前端开发之CSS篇四
一.相对定位 二.绝对定位 三.固定定位 四.z-index 前言 定位有三种:1.相对定位 2.绝对定位 3.固定定位 这三种定位,每种都暗藏玄机,所以要每个单独剖析. 1️⃣ 相对定位 1.三 ...
- 前端开发之CSS篇二
主要内容: 一.CSS的继承性和层叠性 二.盒模型 三.padding属性 四.border属性 五.margin属性 六.标准文档流 七.行内元素和块状元素转换 1️⃣ CSS的继承性和层叠性 1 ...
- 前端开发之CSS入门篇
一.CSS介绍和语法 二.CSS引入方式 三.基本选择器 四.高级选择器 五.伪类选择器 六.伪元素选择器 1️⃣ CSS介绍和语法 1. CSS的介绍 (1)为什么需要CSS? 使用css的目的就 ...
- 前端开发之JavaScript篇
一.JavaScript介绍 前端三剑客之JavaScript,简称js,可能是这三个里面最难的一个了.很早以前,市面上流通着三种js版本,为了统一,ECMA(欧洲计算机制造协会)定义了规范的版本, ...
- 前端开发之HTML篇一
主要内容: 一.HTML简介 二.HTML标签 三.HTML文档结构和注释 四.head标签及相关内容 五.body标签及相关内容 1️⃣ HTM ...
- 前端开发之html篇
一.什么是html? 1.我们说socket网络编程的时候,提到过一个cs模型,就是客户端—服务端模型,前端开发也是基于网络编程,但是这时就应该是bs模型了,是浏览器与服务端的通信. 我们可以模拟一个 ...
- 前端开发之jQuery篇--选择器
主要内容: 1.jQuery简介 2.jQuery文件的引入 3.jQuery选择器 4.jQuery对象与DOM对象的转换 一.jQuery简介 1.介绍 jQuery是一个JavaScript库: ...
- 前端开发之HTML篇二
主要内容: 一.表格标签 -- table 二.表单标签 -- form 三.常用标签属性和分类 四.标签嵌套规则 1️⃣ 表格标签 -- table 表格由<table> 标签来定义. ...
随机推荐
- 防范DDoS攻击的几种方式
一.拒绝服务攻击的发展: 从拒绝服务攻击诞生到现在已经有了很多的发展,从最初的简单Dos到现在的DdoS.那么什么是Dos和DdoS呢?DoS是一种利用单台计算机的攻击 方式.而DdoS(Distri ...
- MAC OS、Windows 、HTML，CSS，font-family：中文字体的英文名称
宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei 微软正黑体 Microsoft JhengHei 新宋体 NSimSun 新细明体 PMingLiU 细明体 Ming ...
- 转 neighbour table overflow 问题解决
接到保障,说某来机器服务没法访问,于是,准备连接到机器上去看个究竟. 尼玛居然连不上,连ping都ping不通,无奈只能求助机房. 机房人员检查, 发现报 neighbour table overfl ...
- mysql导入外部sql脚本的方法
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/u011043843/article/details/29689853 导入的方法分为两种:一是採用图 ...
- 在Eclipse中配置Tomcat7.0
为了在Eclipse中进行struts2的测试,才发现自己机器上的Eclipse没有集成Tomcat,在网上找了半天,不是这个插件没有下载地址,就是那个有好多注意事项或者版本问题.结果,自己到tomc ...
- 【转】HP laserjet p2055dn的自动双面打印功能
原文网址:http://zhidao.baidu.com/link?url=n_NW7Qfa_7HlrEhLucdvKO43jj3SpFXJhGAfQ-WqF979jm80eUv8s1atqtxE7w ...
- "==" 与 “equals”
“==”: “==”或等号操作在Java编程语言中是一个二元操作符,用于比较原生类型和对象.(操作符不支持重载overloading) “==”对比两个对象基于内存引用,如果两个对象的引用完全相同(指 ...
- web开发视频(一)之环境准备
硬件环境: Win7+64位操作系统 1.安装 jdk.tomcat.eclipse; 2.配置 jdk 环境变量.tomcat环境变量 (jdk配置成功的标示是在命令提示符中输入 javac 给出对 ...
- 数据结构与算法JavaScript描述——队列
注:澄清一个bug: /** * 删除队首的元素: */ function dequeue(){ return this.dataStore.shift(); } 应该有return: 队列是一种 ...
- Java并发-Runnable、Callable、Future、Future Task
Runnable: Runnable的代码非常简单,他是一个接口,且接口中只有一个方法,run(),创建一个类实现他,把一些费时操作写在其中,然后使用某个线程去执行该Runnable实现类即可实现多线 ...