1.什么是css？
1.1 css快速入门
style
基本入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 规范：可以在<style>标签里写css代码,每一个声明最好用分号结尾
语法：
选择器{
声明1;
声明2;
声明3;
}
-->
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>我的第一个程序</h1>
</body>
</html>
建议使用下面这种规范
css优势：
- 内容和表现分离
- 网页结构表现统一，可以实现复用
- 样式十分丰富
- 建议使用独立于html的css文件
- 利用SEO，容易被搜索引擎收录
1.2 css的三种导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内部样式-->
<style>
h1{
color: green;
}
</style>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--优先级:就近原则，最近的是行内样式，其次是外部样式，最后是内部样式-->
<!--行内样式表,在标签属性中，编写一个style属性，编写样式即可-->
<h1 style="color: red">我是标题</h1>
</body>
</html>
拓展:外部样式两种写法
-
链接式
html
<!--外部样式-->
<link rel="stylesheet" href="css/style.css">
-
导入式
@import是css2.1特有的
<!--导入式：先导入后渲染-->
<style>
@import url("css/style.css");
</style>
2.选择器
作用：选择页面上的某一个或某一类元素
2.1 基本选择器
-
标签选择器：选择一类标签 标签{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*标签选择器会选择到这个页面上的所有这个标签的元素*/ h1 { color: red; background: cadetblue;/*背景*/ border-radius: 24px;/*背景的圆角边框*/ } p{ font-size: 80px; } </style> </head> <body> <h1>学习java</h1> <h1>学习java</h1> <p>学 了 个 寂 寞</p> </body> </html> -
类选择器 class：选中所有class属性一致的标签，跨标签 .类名{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 类选择器的格式 .class的名称{ 声明1; 声明2; ... } 好处：可以多个标签归类为同一个class，可以复用 */ .zy1{ color: cadetblue; } .zy2{ color: green; } </style> </head> <body> <h1 class="zy1">标题1</h1> <h1 class="zy2">标题2</h1> <h1 class="zy1">标题3</h1> <p class="zy2">P标签</p> </body> </html> -
Id选择器：全局唯一 #id名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*css注释快捷键：ctrl+shift+/*/
/*id选择器：id必须保证全局唯一
优先级:固定的，不遵循就近原则
id选择器>class选择器>标签选择器
id选择器格式：
#id名称{
...
}
*/
#zy1{
color: cadetblue;
}
.zy2{
color: green;
}
h1{
color: red;
}
</style>
</head>
<body>
<h1 id="zy1" class="zy2">标题1</h1>
<h1 class="zy2">标题2</h1>
<h1>标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>
优先级：固定的，不遵循就近原则
id选择器>class选择器>标签选择器
2.2 层次选择器
示例
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li id="haha"><p>p4</p></li>
<li><p>p5</p></li>
<li><p>p6</p></li>
</ul>
<p class="active">p7</p>
<p>p8</p>
</body>
-
后代选择器：在某个元素的后面 祖爷爷 爷爷 爸爸 你
/*后代选择器*/ body p{ background: red; } -
子选择器，一代，儿子
/*子选择器*/ body>p{ background: cadetblue; } -
相邻兄弟选择器 同辈，而且必须是它下边的那个
/* 弟弟（相邻兄弟）选择器*/ .active+p{ background: brown; } -
通用选择器 当前选中元素的向下所有同辈元素
/*通用兄弟选择器*/
.active~p{
background: yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*!* 选中p4下边的一个同辈元素 相邻兄弟选择器*!*/
/* #haha+li{*/
/* background: green;*/
/* }*/
/*!* 选中p4下面的所有同辈元素 通用兄弟选择器*!*/
/* #haha~li{*/
/* background: yellow;*/
/* }*/
/*!* 选中ul种所有元素 第一种方法：后代选择器*!*/
/* ul li{*/
/* background: red;*/
/* }*/
/* 选中ul中所有元素 第二种方法：子选择器*/
ul>li{
background: gainsboro;
}
</style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li id="haha"><p>p4</p></li>
<li><p>p5</p></li>
<li><p>p6</p></li>
</ul>
<p class="active">p7</p>
<p>p8</p>
</body>
</html>
总结：后代空格，子代>，相邻兄弟+，通用兄弟~
2.3 结构伪类选择器
所有带:(冒号)的就是伪类
示例
<body>
<a href="">123</a>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
<!-- 避免使用class和id选择器-->
<style>
/*如果有多个ul的话，每个ul的元素都会被被伪类选择器选择*/
/*ul的第一个子元素*/
ul li:first-child{
background: gainsboro;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: red;
}
/*选中p1:定位到父级元素，选中当前父级元素的第一个子元素p1
并且是当前元素才生效，详见后边有个加了一行h1的例子*/
p:nth-child(1){
background: blue;
}
/* 选中p2:定位到父级元素，选中当前父级元素body的第二个子元素p2*/
p:nth-child(2){
background: cadetblue;
}
/* 选中li2*/
li:nth-child(2){
background: deeppink;
}
</style>
在body标签第一行前边加个代码
<body><a href="">123</a></body>
刚开始123是这样的
加了个动作伪类hover就变了
/*给a标签加一个小特效*/
a:hover{
background: yellow;
}
↑ 看见没有 鼠标晃动到123上的时候 背景变黄了 这是一个动作伪类
示例2 如果是在p1前边加了一行h1呢，如何选中p1
<body>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
很简单，选p标签父级元素的第二个元素即可。
p:nth-child(2){
background: blue;
}
还可以用nth-of-type,例如
/*选择父元素body的第一个类型为p的子元素*/
p:nth-of-type(1){
background: yellow;
}
2.4 属性选择器（常用）
示例
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">1</a>
<!-- target="_blank" 在新页面打开 title属性是悬浮在2上会显示的字-->
<a href="http://blog.kuangstudy.com" class="links item active" target="_blank" title="test">2</a>
<a href="images/123.html" class="links item">3</a>
<a href="images/123.png" class="links item">4</a>
<a href="images/123.jpg" class="links item">5</a>
<a href="abc" class="links item">6</a>
<a href="/a.pdf" class="links item">7</a>
<a href="/abc.pdf" class="links item">8</a>
<a href="abc.doc" class="links item">9</a>
<a href="abcd.doc" class="links item last">10</a>
</p>
</body>
<style>
/*后代选择器*/
.demo a{
float: left; /*float是浮动*/
display: block; /*display为none就没了，不显示了，block为块级元素*/
height: 50px;
width: 50px;
border-radius: 10px;
background: blue;
text-align: center; /*对齐方式*/
color: gainsboro;
text-decoration: none; /*取消下划线*/
margin-right: 5px; /*每个元素往右偏移五个像素，使每个框框之间有5px的间距*/
font: bold 20px/50px Arial; /*粗体*/
}
</style>
/*选中存在id属性的元素 a[]{}
a标签带有id属性的使之背景变为黄色*/
a[id]{
background: yellow;
}
下边代码具有同样的效果
/*选中id为first的属性，背景变为黄色*/
a[id=first]{
background: yellow;
}
/*选中class中有links的元素*/
a[class*="links"]{
background: yellow;
}
/*选中href中以http开头的元素*/
a[href^=http]{
background: yellow;
}
/*href以pdf结尾的元素变成黄色*/
a[href$=pdf]{
background: yellow;
}
/*以doc结尾*/
a[href$=doc]{
background: yellow;
}
/*以png结尾*/
a[href$=png]{
background: yellow;
}
总结：
= 绝对等于
*= 包含这个元素
^= 以…开头
$= 以…结尾
2.5 伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
| 选择符 | 简介 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
注意：
-
before和after创建一个子元素，这个子元素属于行内元素。
-
新创建的这个元素在文档树中是找不到的，所以我们称为伪元素。
-
语法：element::before{}
-
before和after必须有content属性
-
before在父元素内容的前面创建元素，after在父元素内容的后面插入元素。
-
伪元素选择器和标签选择器一样，权重为1
在新建html文件夹中输入vh-----tab/enter 即可设置成功
<!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>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
// div::before权重是2，div是标签选择器权重为1，::before伪元素选择器权重为1， div::before合起来就是2
div::before {
/* 这个content是必须要写的 */
content: '我';
}
div::after {
content: '小猪佩奇';
}
</style>
</head>
<body>
<div>是</div>
</body>
</html>
before和after都是盒子，这个盒子是行内元素，不可以直接设置大小。
比如：
div::before {
/* 这个content是必须要写的 */
content: '我';
width ： 30px;
height: 40px;
background-color: purple;
}
div::before {
/* 这个content是必须要写的 */
content: '我';
display: inline-block; //设置成既是行内元素也是块元素，可以设置大小。
width: 30px;
height: 40px;
background-color: purple;
}
3.美化网页元素
3.1 为什么要美化网页
-
有效传递页面信息
-
美化网页，吸引用户
-
凸显页面主题
-
提高用户体验
3.2 字体样式
span标签：重点要突出的字，使用span套起来
<!-- font-family:字体
font-size:字体大小
font-weight:字体粗细
color:字体颜色
-->
<style>
body{
font-family:"Arial Black",楷体;
font-size: 50px;
color: brown;
}
.p1{
font-weight: bold;
}
p{
font: oblique lighter 12px 楷体 ;
/*斜体，更细，字体大小，字体*/
}
</style>
3.3 文本样式
-
颜色 color rgb rgba
-
文本对齐方式 text-align=center 水平居中
-
首行缩进 text-indent:2em
-
行高 line-height 单行文字上下居中 line-height=height
-
装饰 text-decoration
-
文本图片水平对齐 vertical-align:middle
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 颜色： 单词 RGB red green blue 0~F十六进制 RGBA A是透明度:0~1 text-aligh:排版 text-indent: 2em; 段落首行缩进2个字母 行高和块的高度一致就可以上下居中 例如： height: 300px; /*块高*/ line-height: 300px; /*行高*/ --> <style> h1{ color: rgba(0,255,255,0.7); text-align: right; } .p1{ text-indent: 2em; } .p3{ background: blueviolet; height: 300px; /*块高*/ line-height: 300px; /*行高*/ } /*下划线*/ .l1{ text-decoration: underline; } /*中划线*/ .l2{ text-decoration: line-through; } /*上划线*/ .l3{ text-decoration: overline; } /*水平对齐 参照物 a,b*/ img,span{ vertical-align: middle; } </style> </head> <body> <p class="l1">123456</p> <p class="l2">124578</p> <p class="l3">456779</p> <h1>故事介绍</h1> <p class="p1">平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。</p> <p>在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。</p> <p class="p3">When I wake up in the morning， You are all I see; When I think about you， And how happy you make me。 You're everything I wanted; You're everything I need; I look at you and know; That you are all to me。 Barry Fitzpatrick</p> <p> <img src="images/a.jpg" alt=""> <span>dasfghjhgfdsa</span> </p> </body> </html>
3.4 阴影
/*text-shadow:阴影颜色 水平（向右）偏移 垂直（向下）偏移 阴影半径*/
#price{
text-shadow: #31a7f5 10px -10px 10px;
}
3.5 超链接伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*默认的颜色*/
a{
text-decoration: none;
color: #000000;
}
/*(重点)鼠标悬浮的颜色*/
a:hover{
color: orange;
font-size: 50px;
}
/*鼠标按住未释放的状态*/
a:active{
color: green;
}
a:visited{
color: red;
}
/*text-shadow:阴影颜色 水平（向右）偏移 垂直（向下）偏移 阴影半径*/
#price{
text-shadow: #31a7f5 10px -10px 10px;
}
</style>
</head>
<body>
<a href="#">
<img src="images/a.jpg" alt="">
</a>
<p>
<a href="#">码出高效：Java开发手册</a>
</p>
<p>
<a href="">作者：doll</a>
</p>
<p id="price">
￥99
</p>
</body>
</html>
（放的是taylor的照片）
3.6 列表
示例
<!DOCTYPE html>
<html lang="en">
<head lang="en">
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="nav">
<h2 class="title">全部商品分类</h2>
<ul>
<li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a></li>
<li><a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a></li>
<li><a href="#">电脑</a> <a href="#">办公</a></li>
<li><a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a></li>
<li><a href="#">服饰鞋帽</a> <a href="#">个护化妆</a></li>
<li><a href="#">礼品箱包</a> <a href="#">钟表</a> <a href="#">珠宝</a></li>
<li><a href="#">食品饮料</a> <a href="#">保健食品</a></li>
<li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a></li>
</ul>
</div>
</body>
</html>
列表去掉圆点，缩进1字母，高30
/*ul li*/
/*
list-style：
none 去掉圆点
circle 空心圆
square 正方形
decimal 数字
*/
/*ul{*/
/* background: rgb(213, 207, 206);*/
/*}*/
ul li{
list-style: none;
text-indent: 1em;
height: 30px;
}
完整的css
#nav{
background: rgb(213, 207, 206);
width: 255px; /*在页面上按f12，然后找到这个声明，然后用滚轮调到合适的大小（方便）*/
}
.title{
font-size: 18px;
font-weight: bold; /*字体*/
background: red;
border-radius: 10px; /*边角*/
line-height: 35px; /*行高*/
text-indent: 1em; /*缩进*/
}
a{
text-decoration: none;
color: #000000;
font-size: 14px;
}
a:hover{
color: orange;
text-decoration: underline;
}
/*ul li*/
/*
list-style：
none 去掉圆点
circle 空心圆
square 正方形
decimal 数字
*/
/*ul{*/
/* background: rgb(213, 207, 206);*/
/*}*/
ul li{
list-style: none;
text-indent: 1em;
height: 30px;
}
效果图
3.7 背景
- 背景颜色
- 背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 1000px;
height: 700px;
border: 1px solid red;
background-image: url("images/a.jpg");
/*默认是全部平铺的*/
}
.div1{
background-repeat: repeat-x; /*只水平平铺*/
}
.div2{
background-repeat: repeat-y; /*竖直平铺*/
}
.div3{
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head lang="en">
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="nav">
<h2 class="title">全部商品分类</h2>
<ul>
<li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a></li>
<li><a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a></li>
<li><a href="#">电脑</a> <a href="#">办公</a></li>
<li><a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a></li>
<li><a href="#">服饰鞋帽</a> <a href="#">个护化妆</a></li>
<li><a href="#">礼品箱包</a> <a href="#">钟表</a> <a href="#">珠宝</a></li>
<li><a href="#">食品饮料</a> <a href="#">保健食品</a></li>
<li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a></li>
</ul>
</div>
</body>
</html>
#nav{
background: rgb(213, 207, 206);
width: 255px;
}
.title{
font-size: 18px;
font-weight: bold;
border-radius: 10px;
line-height: 35px;
text-indent: 1em;
/* background: red;被下边这行代码替换了*/
/* 颜色，图片，图片位置，平铺方式*/
background: red 231px 11px url("../../6.背景/images/d.png") no-repeat;
}
a{
text-decoration: none;
color: #000000;
font-size: 14px;
}
a:hover{
color: orange;
text-decoration: underline;
}
/*ul li*/
/*
list-style：
none 去掉圆点
circle 空心圆
square 正方形
decimal 数字
*/
/*ul{*/
/* background: rgb(213, 207, 206);*/
/*}*/
ul li{
list-style: none;
text-indent: 1em;
height: 30px;
background-image: url("../../6.背景/images/r.png");
background-repeat: no-repeat;
background-position: 195px -5px /*去浏览器上调试出来的*/
}
3.8 渐变
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 15%, #C850C0 51%, #FFCC70 83%);
4. 盒子模型
4.1 什么是盒子
margin：外边距
border：边框
padding：内边距
4.2 边框border
-
边框的粗细
-
边框的样式
-
边框的颜色
示例
<body>
<div id="box">
<h2>会员登陆</h2>
<form action="#">
<div>
<span>用户名：</span>
<input type="text">
</div>
<div>
<span>密码：</span>
<input type="text">
</div>
<div>
<span>邮箱：</span>
<input type="text">
</div>
</form>
</div>
</body>
<style>
/*h1,h2,ul,li,a,body{*/
/* !*body总有一个默认的外边距,我们可以设置外边距margin: 0，这是常见操作*!*/
/* margin: 0px;*/
/*}*/
/*border:粗细，样式，颜色*/
#box{
width: 300px;
border: 1px solid red;
}
form{
background: #97D9E1;
}
h2{
font-size: 16px;
background: #ff0000;
color: white;
line-height: 30px;
margin: 0; /*h2有默认外边距，这里把外边距设置为0*/
}
/*solid实线 dashed虚线*/
/*这里用了子代选择器和结构伪类选择器*/
div:nth-of-type(1)>input{
border: 3px solid black;
}
div:nth-of-type(2)>input{
border: 3px dashed yellow;
}
</style>
效果图（丑）
4.3 外边距margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--外边距的妙用 居中元素-->
<style>
#box{
width: 300px;
border: 1px solid red;
margin: 0 auto; /*上下为0，左右自动居中对齐*/
}
/*
margin:0 外边距（上下左右均）为0
margin:0 1px 外边距上下为0，左右为1px
margin:0 1px 2px 3px 上0右1下2左3（顺时针旋转）
*/
h2{
font-size: 16px;
background: #ff0000;
color: white;
line-height: 30px;
margin: 0 1px 2px 3px;
}
form{
background: #97D9E1;
}
input{
border:1px solid black;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登陆</h2>
<form action="#">
<div>
<span>用户名：</span>
<input type="text">
</div>
<div>
<span>密码：</span>
<input type="text">
</div>
<div>
<span>邮箱：</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
效果如图（有点丑）
关于margin
margin-top: 0;
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
相当于
margin:0 外边距（上下左右均）为0
margin:0 1px 外边距上下为0，左右为1px
margin:0 1px 2px 3px 上0右1下2左3（顺时针旋转）
4.4 内边距padding
padding和margin用法一样，下面放个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--外边距的妙用 居中元素-->
<style>
#box{
width: 300px;
border: 1px solid red;
margin: 0 auto; /*上下为0，左右自动居中对齐*/
}
h2{
font-size: 16px;
background: #ff0000;
color: white;
line-height: 30px;
margin: 0 1px 2px 3px;
}
form{
background: #97D9E1;
}
input{
border:1px solid black;
}
div:nth-of-type(1){
padding: 10px;/*内边距，上下左右都为10*/
}
</style>
</head>
<body>
<div id="box">
<h2>会员登陆</h2>
<form action="#">
<div>
<span>用户名：</span>
<input type="text">
</div>
<div>
<span>密码：</span>
<input type="text">
</div>
<div>
<span>邮箱：</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
效果图（用户名那个div往内缩了看到了吧）
盒子的计算方式：你这个元素到底多大
margin+border+padding+内容宽度
4.4.1 CSS3中的box-sizing（content-box与border-box）
CSS3中的box-sizing属性允许以特定的方式来指定盒模型，有两种方式：
- content-box：标准盒模型，又叫做W3C盒模型，一般在现代浏览器中使用的都是这个盒模型。
- border-box：怪异盒模型，低版本IE浏览器中的盒模型。
box-sizing:content-box | border-box
区别：
-
content-box：padding和border不被包含在定义的width和height之内。
盒子的实际宽度=设置的width+padding+border
-
border-box：padding和border被包含在定义的width和height之内。
盒子的实际宽度=设置的width（padding和border不会影响实际宽度）
以一个html为例：
div{
height: 100px;
width: 100px;
background: red;
marigin: 50px;
border: 20px solid black;
padding: 15px;
}
.div1{
box-sizing: content-box;
}
.div2{
box-sizing: border-box;
}
div1: content-box
content的宽度就是width，不包括padding和border
div2：border-box 设置的width宽度包含了padding和border
width=100，border-left=border-right=20,padding-left=padding-right=15，因此里边的内容的宽度是100-20×2-15×2=30，高度的计算方法一样。
4.5圆角边框
border-radius
依然是顺时针方向：左上 右上 右下 左下
<body>
<div></div>
</body>
div{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 50px 0;/*左上右下是50px，右上左下是0*/
}
四个角都是最大100px
border-radius: 100px;/*最大100px*/
效果图
border-radius: 50px 20px 10px 5px;
按照顺时针顺序，左上 右上 右下 左下，效果图
半圆（注意长宽）
div{
width: 100px;
height: 50px;
background: red;
border-radius: 50px 50px 0 0;
}
右半圆（注意长宽）
div{
width: 50px;
height: 100px;
background: red;
border-radius: 0 50px 50px 0;
}
四分之一圆(注意长宽)
div{
width: 50px;
height: 50px;
background: red;
border-radius: 50px 0 0 0;
}
border-radius可以用于设置头像，例如圆形头像,圆角边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{
width: 100px;
height: 100px;
border-radius: 100px;
/*border-radius:15px*/
}
</style>
</head>
<body>
<img src="images/a.jpg" alt="">
</body>
</html>
效果图
4.6 盒子阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- margin:0 auto 居中
要求：块元素，块元素有固定的宽度
-->
<style>
img{
border-radius: 50px;
box-shadow: 10px 10px 100px yellow; /*100px是模糊半径*/
}
</style>
</head>
<body>
<div style="width: 500px;display: block;text-align: center">
<div style="margin: 0 auto">
<img style="height: 50px;width: 50px" src="images/a.jpg" alt="">
</div>
</div>
</body>
</html>
学习前端，仿造一个css页面，写不漂亮的页面去源码之家抄一抄模仿模仿。practice makes perfect.
5、浮动
5.1 标准文档流
-
块级元素：独占一行
h1~h6 p div 列表... -
行内元素：不独占一行
span a img strong...
行内元素可以被包含在块级元素中，反之则不可以。
5.2 display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
block 块元素
inline 行内元素
display: block; /*把行内元素变成块元素*/
inline-block 既是行内元素也是块元素，但是可以内联在一行！
none 消失
-->
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline;
}
span{
width: 100px;
height: 100px;
border: 1px solid red; /*行内元素只占文字的大小*/
display: inline-block; /*既是行内元素也是块元素*/
}
</style>
</head>
<body>
<div>
div块元素
</div>
<span>
span行内元素
</span>
</body>
</html>
- 这个也是一种实现行内元素排列的方式，但是我们很多情况都是用float
5.3 float
- 左右浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="father">
<div class="layer01"><img style="height: 260px;width: 188px" src="images/1.jpg" alt=""></div>
<div class="layer02"><img style="height: 180px;width: 188px" src="images/2.jpg" alt=""></div>
<div class="layer03"><img style="height: 180px;width: 188px" src="images/3.jpg" alt=""></div>
<div class="layer04">
浮动的盒子可以向左浮动，也可以向右浮动，直到他的外边缘碰到包含框或另一个浮动盒子位置
</div>
</div>
</body>
</html>
div{
margin:10px;
padding: 5px;
}
#father{
border: 1px #000000 solid;
}
.layer01{
border: 1px #F00 dashed;
display: inline-block;
float: right;
}
.layer02{
border: 1px #00f dashed;
display: inline-block;
float: right;
}
.layer03{
border: 1px #060 dashed;
display: inline-block;
float: right;
}
.layer04{
border: 1px #666 dashed;
font-size: 6px;
line-height: 3px;
display: inline-block;
float: right;
}
5.4 父级边框塌陷的问题（必考）
clear
/*clear:right 右侧不允许有浮动元素
clear:left 左侧不允许浮动
clear:both 两侧都不允许有浮动
clear:none 允许浮动
*/
解决方案：
- 增加父级元素高度
#father{
border: 1px #000000 solid;
height: 800px;
}
- 增加一个空的div标签，清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="father">
<div class="layer01"><img style="height: 260px;width: 188px" src="images/1.jpg" alt=""></div>
<div class="layer02"><img style="height: 180px;width: 188px" src="images/2.jpg" alt=""></div>
<div class="layer03"><img style="height: 180px;width: 188px" src="images/3.jpg" alt=""></div>
<div class="layer04">
浮动的盒子可以向左浮动，也可以向右浮动，直到他的外边缘碰到包含框或另一个浮动盒子位置
</div>
<div class="clear"></div>
</div>
</body>
</html>
.clear{
clear: both;
margin: 0;
padding: 0;
}
- overflow
在父级元素中增加一个overflow:hidden属性即可自动适配图片
div{
margin:10px;
padding: 5px;
}
#father{
border: 1px #000000 solid;
overflow: hidden;
}
.layer01{
border: 1px #F00 dashed;
display: inline-block;
float: left;
}
.layer02{
border: 1px #00f dashed;
display: inline-block;
float: left;
}
.layer03{
border: 1px #060 dashed;
display: inline-block;
float: right;
}
/*clear:right 右侧不允许有浮动元素
clear:left 左侧不允许浮动
clear:both 两侧都不允许有浮动
clear:none 允许浮动
*/
.layer04{
border: 1px #666 dashed;
font-size: 6px;
line-height: 3px;
display: inline-block;
float: right;
}
overflow:scroll 属性增加滚动条
- 父类添加一个伪类:after
#father:after{
content: '';
display: block;
clear: both;
}
小结：
-
浮动元素后边增加一个空的div
简单，但代码中尽量避免空的duv
-
设置父元素的高度
简单，假设元素有了固定的高度，就会被限制。
-
在父级元素中增加一个overflow:hidden属性即可自动适配图片
简单，下拉的一些场景避免使用
-
父类添加一个伪类:after
写法稍微复杂，但是没有副作用
5.5 对比
- display
方向不可控制，没有父级边框塌陷的问题
- float
方向可控制，浮动起来会脱离标准文档流（需要解决父级边框塌陷的问题）
二者都可以让元素排在一列
**
6 定位
6.1 相对定位
保留原先的位置，基于原先的位置进行偏移。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 相对定位
相对于自己原来的位置进行偏移
-->
<style>
body{
padding: 20px;
}
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #666;
padding: 0;
}
#first{
background-color: #a13d30;
border: 1px dashed #b27530;
position: relative; /*相对定位：上下左右*/
top: -20px; /*往上移*/
left: +20px; /*往右移*/
}
#second{
background-color: #255099;
border: 1px dashed #255066;
}
#third{
background-color: #1c6699;
border: 1px dashed #1c6615;
position: relative;
bottom: -10px; /*向下*/
right: -20px; /*向右*/
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
相对定位：
position: relative;
相对于原来的位置进行指定的偏移，即便相对定位，它仍然在标准文档流中，原来的位置会被保留。
position:relative;
bottom: -10px; /*下移*/
right: -20px; /*右移*/
top: -20px; /*上移*/
left: +20px; /*右移*/
6.1.1相对定位的一个小题目：
自己做做再对答案：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 300px;
height: 300px;
padding: 10px;
border: 2px red solid ;
}
a{
color: white;
text-decoration: none;
height: 100px;
width: 100px;
background: #FF9AFF;
text-align: center;
line-height: 100px;
display: block;
}
.o{
height: 100px;
width: 100px;
background-color: #FF9AFF;
}
a:hover{
background: #0090FF;
}
.a1{
position: relative;
}
.a2{
position: relative;
right: -200px;
top: -100px;
}
.a3{
position: relative;
}
.a4{
position: relative;
right: -200px;
top: -100px;
}
.a5{
position: relative;
right: -100px;
top: -300px;
}
/*.a2,a4{
position: relative;
right: -100px;
top: -300px;
}
对于相同的操作可以写到一起*/
</style>
</head>
<body>
<!--
使用<div>和超链接<a>布局页面
每个超链接宽度和高度都是100px，背景颜色是粉色，鼠标指针移上去时变为蓝色
使用相对定位改变每个超链接的位置
-->
<div id="box">
<a href="" class="a1">链接1</a>
<a href="" class="a2">链接2</a>
<a href="" class="a3">链接3</a>
<a href="" class="a4">链接4</a>
<a href="" class="a5">链接5</a>
</div>
</body>
</html>
6.2 绝对定位
定位：基于×××定位，上下左右。
- 没有父级元素定位的前提下，相对于浏览器定位。
- 假设父级元素存在定位（即在父级元素中设置position: relative;），我们通常会相对于父级元素进行偏移。
- 在父级元素范围内移动，相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #666;
padding: 0;
/*position: relative;*/
}
#first{
background-color: #a13d30;
border: 1px dashed #b27530;
}
#second{
background-color: #255099;
border: 1px dashed #255066;
position: absolute;
/*right: 20px;*/
left: -10px;
top: -10px;
}
#third{
background-color: #1c6699;
border: 1px dashed #1c6615;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
6.3 固定定位fixed
绝对定位，相对于浏览器初始界面的位置
fixed固定定位，固定在浏览器右下角不变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 1000px;
}
/*body div:first-child{*/
/*}*/
/*div:nth-child(2){*/
/*}*/
div:nth-of-type(1){ /*绝对定位，相对于浏览器初始界面的位置*/
width: 100px;
height: 100px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2){ /*fixed固定定位，固定在浏览器右下角不变*/
width: 50px;
height: 50px;
background: yellow;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
效果图
6.4 z-index
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MhxRKA02-1598453775248)(C:\Users\ZY137\AppData\Roaming\Typora\typora-user-images\image-20200826222140980.png)]
图层
z-index：最低（默认）是0，最高是999.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
<ul>
<li><img src="images/bg.jpg" alt=""></li>
<li class="tipText">学习微服务，找我</li>
<li class="tipBg"></li>
<li>时间：2099-01-01</li>
<li>地点：月球一号基地</li>
</ul>
</div>
</body>
</html>
#content{
padding: 0px;
margin: 0px;
width: 380px;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px #000 solid;
}
ul,li{
padding: 0px;
margin: 0px;
list-style: none;
}
/*父级元素相对定位*/
#content ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
width: 380px;
height: 25px;
top: 214px;
}
.tipText{
color: white;
z-index: 999;
}
.tipBg{
background: #000;
}
**要想让被覆盖的文字显示出来还有方法：**背景透明度opacity: 0.5;，背景变透明就能看到被覆盖的字了
#content{
padding: 0px;
margin: 0px;
width: 380px;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px #000 solid;
}
ul,li{
padding: 0px;
margin: 0px;
list-style: none;
}
/*父级元素相对定位*/
#content ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
width: 380px;
height: 25px;
top: 214px;
}
.tipText{
color: white;
}
.tipBg{
background: #000;
opacity: 0.5;
/*背景透明度，背景变透明就能看到被覆盖的字了*/
}
7 动画
8 总结
628
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
