知识阶段性总结,用于回忆。
font
属性简写
1 | font:font-style|font-variant|font-weight|font-size/line-height|font-family |
font-style
1 | font-style:italic/oblique/normal; |
清除插入图片自带的(3-6)个像素
方法一:
1 | img{ |
方法二:
1 | display:block; |
方法三:
1 | /* 给父元素声明 */ |
line-height
用于文字的垂直对齐
1 | 居中:line-height = height ; |
置换元素与非置换元素
a) 置换元素:浏览器根据元素的标签和属性,来决定元素的具体显示内容。
例如:浏览器会根据<img>
标签的src属性的值来读取图片信息并显示出来,而如果查看(x)html代码,则看不到图片的实际内容;<input>
标签的type属性来决定是显示输入框,还是单选按钮等。
(x)html中的<img>
、<input>
、<textarea>
、<select>
、<object>
都是置换元素。这些元素往往没有实际的内容,即是一个空元素。
置换元素在其显示中生成了框,这也就是有的内联元素(img,input)能够设置宽高的原因。
b) 不可替换元素(非置换元素):(x)html 的大多数元素是不可替换元素,即其内容直接表现给用户端(如浏览器)。
置换元素书写时之间不能用空格,回车等,会产生占位元素。
利用float
、postiton:fixed/absolute
会生成一个块级框
元素类型会变成 block
white-space
属性
white-sapce | 是否合并空白符 | 是否换行 | 兼容性 |
---|---|---|---|
pre | 不合并 | 不换行 | |
nowrap | 合并 | 不换行 | |
pre-wrap | 不合并 | 换行 | IE8+ |
pre-line | 合并 | 换行 | IE8+ |
Flex布局下子元素的order
属性
数字越小越靠前
,而且值可以为负数。
弹性盒下的子元素,内联也可以设置宽高,弹性盒下的子元素设置float是失效的
BFC的布局规则
- 一、内部的Box会在垂直方向,一个接一个地放置。
- 二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠(按照最大margin值设置)
- 三、每个元素的margin box的左边, 与包含块border box的左边相接触
- 四、BFC的区域不会与float box重叠。
- 五、BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。
- 六、计算BFC的高度时,浮动元素也参与计算
哪些元素或属性能触发BFC
- 根元素(html)
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
CSS不能继承的属性
1 | 显示:display、background、float、clear、overflow、 |
transform的小坑
transform
属性的rotateX()
、translateY()
、skewZ()
属性。其中的XYZ小写浏览器也能识别,但实际开发中更推荐用大写
Loading….
- 本文链接: https://anyway521.github.io/post/bffb18e4.html
- 最后更新:
- 版权声明: 博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议进行许可,转载请注明出处!