2016年10月31日 样式的格式与布局

上午讲了样式属性的大小,背景,字体,对齐方式,边界边框。
body里面代码为
<body>
<div style=" font-family:微软雅黑; font-size:36px; font-weight:bold; font-style:italic; color:#F00; text-decoration:line-through">hhhh
</div>
<div id="a1">ad
<div id="a2">
</div>
<br />
</div >
<br>
<div id="c">百度一下
</div>

</body>
head里面代码为
<style type="text/css">
*{ margin:0px auto; padding:0px}
#a1{ 200px; height:300px;
background-color:#C00;


}
#a2{ 100px; height:100px; background-color:#00C;
margin:auto;
text-align:left

}
#c{ width :200px; height:80px; background-color:#00C; font-size:16px; text-align:center; vertical-align:middle;
line-height:80px

</style>
所呈现出的效果为。。

下午学习了格式与布局。

1.位置:position
fixed固定
相对于浏览器边框位置固定
absolute绝对位置
相对于父级元素(浏览器,绝对定位的上级)
relative相对位置
相对于自身应该出现的位置
top
距离上边的距离
right
距离右边的距离
bottom
距离下边的距离
left
距离左边的距离


2.流
float
left
向左流
right
向右流
clear
both
清掉流
3.z-index分层
值越大越靠上


4.其它
display
显示block和隐藏none,不占位置
visibility
显示visible和隐藏hidden,占位置
overflow
超出范围 hidden隐藏
透明
opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50)
圆角
border-radius:5px;
阴影
box-shadow:0 0 5px white

原文地址:https://www.cnblogs.com/F4natasy/p/6016235.html