css-01

最新推荐文章于 2024-05-07 15:15:45 发布

小黑不白爱吃糖

最新推荐文章于 2024-05-07 15:15:45 发布

阅读量89

点赞数

分类专栏：查漏补缺文章标签： css

本文链接：https://blog.csdn.net/qq_41860476/article/details/108881269

版权

查漏补缺专栏收录该内容

16 篇文章 0 订阅

订阅专栏

标签嵌套问题

一般是a标签嵌套button标签

常见块级、行内元素

块级元素：div、p、(dl、dd、dt) 、form、h1~h6、hr、（ul、ol、li）、（table、tbody、td、tfoot、th、thread、tr）(html5：header、nav、article、section、aside、footer、main、figure)、address 、caption 、fieldset、legend、pre、noframes、noscript

行内元素：

行内块级元素：input 、img

块级元素与行内元素的区别

1）

块级元素会独占一行，其宽度自动填满其父元素宽度
行内元素不会独占一行，纸质下一行排不下才会换行，其宽度随元素的内容变化！

2）

块级元素可以嵌套任意元素；一些特殊的块级元素如：dl、dt、dd、h1-h6这些标题标签不推荐嵌套块级元素
行内元素不能嵌套块级元素;

3）

行内元素不能设置width/height/padding-top/pading-bottom/margin-top/margin-bottom;只能用magin左右、padding左右来改变宽度

块级元素与行内元素的转换

display:inline-block
display:inline
display:block

css3新增特性

1. css3选择器

2. css3边框

3. css3背景

4. css3渐变

5. css3文本效果

6. css3字体（@font-face规则）

7. css3转换和变形 1）2D转换方法 2）3D转换属性

8. css3过渡（transition属性）

9. css3动画（@keyframes规则 animation属性）

10. css3多列

11. css3盒模型

12. css3伸缩布局盒模型（弹性盒子）（flexbox）

13. css3多媒体查询

BFC块级上下文

能够形成BFC的情况:

dispaly: inline-block | table-cell | flex | table-caption | inline-flex
float的值不是none
position的值不是static/relative
overflow的值不是visible

要点：BFC不与float元素重叠！！

盒模型

块之间共享垂直外边距（margin）,margin取其大

清除浮动

暂无

Width相关

ele.clientWidth=width+padding

ele.offsetWidth=width+padding+border

ele.scrollTop=被卷上去的上策距离

ele.scrollHeight=自身实际的高度（不加边框）

锚伪类

用来表示链接不同状态的伪类！

love与hate：link->vistied->hover->acive

垂直对齐的方式

vertival-align:设置元素对齐（前提：只能用于内联元素&display:table-cell）
弹性布局：align-items:center
父元素相对定位，子元素绝对定位
<style>

parent{

position:relative;

}

child{

position:absolute;

top:50%; /*距父亲50%*/

transform:translateY(-50%);    /*自身向上移动自己高度的50%*/

}

</style>