css
1.css(Cascading Style Sheets）:层叠样式表，又叫级联样式表，简称样式表
用于HTML文档中元素的样式定义，实现网页的美化
实现将内容和表现分离
2.css的三种使用方式
2.1.内联样式
— 样式定义在单个的HTML元素中
2.2.内部样式
— 样式定义在HTML页的头元素中
2.3外部样式
— 将样式定义在一个外部的css文件中（.css文件）
— 由HTML页面引用样式表文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css的三种使用方式</title>
<link href="./p3.css" type="text/css" rel="stylesheet" />
<style>
/* Id选择器： #id的值 {} */
#p2 {
width: 400px;
background-color: blanchedalmond;
}
/* 标签选择器： 标签名{}*/
p {
color: red;
}
</style>
</head>
<body>
<!-- css : cascading style sheet , 级联样式表 , 用于调整html中标签的样式的
语言。
语法规则： "样式名:样式的值" , 比如 ： color: red ，这个指定字体的颜色为红
色。
"样式名:样式的值, 样式名1:样式值1" , 比如： color:red , font-
size: 20px
三种使用方式： ① 内联样式： 直接在标签上，通过style属性进行使用。
② 内部样式： 在head标签中，通过<style>css语言<style>标签，使
用样式。
③ 外部样式：通过在head标签中， 使用<link href="xx.css">标
签，引入css文件，进行样式的使用。
-->
<!--内联样式 ：只对当前使用的标签有效。 -->
<p id="p1" style="width: 500px; background-color: aquamarine;">Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Minus necessitatibus delectus
earum beatae odio quas voluptate provident. Alias vitae ipsa cupiditate id
expedita sapiente perspiciatis officiis explicabo pariatur repudiandae nisi!</p>
<!--内部样式 ：css语言通过选择器找到标签，然后添加对应的样式。 -->
<p id="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Tempora error qui eligendi fugiat eaque ea consectetur omnis expedita ipsum
nesciunt porro provident nostrum architecto ipsam voluptate quam dignissimos?
Quasi vero.</p>
<!-- 外部样式 : 在css文件中，写样式。在html文件中引用css文件。 -->
<p id="p3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum
laudantium fugit nostrum obcaecati cumque aliquid consequatur libero ab minima
nulla reiciendis tempore labore pariatur itaque repudiandae quo sit. Quo quam!
</p>
</body>
</html>
p3.css
/*给id为p3的标签设置宽度和背景色*/
#p3{
width: 400px;
background-color: aquamarine;
}
h2{
color: red;
}3.css的语法规则
样式表由多个样式组成
每个样式规则有两部分：选择器和声明
——选择器：决定哪些元素使用规则
——声明：由一个或多个属性/值对组成，用于设置元素的外观表现。
4.css
的特征
继承性
— 大多数
css
的样式规则可以被继承
层叠性
— 可以定义多个样式表
— 多个不冲突的样式，可以层叠为一个
优先级
— 样式定义冲突时，按照不同样式的规则优先级来应用样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css特征</title>
<style>
h1 {
border: 2px dotted aqua;
/*边框:宽度 类型 颜色*/
color: red;
/*字体颜色*/
}
h2 {
color: green;
font-size: 50px;
}
#h3 {
border: 2px solid black;
color: green;
}
h3 {
font-size: 50px;
color: yellow !important;
/*!important： 设置样式的优先 级最高*/
}
</style>
<link href="./p3.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!-- css特征： ① 继承性： 父元素的一些样式，会被其子元素继承。比如字体颜色。 ② 层叠性： 一个元素可以有多个样式效果进行叠加。 ③ 优先级： 浏览器默认样式< 标签的默认样式 < [外部样式/内部样式/内联样式] ** 外部样式/内部样式/内联样式: 根据谁后写，谁优先。 -->
<!-- 继承性 -->
<div style="background-color: red; color: white;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quaerat dolor rerum laboriosam unde
consequuntur quam ut repellendus. Nobis assumenda sit suscipit amet quam maiores rem labore facilis
totam enim!</p> <a href="#" style="color: white;">a标签</a>
</div>
<!-- 层叠性 ： background: yellow; 背景色 font-size: 20px; 字体大小 color: #FF0000; 字的颜色 font-weight: bold; 字体的粗细 width: 300px; height: 100px; 标签的宽，高 overflow: scroll; 溢出，则使用滚动条。 -->
<p
style="background: yellow;font-size: 20px; color: #FF0000; font-weight: bold; width: 300px; height: 100px; overflow: scroll;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum perferendis voluptas rerum sed dolorem
doloremque illo a voluptatem aliquam fugiat magni id vitae magnam explicabo quisquam quis aut odit
aspernatur!</p> <!-- 优先级 -->
<!-- 内联样式的优先级高于内部样式和外部样式 -->
<h1 style="color:green;">中秋节快到了</h1> <!-- 内部样式和外部样式： 谁后写，谁优先。 -->
<h2>中秋节是团员的节日。</h2> <!-- 练习：通过内部样式设置 h3 : ① 根据标签选择器设置h3标签字号50px , 字体颜色黄 色。 ② 根据id选择器，设置h3标签边框 ， 字体颜色绿色 -->
<!-- ** id选择器优先级 > class选择器 > 标签选择器 -->
<h3 id="h3" style="color: pink;">中秋节：海上生明月，天涯共此时。</h3>
<!-- 使用三种不同的方式给标签设置样式，不冲突情况就是都有效(层叠性)，冲突则以优先级 为准（优先级）。 -->
</body>
</html>
5.css选择器
元素选择器/html选择器 元素名{属性：属性值}
类选择器 .类名{属性：属性值}
id选择器 #id名{属性：属性值}
分类选择器 元素名.类名{属性：属性值}
分组选择器 元素1，元素2，.......,元素n{属性：属性值}
派生选择器 p.main{属性：属性值} p>.main{属性：属性值}
伪类选择器 伪类{属性：属性值} 如:hover{属性：属性值};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css的基本选择器</title>
<style>
#ul1 li {
background-color: green;
list-style: none;
/*去掉li标签前面符号*/
margin: 3px;
/*设置标签和其他标签四个方向的间距都是3px*/
}
/*class选择器： .className{} */
.group {
color: red;
}
#first {
font-size: 30px;
}
/* span标签是行内元素，宽度高度由内部的内容决定。如果希望设置width ， height . 那么需要修改span标签的显示方式： display:inline-block （行内块级元素： 不换 行，支持设置宽，高 , 比如img标签。） */
span {
width: 100px;
height: 30px;
display: inline-block;
background: #21448c;
text-align: center;
/*文字的左右居中*/
line-height: 30px;
/*行高：如果文字只有一行 ，然后行高等于高度 ，那么文字就 垂直居中*/
}
b {
color: white;
border-left: 1px solid white;
border-right: 1px solid white;
/* padding: 8px; */
/*padding :四个方法的内边距(标签和内部的内容之间的间 距。)*/
padding-left: 6px;
/*单个方向的设置*/
padding-right: 6px;
}
/* 分类选择器的使用 */
span.three {
width: 120px;
}
/* 分组选择器 */
p,
h1 {
border: 3px solid black;
border-radius: 5px;
/*设置边框为圆角*/
}
/* 派生选择器： 选择子孙 */
/* #sel span{ padding: 5px; border: 3px solid #008000; } */
/* 派生选择器： 选择子 */
#sel>span {
padding: 5px;
border: 3px solid red;
}
</style>
</head>
<body>
<!-- 选择器： selector ,根据某个特征，找到标签。 ① 标签选择器: 根据标签的名字，选择到对应的标签(当前html页面中的该标签都被选择出 来。)。 ② id选择器： 根据标签的id ， 选择标签。(一个html页面 ， id是唯一的， 只会选择 出一个符号条件的标签). ③ class选择器： 根据标签的class属性 ， 选择标签。( 一个html页面， class允许 重复， 可以选择出多个符合条件的标签。) ④ 分类选择器： 元素选择器和class/id选择器一起使用. ⑤ 分组选择器： 选择器1 , 选择器2 ， 选择n....{样式} ⑥ 派生选择器： 找子(嵌套在内部的第一层符号条件的标签元素) 选择器>选择器{} 找子孙(嵌套在内部的所有符号条件的标签元素) 选择器 选择器{} -->
<!-- 所有li设置背景色为绿色 九龙坡 ， 沙坪坝设置为字体红色 第一个li 设置 为30px -->
<ul id="ul1">
<li class="group" id="first">九龙坡</li>
<li>渝中</li>
<li>渝北</li>
<li>江北</li>
<li class="group">沙坪坝</li>
</ul>
<ul>
<li>html语言</li>
<li>css语言</li>
<li>js语言</li>
</ul>
<p>
<span><b>span one</b></span> <span><b>span two</b></span> <span class="three"><b>span three</b></span>
</p>
<h1 class="three">h1标签</h1>
<p class="three">p标签</p>
<div id="sel"> <span>1.基本选择器： <span>a.标签选择器</span> <span>b.id选择器</span> <span>c.class选择器</span> </span>
<span>2.分组选择器</span> <span>3.分类选择器</span> <span>4. 伪类选择器 <span>:link</span> <span>:hover</span>
<span>:foucs</span> </span> </div>
</body>
</html>
6.
伪类选择器
伪类用于向某些选择器添加特殊的效果
使用冒号(:)
作为结合符，结合符左边是其他选择器，右边是伪类
常用伪类：
— :link 页面上从来没有点击过的链接
— :active 选择活动链接，并设置其样式：
— :visited 选择已访问的链接，并设置其样式：
— :hover 鼠标悬停的状态
— :focus 获取焦点的状态[
对有键盘焦点的元素设置
]
— :first-child 元素的第一个子元素添加样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 所有的标签的margin， padding都设置为0.*/
* {
margin: 0;
padding: 0;
}
body {
/* margin: 0; 直接设置margin 为0 , 去掉body标签的默认的margin*/
width: 1800px;
margin: 0 auto;
/*居中的设置方式: margin: 上下为0 ， 左右auto */
}
.box {
background: #008000;
text-align: center;
/*标签内部的元素居中显示*/
}
.box img {
width: 440px;
height: 242px;
margin: 4px 2px;
border: 1px solid #FF0000;
}
/* 伪类:hover(鼠标移入元素就是hover.), 鼠标移入到图片上，图片边框变为白色的 2px */
.box img:hover {
border: 2px solid white;
width: 438px;
/*修改宽，高，符合元素所在区域的大小。*/
height: 240px;
}
/* 伪类:focus , 输入框获取焦点的时候，设置的样式*/
#ipt:focus {
height: 30px;
}
a:link {
text-decoration: none;
/*去掉文本的下划线*/
font-size: 40px;
color: green;
}
</style>
</head>
<body>
<div class="box"> <img src="../img/a.jpeg" /> <img src="../img/b.jpeg" /> <img src="../img/c.jpeg" /> <img
src="../img/d.jpeg" /> </div> <input id="ipt" type="text" /> <a href="#">a标签</a>
</body>
</html>
7.css
常用单位
a.尺寸单位
%:百分比
in:英寸
cm:厘米
mm:毫米
pt:榜（
1pt=1/72
英寸）
px:像素（计算机屏幕上的一个点）
em:1em等于当前的字体尺寸，
2em
等于当前字体尺寸的两倍。（移动端用的多）
b.
颜色单位
rgb(x,x,x ):RGB值，如
rgb(255,0,0) x
的取值范围
0~255
rgb(x%,x%,x%):RGB百分比值，如
rgb(100%,0%,0%)
#rrggbb:十六进制数，如
#ff0000
#rgb:简写的十六进制数，如
#f00
8.css
样式
a.
尺寸相关样式
width和height
overflow：当内容溢出元素框时如何处理
— visible
— hidden
— scroll
— auto
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css中的overflow</title>
<style>
div {
width: 400px;
height: 200px;
background-color: greenyellow;
overflow: hidden;
/*溢出的解决方式： 隐藏溢出部分*/
overflow: scroll;
/* 设置出现滚动条，溢出的内容通过滚动条查看*/
overflow: visible;
/* 溢出部分可见 ， 溢出的默认处理方式*/
overflow: auto;
/*继承父元素的溢出处理方式*/
}
</style>
</head>
<body>
<div>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus atque praesentium est suscipit ab
earum neque quis fugit aliquid tempora excepturi minus autem laborum nihil officia perspiciatis ipsam
vel voluptatibus.</p> <img src="../img/a.jpeg" />
</div>
<div style="background-color: black;"></div>
<div style="background-color:cyan;"></div>
</body>
</html>
9.边框属性
.简写方式
——border:width style color;
.单边定义
——border-left:/right/top/bottom:width style color;
.border-width
——border-left:/right/top/bottom-width
.border-style
——border-left:/right/top/bottom-style
.border-color
——border-left:/right/top/bottom-color
10.
框模型
框模型（
Box Model
）定义了元素框处理元素内容、内填充、边框和外边距的方式
width
和
height
指内容区域的宽度和高度
增加内填充、边框和外边距不会影响内容区的尺寸，但是会增加元素框的总尺寸。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style>
.box {
width: 200px;
height: 200px;
background: #008000;
/* 边框 */
/*border: 3px solid gray; 四个方向均有边框*/
/* 四个方向分别设置边框 border-left: 3px solid greenyellow ; border-top: 3px solid seagreen ; border-right: 3px solid yellowgreen; border-bottom: 3px solid lightyellow ;*/
/* border的边框宽度，样式， 颜色分别设置 */
border-width: 5px;
border-style: dotted;
border-color: #000000;
}
/* margin: 外边距， 设置元素之间的间距 */
#box1 {
/*margin: 10px; 四个方向都是10px*/
/*margin: 10px 20px; margin: 上下 左右;*/
/*margin: 5px 10px 20px 30px; margin: 上 右 下 左;四个方向分别设 置*/
margin-top: 20px;
/*只设置上方向的margin , 等同于： margin:20px 0 0 0;*/
/* margin-left , margin-right , margin-bottom*/
}
/* padding :内边距， 设置元素和自己内部的内容之间的间距*/
#box2 {
padding: 20px;
/* 四个方向都是20px*/
padding: 20px 40px;
/*padding:上下 左右;*/
padding: 5px 10px 15px 20px;
/*padding :上 右 下 左;四个方向分别 设置*/
padding-top: 20px;
/*只设置上方向的padding , 等同于： padding:20px 0 0 0;*/
/*padding-left , padding-right; padding-bottom */
}
* {
margin: 0;
padding: 0;
}
#menu li {
list-style: none;
display: inline-block;
width: 40px;
height: 25px;
background-color: white;
text-align: center;
line-height: 25px;
padding: 3px 5px;
/*内边距*/
margin-right: 2px;
/*外边距*/
}
#menu li:hover {
background-color: gray;
}
</style>
</head>
<body>
<div class="box" id="box1"> div1 </div>
<div class="box" id="box2"> div2 </div>
<div class="box" id="box3"> div3 </div>
<div>div4</div>
<hr>
<ul id="menu">
<li>文件</li>
<li>编辑</li>
<li>选择</li>
<li>查找</li>
</ul>
</body>
</html>
11.背景
背景色
:background-color
背景图像：
— background-image:url();
— background-repeat:repeat/repeat-x/repeat-y/no-repeat;
— background-position:left top;
— background-attachment:scroll/fixed;
组合设置：
— background
：颜色 背景图片 重复方式 背景图片是什么方式显示
left top;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景图</title>
<style>
/*背景颜色：background-color 背景图片：background-image:url background-repeat: no-repeat/repeat-x/ repeat-y/repeat background-size : 大小 background-position:图片的区域 background-attachment：背景固定 组合设置： background: 颜色 背景图片 重复方式 背景图片left 背景图片top */
div {
border: 1px solid bisque;
width: 1000px;
height: 300px;
background-color: #00FFFF;
/*背景色*/
background-image: url(../img/a.jpeg);
/*背景图片：url是背景图地址*/
background-repeat: no-repeat;
/*是否重复*/
background-size: cover;
/*完全覆盖标签的区域*/
background-position: 0px 0px;
background-attachment: fixed;
/*背景固定*/
}
div {
background: url(../img/b.jpeg) no-repeat -30px -30px;
}
/* 雪碧图：把小图标拼在一张图片上，如果要用这些图标，通过background进行设置需要 显示图标。 好处：减少了http请求的次数。缺点：如果图标有变化，制作新的图片。 */
span {
display: inline-block;
width: 22px;
height: 22px;
background-image: url(../img/icon.jpg);
border-radius: 3px;
/*边框圆角显示*/
}
span:hover {
background: url(../img/icon.jpg) no-repeat 0px -22px;
/*背景图地 址， 不重复 ， left top*/
}
</style>
</head> <!-- <body bgcolor="#00FFFF" background="../img/a.jpeg"> -->
<body>
<div></div>
</body> <span></span> <!-- 显示蓝色的f图标 -->
<div style="width: 22px; height: 22px; border-radius: 3px; background: url(../img/icon.jpg) no-repeat -44px -22px;">
</div>
</html>
12.文字和
table相关样式
文字样式
指定字体：font-family:value1,value2;
字体颜色：color:value
字体大小：font-size
：value
字体加粗：font-weight
：normal/bold;
文本排列：text-align
：left/right/center
行高：line-height
：value
文字修饰：text-decoration:none/underline
文本缩进：text-indent
：value;
表格样式
垂直对齐
— vertical-align：top/middle/bottom
边框合并
— border-cellapse：separate/cpllapse
边框边距
— border-spacing：value
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本样式 & 表格样式</title>
<style>
p {
font-family: "arial black";
/*字体*/
font-size: 20px;
/*字号*/
font-weight: 300;
/*粗细 ： normal-普通， bold - 粗*/
color: white;
/**字的颜色*/
text-indent: 2em;
/*缩进*/
text-decoration: underline;
/*文字修饰：underline-下划线， none -去 掉下划线 */
text-align: center;
/*左右居中： left ,right , center*/
background-color: #7FFFD4;
height: 100px;
line-height: 50px;
/*行高*/
}
table {
/* border: 1px solid gray; 表格的最外层的边框 */
border-collapse: collapse;
/*边框合并：collapse-折叠(挨着的单元格两条 线只显示一条) , separate-不折叠(挨着的两条线，按两条线的宽度 显示)*/
border-spacing: 0;
/*边框边距0*/
}
th,
td {
border: 1px solid gray;
/*单元格的边框*/
width: 100px;
/*单元格的宽*/
height: 30px;
/*单元格的高*/
text-align: center;
/*文字左右居中*/
vertical-align: bottom;
/*文字垂直显示位置： top / middle/ bottom*/
}
/* 设置单行背景色浅绿色， 双行背景色浅红色， 鼠标进入某行，某行字体变为红色 */
.dan {
background-color: #7FFFD4;
}
.shuang {
background-color: #FFEBCD;
}
.dan:hover,
.shuang:hover {
color: #FF0000;
}
</style>
</head>
<body>
<!-- 文本样式 -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis consequuntur omnis veniam quae adipisci
fugiat explicabo impedit voluptatum voluptatibus! Distinctio amet excepturi reiciendis facere dicta aut
dignissimos animi eaque nihil.</p> <!-- 表格 -->
<table>
<tr>
<th>编号</th>
<th>书名</th>
<th>作者</th>
<th>价格</th>
<th>操作</th>
</tr>
<tr class="dan">
<td>1001</td>
<td>笑傲江湖</td>
<td>金庸</td>
<td>103</td>
<td><button>修改</button><button>删除</button></td>
</tr>
<tr class="shuang">
<td>1001</td>
<td>笑傲江湖</td>
<td>金庸</td>
<td>103</td>
<td><button>修改</button><button>删除</button></td>
</tr>
<tr class="dan">
<td>1001</td>
<td>笑傲江湖</td>
<td>金庸</td>
<td>103</td>
<td><button>修改</button><button>删除</button></td>
</tr>
<tr class="shuang">
<td>1001</td>
<td>笑傲江湖</td>
<td>金庸</td>
<td>103</td>
<td><button>修改</button><button>删除</button></td>
</tr>
<tr class="dan">
<td>1001</td>
<td>笑傲江湖</td>
<td>金庸</td>
<td>103</td>
<td><button>修改</button><button>删除</button></td>
</tr>
<tr class="shuang">
<td>1001</td>
<td>笑傲江湖</td>
<td>金庸</td>
<td>103</td>
<td><button>修改</button><button>删除</button></td>
</tr>
</table>
</body>
</html>
13.
标签的显示方式
13.1.
块级元素： 占据一整行，其他内容换行显示。可以设置
width , height ,
比如：
h1 , div , p .
13.2.
行内元素： 宽高由内容决定，剩下的区域可以显示其他元素。不支持设置
width ,height.
比如：
span , input
13.3.
块级行内元素：具有块级元素的特征，但是不换行。可以设置
width
，
height ,
比如：
img.
css
样式的
display:
display: none; --
隐藏标签。
display:block; --
设置为块级元素
display: inline ; --
设置为行内元素
display: inline-block ; --
设置为行内块级元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css样式:display</title>
<style>
.a1 {
width: 300px;
height: 300px;
background-color: #008000;
display: inline-block;
/*不换行，支持宽度，高度*/
text-align: center;
line-height: 300px;
}
span.a1:hover {
display: none;
/*隐藏*/
}
h1,
h2,
h3,
h4 {
display: inline;
/*行内元素*/
background-color: yellow;
}
</style>
</head>
<body>
<!-- html标签分类： 1. 块级元素： 占据一整行，其他内容换行显示。可以设置width , height ,比如：h1 , div , p . 2. 行内元素： 宽高由内容决定，剩下的区域可以显示其他元素。不支持设置width ,height. 比如：span , input. 3. 块级行内元素：具有块级元素的特征，但是不换行。可以设置width，height ,比如： img. css样式的display: display: none; -- 隐藏标签。 display:block; -- 设置为块级元素 display: inline ; -- 设置为行内元素 display: inline-block ; -- 设置为行内块级元素。 -->
<div class="a1">1</div>
<div class="a1">1</div>
<div class="a1">1</div>
<div class="a1">1</div>
<div>第5个div</div> <span class="a1">1</span> <span class="a1">2</span> <span class="a1">3</span> <span id="span4"
class="a1">4</span> <!-- 设置h1~h4都是不换行，只显示自己的内容宽高。背景色黄色 -->
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
</body>
</html>
14.流定位
页面中的块级元素框从上到下一个接一个地排列
—
每一个块级元素都会出现在一个新行中（比如元素）
—
元素框之间的垂直距离是由框的垂直外边距计算出来的 元素、 行内元素将在一行中从左到右排
列水平布置
—
不需要重新开始
—
可以使用水平内边距、边框和外边距调整它们的间距
15.
浮动定位
浮动定位是指
—
让元素脱离普通流定位
—
将浮动元素放置在父元素的左边或者右边
—
浮动元素依旧位于父元素之内 浮动的框可以向左或向右移动，直到它的外边缘碰到父元素或另
一个浮动框的边框为止
—
经常使用它来实现特殊的定位效果
设置浮动
— float
：
none/left/right
子元素浮动之后，父元素高度为
0
，造成溢出现象： 解决方式① 给父元素设置高度， ② 使用
overflow
，隐藏溢出。
标签浮动之后，影响了其他标签的显示。如果其他标签不想受其影响，可以在标签中通过
clear
，清除浮动的影响。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动定位</title>
<style>
.inner {
background-color: #00FFFF;
margin: 3px;
float: left;
/*浮动：左浮动*/
}
.outer {
background-color: #808080;
/* 子元素浮动之后，父元素高度为0，造成溢出现象： 解决方式① 给父元素设置高度， ② 使用overflow，隐藏溢出。*/
/* height: 100px; 内部嵌套的元素浮动之后，包裹元素高度为0. 可以给包裹元素设置 高度。 */
overflow: hidden;
/* 内部嵌套的元素浮动之后，包裹元素高度为0 ， 可以使用 overflow: hidden; 让包裹元素的高度和内部元素高度匹配*/
}
p {
float: right;
/*右浮动: 标签浮动之后，影响了其他标签的显示。如果其他标签不想受其 影响，可以在标签中通过clear，清除浮动的影响。*/
}
h1 {
clear: both;
/*清除浮动的影响： none - 不清除, both-清除两边的浮动元素的影 响， left-清除左边的影响， right - 清除右边的影响*/
}
</style>
</head>
<body>
<!--定位：流定位 ， 浮动定位， 相对定位， 绝对定位， 固定定位 ①流定位： 页面中的块级元素从上到下一个接一个显示， 行内元素在一行中从到右排. ②浮动定位： 让元素脱离了普通的流定位 ，通过css的float属性设置元素的浮动方向，浮 动元素依旧在父元素内部，用它实现特殊的定位效果。 -->
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
<div class="inner">4</div>
</div>
<div>lkdkldkdkd </div>
<hr>
<div style="background-color: #00FFFF;">
<p>p标签</p>
<h1>h1标签</h1>
</div>
</body>
</html>
16.
定位：
position
元素设置了
position
定位之后，可以通过
top,left, right, bottom
等样式设置元素的具体位置。
① 相对定位
:relative ,
参考自己本身原来的位置。
② 绝对定位
:absolute ,
参考的是自己的有相对定位的包裹元素， 如果直接父元素没有相对定位，那么就找父辈的，如果最终也没有，那么就找html(body)
为准。
③ 固定定位
:fixed ,
参考
html(body)--
网页内容区域的左上角。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css的定位</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 80px;
border: 10px solid white;
background-color: #7FFFD4;
position: absolute;
text-align: center;
line-height: 80px;
}
</style>
</head>
<body>
<!-- position：定位 , top , left , right, bottom 设置元素的具体的位置。 ① 相对定位:relative , 参考自己本身原来的位置。 ② 绝对定位:absolute , 参考的是自己的有相对定位的包裹元素， 如果直接父元素没有相 对定位，那么就找父辈的， 如果最终也没有，那么就找html(body)为准。 ③ 固定定位:fixed , 参考html(body) -->
<!-- <div style="width: 100px; height: 100px; background-color: #008000; position: relative; bottom:50px; left: -50px; "> 我是div </div> -->
<!-- 父元素div，只是设置position:relative; 没有修改原本的位置。 -->
<div style="width: 300px; height: 400px; background: #7FFFD4; position: relative; ">
<!-- <p style="border: 1px solid blue;position: absolute; top: 50px; left: 150px; ">这个是p标签</p> -->
<!-- <p style="border: 1px solid blue;position: absolute; bottom: 50px; right: 150px; ">这个是p标签</p> -->
<!-- 调整p标签，让其在四个角落，和中心 -->
<!-- <p style="border: 1px solid blue;position: absolute; bottom: 0px; right: 0px; ">这个是p标签</p> -->
<!-- div的外面 -->
<p style="border: 1px solid blue;position: absolute; bottom: -50px; right: 0px; ">这个是p标签</p>
<!-- 以top ，left -->
<p style="border: 1px solid blue;position: absolute; top: 400px; left: 300px; ">这个是p2标签</p> <!-- 中心位置 -->
<p style="border: 1px solid blue;position: absolute; top: 160px; left: 80px; ">这个是p3标签</p>
</div>
<h3>三行三列的9个div显示</h3>
<div style="width:300px; height: 300px; position:relative;background- color: bisque;">
<div class="box">1</div>
<div class="box" style="left: 100px;">2</div>
<div class="box" style="left: 200px;">3</div>
<div class="box" style="top: 100px;">4</div>
<div class="box" style="left: 100px; top: 100px;">5</div>
<div class="box" style="left: 200px; top: 100px;">6</div>
<div class="box" style="bottom: 0px;">7</div>
<div class="box" style="bottom: 0px; right: 100px;">8</div>
<div class="box" style="bottom: 0px; right: 0px;">9</div>
</div> <!-- 练习：图片上定位显示一个其他内容 -->
<div style="position: relative; width: 160px; height: 120px;">
<!-- width: 100%; height: 100% : 根据父元素的宽度，高度，决定决定图片的宽高 --> <img src="../img/c.jpeg"
style="width: 100%; height: 100%; border- radius: 15px;" /> <span
style="position: absolute; top: 0px; left: 0px; background-color: red; width: 28px; height: 25px; text-align: center; color: white; line-height: 25px; border-top-left-radius: 15px; border-bottom- right-radius: 15px; ">1</span>
</div>
<!-- 固定定位:position: fixed; opacity: 0.5; 透明度的设置，数据值是0~1(文字也有透明度) background-color: rgba(29%,10%,61%,0.3) , rgba , rgb代表颜色的比例， a(0~1)代表透明度(只有背景色透明度有效) -->
<div style="position: fixed; left: 1600px; top: 700px; padding: 10px;background-color: rgba(29%,10%,61%,0.3); ">
<span>京东秒杀</span><br> <span>特色优选</span> </div>
<div style="height: 800px;"></div>
</body>
</html>
17.层叠和透明度
z-index,
已定位的元素，可以通过
z-index
控制层次顺序。
z-index
的值是一个整数，数据值越大，
离视线越近，如果没有设置
z-index
，默认值是
0.
元素可以设置透明度：
-opacity :
背景和文字都透明
-rgba
： 背景透明，名字不透明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>z-index的使用</title>
<style>
img {
position: absolute;
width: 70%;
height: 70%;
}
/*给元素设置了定位之后，如果被定位的元素的位置相同，则会发生堆叠现象(重合在一起) ，可以使用z-index，修改显示。 z-index:数据; 标签设置z-index之后，数据值越大的显示在越上层(就是能够被看见 的。)*/
/* img:hover{ z-index: 10; } */
* {
padding: 0;
margin: 0;
}
li {
float: left;
/*左浮动*/
width: 8px;
height: 8px;
border: 3px solid rgba(0, 0, 0, 0);
background: white;
border-radius: 50%;
/*圆*/
list-style: none;
margin: 5px;
}
li:hover {
border: 3px solid gray;
background-color: white;
}
</style>
</head>
<body>
<div style="width: 300px; height: 300px; position: relative; background-color: rgba(100,120,200,0.4);"> <img
src="../img/a.jpeg" style="top: 20px;left: 30px;" /> <img src="../img/b.jpeg"
style="top:40px;right: 20px;" /> <img src="../img/c.jpeg" style="bottom: 30px; left: 40px;" /> </div>
<hr> <!-- 练习： banner的内容(图片的轮播) ，通过定位，给图片上面添加对应数据量的按钮 -->
<div style="position: relative; width: 400px; height: 300px; border: 1px solid red;"> <img src="../img/b.jpeg"
style="width: 100%; height: 100%;" />
<ul style="position: absolute; top:270px;left: 50px;overflow: hidden; ">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
2582
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
