1.CSS浮动：就是让块级标签不独占一行。目的（使用场景）：把块级标签元素可以排在一行上。
2.浮动的原理：就是让元素脱离文档流，不占用标准流
3.float的属性值：
left：左浮动
right：右浮动
none：默认值，不浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
.wrapper{
width: 600px; /*wdt600*/
margin: 0 auto; /*mg0*/
border: 1px solid #666666; /*bd1*/
}
.box1,.box2,.box3{
width: 200px;
height: 150px;
}
.box1{
background-color:#ff0000;
float:left;
}
.box2{
background-color:#0000ff;
float:right;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box1">box1</div> <!--这里的div属于块级标签，会独占一行-->
<div class="box2">box2</div>
</div>
</body>
</html>4.浮动后，后面的元素不管是块级还是行级元素，都不会显示在下一行。
5.清除浮动：
目的：让后面的元素自动掉到下一行。
方法：
1）方法一：添加空标签，并设置样式：clear:both;
clear:left; 清除左浮动
clear:right; 清除右浮动
clear:both; 清除左右浮动
clear:none; 左右浮动都不清除
2）方法二：在要清除浮动的父级添加样式：
overflow:hidden; 超出部分隐藏，也可以用来实现清除浮动
3）方法三：在要清除浮动的父级添加伪元素，并设定样式：
父元素:after{
content:"";
display: block;
clear:both;
}
注意：在实际开发中，我们一般优先选择第二种方案。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style>
.wrapper{
width: 600px; /*wdt600*/
margin: 0 auto; /*mg0*/
border: 1px solid #666666; /*bd1*/
/*overflow:hidden; !*清除浮动方法2*!*/
}
.wrapper:after{ /*清除浮动方法3*/
content:"";
display: block;
clear:both;
}
.box1,.box2,.box3{
width: 200px;
height: 150px;
}
.box1{
background-color:#ff0000;
float:left;
}
.box2{
background-color:#0000ff;
float:right;
}
/* .clear{ 清除浮动方法1
clear:both;
}*/
.box3{
background-color: #eeec39;
}
</style>
</head>
<body>
<!--<div class="wrapper">-->
<!--<div class="box1">box1</div> <!–这里的div属于块级标签，会独占一行–>-->
<!--<div class="box2">box2</div>-->
<!--清除浮动方法1-->
<!--<div class="clear"></div>-->
<!--<div class="box3">box3</div>-->
<!--</div>-->
<div class="wrapper">
<div class="box1">box1</div> <!--这里的div属于块级标签，会独占一行-->
<div class="box2">box2</div>
</div>
<div class="box3">box3</div> <!--不在wrapper中-->
</body>
</html>练习案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.info-show{
width: 600px;
padding: 20px;
border:1px solid #ccc;
margin:100px auto;
overflow: hidden;
}
.head-sculpture{
float:left;
margin-right: 20px;
}
.head-sculpture .photo{
width: 200px;
height: 300px;
border: 1px solid #ccc;
text-align: center;
display: table-cell;
vertical-align: middle; /*垂直居中*/
}
.name{
text-align: center;
}
.description{
width: 350px;
height: 290px;
border: 1px solid #ccc;
float: left;
padding:10px 0 0 20px; /*上右下左*/
}
</style>
</head>
<body>
<div class="info-show"> <!--.info-show>.head-sculpture>.photo+.name-->
<div class="head-sculpture">
<div class="photo">头像</div>
<div class="name">姓名</div>
</div>
<div class="description">描述</div>
</div>
</body>
</html>6.CSS盒子模型
每个元素都是一个盒子，一个盒子是由margin（外边距）、border（边框线）、padding（内边距）、和content（内容）组成。
区别外边距和内边距，是以边框为参照
系统默认外边距为8px。
1）外边距（margin）：指元素边框线之外的距离
margin-left：左边距
margin-right：右边距
margin-top：上边距
margin-bottom：下边距
margin：可以用来设置任意一个边的边距，可以带1至4个参数。（1个参数：表示上下左右都有这个外边距；2个参数：表示上下边距为a，左右为b；3个参数：表示上外边距为a，下为c，左右为b；4个参数：表示上a，右b，下c，左d）
2）内边距（padding）：指元素的文本内容与边框之间的距离。他的用法和margin一致。
3）边框线（border）：
7.盒子的真实尺寸：
盒子宽度=width+padding左右+border左右
盒子高度=height+padding上下+border上下
8.display属性：用来设置元素的显示方式
属性值：
--none：不显示元素
--block：块显示，在元素前后设置换行符，目的：将行级标签转化为块级标签（因为行级标签不识别宽高，而块级标签识别，转换后行级标签也可以设置宽高）
--inline：行内显示，将块级转换为行级标签。
--inline-block：将块级或行级标签转换为行内块级标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display属性</title>
<style>
div{
width: 200px;
height: 100px;
background-color: red;
/*display: inline-block;*/
display: inline; /*不识别宽高，填充内容就会有效果*/
}
div:first-child{
background-color: blue;
}
span{
width: 300px;
height: 200px;
background-color: orange;
/*display: block;*/
display: inline-block;
/*以上两种不同的效果*/
/*display: none;*/
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<span>span</span>
</body>
</html>9.table样式
1）table一般不用来布局，主要用来格式化数据。
属性：
--width：宽度
--height：高度
--border-collapse:collapse：单线边框
--border：边框线
2)td，tr属性：
--width：宽度
--height：高度
--border：边框线
--text-align：文本左右对齐（left/center/right)
--vertical-align：文本垂直对齐（top/middle（默认）/bottom）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table样式</title>
<style>
table,td{
border: 1px solid green;
}
table{
border-collapse: collapse ;
text-align:center; /*内容居中*/
margin: 0 auto; /*表格居中*/
width: 500px;
height: 300px;
}
tr{
/*vertical-align: top;*/
vertical-align: bottom;
}
</style>
</head>
<body>
<!--table>tr*3>td{具体内容$}*4-->
<table >
<tr>
<td>具体内容1</td>
<td>具体内容2</td>
<td>具体内容3</td>
<td>具体内容4</td>
</tr>
<tr>
<td>具体内容1</td>
<td>具体内容2</td>
<td>具体内容3</td>
<td>具体内容4</td>
</tr>
<tr>
<td>具体内容1</td>
<td>具体内容2</td>
<td>具体内容3</td>
<td>具体内容4</td>
</tr>
</table>
</body>
</html>10.列表样式
不是描述性的文本的任何内容都可以认为是列表。比如：菜单、商品列表等。
1）列表类型
无序列表ul、有序列表ol和自定义列表dl。
ul和ol的列表项都是用li表示的，而dl是由一个dt和一个或多个dd组成的。
dl一般用来设定一个定义，比如名词解释等。dt：标题，dd：描述，用来对dt的内容进行解释说明。
2）样式（用来修改标识类型）
list-style-image：用图像标识标识
list-style-position：标识的位置，inside/outside（默认）
list-style-type：标识类型
简写：list-style:list-style-image list-style-position list-style-type（注：list-style的值可以按照任意顺序列出，而且可以任意省略，只要提供一个值，其他都是自动默认）
list-style-type的属性值：
--无序：disc/circle/square
--有序：decimal/decimal-leading-zero/lower-roman/upper-roman/lower-alpha/upper-alpha/lower-greek/lower-latin/upper-latin等
--有序和无序：none
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>list列表样式</title>
<style>
ul{
/*list-style-type: circle;*/
/*list-style-type: none; !*list-style: none;*!*/
list-style-position: inside;
list-style-image: url("20201124032511.png");
}
ol{
/*list-style-type: decimal-leading-zero;*/
list-style-type: upper-alpha;
}
dt{
font-weight: bold;
font-size: 18px;
}
dd{
margin-left: -1px;
}
</style>
</head>
<body>
<!--ul>li{列表项$}*5-->
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
</ul>
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
</ol>
<dl>
<dt>水果摊</dt>
<dd>香蕉</dd>
<dd>苹果</dd>
<dd>梨</dd>
</dl>
</body>
</html>11.轮播图
作用：主要用于产品或公司相关宣传。
组成：
1）轮播的组图（至少两张以上，也不能太多）
2）控制器
3）计数器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<link rel="stylesheet" href="carouse.css">
</head>
<body>
<!--.carousel>ul.carousel-imgs>li*5>a[href=#]>img[src=img/轮播$.png alt=banner]-->
<div class="carousel">
<!--1.轮播组图-->
<ul class="carousel-imgs">
<li><a href="#"><img src="img/轮播1.png" alt="banner"></a></li>
<li><a href="#"><img src="img/轮播2.png" alt="banner"></a></li>
<li><a href="#"><img src="img/轮播3.png" alt="banner"></a></li>
<li><a href="#"><img src="img/轮播4.png" alt="banner"></a></li>
<li><a href="#"><img src="img/轮播5.png" alt="banner"></a></li>
</ul>
<!--2.控制器-->
<!--.prev+.next-->
<div class="prev"></div>
<div class="next"></div>
<!--3.计数器-->
<div class="count">
<!--ul>li*5-->
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>*{
margin:0;
padding: 0;
}
li{
list-style-type: none;
}
a{
text-decoration: none;
}
.carousel{
width: 750px;
height: 300px;
margin: 0;
background: #75e0ee;
position: relative; /*相对定位*/
overflow: hidden;
}
/*1.轮播组图*/
.carousel-imgs{
width: 9999px;
}
.carousel-imgs li{
float: left;
}
.carousel-imgs img{
width: 100%;
height: 100%;
}
/*2.控制器*/
.prev,.next{
width: 45px;
height: 45px;
position: absolute; /*绝对定位，脱离文档流,它相对于position: relative定义的元素进行定位*/
top: 50%;
margin-top:-22.5px;
}
.prev{
background-image: url("img/left.jpg");
left:20px;
}
.next{
background-image: url("img/right.jpg");
right: 20px;
}
/*3.计数器*/
.count{
width: 750px;
height: 10px;
position: absolute;
bottom: 25px;
}
.count ul{
width: 100px;
/*height: 10px;*/
margin: 0 auto;
/*background-color: #f00;*/
}
.count ul li{
width: 10px;
height: 10px;
cursor: pointer; /*将鼠标形状设置为手型*/
background-color: dodgerblue;
opacity: .5; /*不透明度，取值范围0-1之间，可以是小数*/
float: left;
margin-right: 10px;
border-radius: 50%; /*圆角*/
}
.count ul .active{
background-color: fuchsia;
opacity: 1;
}
595
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
