1 页面元素类型
1.1 块元素
块元素(block)，在不设置宽度的前提下独占一行，不满一行即留空白。开始和结尾自带换行，一行不能存在其他元素，即使设置了外边距。设置盒子模型与对齐方式有效。 元素举例：div、h1~h6、p、img、pre、ul、li。（pre标签类似于DTD中的CDATA，在标签内可以换行，直接写转义字符）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>块元素</title>
<style>
div{
background-color: lightblue;
width:400px;
height:300px;
/* 文本居中对齐 */
text-align:center;
}
</style>
</head>
<body>
<div>我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div</div>
<div>我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div</div>
</body>
</html>
1.2 内联（行内）元素
内联（行内）元素(inline)，内联元素开始和结尾没有换行，一行可以存在多个。并且宽度取决于内部的嵌套的内容（宽度由内容撑开，高度随字体大小而改变），设置盒子模型部分无效，设置对齐方式无效。 元素举例：a label span img
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>内联（行内）元素</title>
<style>
label{
background-color: deeppink;
width:400px;
height:300px;
/* 文本居中对齐 */
text-align:center;
}
</style>
</head>
<body>
<!--
-->
<label>我是label我是label我是label我是label我是label
我是label我是label我是label我是label我是label
我是label我是label我是label我是label我是label</label>
<label>我是label我是label我是label我是label我是label
我是label我是label我是label我是label我是label
我是label我是label我是label我是label我是label</label>
</body>
</html>
1.3 内联（行内）块元素
**内联（行内）元素(inline-block)，内联块元素，属于内联元素，但是具有块元素的所有特性。不自动换行、能够识别宽高、默认排列方式为从左到右。**元素举例：img。
1.4 空元素
**空元素（empty），内部不嵌套任何内容，一般用来设置页面的具体参数或者换行等格式。**元素举例：br hr meta。
1.5 使用display属性更改元素类型
若想使一个类型的元素出现其他类型元素的特性，可以在CSS中定义display。用法“display:元素类型"。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>display</title>
<style>
div{
background-color: lightblue;
width:400px;
height:300px;
/* 文本居中对齐 */
text-align:center;
}
label{
background-color: deeppink;
width:400px;
height:300px;
text-align:center;
}
</style>
</head>
<body>
<!--
display:元素类型
这里将块元素转换成了内联元素
-->
<div style="display:inline">我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div</div>
<hr>
<label style="display:block">我是label我是label我是label我是label我是label
我是label我是label我是label我是label我是label
我是label我是label我是label我是label我是label</label>
<div style="display:none">我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div</div>
</body>
</html>
2 盒子模型
CSS中将元素的四个边框默认隐藏，当我们显示这些边框时，发现这些元素就像一个一个的盒子从上到下排列在页面上。 CSS使用如下图的十四个属性定位一个元素的宽高、内外边距、边框的高度。（下图黑框的意义为元素的本身大小）
盒子边框，以及内外的空间位置，我们称之为盒子模型。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
/* 一些浏览器会自动对元素之间加边距，
加这个全选选择器可以将元素之间和元素内边距都去掉，
将所有盒子模型的参数都收归程序员掌控
*/
*{
margin:0;
padding:0;
}
div#container{
/* 显示元素边框
border:边框类型 粗细 颜色
类型:solid double dotted
*/
border:solid 2px red;
/*
页面整体居中，元素上下没有边距为0，
左右设置为auto意为一样等宽
为什么center标签不推荐使用了？
整个页面只要加一个center标签，
那么里面包括的所有元素都会居中
*/
margin:0 auto;
width:600px;
height:900px;
}
ul{
/* 去掉列表前面的点状徽记（ol也适用），
若想保存徽记使其到表格内显示，
设置外边距margin-left
*/
list-style-type: none;
}
h2{
/*margin-top:60px;
margin-left:30px;
margin-bottom:100px;
margin-right:50px;*/
/*
简便写法：
case1:四个参数
margin:上 右 下 左;
case2:三个参数
注意括号内表示相同的参数
margin:上 （右左） 下
case3:两个参数
margin:(上下) （右左）
case4:一个参数
margin:(上右下左)
*/
margin:60px 50px 100px 30px;
/*
padding依然遵循简略写法的原则，
border只能设置一次对四个元素起作用，
若要上下左右区别设置，需要分着设置
*/
padding-top:20px;
padding-left:100px;
padding-bottom:40px;
border-top:double 5px blue;
border-right:dotted 10px orangered;
border-bottom: dotted 13px #ff68e2;
border-left:double 1px olive;
}
ul{
border:solid 2px aqua;
}
li{
border:solid 2px purple;
}
p{
border:solid 2px orangered;
}
</style>
</head>
<body>
<div id="container">
<h2>我是二级标题</h2>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
<p>我是一个段落</p>
</div>
</body>
</html>
3 背景设置
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>背景设置</title>
<style>
ul{
/*当li设置为行内元素时，
徽记自动隐藏，这个属性无作用*/
list-style-type:none;
margin-top:100px;
}
li{
/*使li这个块级元素改为内联显示*/
display:inline;
}
body{
/* 设置背景图 */
background-image:url("image/background.gif");
/* 若不设置，背景图平铺满浏览器，
repeat-x:只允许背景图横向排列；
repeat-y:只允许背景图纵向排列；
no-repeat:背景图不排列不平铺，只显示一次 */
background-repeat:repeat-x;
background-color:#cccc99;
}
</style>
</head>
<body>
<ul>
<li><img src="image/1.jpg"></li>
<li><img src="image/2.jpg"></li>
<li><img src="image/3.jpg"></li>
<li><img src="image/4.jpg"></li>
</ul>
</body>
</html>
综合分辨率适配、图片阴影与元素颜色冲突等问题，尽量不要使用背景图作为背景，使用背景也尽量使用浅颜色的。
4 定位
position的默认值为static，一般不设置position属性时，会按照正常的文档流进行排列。
4.1 相对定位
元素根据它按这个元素原先所在位置外边距的左上角进行定位，定位之后元素依然保持原先的状态。若定位后元素需要偏移出原先的地方，需要使用top、right、bottom、left属性定位偏移量。定义一次，top与bottom只写一个，left与right只写一个。 元素偏移后，原来的位置依然被占用，块级元素依然占一行。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style>
div#container{
border:solid 2px black;
position:relative;
margin:0 auto;
width:600px;
height:500px;
}
div#sub1{
border:solid 2px red;
}
div#sub2{
border:solid 2px orange;
/*
相对定位:
*/
position: relative;
/* 向下偏移200 */
top:200px;
/* 向右偏移300 */
left:300px;
}
div#sub3{
border:solid 2px yellow;
top:300px;
left:400px;
}
div#sub4{
border:solid 2px green;
}
div#sub5{
border:solid 2px aqua;
top:200px;
left:300px;
}
div#sub6{
border:solid 2px blue;
}
</style>
</head>
<body>
<div id="container">
<div id="sub1">我是层1</div>
<div id="sub2">我是层2</div>
<div id="sub3">我是层3</div>
<div id="sub4">我是层4</div>
<div id="sub5">我是层5</div>
<div id="sub6">我是层6</div>
</div>
</body>
</html>
4.2 绝对定位
元素根据距离它最近的定位过的父元素的左上角padding开始的地方(即只从padding的左上角开始) 进行定位。需要使用top、right、bottom、left属性定位偏移量。定义一次，top与bottom只写一个，left与right只写一个。原先占满一行的块元素定位后元素不再占满一行，原先的位置被占用。
注意，如果不存在定位过的祖先元素，则根据body定位在浏览器的左上角（相当于position:fixed）。所以使用绝对定位必须存在一个定位过的参照物，不能让元素根据浏览器的左上角进行定位。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
div#container{
/*绝对定位的居中显示，需要先将上下左右都设置为0*/
border:solid 2px black;
position:absolute;
margin:0 auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
width:600px;
height:500px;
}
div#sub1{
border:solid 2px red;
}
div#sub2{
border:solid 2px orange;
}
div#sub3{
border:solid 2px yellow;
position: relative;
top:300px;
left:400px;
}
div#sub4{
border:solid 2px green;
}
div#sub5{
border:solid 2px aqua;
position:relative;
top:200px;
left:300px;
}
div#sub6{
border:solid 2px blue;
}
</style>
</head>
<body>
<div id="container">
<div id="sub1">我是层1</div>
<div id="sub2">我是层2</div>
<div id="sub3">我是层3</div>
<div id="sub4">我是层4</div>
<div id="sub5">我是层5</div>
<div id="sub6">我是层6</div>
</div>
</body>
</html>
5 浮动
在不设置宽度的情况下，默认块元素从左到右占满整个父元素（注意不是占满浏览器）的整个宽度空间。 如果设置了浮动，则元素会向浮动方向不断缩小宽度，直到达到内部嵌套的内容的宽度为止，并且元素漂浮在页面上（想象为原来一样高的元素突然飘起来了，但是当其他元素也飘起来，他们还是会在空中一样高的）。
下面未浮动的元素会占用浮动元素原来的空间（一般是背景被覆盖掉，文字环绕显示），浮动也可以理解为word中的文字环绕显示。
无论内联还是块元素，设置为浮动时都变为块元素，且元素设置浮动后，不在整个文档流的管辖范围，那么它之前存在在父元素内的高度就随着浮动不复存在了，此时若父元素没有设置高度，会默认自己标签中没有任何内容。父元素不能被撑开，造成高度塌陷，设置的背景无法显示。
-
解决方法：
-
对父元素设置高度
-
对父元素设置 overflow:hidden清除浮动
-
把父元素也设置为浮动
-
在父元素结束标签前加上
清除浮动的影响。
-
-
未设置浮动时
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
div#container{
width:900px;
height:600px;
/*为什么要在div父标签上加与背景同色的边框？
有些浏览器在标签内部的标签设置margin时
需要border指定边界
否则margin失效，但为了让边框可以隐藏不显示
设置同色*/
margin:0 auto;
background-color:yellow;
border:solid 1px yellow;
}
div#box1{
background-color: pink;
margin-top:30px;
height:100px;
}
div#box2{
background-color:hotpink;
margin-top: 30px;
height:120px;
}
div#box3{
background-color: deeppink;
margin-top: 30px;
height:140px;
}
p{
background-color: orangered;
margin-top: 30px;
}
</style>
</head>
<body>
<div id="container">
<div id="box1">我是div1</div>
<div id="box2">我是div2</div>
<div id="box3">我是div3</div>
<p>我是段落我是段落我是段落我是段落我是段落
我是段落我是段落我是段落我是段落我是段落我是段落我是段落
我是段落我是段落我是段落我是段落我是段落我是段落我是段落
我是段落我是段落我是段落我是段落我是段落我是段落</p>
</div>
</body>
</html>
- 将box1设为左浮动，将box2设为右浮动，其余不变，可以看到此时box1、box2分别浮动到了父元素的左右两端，box3占用了第一行原来box1的位置。
div#box1{
background-color: pink;
margin-top:30px;
height:100px;
float: left;
}
div#box2{
background-color:hotpink;
margin-top: 30px;
height:120px;
float: right;
}
- 将box3设为左浮动之后，内联元素p来占用box3的空间。
div#box3{
background-color: deeppink;
margin-top: 30px;
height:140px;
float:left;
}
-
行内元素p此时会因为前三个元素都浮动而被动挤占了原来box3的位置，若要清除浮动对p元素的影响，可以使用clear属性，注意，在这里消除的影响只是消除了在p看来其它元素对它的浮动影响，与其它元素、父元素并无关系。
-
清除p元素左侧的浮动影响
p{
background-color: orangered;
margin-top: 30px;
clear: left;
}
- 清除p元素右侧的浮动影响
p{
background-color: orangered;
margin-top: 30px;
clear: right;
}
- 清除p元素两侧的浮动影响
p{
background-color: orangered;
margin-top: 30px;
clear: both;
}
6 布局
在html4.01中通过div搭配css可以设置页面的简单布局，从html5开始，添加很多布局元素（布局元素全部都是html5新特性），来取代div对页面进行布局。这些元素配合搜索引擎可以使页面更加条理，搜索引擎找寻网站信息更加快速便捷。
css/layout.css
div#container{
margin:0 auto;
width:600px;
height:800px;
border:solid 1px white;
/*
CSS3新特性
阴影:给元素添加阴影
*/
box-shadow:30px 30px 30px gray;
/*
CSS3新特性
border-width:边框宽度
border-style:边框类型
border-color:边框颜色
用来取代CSS2中的border属性
但是注意以上三句必须全部书写，否则部分浏览器无效
*/
}
header{
width:600px;
height:100px;
background-color: hotpink;
/*
CSS3新特性
圆形边框数字越大边框越圆
*/
border-radius:25px;
}
aside{
width:150px;
height:600px;
background-color:gray;
float:left;
}
section{
width:450px;
height:600px;
background-color:silver;
float:left;
}
footer{
width:600px;
height:100px;
clear:both;
background-color: hotpink;
}
header ul,aside ul{
list-style-type: none;
}
header ul li{
float: left;
padding-right:40px;
}
header ul li a{
text-decoration: none;
font-weight: bolder;
color:white;
}
aside ul li{
padding-top:80px;
font-family:DFPWaWaW5;
}
aside ul li a{
color:black;
font-weight:bolder;
font-size:17px;
text-decoration: none;
}
section header{
width:450px;
height:50px;
background-color:gray;
}
section footer{
width:450px;
height:50px;
background-color:gray;
}
section p{
width:450px;
height:200px;
background-color:white;
}
section figure img{
width:60px;
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>布局</title>
<link rel="stylesheet"
href="css/layout.css">
</head>
<body>
<div id="container">
<!--
header:表示页面，用来放置logo 标题
搜索框等页面首部元素
-->
<header>
我是网页的标题，LOGO，等信息
<!--
nav:一般用来放置页面首部的菜单栏或者
导航栏等，内部多嵌套ul列表
-->
<nav>
<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>
</ul>
</nav>
</header>
<!--
aside:用来放置侧边栏信息，一般在页面的左侧或者右侧
-->
<aside>
<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>
</ul>
</aside>
<!--
section:一般用来放置正文
-->
<section>
我是正文的内容，内部多嵌套一片完整的文章
<!--
aricle:表示一篇完整文章的开始，
所谓完整文章表示存在页眉页脚正文三部分
-->
<article>
<header>我是正文页眉</header>
<p>我是正文内容</p>
<footer>我是正文页脚</footer>
</article>
<!--
除了正文还可以添加轮播 多媒体相册等
-->
<figure>
<figcaption>我是轮播或者多媒体相册的标题</figcaption>
<img src="image/1.jpg" />
<img src="image/2.jpg" />
<img src="image/3.jpg" />
</figure>
</section>
<!--
footer:页脚，一般放置地址信息，广告，联系方式
等等
-->
<footer>
我是页脚
<address>一般放置地址，联系方式，加盟信息，
法律规定等等</address>
</footer>
</div>
</body>
</html>
扫一扫
1524
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
