CSS
元素分类
标签分类
# 文本级标签
p h1-h6 strong/em span a img
# 排版级标签
br/hr ul/ol/dl li div input table select option form
各元素的分类及特性
块状元素
# 块状元素
div ul ol p h table form
独占一行
可以设置宽高，如果不设置宽度，默认是父标签的100%宽度
<title>元素分类</title>
<style type="text/css">
div{
background-color: red;
width: 200px;
height: 100%;
text-align: center;
}
p{
background-color: green;
}
ul{
background-color: yellow;
}
h1{
background-color: #cccccc;
}
</style>
</head>
<body>
<!-- 1. 块级元素
独占一行
可以设置宽高，如果不设置宽，默认是父标签宽度的100%
2. 行内元素
3. 行内块元素
-->
<div>lyy</div>
<p>我是一个段落</p>
<h1>h1</h1>
<ul>
<li>小米商城</li>
</ul>
</body>
行内元素
# 行内元素
a span em strong label
在一行内显示
不能设置宽高，默认的宽高为文本内容占据的宽高
<head>
<meta charset="UTF-8">
<title>元素分类</title>
<style type="text/css">
a{
background-color: red;
}
span{
background-color: yellow;
}
</style>
</head>
<body>
<a href="#">addddddddddd</a>
<span>dsfffff</span>
</body>
行内块元素
# 行内块元素
input img
在一行内显示
可以设置宽高
<head>
<meta charset="UTF-8">
<title>元素分类</title>
<style type="text/css">
a{
background-color: red;
}
span{
background-color: yellow;
}
form{
width: 200px
}
</style>
</head>
<body>
<a href="#">addddddddddd</a>
<span>dsfffff</span>
<form>
user<input type="text" name="user">
pwd<input type="password" name="pwd">
</form>
</body>
显示方式
控制网页中标签的显示方式
# 块级元素 display block
# 行内元素 display inline
# 行内块元素 display inline-block
block:1.可以手动设置宽高 2.自带换行 3.支持所有css样式
inline：1.宽高只能由内容撑开，不能手动设置 2.不带换行 3.支持部分css样式
inline-block： 1.可以手动设置宽高 2.不带换行 3.支持所有css样式
block:可以嵌套block,inline,inline-block
div,li 用来搭架构的，可以任意嵌套
h1~h6,p 建议只嵌套inline,就是用来转文本的
inline:只用来嵌套inline
span,i,b,em,strong a一般都会修改其display为block
inline-block:不建议嵌套任何 img input
img input 系统都设计成了单标签
none: 没有显示方式，就会在页面中隐藏
text-align: center; # 水平居中
line-height: npx #n是一个数字，n设置与标签的高度一致，就可以实现垂直居中
display:none； 标签内容在页面中隐藏
开发时，修改display的情况，一定要支持宽高，要更改位置（水平排列还是垂直排列）
案例1
<head>
<meta charset="UTF-8">
<title>显示方式2</title>
<style>
div {
display: block;
width: 100px;
height: 100px;
background-color: red;
}
span {
display: inline;
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div>divdivdiv</div>
<div>divdivdiv</div>
<span>spanspanspan</span>
<span>spanspanspan</span>
</body>
案例2
<head>
<meta charset="UTF-8">
<title>显示方式</title>
<style>
a {
display: block;
width: 100px;
height: 100px;
background-color: brown;
border: 1px solid black;
}
img {
width: 100px;
}
p{
text-align: center;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">
<img src="image/bd_logo1.png" alt="">
<p>前往百度</p>
</a>
</body>
选择器
群组选择器
案例1
<head>
<meta charset="UTF-8">
<title>选择器高级</title>
<style>
/*选择器高级： 基础选择器的各种组合*/
/*群组选择器 多个没有关系的标签，样式要设置为相同的*/
.h1,.p,.a {
color: red;
}
</style>
</head>
<body>
<h1 class="h1">标题</h1>
<p class="p">段落</p>
<div>
<a class="a" href="">链接</a>
</div>
</body>
案例2
<head>
<meta charset="UTF-8">
<title>选择器高级</title>
<style>
/*选择器高级： 基础选择器的各种组合*/
/*群组选择器 多个没有关系的标签，样式要设置为相同的*/
/*注 每一个选择器位可以为id,class,标签，选择器组合*/
h1,.p,.a {
color: red;
}
</style>
</head>
<body>
<h1 class="h1">标题</h1>
<p class="p">段落</p>
<h1 class="h2">标题2</h1>
<div>
<a class="a" href="">链接</a>
</div>
</body>
</html>
案例3
<head>
<meta charset="UTF-8">
<title>选择器高级</title>
<style>
/*选择器高级： 基础选择器的各种组合*/
/*群组选择器 多个没有关系的标签，样式要设置为相同的*/
/*注 每一个选择器位可以为id,class,标签，选择器组合*/
#t1,#t2,.p,.a {
color: red;
}
</style>
</head>
<body>
<h1 class="h1" id="t1">标题</h1>
<p class="p">段落</p>
<h1 class="h2" id="t2">标题2</h1>
<div>
<a class="a" href="">链接</a>
</div>
后代选择器
影响雷明霞的所有标签或类名
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style>
.div2 .p2 { # 空格必须加
color: orange;
}
</style>
</head>
<body>
<p class="p2">
单独的p
</p>
<div class="div2">
<p class="p2">div的p</p>
</div>
</body>
子代选择器
只影响相邻的标签或类名
<head>
<meta charset="UTF-8">
<title>子代选择器</title>
<style>
.div2>.p2 {
color: green;
}
</style>
</head>
<body>
<p class="p2">
单独的p
</p>
<div class="div2">
<p class="p2">div里的p</p>
<div> <p class="p2">div里的div的p</p></div>
</div>
</body>
兄弟选择器
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.div3~.i4 {
color:green;
}
</style>
</head>
<body>
<i class="i3">iiii</i>
<p class="p3">pppp</p>
<div class="div3">dddd</div>
<i class="i3">iiiiiiiii</i>
<i class="i4">iiiiiiiii</i>
</body>
相邻选择器
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.div3+.i3 {
color:green;
}
</style>
</head>
<body>
<i class="i3">iiii</i>
<p class="p3">pppp</p>
<div class="div3">dddd</div>
<i class="i3">iiiiiiiii</i>
<i class="i4">iiiiiiiii</i>
</body>
权重
高级选择器通过权重(个数)区分优先级
# 优先级顺序
id > class > 标签
# 优先级顺序相同时候，比个数
# 个数相同，比顺序，个数相同的情况下，靠近标签的样式先生效
# 高级选择器种类不影响优先级
<head>
<meta charset="UTF-8">
<title>子代选择器</title>
<style>
.div2>.p2 {
color: pink;
}
body.div2>.p2 {
color: orange;
}
</style>
</head>
<body>
<p class="p2">
单独的p
</p>
<div class="div2">
<p class="p2">div里的p</p>
<div> <p class="p2">div里的div的p</p></div>
</div>
</body>
伪类选择器
案例1
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
/*（）内填的是编号，所以从1开始*/
*:nth-child(3) {
color: orange;
}
</style>
</head>
<body>
<i class="i3">iiiii1</i>
<p class="p3">pppp</p>
<div class="div3">dddd</div>
<i class="i3">iiii2</i>
<hr>
<div>
<i class="i3">iiiii1</i>
<p class="p3">pppp</p>
<div class="div3">dddd</div>
<i class="i3">iiii2</i>
</div>
</body>
案例2
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
/*（）内填的是编号，所以从1开始*/
/*伪类选择器可以单独出现，相当于省略了通配（*）*/
:nth-child(3) {
color: orange;
}
</style>
</head>
<body>
<i class="i3">iiiii1</i>
<p class="p3">pppp</p>
<div class="div3">dddd</div>
<i class="i3">iiii2</i>
<hr>
<div>
<i class="i3">iiiii1</i>
<p class="p3">pppp</p>
<div class="div3">dddd</div>
<i class="i3">iiii2</i>
</div>
</body>
案例3
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
/*（）内填的是编号，所以从1开始*/
/*伪类选择器可以单独出现，相当于省略了通配（*）*/
/*nth-child先匹配层级位置，再匹配标签*/
i:nth-child(1){
color: green;
}
i:nth-child(4) {
color: orange;
}
</style>
</head>
<body>
<i class="i3">iiiii1</i>
<p class="p3">pppp</p>
<div class="div3">dddd</div>
<i class="i3">iiii2</i>
<hr>
<div>
<i class="i3">iiiii1</i>
<p class="p3">pppp</p>
<div class="div3">dddd</div>
<i class="i3">iiii2</i>
</div>
</body>
案例4
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
/*（）内填的是编号，所以从1开始*/
/*伪类选择器可以单独出现，相当于省略了通配（*）*/
/*nth-child先匹配层级位置，再匹配标签*/
/*nth-of-type 先匹配标签，再匹配位置*/
i:nth-child(1){
color: green;
}
i:nth-child(4) {
color: orange;
}
i:nth-of-type(1){
color: blue;
}
</style>
</head>
<body>
<i class="i3">iiiii1</i>
<p class="p3">pppp</p>
<div class="div3">dddd</div>
<i class="i3">iiii2</i>
<hr>
<div>
<i class="i3">iiiii1</i>
<p class="p3">pppp</p>
<div class="div3">dddd</div>
<i class="i3">iiii2</i>
</div>
</body>
案例5
<head>
<meta charset="UTF-8">
<title>伪类选择器2</title>
<style>
.box {
width: 150px;
}
.pp {
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
float: left;
text-align: center;
line-height: 50px;
}
/*2n偶数 2n-1/2n+1 奇数 3n 最后一列 第一列 3n-2*/
.pp:nth-child(3n-2) {
color: orange;
}
</style>
</head>
<body>
<div class="box">
<!--p.pp.p${p$}*9-->
<p class="pp p1">p1</p>
<p class="pp p2">p2</p>
<p class="pp p3">p3</p>
<p class="pp p4">p4</p>
<p class="pp p5">p5</p>
<p class="pp p6">p6</p>
<p class="pp p7">p7</p>
<p class="pp p8">p8</p>
<p class="pp p9">p9</p>
</div>
</body>
案例5
# 属性选择器
<head>
<meta charset="UTF-8">
<title>伪类选择器2</title>
<style>
.box {
width: 150px;
}
.pp {
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
float: left;
text-align: center;
line-height: 50px;
}
/*!*2n偶数 2n-1/2n+1 奇数 3n 最后一列 第一列 3n-2*!*/
.pp:nth-child(3n-2) {
color: white;
}
/*属性选择器*/
p[a] {
color: yellowgreen;
}
p[b] {
color: yellow;
}
p[c] {
color: pink;
}
</style>
</head>
<body>
<div class="box">
<!--p.pp.p${p$}*9-->
<p class="pp p1" a>p1</p>
<p class="pp p2" b>p2</p>
<p class="pp p3" c>p3</p>
<p class="pp p4">p4</p>
<p class="pp p5">p5</p>
<p class="pp p6">p6</p>
<p class="pp p7">p7</p>
<p class="pp p8">p8</p>
<p class="pp p9">p9</p>
</div>
</body>
# 属性选择器的优先级<伪类选择器(类选择器)
案例6 伪类选择器相当于类选择器
<head>
<meta charset="UTF-8">
<title>伪类选择器2</title>
<style>
.a1.a2 {
color: orange;
}
.a1:nth-child(1) {
color: red;
}
</style>
</head>
<body>
<a class="a1 a2" href="">aaaaaaaaaaaaaaaa</a>
</body>
a标签的4大伪类
案例1
<head>
<meta charset="UTF-8">
<title>a标签的4大伪类</title>
<style>
/*链接的初始状态*/
a:link {
color: deepskyblue;
}
/*链接的悬浮状态*/
a:hover {
cursor: pointer;
color: blue;
}
/*链接的激活状态，就是点击下去的那种状态*/
a:active {
color: red;
}
/*链接的已访问状态*/
a:visited {
color: yellow;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">前往百度</a>
</body>
案例2
<head>
<meta charset="UTF-8">
<title>a标签的4大伪类</title>
<style>
/*链接的初始状态*/
a:link {
color: deepskyblue;
}
/*链接的悬浮状态*/
a:hover {
cursor: pointer;
color: blue;
}
/*链接的激活状态，就是点击下去的那种状态*/
a:active {
color: red;
}
/*链接的已访问状态*/
a:visited {
color: green;
}
</style>
<style>
/*普通的标签都可以去使用： hover:active*/
.btn {
width: 80px;
height: 38px;
background-color: cornflowerblue;
border-radius: 5px;
text-align: center;
line-height: 38px;
color: white;
/*文本不能选中*/
user-select: none;
}
.btn:hover{
cursor: pointer;
background-color: deepskyblue;
}
.btn:active{
background-color: blue;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">前往百度</a>
<div class="btn">按钮</div>
</body>
文本样式
<head>
<meta charset="UTF-8">
<title>文本样式</title>
<style>
.div{
width: 200px;
height: 200px;
background-color: black;
}
.div {
font-size: 48px;
color: #ff5c04;
/*font-family: "STSong","微软雅黑";*/
font-weight: bold;
/*水平位置*/
text-align: center;
/*垂直位置,让行高=容器高*/
line-height: 200px;
}
/*w文本划线*/
/*text-decoration: {underline;}*/
/*去掉下划线*/
a {
text-decoration: none;
}
/*取消斜体*/
i{
font-style: normal;
}
</style>
</head>
<body>
<div class="div">文本</div>
<a href="">aaaaaaaa</a>
<i>sdfsdsfdfsfs</i>
</body>
背景样式
<head>
<meta charset="UTF-8">
<title>背景样式</title>
<style>
.bg {
width: 300px;
height: 300px;
background-color: tomato;
;
}
.bg {
/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url("image/WX20190701-234705@2x.png");
/*平铺 no-repeat 不平铺 repeat 平铺（默认）repeat-x 水平平铺 repeat-y 垂直平铺*/
background-repeat: no-repeat;
/*背景定位 x轴（left,center,right） y轴(top center bottom) */
/*background-position:right top ;*/
/*background-position:right bottom ;*/
/*background-position:right center ;*/
/*background-position:center center ;*/
/*background-position:center ;*/
/*background-position:left ;*/
/*指定尺寸移动*/
/*background-position: 100px 200px;*/
/*反向移动*/
/*background-position:10px -10px;*/
}
</style>
</head>
<body>
<div class="bg">12345</div>
</body>
CSS布局
display
不同的标签在页面中有不同的显示规则
如有些自带换行，有些同行显示还支持宽高，这些不是标签的特性，而是标签的display属性决定的
完成复杂的布局和样式，标签的显示方式都采用block
a {
display:block;
}
a可以任意嵌套其他标签，还可以设置宽高，还支持所有css样式，但是a不再同行显示了（block自带换行）
如何解决block同行显示 ==> css布局
inline: 同行显示，不用去关心宽高，不用额外操作
inline-block:同行显示，一般会主动设置宽或高，设置宽，高会等比缩放，反之亦然
有inline特性的标签，同行显示，但是有默认垂直对齐方式(通过vertical-align设置对齐方式)
# baseline 基线对齐(默认对齐方式)
# middle 中线对齐
# top 顶线对齐
盒模型
盒模型：
什么是盒模型：页面中每一个标签都可以称之为一个盒子
盒子的组成并发：外边距，边框，内边距，内容四部分组成，每个部分都有独立区域
外边距 - margin - 控制位置
边框 - border - 控制边框
内边距 - padding - 控制内容与边框的间距
内容 - content(width*height) - 文本内容或子标签显示的区域
border边框：宽度，样式，solid实线 dashed虚线 dotted点状线，颜色
border: 10px dotted black
margin参考系:自身原有位置
margin的left和top控制自身位置
margin的right和bottom控制兄弟位置
盒模型布局的地位:盒模型用来完成简单的布局要求，一般都是辅助其他布局，完成布局的微调
在设置边框时候，content和padding部分会被加入
案例1
/*margin的left和top控制自身位置*/
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style>
.box{
width: 200px;
height: 200px;
padding: 10px;
background-color: red;
}
.box{
padding: 20px 0 0 20px;
width: 180px;
height: 180px;
}
.box{
margin-left: 100px;
margin-top: 100px;
}
.abc{
width: 100px;
height: 200px;
padding: 10px;
background-color: orange;
/*margin-top: -10px;*/
/*margin-left: -1px;*/
}
.top,.bottom,.bottom2{
width: 100px;
height: 100px;
background-color: pink;
}
.top{
margin-bottom:50px ;
}
.bottom{
background-color: tan;
}
.bottom2{
background-color: #cccccc;
}
</style>
<style>
</style>
</head>
<body>
<div class="box"></div>
<div class="abc"></div>
<div class="top"></div>
<div class="bottom"></div>
<div class="bottom2"></div>
</body>
案例2
/*margin的right和bottom控制兄弟位置*/
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style>
/*border边框：宽度，样式，solid实线 dashed虚线 dotted点状线，颜色*/
/*border: 10px dotted black;*/
/*margin参考系:自身原有位置*/
/*margin的left和top控制自身位置*/
/*margin的right和bottom控制兄弟位置*/
.top,.bottom,.bottom2{
width: 100px;
height: 100px;
background-color: pink;
}
.top{
margin-bottom:50px ;
}
.bottom{
background-color: tan;
}
.bottom2{
background-color: #cccccc;
}
</style>
<style>
</style>
</head>
<body>
<div class="box"></div>
<div class="abc"></div>
<div class="top"></div>
<div class="bottom"></div>
<div class="bottom2"></div>
</body>
案例3
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style>
.abc{
width: 100px;
height: 200px;
padding: 10px;
background-color: orange;
/*快速居右*/
/*margin-left: auto;*/
/*快速居左*/
/*margin-right: auto;*/
/*居中*/
margin: auto;
}
</style>
<style>
</style>
</head>
<body>
<div class="abc"></div>
</body>
案例4 border的应用
<head>
<meta charset="UTF-8">
<title>border</title>
<style>
.border{
width: 200px;
height: 200px;
/*常用编写方式 一次定义三要素*/
border: 1px solid red;
/*按照三要素来编写border*/
border-style: dotted;
border-color: yellow;
border-width: 10px;
/*按照方向来编写border*/
border-top-width: 4px;
border-top-style: solid;
border-top-color: red;
}
</style>
</head>
<body>
<!--三要素 粗细（width） 样式（style） 颜色（color）-->
<div class="border"></div>
案例5 自定义搜索框
<head>
<meta charset="UTF-8">
<title>border</title>
<style>
input{
border: none; /*清空外框线样式*/
outline: 0; /*清空悬浮下的外框线样式*/
}
.username{
width: 175px;
height: 20px;
border: 1px solid #666666;
font-size: 20px;
padding-left: 5px; /*设置搜索框内用户输入的游标的起始位置*/
}
.username:hover{
color: #000;
}
</style>
</head>
<body>
<input type="text" name="" class="username">
</body>
浮动布局
# 浮动布局：使得网页有分栏排版的功能
# 浮动带来的破坏性:浮动对象脱离了标准文档流，无法撑起父级的高度
<head>
<meta charset="UTF-8">
<title>浮动布局</title>
<style>
.top_bar{
border: 1px solid red;
}
.child1{
float: left;
height: 80px;
background-color: red;
}
.child2{
float: right;
height: 80px;
background-color: green;
}
.header{
background-color: yellow;
width: 100%;
height: 40px;
}
</style>
</head>
<body>
<div class="top_bar">
<div class="child1">大儿子</div>
<div class="child2">二儿子</div>
</div>
<div class="header"></div>
</body>
解决浮动带来的破坏性
1. 给父元素设置固定高度
缺点：使用不灵活，后期不易维护
应用：网页中盒子固定高度区域，比如固定导航拦
<head>
<meta charset="UTF-8">
<title>浮动布局</title>
<style>
.top_bar{
border: 1px solid red;
height: 80px;
}
.child1{
float: left;
height: 80px;
background-color: red;
}
.child2{
float: right;
height: 80px;
background-color: green;
}
.header{
background-color: yellow;
width: 100%;
height: 40px;
}
</style>
</head>
<body>
<div class="top_bar">
<div class="child1">大儿子</div>
<div class="child2">二儿子</div>
</div>
<div class="header"></div>
</body>
2. 内墙法
规则：在最后一个浮动元素的后面加上一个空的块级元素，并且设置该属性clear:both
缺点：结构冗余
<head>
<meta charset="UTF-8">
<title>浮动布局</title>
<style>
.top_bar{
border: 1px solid red;
}
.child1{
float: left;
height: 80px;
background-color: red;
}
.child2{
float: right;
height: 80px;
background-color: green;
}
.header{
background-color: yellow;
width: 100%;
height: 40px;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="top_bar">
<div class="child1">大儿子</div>
<div class="child2">二儿子</div>
<div class="clear"></div>
</div>
<div class="header"></div>
</body>
3. 伪元素(选择器)清除
<head>
<meta charset="UTF-8">
<title>浮动布局</title>
<style>
.top_bar{
border: 1px solid red;
}
.child1{
float: left;
height: 80px;
background-color: red;
}
.child2{
float: right;
height: 80px;
background-color: green;
}
.header{
background-color: yellow;
width: 100%;
height: 40px;
}
.top_bar::after{
/*行内元素 content*/
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="top_bar">
<div class="child1">大儿子</div>
<div class="child2">二儿子</div>
</div>
<div class="header"></div>
</body>
4. overflow：hidden; 清除
<head>
<meta charset="UTF-8">
<title>overflow</title>
<style>
body{
overflow: scroll;
}
.box{
width: 300px;
height: 300px;
border: 1px solid red;
/*overflow: scroll; scroll 超出部分滚动 hidden 超出部分隐藏 inherit 继承父类的overflow的配置*/
}
</style>
</head>
<body>
<div class="box">
二是建立可舒服多了开发商可立即反过来看了快捷方式二是建立可舒服多了开发商可立即反
过来看了快捷方式二是建立可舒服多了开发商可立即反过来看了快捷方式二是建立可舒服多了开发商可立即反过来看了快捷方式
二是建立可舒服多了开发商可立即反过来看了快捷方式二是建立可舒服多了开发商可立即反过来看了快捷方式二是建立可舒服多了开发商可立即反过来看了快捷方式
二是建立可舒服多了开发商可立即反过来看了快捷方式二是建立可舒服多了开发商可立即反过来看了快捷方式二是建立可舒服多了开发商可立即反过来看了快捷方式二是建立可舒服多了开发商可立即反过来看了快捷方式
二是建立可舒服多了开发商可立即反过来看了快捷方式二是建立可舒服多了开发商可立即反过来看了快捷方式二是建立可舒服多了开发商可立即反过来看了快捷方式二是建立可舒服多了开发商可立即反过来看了快捷方式
二是建立可舒服多了开发商可立即反过来看了快捷方式二是建立可舒服多了开发商可立即反过来看了快捷方式二是建立可舒服多了开发商可立即反过来看了快捷方式
二是建立可舒服多了开发商可立即反过来看了快捷方式二是建立可舒服多了开发商可立即反过来看了快捷方式二是建立可舒服多了开发商可立即反过来看了快捷方式
二是建立可舒服多了开发商可立即反过来看了快捷方式二是建立可舒服多了开发商可立即反过来看了快捷方式二是建立可舒服多了开发商可立即反过来看了快捷方式二是建立可舒服多了开发商可立即反过来看了快捷方式
二是建立可舒服多了开发商可立即反过来看了快捷方式二是建立可舒服多了开发商可立即反过来看了快捷方式二是建立可舒服多了开发商可立即反过来看了快捷方式二是建立可舒服多了开发商可立即反过来看了快捷方式
二是建立可舒服多了开发商可立即反过来看了快捷方式二是建立可舒服多了开发商可立即反过来看了快捷方式二是建立可舒服多了开发商可立即反过来看了快捷方式二是建立可舒服多了开发商可立即反过来看了快捷方式
</div>
</body>
案例
<head>
<meta charset="UTF-8">
<title>浮动布局</title>
<style>
.wrap{
width: 150px;
background-color: cornflowerblue;
}
.d{
width: 50px;
height: 50px;
background-color: orange;
border-radius: 50%;
}
/*浮动布局：不要撑开父级高度，但浮动受父级宽度影响 */
.d{
float: left;
}
.wrap:after{
display: block;
content: "";
/*清浮动的关键*/
clear: both;
}
</style>
</head>
<body>
<div class="wrap">
<div class="d d1"></div>
<div class="d d2"></div>
<div class="d d3"></div>
<div class="d d4"></div>
<div class="d d5"></div>
<div class="d d6"></div>
<div class="d d7"></div>
<div class="d d8"></div>
<div class="d d9"></div>
<div class="d d10"></div>
<div class="d d11"></div>
<div class="d d12"></div>
<div class="d d13"></div>
</div>
</body>
###########################################################################################
<head>
<meta charset="UTF-8">
<title>浮动布局</title>
<style>
.top_bar{
border: 1px solid red;
overflow: hidden;
}
.child1{
float: left;
height: 80px;
background-color: red;
}
.child2{
float: right;
height: 80px;
background-color: green;
}
.header{
background-color: yellow;
width: 100%;
height: 40px;
}
</style>
</head>
<body>
<div class="top_bar">
<div class="child1">大儿子</div>
<div class="child2">二儿子</div>
</div>
<div class="header"></div>
</body>
