Day6:html和css

梦里梦外; 2021-09-17 10:58 260阅读 0赞

![t0180700cf1a2fdfe3b.jpg][]

> Day6:`html`和`css`

## 复习 ##

![达叔与他的朋友们-复习.png][-_.png]

margin: 0;
    padding: 0;

![效果][20181228202949939]

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Demo</title>
    	<style>
            // 父元素
    	.father {
    		border: 1px solid red;
    		width: 300px;
    	}
            // 添加浮动会导致父元素不被撑开
    	.big {
    		width: 100px;
    		height: 100px;
    		background-color: purple;
    		float: left;
    	}
    	.small {
    		width: 80px;
    		height: 80px;
    		background-color: blue;
    		float: left;
    	}
    	.footer {
    		width: 400px;
    		height: 100px;
    		background-color: pink;
    	}
    	</style>
    </head>
    <body>
    	<div class="father">
    		<div class="big"></div>
    		<div class="small"></div>
    	</div>
    	<div class="footer"></div>
    </body>
    </html>
    // 所以要进行清除浮动

清除浮动: `overflow`: `hidden`  
添加在需要清除浮动的地方

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Demo</title>
    	<style>
    	.father {
    		border: 1px solid red;
    		width: 300px;
    		overflow: hidden;  // 添加在需要清除的地方
    	}
    	.big {
    		width: 100px;
    		height: 100px;
    		background-color: purple;
    		float: left;
    	}
    	.small {
    		width: 80px;
    		height: 180px;
    		background-color: blue;
    		float: left;
    	}
    	.footer {
    		width: 400px;
    		height: 100px;
    		background-color: pink;
    	}
    	</style>
    </head>
    <body>
    	<div class="father"> 
    		<div class="big"></div>
    		<div class="small"></div>
    	</div>
    	<div class="footer"></div>
    </body>
    </html>
    // 清除浮动的效果会导致父元素撑开

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Demo</title>
    	<style>
    	.father {
    		border: 1px solid red;
    		width: 300px;
    	}
    	.big {
    		width: 100px;
    		height: 200px;
    		background-color: purple;
    		float: left;
    	}
    	.small {
    		width: 80px;
    		height: 80px;
    		background-color: blue;
    		float: left;
    	}
    	.footer {
    		width: 400px;
    		height: 100px;
    		background-color: pink;
    	}
    	.clear {
    		clear: both;
    		// 额外标签法
    	}
    	</style>
    </head>
    <body>
    	<div class="father">
    		<div class="big"></div>
    		<div class="small"></div>
    		<div class="clear"></div>
                   // 在最后的标签,添加清除浮动
    	</div>
    	<div class="footer"></div>
    </body>
    </html>
    
    // clear: both;

// after伪元素进行清除浮动
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Demo</title>
    	<style>
    	.clearfix:after { 
                    // 父元素添加类
    		content:"";
    		display: block;
    		height: 0;
    		clear: both;
    		visibility: hidden;
    	}
    	.clearfix {
    		*zoom: 1;  
    	}
    	.father {
    		border: 1px solid red;
    		width: 300px;
    	}
    	.big {
    		width: 100px;
    		height: 100px;
    		background-color: purple;
    		float: left;
    	}
    	.small {
    		width: 80px;
    		height: 80px;
    		background-color: blue;
    		float: left;
    	}
    	.footer {
    		width: 400px;
    		height: 100px;
    		background-color: pink;
    	}
    	</style>
    </head>
    <body>
    	<div class="father clearfix">
    		<div class="big"></div>
    		<div class="small"></div>
    	</div>
    	<div class="footer"></div>
    </body>
    </html>
    
    // 在父类添加元素类,清除浮动
    
    .clearfix:after {
     content: "";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
    }
    .clearfix {
     *zoom: 1;
    }

