css常见问题
树图思维导图提供 css常见问题 在线思维导图免费制作,点击“编辑”按钮,可对 css常见问题 进行在线思维导图编辑,本思维导图属于思维导图模板主题,文件编号是:11819f93fc8a1a2a92b379d5524e83c3
css常见问题思维导图模板大纲
因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。
*最简单的初始化方法就是: * {padding: 0; margin: 0;} (不建议)
a、box-sizing:content-box:
padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和,即 ( Element width = width + border + padding,但占有页面位置还要加上margin ) 此属性表现为标准模式下的盒模型。
b、box-sizing:border-box:
padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值,即使定义有border和padding也不会改变对象的实际宽度,即 ( Element width = width ) 此属性表现为怪异模式下的盒模型。
em
rem
作用:利用rem可以实现简单的响应式布局,可以利用html元素中字体的大小与屏幕间的比值设置font-size的值实现当屏幕分辨率变化时让元素也变化,以前的天猫tmall就使用这种办法
em与rem的重要区别: 它们计算的规则一个是依赖父元素另一个是依赖根元素计算
行内样式表,内嵌样式表,外部样式表
浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
(1)、使用空标签清除浮动。
这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。
(2)、使用overflow。
给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
(3)、使用after伪对象清除浮动。
该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0,否则该元素会比实际高出若干像素;
树图思维导图提供 不得不知的店铺7大运营技巧 在线思维导图免费制作,点击“编辑”按钮,可对 不得不知的店铺7大运营技巧 进行在线思维导图编辑,本思维导图属于思维导图模板主题,文件编号是:ddb58d3b4182c8c49aef59edb2ad0f6c
树图思维导图提供 CSS揭秘 在线思维导图免费制作,点击“编辑”按钮,可对 CSS揭秘 进行在线思维导图编辑,本思维导图属于思维导图模板主题,文件编号是:3a22e1a90e4669a38f53e6ba57d01970