01-标准流和浮动
<!--
标准流布局：在标准流中，
块级标签:一个占一行,默认宽度是父标签的宽度，默认高度是内容的高度。并且可以设置宽度和高
行内标签：一行可以显示多个，默认宽度和高度都是内容的宽度和高度，设置宽和高无效
行内块标签：一行可以显示多个，默认宽度和高度都是内容的宽高，设置宽和高有效
块级标签:h1-h6 p hr ol ul dl li table tr div
行内标签:a img td input select opyion textarea span
行内块标签
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!-- 块级标签 -->
<h1 style="background-color: beige;">我是标题一</h1>
<h2 style="background-color: antiquewhite;">我是标题二</h2>
<p style="background-color: bisque;">我是段落一</p>
<ol style="background-color: azure;">
我是列表1
<li>
我是li标签
</li>
</ol>
<ul style="background-color: aquamarine;">
我是列表2
<li>我是li标签</li>
</ul>
<!-- 行内标签 -->
<a href="https://www.baidu.com">我是超链接</a>
<img src="img/js..png" >
<!-- 行内 -->
<select>
<!-- 行内 -->
<optgroup label="四川"></optgroup>
<!-- 块级 -->
<option value ="">泸州</option>
<option value ="">成都</option>
</select>
<div id="">
<a href="https://www.baidu.com">我是超链接</a>
<a href="https://www.baidu.com">我是超链接</a>
</div>
<!-- 解决方案1，行内块 -->
<div style="background-color: aliceblue;height: 200px;"></div>
<div style="height: 400px;width: 20%; display: inline-block;background-color: aquamarine"></div>
<div style="height: 400px;width: 57%; display: inline-block;background-color: azure;"></div>
<div style="height: 400px;width: 20%; display: inline-block;background-color: brown"></div>
<div style="background-color: azure;height: 200px;"></div>
<div style="background-color: gray;height: 200px;width: 100%;"></div>
<div style="height: 300px; width: 30%;background-color: blue;float: left;"></div>
<div style="height: 300px;width: 40%;background-color: green;float: left;"></div>
<div style="height: 300px;width: 30%;background-color: yellow;float: left;"></div>
<div style="background-color: bisque;height: 500px;width: 100%;"></div>
</body>
</html>
02-display(设置标签性质)
<!--
1.display(设置标签性质)
a.block - 将标签设置为块级标签
b.inline-block - 将标签设置为行内块标签(一般不会通过将标签转换成行内块来解决问题,因为行内块标签在显示的时候左右中间会有不能消除的缝隙)
c.inline - 将标签设置为行内标签
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!-- 将a标签转化为块级标签 -->
<a href="" style="display: block; background-color: aliceblue;width: 200px;">超链接</a>
<a href="" style="display: block; background-color: yellow;width: 200px;">超链接</a>
<!-- 将a标签转化为行内块标签 -->
<a href="" style="display: inline-block; background-color: yellow;width: 200px;">超链接</a>
<a href="" style="display: inline-block; background-color: yellow;width: 200px;">超链接</a>
<p style="background-color: aliceblue;">hahah</p>
<p style="background-color: aliceblue;display: inline;">hahah</p>
<p style="background-color: aliceblue;display: inline;">hahah</p>
<div id="" style="background-color: #0000FF;display: inline;">hahah
</div>
<div id="" style="background-color: yellow;display: inline;">hehehhe
</div>
</body>
</html>
03-浮动
<!--
1.浮动会让标签脱离标准流进行布局(脱流)
原理：
a.浮动会让标签脱离标准流进行布局(脱流)
b.没有浮动的标签既占池底的位置，也占水面位置，浮动后只占水面位置
2.float属性
left - 左浮动
right - 右浮动
3.脱流后的布局规则：不管什么标签，脱流后都是一行显示多个，可以设置宽度和高度，并且没有缝隙
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
a,p{
background-color: cadetblue;
float: left;
width: 200px;
height: 50px;
}
div{
}
</style>
</head>
<body>
<!-- 设置float属性后会脱流 -->
<!-- <p>我是段落1呀</p>
<p>我是段落2呀</p>
<a href="">aaa</a>
<a href="">bbb</a>
<br/><br/><br/> -->
<!-- <div style="background-color: red;height: 200px;float: left;">d1</div>
<div style="background-color: gray;height: 100px;"><img src="img/js_icon.png" ></div>
<div style="background-color: blue;height: 300px;float: left;">d3</div>
<a href="">aaaaa</a> -->
<div style="background-color: aliceblue;height: 100px;width: 100%;">d1</div>
<div style="background-color: antiquewhite;float: left;height: 300px;width: 30%;">d2</div>
<div style="background-color: aqua;float: left;height: 300px;width: 50%;">d3</div>
<div style="background-color: aquamarine;float: right;height: 800px;width: 20%;">d4</div>
<div style="background-color: azure;float: left;height: 300px;width: 40%;">d5</div>
<div style="background-color: cadetblue;float: left;height: 300px;width: 40%;">d6</div>
<div style="background-color: blue;height: 200px;width: 80%;float: left;">d7</div>
<div style="background-color: black;height: 200px;width: 100%;float: left;">d8</div>
</body>
</html>
04-清除浮动
<!--
1.清除浮动
清除浮动指的是清除因为浮动而产生的高度塌陷问题
2.高度塌陷
当父标签不浮动，并且不设置高度；但是子标签浮动的时候就会产生高度塌陷问题
3.清除浮动的方法
a.添加空的div；在父标签的最后添加一个空的div,并且设置样式clear属性的值为both(一般不选，因为要修改html的代码)
b.找到父标签，给父标签添加overflow属性设置为hidden
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#d11{
overflow: hidden;
}
</style>
</head>
<body>
<div style="background-color: red;height: 100px;"></div>
<div id="d11" style="background-color: yellow;width: 100%;">
<div style="background-color: green;float: left;height: 200px;width: 200px;"></div>
<div style="background-color: coral;float: right;height: 500px;width: 200px;"></div>
<!-- <div id="" style="clear: both;">
</div> -->
</div>
<div style="background-color: black;height: 100px;">
</div>
</body>
</html>
05-内容环绕效果
<!--
文字环绕：被环绕的标签浮动，文字对应的标签不浮动
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<!-- 图片块 -->
<div style="float: right;">
<img src="img/js_icon.png" >
</div>
<!-- 文字块 -->
<div id="">
按时打卡机斯柯达四大名点卡拉斯的萨洛克的面孔萨马德里萨满的妈妈的昂视
啥都没看洒落的马萨大厦撒打开门sad屎大颗路径打开数据的杀到了撒娇的撒
sad撒大所按时打卡机斯柯达四大名点卡拉斯的萨洛克的面孔萨马德里萨满的妈妈的昂视
啥都没看洒落的马萨大厦撒打开门sad屎大颗路径打开数据的杀到了撒娇的撒
sad撒大所按时打卡机斯柯达四大名点卡拉斯的萨洛克的面孔萨马德里萨满的妈妈的昂视
啥都没看洒落的马萨大厦撒打开门sad屎大颗路径打开数据的杀到了撒娇的撒
sad撒大所按时打卡机斯柯达四大名点卡拉斯的萨洛克的面孔萨马德里萨满的妈妈的昂视
啥都没看洒落的马萨大厦撒打开门sad屎大颗路径打开数据的杀到了撒娇的撒
sad撒大所按时打卡机斯柯达四大名点卡拉斯的萨洛克的面孔萨马德里萨满的妈妈的昂视
啥都没看洒落的马萨大厦撒打开门sad屎大颗路径打开数据的杀到了撒娇的撒
sad撒大所
</div>
</body>
</html>
06-定位
<!--
CSS课通过left、right、top、bottom来对标签进行定位，前提是设置好参考对象
1.定位属性：
left - 标签左边距
right - 右边距
top - 上边距
bottom - 下边距
注意：
a.定位需要通过position属性来设置参考对象
b.当标签的宽度固定的时候，同时设置left和right时，只有left有效
c.同时设置left或right但不设置宽度或者将宽度设置为auto的时候标签自动拉伸
2.position属性
了解：
initial - 默认值，为默认值的时候子标签不能定位
static - 不希望自己的子标签相对自己定位的时候才使用static
掌握:
absolute - 相对第一个非static和非initial的父标签进行定位,body标签的position默认为其他的
relative - 相对于自己在标准流中的位置定位;如果一个标签自己下面的标签以自己来定位
fixed - 相对于浏览器页面定位，如果为bottom，内容多少都在在浏览器底部
sticky - 粘性定位，类似于fixed，如果为bottom，如果需要滚动的时候相对浏览器定位，没有超过时相对标准流定位
overflow:hidden - 裁剪自己的子标签超出自己的范围的部分
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#div1{
width: 600px;
height: 600px;
background-color: red;
position:relative;
}
#div2{
width: 400px;
height: 400px;
background-color: green;
position: relative;
}
#div3{
/* 宽度不确定的应用 */
/* position: absolute;
right: 50px;
left: 50px;
height: 100px;
width: 100px;
background-color: blue; */
/* relative */
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
right: -50px;
top: 100px;
}
#div{
position: fixed;
bottom: 50px;
right: 50px;
}
</style>
</head>
<body>
<div id="div1">div1
<div id="div2">div2
<div id="divx" style="background-color: yellow;width: 100px;height: 100px;">div3
</div>
<div id="div3">div4
</div>
</div>
</div>
<div id="div" style="background-color: aqua">
<img src="img/js_icon.png" >
</div>
<div id="" style="background-color: black;height: 10000px;">div6
</div>
</body>
</html>
07-盒子模型
<!--
html中所有可见的标签都是盒子模型，固定的结构，包括：内容、padding、border、margin四个部分
内容 - 可见的，设置width和height时设置内容的大小,默认大小跟标签的内容有关
添加子标签或者设置文字内容都是添加或者显示在内容部分的
特点：设置background-color会作用于内容部分
padding - 可见的，分上、下、左、右四个部分。一般情况下，默认为0
设置内容的background-color会作用于padding
border - 有时候又叫边框，可见的，分上下左右四个部分；一般情况下默认为0
border的背景颜色需要单独设置
margin - 不可见但是占位置，分上下左右四个边缘部分，一般默认值为0
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#div1{
/* 1.设置内容部分和padding部分的背景颜色 */
background-color: gray;
/* 设置内容大小 */
height: 100px;
width: 100px;
/*
2.设置padding
a.分开设置
*/
/* padding-left: 20px;
padding-top: 50px; */
/* b.一起设置(上下左右都设置20px) */
padding: 20px;
/*
3.设置border
border值的格式 - 线的样式 颜色 宽度
样式: solid(实线) double(双线) dashed(点划线)
a.单独设置
*/
border-left: groove red 30px;
border-top: solid yellow 30px;
border-right: double green 30px;
border-bottom: dashed blue 30px;
/* 同时设置 */
/* border: solid red 30px; */
/*4.设置圆角,分开切 一起切*/
border-radius: 50px 20px;
border-top-right-radius: 50px;
/* 5.添加margin */
margin-left: 20px;
}
</style>
</head>
<body>
<div id="div1">ao cai 大叔大婶哎哎哎哎
<div id="" style="width: 20px;height: 20px;background-color: green">
</div>
</div>
姓名: <input type="text" id="" value="" style="padding-left: 10px;" />
</body>
</html>
网友评论