// 双伪元素进行清除浮动
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Demo</title>
    	<style>
    	.clearfix:before, .clearfix:after {
    		content: "";
    		display: table;
    	}
    	.clearfix:after {
    		clear: both;
    	}
    	.clearfix {
    		*zoom: 1;
    	}
    	.father {
    		border: 1px solid red;
    		width: 300px;
    
    	}
    	.big {
    		width: 100px;
    		height: 100px;
    		background-color: purple;
    		float: left;
    	}
    	.small {
    		width: 80px;
    		height: 80px;
    		background-color: blue;
    		float: left;
    	}
    	.footer {
    		width: 400px;
    		height: 100px;
    		background-color: pink;
    	}
    	</style>
    </head>
    <body>
    	<div class="father clearfix">
    		<div class="big"></div>
    		<div class="small"></div>
    	</div>
    	<div class="footer"></div>
    </body>
    </html>
    
    // 在父元素添加类 clearfix
    // 双伪元素
    .clearfix:before, .clearfix:after {
     content: "";
     display: table;
    }
    .clearfix:after {
     clear: both;
    }
    .clearfix {
     *zoom: 1;
    }

## 定位`position` ##

background-position 背景定位

## 定位属性 ##

边偏移

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>top</td> 
   <td>顶端偏移量</td> 
  </tr> 
  <tr> 
   <td>bottom</td> 
   <td>底部偏移量</td> 
  </tr> 
  <tr> 
   <td>left</td> 
   <td>左侧偏移量</td> 
  </tr> 
  <tr> 
   <td>right</td> 
   <td>右侧偏移量</td> 
  </tr> 
 </tbody> 
</table>

## 定位模式: ##

选择器{position: 属性值}

`position`属性的常用值

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>static</td> 
   <td>自动定位</td> 
  </tr> 
  <tr> 
   <td>relative</td> 
   <td>相对定位，相对于其原文档流的位置进行定位</td> 
  </tr> 
  <tr> 
   <td>absolute</td> 
   <td>绝对定位，相对于其上一个已经定位的父元素进行定位</td> 
  </tr> 
  <tr> 
   <td>fixed</td> 
   <td>固定定位</td> 
  </tr> 
 </tbody> 
</table>

position: static;

相对定位: `a->a`不变

![效果][20181228202949976]

## 绝对定位`absolute` ##

绝对定位是如果某个部分会滚动,那么滚动完,它还在那个位置上而已.

### 子绝父相 ###

> 子级是绝对定位的话， 父级要用相对定位。

![效果][2018122820295021]

![效果][2018122820295063]

## 叠放次序（`z-index`） ##

四种定位总结

静态static 不脱标，正常模式
    相对定位relative 脱标，占有位置
    绝对定位absolute 完全脱标，不占有位置
    固定定位fixed 完全脱标，不占有位置

## 元素的显示与隐藏 ##

display visibility 和 overflow
    display 显示 display : none display:block  隐藏之后，不再保留位置
    
    visibility 可见性 visible 对象可视 hidden对象隐藏 隐藏之后，继续保留原有位置
    
    overflow 溢出
    visible
    auto
    hidden
    scroll

## 相对定位 ##

![效果][20181228202950114]

// 相对定位
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Demo</title>
    	<style>
    	div {
    		width: 200px;
    		height: 200px;
    	}
    	.top {
    		background-color: pink;
    		/*position: relative; */
    		top: 100px;
    		left: 100px;
    	}
    	.bottom {
    		background-color: purple;
    	}
    	</style>
    </head>
    <body>
    	<div class="top"></div>
    	<div class="bottom"></div>
    </body>
    </html>

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Demo</title>
    	<style>
    	div {
    		width: 200px;
    		height: 200px;
    	}
    	.top {
    		background-color: pink;
    		position: relative; 
    		top: 100px;
    		left: 100px;
    	}
    	.bottom {
    		background-color: purple;
    	}
    	</style>
    </head>
    <body>
    	<div class="top"></div>
    	<div class="bottom"></div>
    </body>
    </html>

![效果][20181228202950156]

