前端开发之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> 标签来定义. ...
随机推荐
- UICollectionView官方使用示例代码研究
注:这里是iOS6新特征汇总贴链接 iOS6新特征:参考资料和示例汇总 这个链接可以学习到UICollectionView的相关介绍:iOS6新特征:UICollectionView介绍 由于UICo ...
- 玩转Eclipse — 自动代码规范检查工具Checkstyle
大项目都需要小组中的多人共同完成,但是每个人都有自己的编码习惯,甚至很多都是不正确的.那么如何使小组所有开发人员都遵循某些编码规范,以保证项目代码风格的一致性呢?如果硬性地要求每个开发人员在提交代码之 ...
- CSU1612Destroy Tunnels（强连通）传递闭包
Destroy Tunnels 原来早忘记了离散里含有这么一个叫传递闭包的东西 矩阵A的闭包B = A U A^2 U A^3 U ... 所以这里直接如果A[i][j]!= 0,建边i->j跑 ...
- curl 错误 [globbing] illegal character in range specification at pos
现象 在使用curl 进行ipv6请求的时候 curl -v "http://[1:1::1]/test.html" 发生了一个错误,报错是 [globbing] illegal ...
- elixir jenkins 集成构建方式配置
备注: 主要问题是环境变量配置的问题,解决方法是使用软连接进行解决 1. 下载软件包 wget https://github.com/elixir-lang/elixir/releases/ ...
- 再谈zabbix 邮件通知配置(不用脚本，简单配置就可以了)
备注: 安装过zabbix 的人,大家都应该了解,后者查询网上的资料邮件通知一般是编写一个脚本,即报警媒介类型,创建一个script类似的 然后编写脚本,进行发送,但是实际上,系统内置的邮件发送还是比 ...
- caddy server 了解
Caddy 是一个Go写的服务器软件,官方的宣传语“The HTTP/2 web server with automatic HTTPS”以及“Serve The Web Like It's 2016 ...
- 使用实例 ---- 使用NUnit在.Net编程中进行单元测试
[--- 资料是从免费网站上获取的,上载在这里,只为交流学习目的,文章原作者保留所有权力,如本博客的内容侵犯了你的权益,请与以下地址联系,本人获知后,马上删除.同时本人深表歉意,并致以崇高的谢意!e ...
- 服务器用 git 进行部署出现代码冲突的处理
服务器用 git 进行部署出现代码冲突的处理 起因: 由于项目是之前很久之前上传的,且并没上线.使用 git pull 进行代码更新时出现很多冲突. 因为服务器上的代码有移动过位置,不知道为什么就冲突 ...
- Lombok 简单入门
原文地址:Lombok 简单入门 博客地址:http://www.extlight.com 一.前言 Lombok 是一个 Java 库,它作为插件安装至编辑器中,其作用是通过简单注解来精简代码,以此 ...