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}。
③、行内元素为了照顾兼容性尽量只设置左右的内外边距,不要设置上下内外边距;设置了也是无效的。
④、行内元素直接就看做是文字就行了。