HTML5&CSS3_day07


HTML5&CSS3_day07-瑾年的学习记录

设置input的placeholder提示语语法为::placeholder

119

设置图片垂直居中vertical-align

120

清除浮动

额外标签

为什么要清除浮动呢,清除浮动的作用是避免因为此标签不占标准流,而它的父级又没有设置宽高,导致页面效果与预期不同,清除浮动后能让它们重新“占位”

父级加高度

111

父级不加高度,导致与预期不同

112

解决方法:

1-直接把父类加高度,但是有时就是不能加高度,用方法二

2-在父类后加一个块元素标签,标签设置css的clear:both,一般把这个标签class写为clearfix

113

both代表两边,其实还要left和right的选项

114

单伪元素清除法

其实和额外标签法一样,就是利用伪元素添加一个标签,注意要加上display:block因为伪元素是行内的,没有块元素的特性

114

为了兼容低版本游览器,还可以加哈桑高度与隐藏

双伪元素清除法

115

116

其实这看起来和单伪类标签法一样的,为什么多此一举写两个css呢,因为display转为table后,可以解决塌陷问题。

overflow清除浮动

117

学成在线项目

1-创造根目录

118

所以网站的首页都叫index.html,文件命名都要是英文

项目流程总结

tips:

1-link是写在head里面

2-logo最好使用h1嵌套a嵌套img,使用h1有利于seo

3-浮动的元素可以再设置margin

4-导航一般用ul>li>a

4-尽力给元素标签设置类class,写css时用交集或者后代选择器选中,不要直接用元素选择器选中,因为一个项目有多个相同的元素标签,设置速度样式都不同。

步骤

1-创造根目录,包含css文件夹,image文件夹,index.html文件,文件夹名字需要是英文

2-按照从外到内,从上到下,从左到右,css书写从浮动/display;盒子;文字样式(为什么css先写浮动和display运行更快呢,比如a一个超链接,你要设置它的大小,你必须把它转为有块元素的性质,才能设置大小,这就需要用到浮动或者display,如果你浮动写在后面,大小写在前面,起初大小不生效,发现有浮动,游览器就要多一步去渲染)

3-版心居中,一般类名用wrapper

4-清除默认样式如margin等设置为0,超链接的下划线等去除,清除浮动等等(可以找一个好的style.css复制过来)

自我疑问

不是浮动后,不加清除浮动,会失去标准流(文档流)会被下面的盒子顶位置吗,为什么有时又没有?

答:那是因为你没有观察清楚,其实有一个大盒子包含了它们,里面的小盒子如果一个浮动一个不设置浮动照样会被顶位置,但是大div如header盒子没设置浮动,所以不会被下面的另一个大div如nav盒子顶。

还有一种情况,因为大div没有设置大小(有的情况就不能设置),大小全靠子内容撑开,但是子内容全部都浮动了,就会导致下面的大div顶上来,这时候就需要清除浮动(利用上面的单/双伪元素等方法)

121

如图设置的都是大盒子内部的元素,每个大框架大盒子并没有加浮动css


文章作者: 瑾年
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 瑾年 !
评论
  目录