初学HTML 和CSS 时总会被位置定义搞蒙,现在一张图教你如何区分position margin border padding and width height。 在房间中的一张桌子上有一个表着绿色相框的小人图画 1、width and heigth 属性 width 和 height 属性定义内容的宽高属性,如文字,图片。在图中就是小人的宽度和高度。
一个padding属性,相当于padding-left,padding-right,padding-top,padding-bottom 一个盒子加上padding,border,margin后,会将盒子撑大; border: 3px solid black相当于 border-style: solid; border-color: red; border-width: 3px;这三个属性 margin:垂直方向上会出现外边距合并,小的合到大的里,也成外边距塌陷 ...
1.对行内元素span设置padding-top、padding-bottom、margin-top、margin-bottom属性时,并不会影响span所在行的行高,即使span元素的高度增加,也不会影响所在行的上下文元素的位置。 2.对行内元素span设置padding-left、padding-right、margin-left、margin-right元素会影响span元素在行内的位置。 ...猜...
1.常用页面布局 效果图: 代码: <!DOCTYPE html>cssbody{margin:0px;/*margin: 0px; 网页内容距离浏览器上下左右的距离都是0像素*//*margin: 5px 10px; 网页内容距离浏览器上下的距离为5,左右的距离都是10像素*//*margin: 0px 5px 10px; 网页内容距离浏览器上为0,下为10,左右的距离都是5像素*//*...
没有设置padding,margin,border 通过设置margin为auto可以控制element在父容器中居中: [html] view plaincopyprint?#p1 { width:600px; height: 200px; margin:auto;background:#AC0;} #p2 { width:400px; height: 160px; margin:auto;background:#eee;} 相对于外面的DIV居中 相对...
margin-top: 100px; position:absolute; padding:20px; border:10px solid black; } item1 item2 运行结果: 注意到变化了吗,当把外层div设置为absolute时,外层div宽度由原来的100%变为auto. 当把一个元素position属性设置为absolute或fixed的时候,会发生三件事: (1)把该元素往 Z 轴方向移了一...
结果很明朗了，祖先类的margin会让子类的absolute跟着偏移，而padding却不会让子类的absolute发生偏移。总结...
myStyle{position:static;padding:10px;margin:5px;background-color:#fff;border:1pxsolid#000;width:...
而造成这样的原因就是relative属性遵循常规流,并没有脱离文档流,所以 margin和padding 是会影响 前后元素的位置的。 绝对定位(absoulte) : absolute: 对象脱离常规流。 给盒子添加 属性: .d1{ border: 1px solid red; position: absolute; top: 20px; ...
initial-scale=1.0">67居中89/* 预设置样式 */10body{11margin:0;12padding:0;13}14.test1{15border:1px solid gold;16width:150px;17height:150px;18margin:0auto;19}20212223thisis test12425 2.图像居中对齐(先设置display:block;再margin:0 auto); 3.文本居中对齐(text-align:center;) 4.左右...