html -- 块元素、内联元素、内联块元素 练习
2021-04-10 09:26
标签：charset 问题： ima 不可 osi 垂直居中 方式 https 标签 html标签(也叫元素)大概可以统分为三大类，块元素、内联元素、内联块元素。 块元素 1，常用的块元素：ul、li、div、p、dl、dt、dd、h1~h6。 2，块元素支持所有的样式。 3，盒子独占据一行，即使设置了宽度。 4，如果没有设置宽度，默认宽度为父元素的100%。 内联元素 1，常用的内联元素：span、a、em、i、b、strong。 2，只支持部分样式，比如说，不支持宽、高、margin上下、padding上下。 3，盒子并在一行。 4，宽高由内容挣开。 5，如果代码换行，盒子之间会产生间距。 6，子元素是内联元素的话，可以通过设置这个子元素的父元素的text-align属性来设置水平对齐方式。 解决第 4 点问题 1，取消代码间的换行，太麻烦了，不可取。 2，将这个内联元素的父元素的font-size值设为0，内联元素自身再设置font-size。 内敛块元素 1，支持所有的样式。 2，盒子并在一行。 3，代码换行，盒子会产生间距。 4，子元素是内联元素的话，可以通过设置这个子元素的父元素的text-align属性来设置水平对齐方式。 从某种程度上可以说内联块元素结合了块元素和内联元素的优点，虽然现有元素没有归于此类别的，但是可以通过display属性来实现块元素、内联元素、内敛块元素的相互转化。 display属性 1，none 隐藏元素，且不占位置。 2，block 作为块元素显示。 3，inline 作为行内元素显示。 4，inline-block 作为行内块元素显示。 在实际开发中，块元素使用的较多，所以经常把内联元素转化为块元素，少量转化为内联块，而要使用内联元素时，直接使用内联元素，而不用块元素转化了。还是要视情况而定。 实际练习中遇到的问题： 1，内联元素设置宽、高、margin、padding无效。 2，通过设置内联元素或者内联块元素的父元素的font-size为0，内联元素或内联块元素的font-size为字体大小，来解决代码换行带来的间距问题。 3，通过设置盒子的行高line-height和盒子高度height为一样的值，使得盒子内文字垂直居中?。 ?4，ul、li、a等标签都有自己的属性，要根据需要调整。 练习代码?： html -- 块元素、内联元素、内联块元素 练习 标签：charset 问题： ima 不可 osi 垂直居中 方式 https 标签 原文地址：https://www.cnblogs.com/xuxianshen/p/12431646.html
DOCTYPE html>
html lang="ZH-cn">
head>
meta charset="UTF-8">
meta name="viewport" content="width=device-width, initial-scale=1.0">
title>css练习一title>
style>
.con_page{
height: 40px;
width: 600px;
border: 1px solid rgb(128, 128, 125);
text-align: center;
list-style: none;
padding: 0px;
margin: 0px auto;
font-size: 0px;
}
.con_page li{
margin: 7px 5px;
display: inline-block;
font-size: 12px;
/* height: 26px; */
/* background-color: gold; */
}
.con_page li a{
display: inline-block;
height: 26px;
padding: 0px 10px;
line-height: 26px;
background-color: gold;
text-decoration: none;
color: black;
font-size: 12px;
font-family: "Microsoft YaHei";
}
.con_page a:hover{
background-color: red;
color: white;
}
.menu{
list-style: none;
margin: 50px auto 0px;
height: 40px;
width: 958px;
border: 1px solid #666;
padding: 0px;
text-align: center;
font-size: 0px;
}
.menu li{
display: inline-block;
font-size: 14px;
line-height: 40px;
}
.menu li a{
display: inline-block;
height: 40px;
line-height: 40px;
font:normal 14px/40px ‘Microsoft YaHei‘;
text-decoration: none;
color: #000;
}
.menu li span{
display: inline-block;
height: 40px;
font:normal 14px/40px ‘Microsoft YaHei‘;
margin: 0px 20px;
}
.menu li a:hover{
color: tomato;
}
.menu2{
list-style: none;
margin: 50px auto 0px;
height: 40px;
width: 960px;
border: 1px solid #666;
padding: 0px;
background-color: #55a8ea;
position: relative;
}
.menu2 li{
width: 100px;
height: 40px;
/* text-align: center; */
float: left;
}
.menu2 li a{
display: inline-block;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 14px;
font-family: ‘Microsoft YaHei‘;
text-decoration: none;
color: #fff;
}
.menu2 li a:hover{
background-color: #00619f;
}
.menu2 .new{
width: 33px;
height: 20px;
background: url(./images/new.png) no-repeat;
position: absolute;
left: 334px;
top: -8px;
}
style>
head>
body>
ul class="con_page">
li>a href="">上一页a>li>
li>a href="">1a>li>
li>a href="">2a>li>
li>a href="">3a>li>
li>a href="">4a>li>
li >span>...span>li>
li>a href="">17a>li>
li>a href="">18a>li>
li>a href="">19a>li>
li>a href="">20a>li>
li>a href="">下一页a>li>
ul>
ul class="menu">
li>a href="">首页a>li>
li>span>|span>li>
li>a href="">网站建设a>li>
li>span>|span>li>
li>a href="">程序开发a>li>
li>span>|span>li>
li>a href="">企业VIa>li>
li>span>|span>li>
li>a href="">案例展示a>li>
li>span>|span>li>
li>a href="">联系我们a>li>
li>span>|span>li>
li>a href="">网络营销a>li>
ul>
ul class="menu2">
li>a href="">首页a>li>
li>a href="">网站建设a>li>
li>a href="">程序开发a>li>
li>a href="">企业VIa>li>
li>a href="">案例展示a>li>
li>a href="">联系我们a>li>
li>a href="">网络营销a>li>
li class="new">li>
ul>
body>
html>
上一篇：HTML---2
文章标题：html -- 块元素、内联元素、内联块元素 练习
文章链接：http://soscw.com/index.php/essay/73726.html