关于前端的碎碎念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）