2018-09-19 day23-css布局
2018-09-19 本文已影响0人
rzlong
标准流和display
<!--
1.标准流:浏览器对标签默认的布局方式就是标准流
2.标准流布局原则:
块级: 块级标签一个占一行(不管标签的宽度是否是父标签的宽度)。
默认宽度是浏览器的宽度，默认的高度是内容的高度。
直接设置宽、高有效
行内块标签:
多个行内块可以一行显示
默认的宽、高是内容的宽、高
行内块标签直接设置宽、高有效
行内标签:
多个行内可以在一行显示
默认的宽、高是内容的宽、高
直接设置宽、高无效
3.display属性:转换标签的性质
block:块级
inline:行内
inline-block:行内块
注意:行内块标签和其他标签之间默认有间隙,而且这个间隙无法消除
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a{
width: 100px;
height: 50px;
font-size: 20px;
}
.div_head{
height: 200px;
background-color: #7FFF00;
}
.div_body{
display: inline-block;
background-color: #5F9EA0;
width: 30%;height: 300px;
}
.div_body2{
display: inline-block;
background-color: #8B008B;
width: 38%;
height: 300px;
}
.div_body3{
display: inline-block;
background-color: #5F9EA0;
width: 30%;
height: 300px;
}
</style>
</head>
<body>
<div style="background-color: #8B008B;width:1000px; height:200px;">
<ul>
<li><a href="">提莫</a></li>
<li><a href="">小炮</a></li>
<li><a href="">小法</a></li>
</ul>
</div>
<div class="div_head">
</div>
<div class="div_body">
</div>
<div class="div_body2">
</div>
<div class="div_body3">
</div>
</body>
</html>
效果:
浮动
<!--
通过给float属性赋值为left或right让标签浮动，浮动会让标签脱流。
浮动的目的就是让垂直显示的可以水平显示(针对块)
2.浮动的效果
a.所有的标签浮动后，一行可以显示多个;默认的宽、高是内容的大小，可以设置宽度和高度。
b.一行显示不了的时候才会自动换行
3.注意事项
a.如果同一级的标签，后面的需要浮动，前面也要浮动
b.浮动的标签不占池底，只占水面的位置，不浮动的不动
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div_body{
float:left;
width:100px;
height: 50px;
}
.a_float{
float:left;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div class="div_body" style="background-color: blanchedalmond;"></div>
<div class="div_body" style="background-color: aqua;"></div>
<a href="" class="a_float" style="background-color: #8B008B;">百度一下</a>
<a href="" class="a_float" style="background-color: darkblue;">Rng S8冠军</a>
</body>
</html>
效果:
浮动(文字环绕)
<!--
文字环绕效果
让被环绕的对象浮动，文字不浮动。
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width: 300px;">
<img style="float: left;" src="img/logo-jd.png" />
<p>京东（JD.com）是中国一家自营式B2C购物网站，创始人刘强东担任京东集团CEO。
旗下设有京东商城、京东金融、拍拍网、京东智能、O2O及海外事业部。2013年正式获得虚拟运营商牌照。
2014年5月，在美国纳斯达克证券交易所正式挂牌上市（股票代码：JD）</p>
</div>
</body>
</html>
清除浮动
<!--
清除浮动:清除浮动不是将标签的浮动去掉，而是清除因为浮动产生的高度塌陷的问题。
高度塌陷:父标签不浮动，子标签浮动，并且不设置父标签的高度，就会产生高度塌陷的问题(对父标签)
方案1:添加空盒子,在高度塌陷的标签的后面添加一个空的div,并设置样式clear:both
方案2:对父标签设置样式 overflow:hidden
方案3:万能清除法
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*方案2*/
/*#father{
overflow: hidden;
}*/
/*方案3*/
#father:after{
display:block;
clear:both;
content:'';
visibility:hidden;
height:0;
}
#father{
zoom:1;
}
</style>
</head>
<body>
<div style="height:200px;width: 100%;background-color: #8B008B;"></div>
<div id="father" style="background-color: #7FFF00;">
<div style="height:100px;width: 30%;float: left;background-color: aqua;"></div>
<div style="height:200px;width: 40%;float: right;background-color: brown;"></div>
<div style="height:250px;width: 50%;float: left;background-color: burlywood;"></div>
<!--方案1：添加空盒子-->
<!--<div id="" style="clear:both;"></div>-->
</div>
</body>
</html>
效果:
定位position
<!--
css中可以通过left、right、bottom、top属性来说设置标签的上下左右的距离(但是默认情况下这些值不是都有效的)
如果想要让定位属性有效，通过position属性来设置参考对象。
1.position
initial:默认值，没有相对定位
absolute:相对于最近的一个非static/initial的父标签，若没找到，就相对于body标签定位
relative:相对于自己在标准流中位置来定位。(当标签本身不需要去定位，只是想让自己的字标签可以相对本身来定位的时候使用)
fixed:相对于浏览器定位
sticky:当网页的内容不滚动(超过一个屏)的时候，按照标准流定位。超过了就相对浏览器定位。
2.注意: 如果想要设置right值时，要保证相对标签的宽度是确定的，同理，想要设置bottom值要保证相对对象的高度是确定的。
3.技巧:当某个方向的定位无效的时候，可尝试让标签浮动再定位。
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div2{
top:50px;
left:100px;
position: absolute;
}
#div1{
position: absolute;
top: 300px;
}
</style>
</head>
<body>
<!--
作者：offline
时间：2018-09-19
描述：absolute
-->
<!--<div id="div1" style="background-color: #8B008B;width: 800px;height: 480px;">
<div id="div2" style="background-color: brown;width: 300px;height:200px;"></div>
</div>-->
<!--
作者：offline
时间：2018-09-19
描述：relative
-->
<!--<div style="background-color: darkblue;height: 100px;">
</div>
<div style="background-color: darkgoldenrod;height:100px;width: 200px;position: relative;top: 100px;">
<div style="background-color: darkgreen;height:80px;width: 180px;position: absolute;left: 200px;top: 100px;"></div>
</div>-->
<!--
作者：offline
时间：2018-09-19
描述：fixed
-->
<div style="height: 1000px;background-color: cadetblue;"></div>
<div style="background-color: blueviolet;position: fixed;right: 10px;bottom: 50px;">
<a href="#" style="display: inline-block;">回到顶部</a>
</div>
<!--
作者：offline
时间：2018-09-19
描述：sticky
-->
<!--<div style="height: 100px;background-color: cadetblue;"></div>
<div style="background-color: blueviolet;position: sticky;right: 10px;bottom: 50px;">
<a href="#" style="display: inline-block;">回到顶部</a>
</div>-->
</body>
</html>
效果:
盒子模型
<!--
html中所有可见的标签都是一个盒子模型。包含长和宽决定内容的大小、padding、border、margin四个部分
其中内容、padding、border是可见的，margin不可见。
1.内容: 设置width和height影响的就是内容部分的大小。添加子标签、添加内容
2.padding: 在内容的外围, 可见部分，如果标签有背景颜色，那么这个部分的颜色和内容一致
3.border: 边框， border是在padding的外围，如果没有padding就在内容的外围，可见部分。可以设置颜色和大小。
4.margin:不可见部分，在border的外围，可用于移动整个块
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
background-color: aqua;
/*content*/
width: 100px;
height: 80px;
/*padding*/
/*padding: 20px 20px 20px 40px;*/ /*上右下左*/
/*padding: 30px;*/ /*所有方向*/
padding-top: 40px;
padding-left: 40px;
/*border:宽度 样式 颜色*/
border: 10px dashed #7FFF00 ;
border-left:10px solid #8B008B;/*设置左边*/
}
</style>
</head>
<body>
<input type="text" name=""/>
<div>
content
</div>
</body>
</html>
其他属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1{
font-family: wst_fren ;
font-size: 20px;
font-weight: 900; /*字体加粗程度*/
font-style: initial;
background-color: chocolate;
height: 100px;
line-height: 100px; /*若只对一行文字垂直居中,可以设置 line-height和height一样*/
text-align: center; /*水平居中*/
}
.a1{
text-decoration: none;
/*
none:去下划线
underline:有下划线
overline: 上划线
line-through:添加下划线
*/
}
.p2{
text-indent: 2em; /*首行缩进2字符*/
}
.p3{
letter-spacing: 5px;/*字间距*/
}
.ul1{
list-style-type: devanagari;
}
/*设置背景图片*/
.pic{
width: 300px;
height:150px;
background: url(img/logo-jd.png) no-repeat center center yellow;
border-radius: 100px 100px 30px 30px; /*设置圆角*/
}
}
</style>
</head>
<body>
<p class="p1"> everything is about sex, except sex, sex is about power</p>
<a href="#" class="a1">please choose one</a>
<p class="p2">everything is about sex, except sex, sex is about power</p>
<p class="p3">everything is about sex, except sex, sex is about power</p>
<ul class="ul1">
<li>everything is about sex</li>
<li>everything is about sex</li>
<li>everything is about sex</li>
</ul>
<div class="pic"></div>
</body>
</html>
效果:
