前言
上篇文章主要介绍了CSS样式更改篇中的列表、表格和轮廓,这篇文章主要介绍CSS样式更改中框模型、定位、浮动、溢出基础知识。
1.框模型Border Model
从上图可以得知,如果把一个网页比作一个方框,那么border padding margin 所扮演的角色。
通过通用选择器,可以设置所有的元素的border padding margin 初始值为0:
*{margin:0;padding:0;border:0}所有的边距都可以用em px 百分比来设置它们都有四个值,你可以单个设置,也可以一起设置,顺序为top-right-bottom-left
2.定位Position
1).相对定位relative
相对于其正常位置进行定位
div{ position:relative}
2).绝对定位absolute
相对于 static 定位以外的第一个父元素进行定位
div{ position:absolute}
3).静态定位static
没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)
div{ position:static}
4).固定定位fixed
相对于浏览器窗口进行定位
div{ position:fixed}
3.浮动Float
元素内的内容向某个方向移动
div{ float:left}left 左浮动right 右浮动none 不浮动
4.溢出Overflow
元素内容超过了框架的大小
div{ overflow:scroll}visible 内容不会被修剪,会呈现在元素框之外hidden 内容会被修剪,并且其余内容是不可见的scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容
参考文档:W3C官方文档(CSS篇)
总结
这篇文章主要介绍了CSS样式更改篇中的框模型、定位、浮动、溢出基础知识,希望让大家对CSS样式更改有个简单的认识和了解。