6-css盒子模型(边框、内边距、外边距、内容)

一、边框:border

①、复合写法:border: 1px solid #ccc;

②、边框会撑大盒子的大小。

 

二、内边距:padding

①、复合写法:padding: 10px 5px;  上下10,左右5.

②、padding是内容与盒子边框之间的距离,给内容的父亲添加。 

③、padding会撑大盒子。

④、如果盒子没有宽高,就不会撑大盒子;如果盒子只有高,就会撑大高,只有宽,就会撑大宽。

 

三、外边距:margin

①、复合写法:margin: 10px 5px;  上下10,左右5.

②、margin是盒子与盒子之间的距离。

③、margin应用:让块级元素水平居中: margin; 0 auto; 

 

 

四、外边距应用及塌陷问题:

①、行内元素或者行内块元素要水平居中就给他的父亲添加 text-align: center; 垂直居中就是 行高等于高。

②、两个嵌套的块元素,如果父亲有外边距,子元素也有外边距,此时父元素会塌陷;或者直接给子元素一个外边距父元素也会塌陷。

③、解决:给父元素添加 overflow: hidden;

 

五、网页会自带一些内外边距:

①、比如自带padding和margin,一些元素也会自带,比如 ul。

②、清除: * {margin; 0 padding:0}。

③、行内元素为了照顾兼容性尽量只设置左右的内外边距,不要设置上下内外边距;设置了也是无效的。

④、行内元素直接就看做是文字就行了。

 

6-css盒子模型(边框、内边距、外边距、内容)

上一篇:Centos6.7安装Apache2.4+Mysql5.6+Apache2.4


下一篇:Laravel 生产环境部署,phphub5应用部署记录