一、
<!--
1.标准流
标准流布局：在标准流中，块级标签是一个占一行，默认宽度是父标签的宽度，默认高度是内容的高度；并且可以设置宽度和高度
行内标签，一行可以显示多个，默认宽度和高度都是内容的宽度；设置宽高无效
行内块标签，一行可以显示多个，默认宽度和高度都是内容的宽高；设置宽高有效
块级标签：h1-h6, p, hr, ol\ul\dl\li, table, tr, div
行内标签：a, img, td, input，select，option, textarea, span
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--解决方案1：使用display-->
<div style="height: 200px; background-color: chocolate;"></div>
<div style="height: 400px; background-color: yellow;">
<div style="background-color: blanchedalmond;display: inline-block;height: 400px; width: 20%;"></div>
<div style="background-color: slateblue;display: inline-block;height: 400px;width: 60%;"></div>
<div style="background-color: aqua;display: inline-block;height: 400px; width: 19%;"></div>
</div>
<div style="height: 200px; background-color: yellowgreen;"></div>
</body>
</html>
二、display属性
<!--
1.display(设置标签的性质)
block - 将标签设置为块级标签
inline-block - 将标签设置为行内块标签
(注意：一般不会通过将标签转换成行内块来解决问题, 因为行内块标签在现实的时候左右中间会有不能消除的空隙)
inline - 将标签设置为行内标签
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
display: block - 将a转换成块级标签
-->
<a href="", style="display: block;background-color: hotpink; width: 200px;">abc</a>
<!--
display: inline-block - 将a转换成行内块标签
-->
<a href="", style="display: inline-block;background-color: darkcyan; width: 300px;">123</a>
<a href="", style="background-color: darkkhaki; width: 300px;">123</a>
<p style="display: inline; background-color: lightskyblue; width: 200px;">我是段落1</p>
<p style="display: inline; background-color: lightskyblue;">我是段落2</p>
</body>
</html>
三、float属性
<!--
1.浮动原理:
a.浮动会让标签脱离标准流进行布局(脱流)
b.没有浮动的标签即占池底的位置，也占水面位置。浮动后只占水面位置
2.float属性
left - 左浮动
right - 右浮动
3.脱流后的布局规则：不管什么标签，脱流后都是一行可以显示多个，可以设置宽度和高度
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
background-color: chartreuse;
float: left;
width: 200px;
}
a{
background-color: sandybrown;
width: 200px;
float: left;
}
div{
width: 200px;
}
</style>
</head>
<body>
<!--1.设置float属性后会脱流-->
<!--<p>我是段落1</p>
<p style="background-color: yellow;">我是段落2</p>
<a href="">aaa</a>
<a href="">bbb</a>-->
<div style="background-color: hotpink; height: 300px;float: right;">div1</div>
<div style="background-color: goldenrod; height: 200px;">
div2
</div>
<div style="background-color: yellow; height: 400px; ">div3</div>
<a href="">aaa</a>
</body>
</html>
四、清除浮动
<!--
1.清除浮动
清除浮动指的是清除因为浮动而产生的高度塌陷问题
2.高度塌陷
当父标签不浮动，并且不设置高度；但是子标签浮动的时候就会产生高度塌陷问题
3.清除浮动的方法：
a.添加空的div： 在父标签的最后添加一个空的div,并且设置样式clear属性的值为both
b.在会塌陷的标签中添加样式，将overflow属性的值设置为hidden
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*方案2*/
#div2{
overflow: hidden;
}
</style>
</head>
<body>
<div style="background-color: hotpink; height: 100px;"></div>
<!--div2会出现高度塌陷问题-->
<div id="div2" style="background-color: yellow;">
<div style="background-color: peru; height: 100px; width: 200px;float: left;"></div>
<div style="background-color: seagreen; height: 200px;width: 200px; float: right;"></div>
<!--方案1-->
<!--<div style="clear: both;"></div>-->
</div>
<div style="background-color: lightblue; height: 120px;"></div>
</body>
</html>
五、
<!--
文字环绕：被环绕的标签(例如图片对应的标签)浮动；文字对应的标签不浮动
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--图片对应块-->
<div id="" style="background-color: sandybrown; float: left;">
<img src="img/luffy2.png"/>
</div>
<!--文字对应的块-->
<div id="" style="background-color: yellow;">
对此，苏宁易购官方事后回应称，公告显示财政部在检查中发现苏宁存在的 “资产转让未同时转递延收益531.89万元、重复申报研发费用加计扣除342.28万元”问题，此问题为财政部在检查时发现的会计事务所执业质量存在的问题，而非所谓的“逃税等问题突出”
</div>
</body>
</html>
六、定位
<!--
CSS可以通过letf,right,top,bottom来对标签进行定位。前提是设置好参考对象
1.定位属性：
left - 标签左边距
right - 标签右边距
top - 标签上边距
bottom - 标签下边距
注意：a.定位需要通过position属性来设置参考对象
b.当标签的宽度固定的时候，同时设置left和right只有left有效；top和bottom同理
c.可以同时设置left和right,不设置宽度，或者宽度值为auto的时候，标签会自动拉伸;top和bottom同理
2.position属性
(了解)initial - (默认值)
(了解)static - 不希望自己的子标签相对自己定位的时候才使用static
absolute - 相对第一个非static和非initial的父标签进行定位
relative - 相对于自己在标准流中的位置定位;
如果一个标签希望自己的子标签能够相对自己定位，就设置这个标签的position为relative(自己不定位)
fixed - 相对于浏览器定位
sticky - 粘性定位，只针对网页底部的标签定位。如果网页内容超过一屏(需要滚动)的时候相对浏览器定位；
否则相对标准流定位
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 600px;
height: 400px;
background-color: hotpink;
}
#div2{
width: 400px;
height: 300px;
background-color: navajowhite;
position: relative;
/*裁掉自己的子标签超出自己的范围的部分*/
overflow: hidden;
}
#div3{
background-color: green;
/*1.absolute*/
/*宽高不确定的应用*/
/*width: auto;
height: auto;
position: absolute;
left: 50px;
right: 50px;
top: 20px;
bottom: 30px;*/
/*2.relative*/
/*width: 100px;
height: 100px;
position: relative;
top: 50px;*/
/*3.fixed*/
/*width: 100%;
height: 100px;
position: fixed;
top: 0px;
right: 0px;*/
/*4.sticky*/
/*width: 100%;
height: 100px;
position: sticky;
bottom: 0px;*/
width: 100px;
height: 100px;
position: absolute;
right: -25px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<!--<div style="width: 100px; height: 100px; background-color: honeydew;"></div>-->
<div id="div3">
</div>
</div>
</div>
<div id="" style="height: 200000px; background-color: slategray;">
</div>
</body>
</html>
七、盒子模型
<!--
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{
/*设置内容部分和padding部分的背景颜色*/
background-color: hotpink;
/*1.设置内容的大小*/
width: 100px;
height: 100px;
/*2.设置padding*/
/*a.分开设置*/
/*padding-left: 50px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 30px;*/
/*b.一起设置*/
padding: 20px; /*同时设置四个padding值都为20px*/
/*3.设置border*/
/*
* border值的格式 ： 线的样式 颜色 宽度
* 线的样式 - solid(实线)\double(双实线)\dashed(点划线)\dotted(虚线)
*/
/*border-left: solid blue 13px;
border-top: solid yellow 10px;
border-right: solid yellowgreen 12px;
border-bottom: solid sienna 12px;*/
/*同时设置*/
/*border: solid lightskyblue 10px;*/
/*4.设置圆角*/
border-radius: 20px;
/*分开切每个角的圆角*/
/*border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
border-top-right-radius: 50px;*/
/*5.添加margin*/
margin-left: 20px;
margin-top: 50px;
}
</style>
</head>
<body>
<div id="" style="width: 100px; height: 200px; background-color: yellow;">
</div>
<div id="div1">
<!--俺是看得见福建师范-->
<div id="" style="width: 20px; height: 20px; background-color: yellowgreen;">
</div>
</div>
姓名:<input type="text" name="" id="" value="" style="padding-left: 20px;"/>
</body>
</html>
网友评论