CSS 布局 ,文档流,定位,中划线,表格属性,line-height居中对齐,z-index,display

CSS 知识汇总

vertical-align:top|middle|bottom //用于图片时，（如文字）其他元素相对于图片的上，中，下对齐

div line-height:200px; //设置line-height的高度和div的高度一样，则div里的文字10Px 上下居中对齐
div height:200px;
div font-size:10px;

div text-decoration:
line-throught; 中划线
underline; 线划线
overline;上划线
none;

表格属性：
border:3px;
border-collapse:collapse;//边线以实线填充,其他形式：空心
border-spacing:10px 20px//td 水平，上下之间的间隔距离10px，20px;

盒子层次：z-index =10数值越高，越在顶层

呈现形式：display:
none:不显示
block:块级标签，可设置高宽，元素独占一行
inline:行级标签，不可设置高宽，元素自适应内部内容
inline-block:可设置高宽，但不独占一行
<style>
.div1{
width:100px;
height:100px;
display:inline-block;
background-color:red;
}
.div2{
width:100px;
height:100px;
display:inline-block;
background-color:red;
z-index:10;
}
span{
display:block;
width:100px;
height:100px;
}
</style>
<div class="div1"></div>
<div class="div2"></div>
<span></span>
定位：
absolute:是以浏览器为参考系，但是如何父级元素在非静态定位(static)元素中，则相对父级元素定位
fixed:相对浏览器窗口定位；
static：默认值，没有定位
sticky(h5):
<style>
.div1{
postion:absolute;
left:200px;
top:0px;
}
.div2{
postion:sticky; //当拉动滚动条到顶部时固定贴浏览器顶0px;
left:200px;
top:0px;
}
.dv-box{
postion:fixed; //父级元素非static定位
width:1000px;
height:1000px;
left:10px;
top:10px;
}
</style>
<div class="dv-box">
<div class="classdiv1"></div>
</div>
布局样式：

1.人民币符合：<b>¥399</b>
2.<ul><li>用法：
<style>
ul{
list-style:none;
}
li{
float:left;
margin-left:20px;
font-size:20px;
cursor:pointer; //鼠标上浮改变鼠标形状
border:1px solid red;//给li加边框
padding:1px;//给li加内边距
margin-bottom:2px;//给加行边距
}
li:hover{
color:red; //鼠标上浮改变字体颜色
}
img{
width:130px;
height:190px;
}
b{
color:red;
}
</style>
<ul>
<li>c#</li>
<li>java</li>
<li>python</li>
<li>css</li>
</ul>

<ul>
<li>
<img src="../02.deom/1.jpg" alt="">
<span>小米手机cc9</span><br>
<b>¥2189</b>
</li>
</ul>

来源：oschina

链接：https://my.oschina.net/u/4258260/blog/4281726

标签

RED

sticky