CSS属性（display）
1.display属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>08display属性</title>
<style> .c1 {
background-color: red;
/*display: none; !* 让其在页面上不显示 *!*/
/*display: inline; !* 让其变成一个行内标签 *!*/
display: inline-block; /* 让其具有块级标签和内联标签（行内标签）特点，就是可以设置长和宽的行内标签 */
} .c2 {
width: 100px;
height: 100px;
background-color: green;
/*display: block; !* 让其变成一个块级标签*!*/
display: inline-block; /* 让其具有块级标签和内联标签（行内标签）特点，就是可以设置长和宽的行内标签 */
} #ulid1 {
background-color: darkslategrey;
display: inline-block;
list-style-type: none; /* 将标题前面的点去掉 */
} li {
display: inline-block; /* 将li标签变为行内标签，并且可以设置长和宽 */
border-right: 2px solid bisque; /* 设置右边框2像素 实线 */
} li.last {
border-right: none; /* 将li最后一个标签的右边框设置成没有 */
} </style>
</head>
<body> <div class="c1">div</div> <!-- div是块级标签，可以设置长和宽 -->
<span class="c2">span</span> <!-- span标签是一个内联标签，自己占多大就占多大,不能设置长和宽 -->
<span class="c2">span</span> <ul id="ulid1">
<li>玉米商城</li>
<li>电脑</li>
<li>手机</li>
<li class="last">平板</li>
</ul> </body>
</html>
CSS属性（display）的更多相关文章
- 基于CSS属性display:table的表格布局的使用
项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格 ...
- CSS属性display的浅略探讨
display 的属性值有:none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|tab ...
- CSS属性Display（显示）和Visibility（可见性）
隐藏一个元素可以通过把display属性设置为“none”,或把visibility属性设置为“hidden”.但是请注意,这两种方法会产生不同的效果. Visibility:hidden可以隐藏某个 ...
- CSS属性中Display与Visibility的不同
大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的.visibility属性用来确定元素是显示还是隐藏,这用visibility=&qu ...
- CSS的display属性
网页设计中最常用的标签p.div.h1-h6(默认为块级元素),span(默认为内联元素) 内联,内嵌,行内属性标签: 1.默认同行可以继续跟同类型标签: 2.内容撑开宽度 3.不支持宽高 4.不支持 ...
- css的display属性小实验
div与span是常用的盒子模型; 区别: div默认是垂直分布(独占一行) span默认是水平分布(一行可以有多个) 通过float属性可以改变div容器的分布方式达到span容器的效果; 下面 ...
- !!!css如何让img图片居中？css的display属性实现图片居中（代码实例）
在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例 ...
- css 可继承属性 display:inline-block 历史
1. css 可继承属性 1.1 font font-family:规定元素的字体系列font-weight:设置字体的粗细font-size:设置字体的尺寸font-style:定义字体的风格fon ...
- css属性的选择对动画性能的影响
现在手机的占比越来越高,各种酷炫页面层出不穷,这些特效都离不开css动画.说到css动画,主流的情况也就无非这两大类:位移和形变.而我们在写一个动画特效的过程中,如何去提升它的性能呢?当然首先我们需要 ...
- css position, display, float 内联元素、块级元素
position属性:position属性指出一个元素的定位方法.有4种可能值:static, relative, absolute or fixed: static:默认值,元素按照在文档流中出现的 ...
随机推荐
- swoft配置连接池
bean.php 'db' => [ 'class' => Database::class, 'dsn' => 'mysql:dbname=test;host=127.0.0.1', ...
- df du linux空间清理，查看文件大小
df -h ,这个命令用于查看服务器空间,运行后的效果图如下: [root@localhost /]# df -h Filesystem Size Used Avail Use% Mounted on ...
- Cypress系列（68）- request() 命令详解
如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 作用 发起一个 HTTP 请求 语法格式 ...
- C#一行代码实现（06）跨线程获取控件值，结合BeginInvoke和EndInvoke使用，以DataGridView为例
主要功能 跨线程获取控件值,以DataGridView为例,结合BeginInvoke和EndInvoke使用 一行代码 object cellValue = dataGridView.ExInvok ...
- Callable接口
Callable与Runnable的不同区别在于: 1.Callable有返回值 Runnable没有返回值 2.Callable需要实现的方法是call方法 Runnable需要实现的方 ...
- Bitmap缩放(一)
使用矩阵进行压缩,通过缩放图片尺寸,来达到压缩图片的效果,和采样率的原理一样.先用位图的option将位图压缩一半,再用matrix缩放0.3f public class MainActivity e ...
- 当eclipse调用tomcat的时候发生了什么？
下午在看<tomcat权威指南>的时候想到了这么一个问题:当我在eclipse里调用本机上的一个tomcat运行一个web项目的时候,都发生了什么? 之前做本科毕设的时候用的是MyEcli ...
- VMware Workstation Pro 虚拟机安装
1.简介 虚拟机指通过软件莫比的具体有完整硬件系统功能的.运行在一个完全隔离环境中的完整计算机系统. 我们可以通过虚拟机软件,可以在一台物理计算机模拟出一台或多台虚拟的计算机,这些虚拟的计算机完全就像 ...
- Docker学习笔记之--安装mssql(Sql Server)并使用Navicat连接测试(环境：centos7)
前一节演示如何使用Nginx反向代理 .net Core项目容器,地址:Docker学习笔记之-部署.Net Core 3.1项目到Docker容器,并使用Nginx反向代理(CentOS7)(二) ...
- 浅谈分布式共识算法raft
前言:在分布式的系统中,存在很多的节点,节点之间如何进行协作运行.高效流转.主节点挂了怎么办.如何选主.各节点之间如何保持一致,这都是不可不面对的问题,此时raft算法应运而生,专门 用来解决上述问题 ...