CSS常见问题归纳与整理(收集了30多个)
其他
2019-03-28 02:27:50
阅读次数: 0
盒模型
- 盒模型分为标准盒模型和IE盒模型,前者的宽高是内容的宽高,后者则是border的宽高
- 相邻盒子的margin会重叠,取二者的最大值
- padding的宽高以百分比设置时,都是基于父元素的宽度
元素类型
- 块级元素,宽度占满窗口,自动换行,inline-block搭配vertical-align实现垂直居中
- 内联元素,宽度为元素本身的宽度,设置width,height属性无效,line-height调整父元素行高,元素vertical-align实现垂直居中
- 容器级的标签,里面可以放置任何东西;文本级的标签里面,只能放置文字、图片、表单元素
- inline-block与block的区别,前者将对象呈现为inline,让block元素不再独占一行,多个block元素可以同排一行,且元素具有block的属性,可设置宽高,是block和inline元素的综合体
- img、input、textarea和select等属于行内替换元素,height/width/padding/margin均可用,效果等于块元素。当设定了width但未设置height时,img的height会根据比列缩放
- 一个div中包含一个img和a标签时布局的情况是怎么样的,考虑vertical-align和line-height的影响:https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/
文档流与浮动
- 文档流:元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式。并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素
- 包裹性:block元素不指定width的话,默认是100%,一旦让该div浮动起来,立刻会像inline元素一样产生包裹性,宽度会跟随内容自适应,这也是通常float元素需要手动指定width的原因
清除浮动
- clear:只能影响使用清除的元素自身
- 给父元素设置高度
- overflow:hidden,缺点是内容过多时会被隐藏,无法显示要溢出的内容
- 伪元素:clear/ content/ display/ height/ visibility
定位Position
布局(待补充)
BFC(待补充)
长度单位
- em,参照父元素
- rem,参照html元素(根元素),转化成的像素大小取决于页根元素的字体大小, 会被浏览器中字体大小的设置影响。如html { font-size:16px },使用rem 单位的主要目的是确保无论用户如何设置自己的浏览器,我们的布局都能调整到合适大小
- 视口单位:
vw : 1vw 等于视口宽度的1% ;
vh : 1vh 等于视口高度的1% ;
vmin : 选取 vw 和 vh 中最小的那个 ;
vmax : 选取 vw 和 vh 中最大的那个
伪类与元素
选择器与优先级
- 选择器种类:
相邻兄弟选择器 a+b
子元素选择器 a>b
后代选择器 a b
属性选择器 [title=hah]
- 优先级:距离不会对元素优先级计算产生影响,如果优先级相同,靠后的 CSS 会应用到元素上;继承的样式是低于设定的样式的。如果只是继承,离的近的优先级更高
- !important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性 (伪类=属性选择器=类选择器)
动画
- transform,转换,包括缩放scale(1.2, 0.5)、移动translate(-50%, -50%)、旋转rotate(45deg)
- transition,补间动画,需要通过hover等伪类来触发
http://www.cnblogs.com/smyhvae/p/8435182.html
- animation,关键帧keyframe,动画属性。https://blog.csdn.net/mogoweb/article/details/80182338
- 其中 transform 描述了元素静态样式。而transition 和 animation 却都能实现动画效果。所以transform 常常配合后两者使用
- 二者区别在于:触发条件不同,transition通常和hover等事件配合使用,由事件触发,animation则立即播放;循环, animation可以设定循环次数;精确性, animation可以设定每一帧的样式和时间。transition 只能设定头尾。 animation中可以设置每一帧需要单独变化的样式属性, transition中所有样式属性都要一起变化。
- 动画库:Hover.css / Animate.css
Less
兼容
转载自blog.csdn.net/qq_41366268/article/details/88541816