Day6:html和css

  • 时间:2018-12-30 23:24 作者:达叔娱乐 来源:达叔娱乐 阅读:415
  • 扫一扫,手机访问
摘要:t0180700cf1a2fdfe3b.jpgDay6:html和css复习达叔与他的朋友们-复习.pngmargin: 0;padding: 0;效果 Demo // 父元素 .father { border: 1px solid red; width: 300px; } // 增加浮动会导致


Day6:html和css


t0180700cf1a2fdfe3b.jpg

Day6:html和css

复习


Day6:html和css


达叔与他的朋友们-复习.png

margin: 0;
padding: 0;


Day6:html和css


效果





Demo










// 所以要进行清理浮动

清理浮动: overflow: hidden

增加在需要清理浮动的地方





Demo










// 清理浮动的效果会导致父元素撑开




Demo







// 在最后的标签,增加清理浮动




// clear: both;
// after伪元素进行清理浮动




Demo










// 在父类增加元素类,清理浮动
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
// 双伪元素进行清理浮动




Demo










// 在父元素增加类 clearfix
// 双伪元素
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}

定位position

background-position 背景定位

定位属性

边偏移

属性说明top顶端偏移量bottom底部偏移量left左侧偏移量right右侧偏移量

定位模式:

选择器{position: 属性值}

position属性的常用值

值说明static自动定位relative相对定位,相对于其原文档流的位置进行定位absolute绝对定位,相对于其上一个已经定位的父元素进行定位fixed固定定位

position: static;

相对定位: a->a不变


Day6:html和css


效果

绝对定位absolute

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

子绝父相

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


Day6:html和css


效果

Day6:html和css


效果

叠放次序(z-index)

四种定位总结

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

元素的显示与隐藏

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

相对定位


Day6:html和css


效果

// 相对定位




Demo











Demo








Day6:html和css


效果

// 绝对定位




Demo







// 父元素没有定位




Demo








// 没有定位跟着浏览器
// 注意




Demo



123

dashucoding



// 例子




Demo










// 居中




Demo






推荐

Day1:html和css

Day2:html和css

Day3:html和css

Day4:html和css

Day5:html和css

假如看了觉得不错

点赞!转发!

达叔小生:往后余生,唯独有你

You and me, we are family !

90后帅气小伙,良好的开发习惯;独立思考的能力;主动并且善于沟通

简书博客: 达叔小生

https://www.songma.com/u/c785ece603d1

结语

  • 下面我将继续对 其余知识 深入讲解 ,有兴趣可以继续关注
  • 小礼物走一走 or 点赞
  • 全部评论(0)
最新发布的资讯信息
【系统环境|】极客时间-数据分析实战45讲【完结】(2021-09-02 16:26)
【系统环境|windows】字节跳动前台面试题解析:盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问,肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题:JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错:Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)
血鸟云
手机二维码手机访问领取大礼包
返回顶部