css之元素的显示方式
来源:互联网 发布:ubuntu分区工具 编辑:程序博客网 时间:2024/05/30 05:41
、元素的四种显示方式
1、隐藏
典型代表: div ,p, h,ul....
特点:
独自占据一行
可以设置有效宽高
当发生嵌套的时候,如果没有给子元素设置宽高,子元素的宽度和父元素一样宽
<style type="text/css">
div{
width: 300px;
height: 200px;
border: 1px red solid;
}
p{
background-color: gray;
}
</style>
</head>
<body>
<div>div元素<p>段落元素</p></div>
</body>
3、行内元素
代表: span, em,a,strong....
特点:
例如:
<style type="text/css">
span,a{
width: 300px;
height: 200px;
border: 1px red solid;
}
</style>
</head>
<body>
<span>span标签</span>
<a href="#">百度</a>
</body>
4、行内块元素
代表:input,img...
<style type="text/css">
input,img{
width: 300px;
height: 200px;
border: 1px red solid;
vertical-align:middle;
}
input{
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<input type="button" value="保存">
<img src="hbsi.png">
</body>
1、隐藏
2、块级元素
典型代表: div ,p, h,ul....特点:
独自占据一行
可以设置有效宽高
当发生嵌套的时候,如果没有给子元素设置宽高,子元素的宽度和父元素一样宽
<style type="text/css">
div{
width: 300px;
height: 200px;
border: 1px red solid;
}
p{
background-color: gray;
}
</style>
</head>
<body>
<div>div元素<p>段落元素</p></div>
</body>
3、行内元素
代表: span, em,a,strong....
特点:
多个元素在一行内显示
无法设置有效宽高
宽度由容器里的内容决定例如:
<style type="text/css">
span,a{
width: 300px;
height: 200px;
border: 1px red solid;
}
</style>
</head>
<body>
<span>span标签</span>
<a href="#">百度</a>
</body>
4、行内块元素
代表:input,img...
特点:
多个行内块在一行上显示
可以设置有效宽高<style type="text/css">
input,img{
width: 300px;
height: 200px;
border: 1px red solid;
vertical-align:middle;
}
input{
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<input type="button" value="保存">
<img src="hbsi.png">
</body>
阅读全文
0 0
- css之元素的显示方式
- css之元素显示方式的转换(display的用法)
- 元素的显示方式
- 元素的显示方式
- 元素定位方式 之-----CSS属性定位
- 2.css三大特性 元素显示方式
- css常用的隐藏元素的方式
- CSS之元素的层级
- css中元素的隐藏方式
- 0430-CSS元素的显示模式
- CSS实现元素的居中显示
- css元素hover時控制另一个元素的显示隐藏
- HTML元素显示方式
- 元素显示方式display
- 元素显示方式
- javascript+css 标签显示方式的思考
- javascript+css 标签显示方式的思考
- CSS定位之元素的层级
- Angular的一些坑
- C++实验6——字符串操作
- 网络编程之开源项目和JSON解析技术的使用——简易新闻客户端
- socket系列(一)——socket实现推送
- android18
- css之元素的显示方式
- tensorflow实现对图片的读取
- 正则语言引擎:一个简单LEX和YACC结合运用的实例
- spark 2.1 TaskResult
- postfix
- android18
- 用c语言链表实现通讯录
- 列出联通集
- android18