笔记及注意事项已经在代码片段中用注释已经标明
1-盒模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒模型</title>
<style>
div {
width: 100px;
height: 100px;
border: 50px dotted purple;
background-color: gold;
/* 设置内边距100像素,内边距是边框和内容区域的距离 */
padding: 100px;
margin: 100px;
}
</style>
</head>
<body>
<div>
我是内容
</div>
</body>
</html>2-边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>边框</title>
<style>
div {
width: 200px;
height: 200px;
/* 边框样式 */
/* border-style: dashed; 单虚线 */
/* border-style: double; 双实线 */
/* border-style: dotted; 点状线 */
border-style: solid; /* 实线 */
border-width: 10px; /* 边框宽度 */
border-color: purple; /* 边框颜色 */
/* 设置border头部颜色 */
border-top-color: green;
/* 设置右边框的颜色 */
border-right-color: blue;
/* 设置下边框的颜色 */
border-bottom-color: blue;
background-color: #ccd;
/* 统一设置,边框的宽度,边框的样式,边框的颜色 */
border: 1px double green;
}
</style>
</head>
<body>
<div></div>
</body>
</html>3-边框2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>边框2</title>
<style>
div {
width: 400px;
height: 400px;
/* 推荐大家使用这种合写的方式,效率高,简介,维护也方便 */
border: 20px solid purple;
/* 当边框确实有不相同的情况的时候,可以使用 */
/* border-style: dotted;
border-color: brown;
border-width: 30px; */
/* 不建议:控制到具体的边框,效率低,另外兼容性稍差 */
/* border-top-color: gold;
border-bottom-width: 50px;
border-right-style: dashed; */
/* 设置一个参数的时侯,所有的边框都享受这个设置 */
/* border-color:red; */
/* 第一个参数,上下,第二个参数:左右 */
/* border-color: blue green; */
/* 上黄,下绿,左右黑 */
/* border-color: yellow black green; */
/* 四个参数,上右下左 */
}
table {
border: 2px solid pink;
border-collapse: collapse; /*让边框折叠*/
}
input {
outline-style: none; /* 去掉轮廓 链接有虚线 和 文本框有蓝色边框*/
}
</style>
</head>
<body>
<!-- <div>
我是DIV
</div> -->
<input type="text" name="" id="">
<table border="2">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
</tr>
</table>
</body>
</html>4-内边距Padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>内边距</title>
<style>
div {
width: 300px;
height: 300px;
border: 2px solid gold;
background-color: #caa;
/* 将内边距设置为上下左右均为20px */
/* padding: 20px; */
/* 设置上内边距 */
/* padding-top: 10px; */
/* 设置右内边距 */
/* padding-right: 200px; */
/* 第一个参数上下 第二个参数左右 */
/* padding: 20px 100px; */
/*三个参数的时候: 上 左右 下 */
/* padding: 20px 100px 40px; */
/* 四个参数的时候分别是 :上右下左 顺时针 */
}
</style>
</head>
<body>
<div>
内容
</div>
</body>
</html>5.外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>外边距</title>
<style>
div {
width: 100px;
height: 100px;
background-color: #cda;
border: 1px solid peru;
}
#a1 {
/* 一个参数:上下左右分别是100px */
/* margin: 100px; */
/* 上下 左右 参数 */
/* margin: 10px 100px; */
/* 外边距让盒子居中,水平方向 上下边距为0 左右自动计算居中*/
margin: 0 auto;
/* 网站: 一般都会,上来把内边距和外边距都设置为0 */
/* 设置内外边距为0 */
/* margin: 0; padding: 0; */
}
</style>
</head>
<body>
<div id="a1"></div>
<div id="a2"></div>
</body>
</html>6-外边距和并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>外边距合并</title>
<style>
div {
border: 1px dashed purple;
height: 200px;
width: 200px;
background-color: #acd;
}
#a1 {
margin: 20px;
}
#a2 {
margin-top: 30px;
}
</style>
</head>
<body>
<div id="a1"></div>
<div id="a2"></div>
<!-- 注意: 行内元素 关于padding 和 margin 问题 -->
<!-- 行内元素不要给上下的margin和padding -->
<!-- 上下margin和padding会被忽略 -->
<!-- 左右margin 和 padding 会起作用 -->
</body>
</html>7-浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动</title>
<style>
#f1 {
border: 1px solid green;
width: 100px;
height: 100px;
/* 让f1对应的标签进行浮动 */
/* float:right; */
float: left;
background-color: #ccddaa;
}
#f2 {
background-color: #adf;
border: 1px solid #3ca;
width: 200px;
height: 200px;
float: left;
}
</style>
</head>
<body>
<div id="f1">浮动案例</div>
<div id="f2">浮动案例</div>
<p>
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</p>
<!-- 浮动的特性 -->
<!-- 1.浮动脱离标准流,不占位置,但会影响标准流(会影响文字排版,不影响块级元素),浮动只有左右浮动 -->
<!-- 2.浮动的元素A排列位置,跟上一个元素(块级)有关系.如果上一个元素有浮动,则A元素顶部会和上一个
元素的顶部对齐;如果上一个元素是标准流,则A元素的顶部会和上一个元素的底部对齐.
-->
<!-- 3.一个父盒子里面的子盒子,如果其中一个子级有浮动的,则其他子级都需要浮动,这样才能一行对齐显示 -->
<!-- 4.浮动根据元素书写的位置来显示相应的浮动 -->
<!-- 5.元素添加浮动后,如果没有设置宽高的话,元素会具有行内块元素的特性.元素的大小完全取决于定义的大小
或者默认的内容多少,也就是具有了包裹性.
-->
<!-- 6.浮动具有破坏性,元素浮动后,破坏原来的正常流布局,造成内容的塌陷. -->
</body>
</html>8-高度塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>高度塌陷</title>
<style>
div {
border: 1px solid purple;
}
.child {
background-color: #cda;
width: 100px;
height: 100px;
/* 会造成父容器的高度塌陷 */
float: left;
}
.parent {
/* 解决高度塌陷的问题 */
overflow: hidden; /* 使父元素具有包裹性 */
}
.d3 {
height: 300px;
}
p {
border: 1px solid saddlebrown;
width: 150px;
height: 150px;
/* 设置超出的部分隐藏掉 */
/* overflow: hidde|n; */
/* 默认显示 */
/* overflow: visible; */
/* 内容超出了则出席那滚动条 */
/* overflow: auto; */
/* 不管内容是否有超出,都会有滚动条 */
overflow: scroll;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child d3">3</div>
</div>
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
<!-- overflow属性的常用值: -->
<!-- visible : 内容不会修剪,会呈现在元素框之外,(默认值) -->
<!-- hidden: 溢出内容会被修剪,并且被修剪的内容是不可见的 -->
<!-- auto: 在需要时产生滚动条,即自适应所要显示的内容 -->
<!-- scroll: 溢出内容被修剪,且浏览器会始终显示滚动条 -->
</body>
</html>9-清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>清除浮动</title>
<style>
div {
border: 1px solid black;
}
.fl {
background-color: #cda;
width: 200px;
height: 300px;
float: left;
}
.fr {
background-color: #3c0;
height: 500px;
width: 300px;
float: right;
}
.footer {
/* 清除左侧浮动 */
/* clear: right; */
/* 清除右侧浮动 */
/* clear: left; */
/* 清除两侧浮动 */
clear: both;
}
</style>
</head>
<body>
<div class="fl">fl</div>
<div class="fr">fr</div>
<div class="footer">底部</div>
</body>
</html>10-布局案例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>案例布局1</title>
<style>
body,div,p {
padding: 0;
margin: 0;
}
div {
border: 1px solid lawngreen;
}
.top-nav {
height: 100px;
width: 960px;
margin: 0 auto; /*块元素居中*/
}
.leftbar {
float: left;
width: 200px;
height: 300px;
}
.content {
float: left;
width: 756px;
height: 500px;
}
.mian {
width: 960px;
margin: 0 auto;
/* 将左侧和中间的div都包裹起来 */
overflow: hidden;
}
.foot {
margin: 0 auto;
width: 960px;
}
</style>
</head>
<body>
<div class="top-nav">头部区域</div>
<div class="mian">
<div class="leftbar">左侧区域</div>
<div class="content">中间区域</div>
</div>
<div class="foot">底部区域</div>
</body>
</html>
11-布局案例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>布局案例2</title>
<style>
body, div {
margin: 0;
padding: 0;
}
div {
border: 1px solid saddlebrown;
}
.head {
height: 100px;
background-color: #cd0;
}
.left {
float: left;
width: 200px; /*实际占用202像素,有两个边框*/
background-color: #09c;
height: 500px;
}
.right {
margin-left: 203px;
height: 400px;
background-color: #6a0;
}
.foot {
clear: left;
}
</style>
</head>
<body>
<div class="head">头部区域</div>
<div class="left">左侧区域</div>
<div class="right">中部区域</div>
<div class="foot">底部区域</div>
</body>
</html>
12-三列布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>三列布局</title>
</head>
<style>
body, div {
padding: 0;
margin: 0;
}
div {
border: 1px solid saddlebrown;
}
.head {
height: 100px;
background-color: #aacc00;
}
.left {
float: left;
width: 100px;
height: 300px;
}
.right {
float: right;
width: 100px;
height: 500px;
}
.main {
margin: 0 105px;
}
.foot {
clear: both;
}
</style>
<body>
<div class="head">顶部</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
<div class="main">中间</div>
<div class="foot">底部</div>
</body>
</html>
13-三列居中布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>三列居中布局</title>
</head>
<style>
body,
div {
padding: 0;
margin: 0;
}
div {
border: 1px solid saddlebrown;
}
.head,
.foot,
.center {
margin: 0 auto;
width: 960px;
}
.left,
.right,
.main {
float: left;
}
.center {
overflow: hidden;
}
.left, .right {
width: 100px;
height: 400px;
}
.main {
width: 750px;
margin: 0 2px;
height: 400px;
}
</style>
<body>
<div class="head">顶部</div>
<div class="center">
<div class="left">左侧</div>
<div class="main">中间</div>
<div class="right">右侧</div>
</div>
<div class="foot">底部</div>
</body>
</html>
14-闭合浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>闭合浮动</title>
<style>
body, div {
padding: 0;
margin: 0;
}
div {
border: 1px solid red;
}
.f1 {
float: right;
height: 100px;
width: 100px;
background-color: aquamarine;
}
/* 布局模板:以下三个是为了兼容不同版本的浮动闭合的代码 */
.clearfix::after, .clearfix::before {
content: " "; /* 设置此属性是为了兼容opera 浏览的BUG */
display:table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1; /*兼容IE6,7*/
}
/* 布局模板:以上三个是为了兼容不同版本的浮动闭合的代码 */
</style>
</head>
<body>
<div class="clearfix">
<div class="f1">浮动的DIV</div>
呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃
</div>
</body>
</html>15-定位方式
<!DOCTYPE html>
<html lang="en">
<!-- 元素的定位方式position -->
<!-- static: 自动定位(默认定位方式) -->
<!-- relative:相对定位,相对于其原文档流的位置进行定位 -->
<!-- absolute: 绝对定位,相对于其上一个已经定位的父元素进行定位 -->
<!-- fixed: 固定定位,相对于浏览器窗口进行定位 -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>定位方式</title>
<style>
body,div {
padding: 0;
margin: 0;
}
div {
border: 1px solid royalblue;
}
.rl {
width: 200px;
height: 200px;
/* 设置了相对定位后,标签的CSS就可以设置left,right,top,bottom的CSS属性 */
position: relative;
/* 相对于元素原来的位置,左移动10像素 */
/* left:10px; */
/* 相对于元素正常文档流的位置的顶部20像素 */
/* top: 20px; */
/* right: 10px; 向左侧移动了10个像素 */
/* bottom:10px; 向上部移动了10个像素 */
}
/* 绝对定位 */
.ab {
/* 绝对定位是按照具有BFC的父容器来相对定位的 */
position: absolute;
left: 100px;
top: 20px;
height: 100px;
width: 200px;
background-color: #cda;
}
.parent {
height: 400px;
width: 500px;
background-color: #ca0;
/* 如果父容器设置了relative后,那么它的子元素如果设置了absolute定位，那么
它的子元素就按照父容器进行绝对定位。
子绝对定位，（要根据谁进行绝对定位，那就把谁设置为relative定位）
*/
position: relative;
}
.f {
/* fixed: 固定定位,相对于浏览器窗口进行定位 */
position: fixed;
bottom: 0;
right: 0;
height: 100px;
width: 100px;
background-color: #ca0;
}
</style>
</head>
<body>
<div class="rl"> 相对定位 </div>
<div class="parent">
父容器
<div class="ab"> 绝对定位 </div>
</div>
<div class="f">
绝对定位
</div>
</body>
<!-- 相对定位只会改变位置，不会影响文档流的布局 -->
<!-- 绝对定位的特性 -->
<!-- 包裹性：根据实际内容来撑开绝对定位元素的大小 -->
<!-- 破坏性：导致父容器塌陷：由于脱离了文档流，导致父容器塌陷 -->
<!-- 悬浮性：会漂浮起来，在原始流的元素之上 -->
</html>16-css的zindex属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>zindex属性</title>
<style>
.ab {
position: absolute;
height: 200px;
width: 200px;
border: 1px solid magenta;
}
.d1 {
/* 中间层 */
z-index: 100;
left: 100px;
top: 100px;
background-color: #309;
}
.d2 {
/* 最高层 */
z-index: 200;
background-color: #732;
}
.d3 {
/* 最底层 */
z-index: 4;
left: 20px;
top: -30px;
background-color: #452;
}
</style>
</head>
<body>
<div class="ab d1"></div>
<div class="ab d2"></div>
<div class="ab d3"></div>
</body>
</html>17-绝对定位的应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>全屏</title>
<style>
body, div {
padding: 0;
margin: 0;
}
/* .full {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom:0;
background-color: #ccddaa;
} */
.aside {
/* 左侧 */
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 200px;
background-color: #cda;
}
.main {
margin-left: 204px;
border: 1px solid red;
height: 500px;
}
</style>
</head>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
</html>18-新浪综合练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>新浪综合练习</title>
<style>
body,
div,
ul,
li {
padding: 0;
margin: 0;
}
body {
font:12px/20px "Microsoft YaHei",SimSun;
}
a {
text-decoration: none; /* 去掉超链接的下划线 */
color: #4c4c4c;
}
/* 去掉列表的默认样式 */
ul, li {
list-style: none;
}
/* 设置顶部导航栏的通栏盒子 */
.tn {
border-top: 4px solid #ff8500;
border-bottom: 1px solid #edeef0;
height: 42px;
line-height: 42px;
}
/* 设置版心盒子居中对齐 */
.tn-main {
margin: 0 auto;
width: 960px;
}
/* 设置左侧的网站导航 */
.tn-nav {
float: left;
}
.tn-nav li {
float: left;
padding: 0 15px;
}
/* 当鼠标移动上来的时候，背景色变灰色，字体颜色变黄色 */
.tn-nav li:hover, .tn-nav li:hover a {
background-color: #edeef0;
color: #ff8500; /*超链接不继承颜色，所以要.tn-nav li:hover a设置 */
}
/* 设置右侧的用户导航 */
.tn-person {
float: right;
}
.tn-person > li {
float: left;
padding: 0 15px;
}
.tn-person > li:hover, .tn-person > li > a:hover {
background-color: #edeef0;
color: #ff8500; /*超链接不继承颜色，所以要.tn-nav li:hover a设置 */
}
/* 微博弹出层处理设置 */
.weibo-box {
display: none; /*隐藏层*/
/* 设置弹出的层为绝对定位,防止对默认文档流进行干扰。*/
position: absolute;
}
.weibo:hover .weibo-box {
display: block;
}
.weibo-box li {
border: 1px solid #ff8500;
border-top: none; /* 去掉上边框 */
width: 104px;
height: 31px;
line-height: 31px;
margin-left: -15px;
padding: 0 15px;
}
.weibo-box li:hover, .weibo-box li a:hover {
background-color: #edeef0;
color: #ff8500; /*超链接不继承颜色，所以要.tn-nav li:hover a设置 */
}
</style>
</head>
<body>
<div class="tn">
<div class="tn-main">
<!-- 左侧的网站导航 -->
<ul class="tn-nav">
<li><a href="#">新浪首页</a></li>
<li><a href="#">手机新浪网</a></li>
<li><a href="#">移动客户端</a></li>
</ul>
<!-- 右侧的网站用户导航 -->
<ul class="tn-person">
<li><a href="#">登陆</a></li>
<li class="weibo">
<a href="#">微博</a>
<ul class="weibo-box">
<li><a href="#">私信</a></li>
<li><a href="#">评论</a></li>
<li><a href="#">@我</a></li>
</ul>
</li>
<li ><a href="#">博客</a></li>
<li><a href="#">邮箱</a></li>
<li><a href="#">网站导航</a></li>
</ul>
</div>
</div>
</body>
</html>
常用代码:
#Note{
border-style: dashed/double/dotted/solid; /* 设置边框样式 单虚线/双实线/点状线/单实线 */
border-width: 10px; /* 边框宽度 */
border-color: purple; /* 边框颜色 */
border-top-color: green; /* 设置边框头部样式,物以类聚以此类推 top/bottom/left/right */
border: 1px double green; /* 统一设置,边框的宽度,边框的样式,边框的颜色 */
border-collapse: collapse; /*让边框折叠*/
outline-style: none; /* 去掉轮廓 链接有虚线 和 文本框有蓝色边框*/
padding: 20px; /* 将内边距设置为上下左右均为20px 以此类推 top/bottom/left/right */
margin: 100px; /* 上下左右分别是100px 以此类推 top/bottom/left/right*/
margin: 0 auto; /* 外边距让盒子居中,水平方向 上下边距为0 左右自动计算居中*/
margin: 0; padding: 0; /* 设置内外边距为0 默认网站起初都会设置这个选项*/
float:right/left/none; /*向右/向左/不/浮动*/
overflow: hidden; /* 把溢出的隐藏掉 使父元素具有包裹性 */
overflow: visible/hidden/auto/scroll; /*内容不会被修剪/溢出部分内容会被修剪/在需要时产生滚动条/终有滚动条*/
clear: left/right/both; /* 清除左侧/右侧/两侧/浮动 */
position: static/relative/absolute/fixed; /*自动定位/相对定位/绝对定位/固定定位*/
z-index: 100; /* 层次划分 */
list-style: none; /* 去掉列表默认样式 */
display: none; /*隐藏层*/
}上一篇: CSS的颜色和文本-02