css
djjj123456789
屌丝实施顾问学习前端
展开
-
margin-top并不是作用于父类
margin-top并不是作用于父类,而是父类产生了margin-top的效果。这个是CSS规范化的结果,在1999规范以前,所有元素都是默认有border的,或者说,即使border宽度为0,仍然可作定位使用。现在的规范中,将对margin定义更明确化(外边距:与当前盒模型以外的最近一个盒模型的间距),如果直接的父级盒模型在当前方向上没有border,就认为父级的范围也属于子标签的边框的一部...原创 2018-05-12 12:05:28 · 669 阅读 · 0 评论 -
行内元素和块级元素:内联(行级)元素不能设置margin-top
内联(行级)元素 不能设置宽高,但padding属性可以设置,需要注意的是行级元素不能设置margin-top和margin-bottom属性,但可以设置margin-left和margin-right属性。如果需要设置行级元素的margin-top或margin-bottom属性,必须将行级元素转换成内联块级元素或块级元素。行内元素和块级元素行内元素一般是内容的容器,而块级元素一般是其他容器的容...原创 2018-05-12 16:42:47 · 3500 阅读 · 0 评论 -
浮动(float)与inline-block的区别
结论:两者主要区别在于当标签的【高度不一致】时,体现出的差异如果高度不一致的情况下,想让他们按顺序排列就可以选择inline-block在浮动时,若第一个元素的高度大于第二个元素的高度,第三个元素浮动时,会与第二元素并排在一列中,这样不能出现有序排列了。在inline-block时,就算第一个元素的高度大于第二个元素的高度,第三个元素也不会与第二个元素排在一列。...原创 2018-05-12 23:59:12 · 1930 阅读 · 0 评论 -
浮动布局float带来的高度塌陷——清除浮动 clearfix
很多人都已经习惯称之为清除浮动,以前我也一直这么叫着,但是确切地来说是不准确的。我们应该用严谨的态度来对待代码,也能更好地帮助我们理解开头的三个问题。1)清除浮动:清除对应的单词是 clear,对应CSS中的属性是 clear:left | right | both | none;2)闭合浮动:更确切的含义是使浮动元素闭合,从而减少浮动带来的影响。两者的区别 请看优雅的 Demo通过以上实例发现,...转载 2018-06-21 16:12:50 · 479 阅读 · 0 评论 -
ellipsis单行文本和-webkit-box多行文本超出部分显示省略号
用到了单行文本与多行文本超出部分显示省略号,记录一下笔记。1.单行文本显示省略号代码这样写文本会超出红线边框:<!doctype html><html> <head> <meta charset="UTF-8"> <meta name="renderer" content="webkit&qu转载 2018-06-23 22:25:18 · 267 阅读 · 0 评论 -
子级元素设的margin-top会超出父级的范围
垂直方向会出现这个问题,水平方向不会出现!解决方法为给子元素添加浮动或者加padding-top取代margin-top转载 2018-06-26 14:54:41 · 2285 阅读 · 0 评论 -
css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点1. IE无法调整那些使用px作为单位的字体大小;2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。 px像素(Pix...转载 2018-07-19 19:27:58 · 123 阅读 · 0 评论 -
css之hover改变另外一个元素的状态
以前也遇到过hover一个元素,显示或者隐藏另一个元素的场景,如果是父子元素关系,这种非常好写,在选择器后加一个空格,跟上另一个选择器就行了, 例如 classA:hover classB{ display:none; } 但是有时不是父子元素关系,加空格就不行,以前都时用less这种css预处理语言写的,稀里糊涂就出效果了,这次用styus,非常不习惯,遇到这样一个场景,元素是兄弟关系,...转载 2018-07-19 22:56:44 · 14067 阅读 · 1 评论 -
CSS-标准盒模型 & 怪异盒模型
CSS中Box model分类CSS中Box model是分为两种:: W3C标准 和 IE标准盒子模型。大多数浏览器采用W3C标准模型,而IE中则采用Microsoft自己的标准。怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”,怪异模式主要表现在IE内核的浏览器。当不对doctype进行定义时,会触发怪异模式。 在标准模式下,一个块的总宽度= widt...转载 2018-07-19 22:57:09 · 400 阅读 · 0 评论