码迷,mamicode.com
首页 > Web开发 > 详细

1.伪类、伪元素2.overflow:hidden3.CSS嵌套垂直外边距重叠问题4.清除浮动clearfix

时间:2020-05-11 22:03:03      阅读:84      评论:0      收藏:0      [点我收藏+]

标签:创建   问题   使用   http   英文   出现   复制   strong   hidden   

1..伪类、伪元素

伪元素主要是用来创建一些不存在原有dom结构树种的元素,例如:用::before和::after在一些存在的元素前后添加文字样式等,这些被添加的内容会以具体的UI显示出来,被用户所看到的,这些内容不会改变文档的内容,不会出现在DOM中,不可复制,仅仅是在CSS渲染层加入。CSS3中建议使用::表示伪元素,如:div::before。

 技术图片

 

 

2.overflow:hidden

overflow:hidden;

  1. 隐藏溢出,当内容超过其父元素时,可以使用该属性和值将溢出的部分裁剪掉,使页面更加美观,比如一个父块级元素里面包含了子块级元素,当子块级元素的高度超过父块级元素的高时,超部分就会隐藏。
  2. 清除浮动,当子元素浮动时,给父元素添加overflow:hidden,按照它的第一个特性,应该将子元素超出的部分截掉,但是因为子元素有浮动,无法裁剪,所有只能由父元素增加高度去包裹住子元素,使得父元素拥有了高度,而这个高度是跟随子元素自适应的高度,这样就把浮动的子元素包含在父元素内了。

技术图片

 

3..CSS嵌套垂直外边距重叠问题

解决方法(我们想让它们是相加而不是取最大值)

思路:既然它是说垂直相邻,那么我们是不是只要让它们不相邻是不是就可以了!

那就加边框,加内边距,加overflowhidden,把父元素子元素隔开。

 

4.清除浮动clearfix

反正设置一个clearfix公共类就行了,到时候拉出来直接用

.clearfix:after {       <----在类名为“clearfix”的元素内最后面加入内容;
    content: ".";     <----内容为“.”就是一个英文的句号而已。也可以不写。
    display: block;   <----加入的这个元素转换为块级元素。
    clear: both;     <----清除左右两边浮动。
    visibility: hidden;      <----可见度设为隐藏。注意它和display:none;是有区别的。仍然占据空间,只是看不到而已;
    height: 0;     <----高度为0;
    font-size:0;    <----字体大小为0;
}

.clearfix { *zoom:1;}  这是针对于IE6的,因为IE6不支持

1.伪类、伪元素2.overflow:hidden3.CSS嵌套垂直外边距重叠问题4.清除浮动clearfix

标签:创建   问题   使用   http   英文   出现   复制   strong   hidden   

原文地址:https://www.cnblogs.com/huqz/p/12871559.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!