【个人总结】清除样式（间距、浮动、定位）

清除样式

一、清除间距：*{margin:0;padding:0;}

1，便于设计，清除不同标签的内外间距值；

2，可以使所有的浏览器这两项默认值统一，有利于后期的兼容性调整。 (不同浏览器对不同标签的默认margin,padding值不一样)

二、清除浮动

浮动元素，脱离文档流，变成内联块元素；不会再将父撑开；并带来很多后期影响。（塌陷问题）

1，浮动的元素后添加<div class=”cf”></div> .cf: { clear:both;}

2，父级div定义 overflow:auto;

3，用伪类给父级加类.clearfix来定义　

.clearfix{zoom:1;/*为了兼容IE*/}

.clearfix:after{ content:"";//设置内容为空

height:0;//高度为0

　　　　　　line-height:0;//行高为0

　　　　　　display:block;//将文本转为块级元素

　　　　　　visibility:hidden;//将元素隐藏

　　　　　　clear:both//清除浮动

　　　　　}

4，使用双伪元素清除浮动

.clearfix { zoom: 1; }

.clearfix:before,.clearfix:after {

content: "";

display: block;

line-height: 0;

}

.clearfix:after{ clear: both;

}

　总结:第一种方法会增加许多不必要的标签,

第二种方法会将超出部分隐藏在某些时候我们想清除浮动并且保留超出部分时做不到,　第三种方法来代码多。第四种时三的改良版，比较简便。（加入:before以解决现代浏览器上边距折叠的问题）

另：父给高或加浮动或绝对定位，也可以解决，但不清除浮动会带来其他影响。

三、清除定位

Position:static;（恢复默认值）

任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”。

清除样式参数元素应用哪个样式，优先级来决定。

（可再取一个类名）重新定义，计算机解析从前往后，后来的数据会覆盖前者。

应用：基本一致的样式，CSS可以定义一次反复调用，个别修改时，加个类名再重新定义。

浏览器根据优先级来决定给元素应用哪个样式，而优先级仅由选择器的匹配规则来决定。

内联》ID选择器》伪类=属性选择器=类选择器》元素选择器【p】》通用选择器(*)》继承的样式

权重：内联样式1000》id选择器100》class选择器10》标签选择器1

优先级计算 a*100+b*10+c （a,b,c分别为#，类，标签出现的次数）

Ul#nav li.num1 a 1*100+1*10+3=113 （出现的次数，不管怎么组合）

注意事项：优先级基于类型只能同类别比较

1、（：[] . 为同类）。

#nav{} 为ID选择器类，[id=”nav”]{ }为属性选择器

2，优先级的计算不是基于十进制升位的，后面的数优先级再高也不能升到前一位。（一个# 优先级高于无限个class）

通用选择器（*），子选择器（>），和相邻同胞选择器（+）并不在这个等级中，所以他们的权值为0。不参与计算。

!Important 尽量少用。用于特殊改变和改变行内样式。

转载于:https://www.cnblogs.com/ljt1412451704/p/7990003.html

【个人总结】清除样式（间距、浮动、定位）相关推荐

CSS浮动定位与背景样式
CSS浮动定位与背景样式 1.浮动与定位 1.1 浮动的基本概念本质功能 : 实现块元素并排布局使用要点 : 1.要浮动,并排的盒子都要设置浮动2.父盒子宽度足够,否则会被迫换行3.子盒子会按顺序 ...
HTML-盒子模型(padding-margining)-样式继承-浮动
盒子模型(padding-margining)-样式继承-浮动 1 回顾 1. 常用属性背景属性: background-color.background-image.background-repea ...
JavaScript 浮动定位提示效果
本来想做一个集合浮动定位和鼠标跟随的tooltips效果,但发现定位和鼠标跟随在一些关键的地方还是不同的,还是分开来吧. 这个效果本身难度不大,主要在程序结构和扩展中下了些功夫,务求用起来更方便,能 ...
CSS表格与浮动定位
一.表格 1.表格的常用属性 1.边距属性:padding 2.尺寸属性:width,height 3.文本格式化属性: font-* text-align,color,text-i ...
BFC机制与浮动定位脱离文档流
BFC机制与浮动定位脱离文档流 BFC块格式化上下文 --w3c规定的一种独立渲染区域渲染流程基本上四个步骤: 1.计算CSS样式 2.构建Render Tree 3.Layout – 定位.大小, ...
CSS样式 float浮动用法
CSS样式 float浮动用法前言 Css样式的float浮动属性,用于设置标签对象(如:<div>标签盒子.<span>标签.<a>标签.<em>标 ...
浮动定位、相对定位、绝对定位、固定定位
一.浮动定位让块级元素在一行内显示将元素排除在普通文档流之外,会脱离文档流,元素不会占用页面的位置浮动的元素会停靠在别的浮动元素(页面的边缘)的左边或者右边属性:float 取值:left ...
java怎么往右浮动_[Java教程]jQuery实现页面滚动时智能浮动定位
[Java教程]jQuery实现页面滚动时智能浮动定位 0 2016-08-04 18:00:08 jQuery实现页面滚动时层智能浮动定位_前端开发 * { margin: 0; padding: ...
CSS排版练习小作业，文字围绕图片显示，基本的float浮动定位
简单的css排版基本的float浮动定位文字围绕图片显示 css代码,float分成两块 <style type="text/css">div.float1{flo ...
雅虎清除样式库：百度yui reset
雅虎清除样式库:百度yui reset http://yuilibrary.com/yui/docs/cssreset/ http://yui.yahooapis.com/3.18.1/build/c ...

【个人总结】清除样式（间距、浮动、定位）

【个人总结】清除样式（间距、浮动、定位）相关推荐

最新文章

热门文章