欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS入门 >

Css布局知识点

 

常见的块级元素<div> <p> <form>

常见的行内元素<span> <a>

display CSS中最重要的用于控制不具有的属性。每个元素都有一个默认的display值,这个默认值与元素的类型有关。有的默认值为block ,被称为块级元素,有的默认值为inline被称为行内元素。

display 值为none时,元素会隐藏。与visibility不同,visibility:hidden;还会占据空间。而display:none 则不占据空间。<script>默认的display值为none

margin:auto;

#main { width: 600px; margin: 0 auto; }

设置块级元素的 width 可以防止它从左到右撑满整个容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度,然后剩余的宽度会一分为二成为左右外边距。

盒模型

当设置了元素的宽度,实际展现的元素会超过你的设置,这是因为元素的边框border 和内边距会(padding)会撑开元素。

.simple { width: 500px; margin: 20px auto; }

.fancy { width: 500px; margin: 20px auto; padding: 50px; border-width: 10px; }

将上面两个class运用在不同的div上,会发现fancy明显比simple要大,虽然给他们设置了相同的宽度

box-sizing属性:当你设置一个元素为 box-sizing: border-box; 时,此元素的内边距和边框不再会增加它的宽度。

.simple { width: 500px; margin: 20px auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.fancy { width: 500px; margin: 20px auto; padding: 50px; border: solid blue 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/rumen/r43976.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2017-10-30 09:25 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。