微信公众号:Python爬虫与数据挖掘,回复“书籍”有福利

CSS样式更改——框模型、定位、浮动、溢出

前言

上篇文章主要介绍了CSS样式更改篇中的列表、表格和轮廓,这篇文章主要介绍CSS样式更改中框模型、定位、浮动、溢出基础知识。

1.框模型Border Model

CSS样式更改——框模型、定位、浮动、溢出

从上图可以得知,如果把一个网页比作一个方框,那么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样式更改有个简单的认识和了解。
想要学习更多,请前往Python爬虫与数据挖掘专用网站:http://pdcfighting.com/

****看完本文有收获?请转发分享给更多的人****

IT共享之家

入群请在微信后台回复【入群】

——————- End ——————-

往期精彩文章推荐:

喜欢 (4)
取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦



Warning: copy(C:\inetpub\wordpress/avatar/.png): failed to open stream: No such file or directory in C:\inetpub\wordpress\wp-content\themes\XHBlog\functions.php on line 264

Warning: filesize(): stat failed for C:\inetpub\wordpress/avatar/.png in C:\inetpub\wordpress\wp-content\themes\XHBlog\functions.php on line 269

Warning: copy(C:\inetpub\wordpress/avatar/.png): failed to open stream: No such file or directory in C:\inetpub\wordpress\wp-content\themes\XHBlog\functions.php on line 270
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址