一、CSS布局小技巧1.行内元素、行内块元素可以被父元素当作文本处理即可以利用text-align、line-height、text-indent向处理文本对齐一样处理行内、行内块在父元素中的对齐2.令子元素在父元素中水平居中若子元素为块元素给子元素加上margin:0 auto;若子元素为行内元素、行内块元素给父元素加上text-align:center3.令子元素在父元素中垂直居中若子元素为块元素给子元素加上margin-top值为父元素content-子元素盒子总高/2若子元素为行内元素、行内块元素让父元素的heightline-height每个子元素都加上vertical-align:middle绝对垂直居中将父元素font-size设置为0二、元素之间的空白问题1.问题原因行内元素、行内块元素彼此之间的换行会被浏览器解析为一个空白字符2.解决方案去掉换行和空格给父元素设置font-size:0再给需要显示的文字的元素单独设置字体大小三、行内块元素的幽灵空白问题1.问题原因行内块元素与文本的基线对齐而文本的基线与文本最底端之间有一定的距离2.解决方案给行内块元素设置vertical值不为baseline即可可设置为middel、bottom、top若父元素中只有一张图片后面什么也没有设置图片为display:block给父元素设置font-size:0如果该行内块元素内部还有文本则需要单独设置font-size四、浮动1.元素浮动后的特点脱离文档流不管浮动前是什么元素浮动后默认宽与高都是被内容撑开尽可能小而且可以设置宽高不会独占一行可以与其他元素共用一行不会margin合并也不会margin塌陷能够完美设置四个方向的margin和padding不会像行内块元素一样被当作文本处理没有行内块元素的空白问题2.浮动后产生的影响1对兄弟元素的影响后面的兄弟元素会占据浮动元素之前的位置在浮动元素的下面对前面的兄弟元素无影响2对父元素的影响不能撑起父元素的高度导致父元素高度塌陷但父元素的宽度仍然束缚浮动的元素3.解决浮动产生的影响给父元素一个指定的高度给父元素也设置浮动这个方案会带来其他影响给父元素设置overflow: hidden在所有浮动元素的最后面添加一个块元素并给该块级元素设置clear: both给浮动元素的父元素设置为元素通过为元素清除浮动原理与上一条相同.parent::after{content:;display:block;clear:both;}注布局中的一个原则设置浮动的时候兄弟元素要么全都浮动要么都不浮动五、定位1.相对定位1设置相对定位1.给元素设置position:relative2.可以使用leftrighttopbottom四个属性进行调整.shili{position:relative;left:10px;}2位置参考点相对自己原来的位置3特点不脱离文档流元素位置的变化只是视觉效果上的变化不会对其他元素产生任何影响定位元素显示的层级比不同元素高无论什么定位显示层级都是一样的。若有多个定位元素则后来者居上盖在前者身上left不能和right一起设置top和bottom不能一起设置相对定位的元素也能继续浮动但不推荐相对定位的元素也能通过margin调整位置但不推荐绝大多数情况下相对定位会与绝对定位配合使用2.绝对定位1设置绝对定位1.给元素设置position:absolute2.可以使用leftrighttopbottom四个属性进行调整.shili{position:absolute;left:10px;}2位置参考点参考它的包含块对于没有脱离分档流的元素包含块就是父元素对于脱离文档流的元素包含块是最近的拥有定位属性的祖先元素如果所有祖先元素都没定位那么包含块为整个页面3特点脱离文档流会对后面的兄弟元素、父元素产生影响left和right一起设置top和bottom不能一起设置绝对定位、浮动不能同时设置如果同时设置浮动失效以定位为主绝对定位的元素也能通过margin调整前面某方位设置了绝对定位后面该方位才能设置margin但不推荐.shili{position:absolute;left:10px;margin-left:20px;!-- margin-right不能设置 --}无论是什么元素设置为绝对定位之后就变成了定位元素定位元素默认宽、高都被内容所撑开且能自由设置高度3.固定定位1设置固定定位1.给元素设置position:absolute2.可以使用leftrighttopbottom四个属性进行调整.shili{position:fixed;left:10px;}2位置参考点参考它的视口3特点脱离文档流会对后面的兄弟元素、父元素产生影响left和right一起设置top和bottom不能一起设置固定定位、浮动不能同时设置如果同时设置浮动失效以固定定位为主固定定位的元素也能通过margin调整前面某方位设置了固定定位后面该方位才能设置margin但不推荐.shili{position:fixed;left:10px;margin-left:20px;!-- margin-right不能设置 --}无论是什么元素设置为固定定位之后就变成了定位元素4.粘性定位1设置粘性定位1.给元素设置position:sticky2.可以使用leftrighttopbottom四个属性进行调整2位置参考点离它最近的一个拥有“滚动机制”的祖先元素3特点不会脱离文档流它是一种专门用于窗口滚动时的新的定位方式粘性定位和浮动可以同时设置但不推荐这样做粘性定位也能通过margin调整位置前面某方位设置了粘性定位后面该方位才能设置margin但不推荐这样做粘性定位和相对定位的特点基本一致但粘性定位可以在元素到达某个位置时将其固定5.定位的层级定位元素显示的层级比普通元素高无论什么定位显示层级都是一样的如果发生重叠默认情况后面的元素显示在前面的元素之上后来者居上可以通过CSS属性z-index调整元素的像是阶层属性值为数字数字越大显示层级越高只有定位元素设置z-index才有效比较同级的层级6.定位的特殊应用1让定位元素的宽充满包含块给定位元素同时设置left和right为02让定位元素的高充满包含块给定位元素同时设置top和bottom为03让定位元素在包含块中居中前提该定位元素必须设置宽、高方案一left:0;right:0;top:0;bottom:0;margin:auto;方案二left:50%top:50%margin-left:负的宽度的一半margin-right:负的高度的一半4注意点发生固定定位、绝对定位后元素都变成了定位元素默认宽高被内容撑开但仍然可以设置宽高发生相对定位后元素依然是之前的显示模式以上所说的特殊应用只针对绝对定位和固定定位的元素不包括相对定位的元素六、布局1.版心在PC端网页中一般会有一个固定宽度且水平居中的盒子来显示网页的主要内容这是网页的版心版心的宽度一般是960-1200像素之间版心可以是一个也可以时多个2.常用布局名词位置名词顶部导航条topbar页头header、page-header导航nav、navigator、navbar搜索框search、search-box横幅、广告、宣传图banner主要内容content、main侧边栏aside、sidebar页脚footer、page-footer3.重置默认样式1方案一使用全局选择器*{margin:0;padding:0;...}此种方法在简单案例中可以使用但在实际开发中不会使用因为*选择的时所有元素并不是所有元素都有默认样式2方案二reset.csss选择具有默认样式的元素清空其默认样式3方案三Normalize.cssNormalize.css是一种最新方案它在清除默认样式的基础上保留了一些有价值的默认样式优点- 保护了有价值的默认演示而不是完全去掉它们- 为大部分HTML元素提供一般化的样式- 新增对HTML5元素的设置- 对并集选择器的使用比较谨慎有效避免调试工具杂乱七、HTML5简介1.HTML5优势针对JavaScript新增了很多可操作的接口新增了一些语义标签、全局属性新增了多媒体标签可以很好的替代flash更加侧重语义化对于SEO更友好可移植性好可以大量应用在移动设备上2.HTML5兼容性支持Chrome、Safari、Opera、Firefox等主流浏览器八、H5新增语义化标签1.新增布局标签标签名语义header整个页面或部分区域的头部footer整个页面或部分区域的底部nav导航article文章、帖子、杂志、新闻、博客、评论等section页面中的某段文字或文章中的某段文字里面文字通常里面会包含标题aside侧边栏article与sectionarticle里面可以有多个sectionsection强调的是分段或分块如果想要将一块内容分成几段时可以使用section元素article比section更强调独立性一块内容如果比较独立、完整应该使用article2.新增状态标签1meter标签1语义定义已知范围的标量测量也被称为gauge(尺度例如电量、磁盘用量等2常用属性high规定高值low规定低值max规定最大值min规定最小值optimum规定最优值value规定当前值3应用1.当没有规定最优值时高值以上及低值一下被认定为警告区间为橙色低值到高值区间为正常区间呈绿色span手机电量/spanmetermax100min0low20high80value/meter此时当value在0-20、80-100区间时横条显示橙色在20-80区间时横条显示绿色2.当最优值在高值与最大值区间时该区间被认定为正常区间呈绿色低值与高值之间被认定为警告区间呈橙色最低值与低值之间被认定为危险区间呈红色span手机电量/spanmetermax100min0low10high20optimum90value/meter此时当value在20-100区间时横条显示绿色在10-20区间时横条显示橙色在0-10区间时横条显示红色2progress标签1语义显示某个任务完成的进度的指示器一般用于表示进度条例如工作完成进度2常用属性max规定目标值value规定当前值3.新增列表标签datalist用于搜索框的关键字提示inputtypetextlistmydatedatelistidmydateoptionvaluexxxxxx/optionoptionvaluexxxxxx/optionoptionvaluexxxxxx/option/datalistdetails用于展示问题和答案或对专有名词进行解释sumary: 写在details的里面用于指定问题或专有名词detailssummary名词/summaryp解释/p/details4.新增的文本标签1文本注音ruby包裹需要注音的文字rt写注音写在ruby的里面rubyspan魑魅魍魉/spanrtchī mèi wǎng liǎng/rt/ruby2文本标记mark标记建议用于标记搜索结果中的关键字5.表单相关新增1新增的表单控件属性placeholder提示文字适用于文字输入类的表单控件required表示该输入项必填适用于除按钮外其他表单控件autofocus自动获取焦点适用于所有表单控件autocomplete自动完成可以设置为on或off适用于文字输入类的表单控件密码输入框多行输入框不适用pattern填写正则表达式适用于文本输入类表单控件多行输入不可用且空的输入框不会验证往往与required配合2input新增type属性值email邮箱类型的输入框表单提交时会验证格式输入为空则不验证格式urlurl类型的输入框表单提交时会验证格式输入为空则不验证格式number数字类型的输入框表单提交时会验证格式输入为空则不验证格式search搜索类型的输入框表单提交时不会验证格式tel电话类型的输入框表单提交时不会验证格式在移动端使用时会唤起数字键盘range范围选择框默认值为50表单提交时不会验证格式color颜色选择框默认值为黑色表单提交时不会验证格式date日期选择框默认值为空表单提交时不会验证格式month月份选择框默认值为空表单提交时不会验证格式week周选择框默认值为空表单提交时不会验证格式time时间选择框默认值为空表单提交时不会验证格式datetime-local日期时间选择框默认值为空表单提交时不会验证格式3form标签新增属性novalidate表单提交的时候不再进行格式验证6.新增视频标签1视频标签video该标签用于定义视频是双标签2属性src视频地址width设置视频播放器的宽度height设置视频播放器的长度当长宽之比设置的与原视频不一致则多出留白而不是铺满设置比例controls向用户显示视频控件播放/暂停等按钮muted视频静音autoplay视频自动播放loop循环播放videosrc...cntrolsmutedautoplayloop/videovideo{width:100%;}poster视频封面preload视频预加载如果使用autoplay,则忽略该属性auto下载整个视频文件即使用户不希望使用它metadata仅预先获取视频的元数据例如长度none不预加载视频7.新增音频标签1音频标签audio该标签用于定义视频是双标签2属性除去没有width、height、poster外与视频标签属性相同8.新增的全局属性contenteditable标识元素是否可被用户编辑true可编辑false不可编辑draggable表示元素可以被拖动配合JS使用true可拖动false不可拖动hidden隐藏元素spellcheck规定是否对元素进行拼写和语法检查true检查false不检查dontextmenu规定元素上下文菜单在用户鼠标右键点击元素时显示data-*用于储存页面的私有定制数据九、H5兼容性处理1添加元信息让浏览器处于最优渲染模式设置IE重视使用最新的文档模式进行渲染metahttp-equivX-UA-CompatiblecontentIEEdge双核浏览器优先使用webkit(Chromium)内核进行渲染如360浏览器metanamerenderercontentwebkit2使用html5shiv让低版本浏览器认识H5的语义化标签!--[if lt ie 9] script src../sources/js/html5shiv.js/script ![endif]--lt小于lte小于等于gt大于gte大于等于!逻辑非十、CSS3简介1查询CSS3兼容性的网站https://caniuse.com/2常见浏览器私有前缀浏览器私有前缀Chrome-webkit-Safari-webkit-Firefox-moz-Edge-webkit-3注意在编码时不用过于关注浏览器私有前缀常用的CSS3新特性主流浏览器都是支持的既是为了老浏览器加前缀也可以借助线代构建工具webpack添加私有前缀