css中关于几个小tip的示例详解
程序员文章站
2022-04-21 23:49:34
...
1.元素的margin-top、margin-bottom及padding-top、padding-bottom使用百分比作为单位时,其是相对父元素的宽度width,而不是我们想象的高度height;如图
<style type="text/css"> .parent{ outline: 1px solid orange; width: 200px; height: 300px; padding: 10px; margin: 10px; } .child{ outline: 1px solid purple; width: 200px; height: 80px; padding-top: 10%; /*20px = 父容器的width值200px * 10% */ padding-bottom: 5%; /*10px = 200px * 5% */ margin-top: 20%; /*40px = 200px * 20%*/ margin-bottom: 15%; /*30px = 200px * 15%*/ }<body> <p class="parent"> <p class="child"></p> </p> </body>
子盒子参数如下:
2.含有定位属性的元素,其top、bottom单位为百分比时,该百分比是相对父元素的高度height。left、right则是相对父元素的宽度width.
.parent{
outline: 1px solid orange;
width: 200px;
height: 300px;
padding: 0px;
margin: 0px;
position: relative;
}
.child{
outline: 1px solid purple;
width: 200px;
height: 80px;
position: absolute;
top: 5%; /* 15px = 300px * 5% 上边框离父盒子上边框15px的距离*/
left: 20%; /* 40px = 200px * 20% 左边框离父盒子左边框40px的距离
也就是子盒子左上角的坐标为x=15,y=40(父盒子左上角为原点) */
}
3.边框宽度不能用百分比表示
4.width:100%
4.1当父容器里有绝对定位的子元素时,子元素设置width:100%实际上指的是相对于父容器的padding+content的宽度。
r如图:
<style type="text/css"> .parent{ outline: 1px solid orange; width: 200px; height: 300px; padding: 10px; margin: 10px; position: relative; } .child{ outline: 1px solid purple; width: 100%; /* width = 220px = 父容器的padding+content*/ height: 80px; position: absolute; top: 0; left: 0; } </style>
4.2 当子元素是非绝对定位的元素时(可以是相对定位),或者如果都没有定位,width:100%才是指子元素的 content ,其等于父元素的 content宽度。
.parent{ outline: 1px solid orange; width: 200px; height: 300px; padding: 10px; margin: 10px; } .child{ outline: 1px solid purple; width: 100%; /* width:200px = 父盒子的content*/ height: 80px; }
.parent{ outline: 1px solid orange; width: 200px; height: 300px; padding: 10px; margin: 10px; position: relative; } .child{ outline: 1px solid purple; width: 100%; height: 80px; position: relative; }
以上就是css中关于几个小tip的示例详解的详细内容,更多请关注其它相关文章!
上一篇: 连接数据库出问题
推荐阅读
-
关于JDK8中的字符串拼接示例详解
-
详解jQuery中关于Ajax的几个常用的函数
-
jQuery中关于Ajax的几个常用的函数详解
-
html中关于a标签href和onclick的用法区别以及优先级别的示例详解
-
详解jQuery中关于Ajax的几个常用的函数
-
C#(HTML)_小技巧_关于textbox框中不能输入HTML标签的解决方法(如输入“
”后,在提交表单时系统会崩溃)_html/css_WEB-ITnose
-
关于CSS3中选择符的实例详解
-
css中关于display:none与visible:hidden的具体区别详解
-
C#(HTML)_小技巧_关于textbox框中不能输入HTML标签的解决方法(如输入“
”后,在提交表单时系统会崩溃)_html/css_WEB-ITnose
-
css中关于ruby-position属性的使用详解