第一天基础html和css的复习总结(6)
1.实现让不一样大小的图片居中
关于图片垂直居中,有一个办法是添加一个空白的伪类元素,改变他的dispaly为inline-blcok;然后让他的高度等于父容器的高度,同时设置要居中图片和伪类元素属性vertical-align:middle;
另一种就是在图片后面增加了一个span空标签,下面是依次代码展示
vertical-align这个是设置元素的垂直排列的.
用来定义行内元素的基线相对于该元素所在行的基线的垂直对齐.按我的理解就是需要找一个平级的参照物才能设置,第二种就是找了平级的span做参照物
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
dl{
width: 199px;
height: 236px;
border-right: 1px solid #f00;
border-bottom:1px solid #f00 ;
float: left;
}
dl dt{
width: 199px;
height: 180px;
border-bottom: 1px solid #f00;
text-align: center;
}
dl dt img{
vertical-align: middle;
}
dl dt:before{
content: "";
width: 0%;
height: 100%;
background: #000000;
display: inline-block;/* 既有内联元素特点又有块状元素特点,内联元素就是想span之类的 */
/* 行内块状元素特征:(1)不自动换行(2)能够识别宽高(3)默认排列方式为从左到右 */
vertical-align: middle;
}
</style>
<body>
<dl>
<dt><img src="c.png"></dt>
<dd>跑步机</dd>
<dd>¥888</dd>
</dl>
<dl>
<dt><img src="d.png"></dt>
<dd>跑步机</dd>
<dd>¥888</dd>
</dl>
</body>
</html>
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
dl{
width: 199px;
height: 236px;
border-right: 1px solid #f00;
border-bottom:1px solid #f00 ;
float: left;
}
dl dt{
width: 199px;
height: 180px;
border-bottom: 1px solid #f00;
text-align: center;
}
dl dt img{
vertical-align: middle;
}
dl dt span{
width: 0%;
height: 100%;
background: #000000;
display: inline-block;/* 既有内联元素特点又有块状元素特点,内联元素就是想span之类的 */
/* 行内块状元素特征:(1)不自动换行(2)能够识别宽高(3)默认排列方式为从左到右 */
vertical-align: middle;
}
</style>
<body>
<dl>
<dt><img src="c.png"><span></span></dt>
<dd>跑步机</dd>
<dd>¥888</dd>
</dl>
<dl>
<dt><img src="d.png"><span></span></dt>
<dd>跑步机</dd>
<dd>¥888</dd>
</dl>
</body>
</html>
2.边框的颜色可以单独设置,就像风琴效果的箭头一样
border: 10px solid blueviolet;
border-top-color:royalblue;
border-left-color:royalblue ;
3.像这样不写right,就不会显示右侧,
border-left: 30px black solid;
border-top: 52px solid black;
border-bottom: 52px solid black;
加上right后变成,
不是当少了右面就少了三角,其实是都没了
4.骰子布局,这里全部利用弹性盒
flex-wrap: wrap;/ 当子元素溢出父容器换行 /
剩下的在总结6有
想要变成弹性盒,必须的给父元素,display:flex
还有一点可以思考下,弹性盒应该只能下面控制它的下一级,下下级控制不到了,因为刚设置nav时,span不像前3个一样听话了,竖排显示了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
border: 1px solid #000;
float: left;
background: #FF0;
display: flex;
justify-content: center;/* 水平 */
align-items: center;/* 垂直 */
box-sizing: border-box;/* 只和设置的宽度高度有关,不算padding和边框 */
}
span{
width: 50px;
height: 50px;
display: block;
background: #f00;
border-radius: 50%;
}
div:nth-child(2){
justify-content: space-around;
}
div:nth-child(3){
justify-content: space-between;
padding: 10px;
/* 这里设置完会多出去一块,所以用怪异盒模型box-sizing: border-box;,让它从边框开始算起 */
}
div:nth-child(3) span:nth-child(1){
align-self: flex-start;/* 让它从第一个开始显示 */
}
div:nth-child(3) span:nth-child(3){
align-self: flex-end;
}
div:nth-child(4){
flex-wrap: wrap;/* 当子元素溢出父元素时换行显示 */
}
nav{
width: 100%;
height: 50px;
display: flex;
/* background: #0000FF; */
justify-content: space-around;
}
div:nth-child(5){
flex-wrap: wrap;
}
div:nth-child(6){
flex-wrap: wrap;
}
</style>
<body>
<div><span></span></div>
<div><span></span><span></span></div>
<div>
<span></span>
<span></span>
<span></span>
</div>
<div>
<nav>
<span></span>
<span></span>
</nav>
<nav>
<span></span>
<span></span>
</nav>
</div>
<div>
<nav>
<span></span>
<span></span>
</nav>
<nav>
<span></span>
</nav>
<nav>
<span></span>
<span></span>
</nav>
</div>
<div>
<nav>
<span></span>
<span></span>
</nav>
<nav>
<span></span>
<span></span>
</nav>
<nav>
<span></span>
<span></span>
</nav>
</div>
</body>
</html>
好的,至此html简单的学习与复习就到这了,还剩下JS,JQ,下星期继续,弹性盒子还是不是很系统学习,有些也记不住,但是大概复习重温还是不错的,有了点底,今天7点完成任务,不错!
推荐阅读
-
Ant Design项目记录和CSS3的总结和Es6的基本总结
-
网页基础:网页设计(我所知道的所有的html和css代码(含H5和CSS3)),如有错误请批评指正
-
Java学习必须掌握的基础知识:什么是HTML5和CSS?
-
#WEB安全基础 : HTML/CSS | 0x5a标签拓展和class、id属性的使用
-
第一天基础html和css的复习总结(6)
-
同样的代码,在DMcs6和VS2010中显示不一样,这是为什么?_html/css_WEB-ITnose
-
HTML的基础知识.关于css样式表和样式属性的详细介绍
-
同样的代码,在DMcs6和VS2010中显示不一样,这是为什么?_html/css_WEB-ITnose
-
CSS3阴影 box-shadow的使用和技巧总结_html/css_WEB-ITnose
-
css3的基础用法,新手必看哈(还有css3和jquery动画的对比)_html/css_WEB-ITnose