第01阶段.WEB基础:css-day05笔记-清除浮动&学成网布局准备工做css
由于父级盒子不少状况下,不方便给高度,可是子盒子浮动就不占有位置,最后父级盒子高度为0,就影响了后面的标准流盒子。html
听pink老师说清除浮动本质:ios
清除浮动主要为了解决父级元素由于子级浮动引发内部高度为0 的问题。清除浮动以后, 父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了web
在CSS中,clear属性用于清除浮动,在这里,咱们先记住清除浮动的方法,具体的原理,等咱们学完css会再回头分析。chrome
选择器{clear:属性值;} clear 清除
属性值 | 描述 |
---|---|
left | 不容许左侧有浮动元素(清除左侧浮动的影响) |
right | 不容许右侧有浮动元素(清除右侧浮动的影响) |
both | 同时清除左右两侧浮动的影响 |
可是咱们实际工做中, 几乎只用 clear: both;网络
这是W3C推荐的作法。经过在浮动元素末尾添加一个空的标签 例如 <div style=”clear:both”></div>,或则其余标签br等亦可。
能够给父级添加: overflow为 hidden| auto| scroll 均可以实现。
优势: 代码简洁svg
缺点: 内容增多时候容易形成不会自动换行致使内容被隐藏掉,没法显示须要溢出的元素。工具
:after 方式为空元素额外标签法的升级版,好处是不用单独加标签了布局
使用方法:学习
/* 一、使用after伪元素清除浮动 */ .clearfix:after { content: ""; display: block; height: 0; visibility: hidden; clear: both; } /* IE六、7 专有 */ .clearfix { *zoom: 1; }
使用方法:
/* 使用双伪元素清除浮动 */ .clearfix:before,.clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { *zoom:1; }
优势: 代码更简洁
缺点: 因为IE6-7不支持:after,使用 zoom:1触发 hasLayout。
表明网站: 小米、腾讯等
pink老师告诉你咱们之后何时用清除浮动呢?
使用清楚浮动的情景:
清除浮动的方式 | 优势 | 缺点 |
---|---|---|
额外标签法(隔墙法) | 通俗易懂,书写方便 | 添加许多无心义的标签,结构化较差。 |
父级overflow:hidden; | 书写简单 | 溢出隐藏 |
父级after伪元素 | 结构语义化正确 | 因为IE6-7不支持:after,兼容性问题 |
父级双伪元素 | 结构语义化正确 | 因为IE6-7不支持:after,兼容性问题 |
后面两种伪元素清除浮动,你们暂且会使用就好, 深刻原理,咱们后面学完伪元素再讲。
常见的图片格式
1. jpg图像格式: JPEG(.JPG)对色彩的信息保留较好,高清,颜色较多,咱们产品类的图片常常用jpg格式的 2. gif图像格式: GIF格式最多只能储存256色,因此一般用来显示简单图形及字体,可是能够保存透明背景和动画效果 3. png图像格式 是一种新兴的网络图形格式,结合了GIF和JPEG的优势,具备存储形式丰富的特色,可以保持透明背景 4. PSD图像格式 PSD格式是Photoshop的专用格式,里面能够存放图层、通道、遮罩等多种设计草稿。
PS切图 能够 分为 利用切片工具切图 以及 利用PS的插件快速切图。
ps切图片,分两大步:
利用切片工具手动划出
选中某个图层------图层菜单—新建基于图层的切片,建立切片,再导出
利用辅助线 来切图 – 基于参考线的切片
文件菜单 – 存储为web设备所用格式 ---- 选择 咱们要的图片格式 ---- 点存储 — 别忘了选择“选中的切片”
视图菜单-- 清除 辅助线/ 清除切片
Cutterman是一款运行在photoshop中的插件,可以自动将你须要的图层进行输出, 以替代传统的手工 “导出web所用格式” 以及使用切片工具进行挨个切图的繁琐流程。 它支持各类各样的图片尺寸、格式、形态输出,方便你在pc、ios、Android等端上使用。 它不须要你记住一堆的语法、规则,纯点击操做,方便、快捷,易于上手。
官网: http://www.cutterman.cn/zh/cutterman
注意: cutterman插件要求你的ps 必须是完整版,不能是绿色版,因此你们须要重新安装完整版本。
学成在线的目的就是为了串联前面的全部知识。来一个春晚大联欢。
pink老师:
取义学有所成,为师之指望,君等成才者也,故曰学成网是也~~
欲先善其事,必先利其器。 先把咱们的前期准备工做作好, 咱们本次采起结构与样式相分离思想。
建议遵循如下顺序:
.jdc { display: block; position: relative; float: left; width: 100px; height: 100px; margin: 0 10px; padding: 20px 0; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; color: #333; background: rgba(0,0,0,.5); -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }
为了提升网页制做的效率,布局时一般有如下的布局流程,具体以下:
一、必须肯定页面的版心(可视区), 咱们测量可得知。
二、分析页面中的行模块,以及每一个行模块中的列模块。其实页面布局,就是一行行罗列而成
三、制做HTML结构。咱们仍是遵循,先有结构,后有样式的原则。结构永远最重要。
四、而后开始运用盒子模型的原理,经过DIV+CSS布局来控制网页的各个模块。
这个页面的版心是 1200像素 每一个版心都要水平居中对齐,因此,咱们干脆把版心定义为:
.w { width: 1200px; margin: auto; }
结构图以下:
结构图以下:
结构图以下:
结构图以下:
结构图以下:
结构图以下: