html 语义化让也免得内容结构化,结构更清晰, 便于对浏览器, 搜索引擎解析;
即使在没有样式css情况下也以一直能够文档格式显示, 并且是容易阅读的;
搜索引擎的爬虫也依赖于html标记来确定上下文和各个关键字的权重,利于SEO;
使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解.
static: 静态定位, 流式布局.
relative: 相对定位,参与流式布局,可以使用top, left 等在原有位置上进行位置调整 .
absolute: 绝对定位,脱离文档流,相对于父级元素进行定位(相对于离自己最近的, position为非static的祖先级元素进行定位).
fixed: 固定定位,脱离文档流 ,相对于浏览器窗口定位,不随页面滚动而去改变位置
sticky: 粘性定位,可实现动态fixed.
相对于离自己最近的, position为非static的祖先级元素进行定位
transition: 简单的动画, 只需要在两个状态之间的动画
keyframAnimation: 适合需要在多个状态连续进行的动画
js动画: 功能最强的动画,但是效率最低
display:none; (隐藏且不占用位置)
visibility:hidden; (隐藏但保留位置)
opacity:0; (隐藏但保留位置)
给父元素设置font-size:0
使用弹性布局或浮动布局
使用固定定位或者绝对定位
在标准模式下,块的总宽度=width+padding(左右)+margin(左右)+border(左右)
怪异模式下,块的总宽度width+margin(左右) 即width已经包含了padding和border的值
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap
能够根据不同的浏览器的尺寸,显示不同的布局方式,依赖媒体查询实现
使用 position:fixed 固定定位实现, 头部设置top属性, 左侧的设置left属性
并使用z-index属性设置显示层级, 值越大越不容易被覆盖
Flex布局是css3的新特性, 在一些低版本的浏览器上(如IE8)不支持flex布局
在浮动元素的父元素上添加一个class,为这个class添加后缀.after样式,其中写content:””;display:block;clear:both
兼容问题大多出现老版本浏览器不支持新样式或渲染不统一的情况下
png24位的图片在iE6浏览器上出现背景,解决方案是做成PNG8.也可以引用一段脚本处理.
浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
对于老IE浏览器使用css hack解决兼容问题。
IE6双边距bug:块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大。
浮动ie产生的双倍距离(IE6双边距问题:在IE6下,如果对元素设置了浮动,同时又设置了margin-left或margin-right,margin值会加倍。)
Retina屏幕手机浏览器的1px边框问题,通过前后缀伪元素或者缩放解决
元素从结构上分为4层,内容,内间距,边框,外间距。
通过box-sizing设置计算方式,默认为content-box,及计算内容盒,可以设置为border-box,计算到边框盒。
单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。::before就是以一个子元素的存在,定义在元素主体内容之前的一个伪元素。并不存在于dom之中,只存在在页面之中。:before 和 :after 这两个伪元素,是在CSS2.1里新出现的。起初,伪元素的前缀使用的是单冒号语法,但随着Web的进化,在CSS3的规范里,伪元素的语法被修改成使用双冒号,成为::before ::after
都是解决网站对于老旧版本浏览器的兼容问题。
优雅降级:Web站点在所有新式浏览器中都能正常工作,如果用户使用的是老式浏览器,则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题,针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案,使之在旧式浏览器上以某种形式降级体验却不至于完全失效。
渐进增强:从被所有浏览器支持的基本功能开始,逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时,它们会自动地呈现出来并发挥作用。