// 绝对定位
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Demo</title>
    	<style>
    	body {
    		height: 1000px;
    	}
    	div {
    		width: 100px;
    		height: 100px;
    		background-color: pink;
    	}
    	.top {
    		position: absolute; 
    		right: 0;
    		bottom: 0;
    	}
    	.bottom {
    		background-color: purple;
    		width: 110px;
    	}
    	</style>
    </head>
    <body>
    	<div class="top"></div>
    	<div class="bottom"></div>
    </body>
    </html>

// 父元素没有定位
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Demo</title>
    	<style>
    	.father {
    		width: 400px;
    		height: 400px;
    		background-color: pink;
    		margin: 50px;
    	}
    	.son {
    		width: 100px;
    		height: 100px;
    		background-color: purple;
    		position: absolute;
    		top: 50px;
    		left: 50px;
    	}
    	</style>
    </head>
    <body>
    	<div class="father">
    		<div class="son"></div>
    	</div>
    </body>
    </html>
    // 没有定位跟着浏览器

// 注意
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Demo</title>
    	<style>
    	div {
    		width: 200px;
    		height: 200px;
    		background-color: pink;
    	}
    	.top {
    		float: left; 
    	}
    	.bottom {
    		background-color: purple;
    	}
    	</style>
    </head>
    <body>
    	<div class="top">123</div>
    	<div class="bottom">dashucoding</div>
    </body>
    </html>

// 例子
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Demo</title>
    	<style>
    	div {
    		width: 250px;
    		height: 400px;
    		border: 1px solid #ccc;
    		float: left;
    		margin-left: -1px;
    		position: relative;
    	}
    	div:hover {
    		border: 1px solid #f40;
    		z-index: 1;
    	}
    	</style>
    </head>
    <body>
    	<div></div>
    	<div></div>
    	<div></div>
    	<div></div>
    	<div></div>
    </body>
    </html>

// 居中
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Demo</title>
    	<style>
    	div {
    		width: 200px;
    		height: 200px;
    		background-color: pink;
    		position: absolute;
    		left: 50%;
    		margin-left: -100px;
    		top: 50%;
    		margin-top: -100px;
    	}
    	</style>
    </head>
    <body>
    	<div></div>
    </body>
    </html>

## 推荐 ##

[Day1:html和css][Day1_html_css]

[Day2:html和css][Day2_html_css]

[Day3:html和css][Day3_html_css]

[Day4:html和css][Day4_html_css]

[Day5:html和css][Day5_html_css]

如果看了觉得不错

点赞！转发！

> 达叔小生：往后余生，唯独有你  
> You and me, we are family !  
> 90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通  
> 简书博客： 达叔小生  
> [https://www.jianshu.com/u/c785ece603d1][https_www.jianshu.com_u_c785ece603d1]

## 结语 ##

*  下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
 *  小礼物走一走 or 点赞

[t0180700cf1a2fdfe3b.jpg]: /images/20210724/21309867e8994d0ca50698ae757246eb.png
[-_.png]: /images/20210724/f8251c0943aa4cc4be00c5d6bf8916de.png
[20181228202949939]: /images/20210724/d92ff2a06a82469ea345597af1e34b2f.png
[20181228202949976]: /images/20210724/3db14ea759ed4453b7b55198da056846.png
[2018122820295021]: /images/20210724/16d09d497c324518808df4011b0c7606.png
[2018122820295063]: /images/20210724/6c59825098f345c18ccab03866095d70.png
[20181228202950114]: /images/20210724/95e9509f65164348860b8ec2b52a5ab7.png
[20181228202950156]: /images/20210724/a99179275c054c1fb3b34c901e3af485.png
[Day1_html_css]: https://www.jianshu.com/p/04928e19b9b4
[Day2_html_css]: https://www.jianshu.com/p/24fa43cef823
[Day3_html_css]: https://www.jianshu.com/p/c3fef2bb60ca
[Day4_html_css]: https://www.jianshu.com/p/2aa50cd96c49
[Day5_html_css]: https://www.jianshu.com/p/67982a8f2a0f
[https_www.jianshu.com_u_c785ece603d1]: https://www.jianshu.com/u/c785ece603d1