关于前端的碎碎念2-CSS装修之display
【摘要】 学习前端,前端就好比如盖房子~ html就充当了房子结构这部分,也是房子的基础。 css呢,就好比咱们房子的装修,墙面什么颜色,什么风格,什么地板...这些给房子改变风格,样式的就是css javascript呢,就好比这个房子的功能,房子需要制冷吧,需要暖气吧,也需要上下水吧。这些功能性的就相当于是javascript 好了,大概这样子开始了~follow me~
可以说CSS的属性几乎完全是语义化的。我们需要改变边框,那就是“border”,那我们需要右侧边框做一些改变,那就是“border-right”。很明显,接下来按照我们的需求还有“右边框的宽度——border-right-with”,”右边框颜色——border-right-color”等等等,诸如此类~
完全就是我们需要什么,只要凭着需求去寻找。~follow me~
元素默认的display值的情况如下(这个一般很少人注意这一点)
block(块级元素)
<div>、<p> <ul> <ol> <form> ……
inline(内联元素)
<span> <a> <img> <input> <select> <label> ……
list-item(项目列表)
<li>
none(不显示)
<head>(头部元素都是) <title> <br> <thead> <tbody> <tfoot>
常见的属性值(属性值太多,这里只说常用的)
none:元素隐藏
block:块级元素
inline-block:内联块级元素
list-item:列表项目
表格系列方面的显示
table
table-row
示例:div+css制作表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" http-equiv="Content-Type" content="text/html;" />
<title>div+css制作表格</title>
<style>
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
height: 40px;
text-align: center;
line-height: 40px;
}
.table {
margin: 0 auto;
display: table;
border-collapse: collapse;
border: 1px solid #ccc;
text-align: center;
height: 60px;
line-height: 60px;
}
.table-caption {
display: table-caption;
margin: 0;
padding: 0;
font-size: 16px;
}
.table-column-group {
display: table-column-group;
}
.table-column {
display: table-column;
width: 100px;
}
.table-row-group {
display: table-row-group;
}
.table-row {
display: table-row;
}
.table-row-group .table-row:hover,
.table-footer-group .table-row:hover {
background: #f6f6f6;
}
.table-cell {
display: table-cell;
padding: 0 5px;
border: 1px solid #ccc;
}
.table-header-group {
display: table-header-group;
background: #eee;
font-weight: bold;
height: 40px;
}
.table-footer-group {
display: table-footer-group;
}
</style>
</head>
<body>
<div class="table">
<h2 class="table-caption">花名册</h2>
<div class="table-column-group">
<div class="table-column"></div>
<div class="table-column"></div>
<div class="table-column"></div>
</div>
<div class="table-header-group">
<ul class="table-row">
<li class="table-cell">序号</li>
<li class="table-cell">姓名</li>
<li class="table-cell">年龄</li>
</ul>
</div>
<div class="table-footer-group">
<ul class="table-row">
<li class="table-cell">footer</li>
<li class="table-cell">footer</li>
<li class="table-cell">footer</li>
</ul>
</div>
<div class="table-row-group">
<ul class="table-row">
<li class="table-cell">1</li>
<li class="table-cell">顾九辞</li>
<li class="table-cell">19</li>
</ul>
<ul class="table-row">
<li class="table-cell">2</li>
<li class="table-cell">霍明澈</li>
<li class="table-cell">21</li>
</ul>
<ul class="table-row">
<li class="table-cell">3</li>
<li class="table-cell">紫妍</li>
<li class="table-cell">26</li>
</ul>
</div>
</div>
</body>
<script>
</script>
</html>
行级元素浮动之后,display为block。
flex(弹性盒子)
不过要结合相关的属性一起,flex-flow和flex。在响应式开发中flex非常有用。
示例:
使用盒模型相关属性将文档中的3个元素放在一行中显示,要求3个元素能够占满一行,元素自身长宽都为100px,中间间距距离相等。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>felx弹性盒模型</title>
<style>
.content{
display:flex;
flex-direction:row;/*水平显示*/
flex-wrap: nowrap;/*必要的时候可以折行wrap 不折行nowrap*/
justify-content:space-between;/*各行之间留有空白,相当于可以等距分布*/
}
.box{
border:1px solid #ccc;
text-align:center;
line-height:100px;
}
.box1 { width: 100px; height: 100px; }
.box2 { width: 100px; height: 100px; }
.box3 { width: 100px; height: 100px; }
</style>
</head>
<body>
<h1>使用盒模型相关属性将文档中的3个元素放在一行中显示,要求3个元素能够占满一行,元素自身长宽都为100px,中间间距距离相等。</h1>
<div class="content">
<div class="box1 box">元素1</div>
<div class="box2 box">元素2</div>
<div class="box3 box">元素3</div>
</div>
</body>
</html>
示例:行式布局 flex-flow: row;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>felx-flow行式布局</title>
<style>
.div-flex-box {
display: flex;
flex-flow: row; /*行式布局*/
}
.flex-1{
flex:1; /*占1份,共4份*/
height: 60px;
background-color: pink;
}
.flex-2{
flex:2; /*占2份,共4份*/
height: 60px;
background-color: hotpink;
}
.flex-3{
flex:1; /*占1份,共4份*/
height: 60px;
background-color:pink ;
}
</style>
</head>
<body>
<div class="div-flex-box">
<div class="flex-1" ></div>
<div class="flex-2"></div>
<div class="flex-3"></div>
</div>
</body>
</html>
【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)