css显示

最新推荐文章于 2022-11-18 19:55:28 发布
最新推荐文章于 2022-11-18 19:55:28 发布
阅读量99 收藏
点赞数
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43755916/article/details/101033036
版权

1，显示方式

在这里插入图片描述
display：
none：隐藏，不显示元素
block：让元素的表现形式和块级元素一样
特点:独占一行，可设置宽高，垂直外边距
inline：让元素的表现形式和行内元素一样
特点：多个元素公用一行，不能设置宽高和垂直外边距
inline-block：让元素的表现适合和行内元素一样
特点：多个元素公用一行，不能设置宽高和垂直外边距

table：让元素的表现适合和table一样
特点：尺寸以内容为准，每个元素独占一行，允许修改尺寸

总结：用的比较多的：会把行内元素显示方式修改为块级或者行内快
元素不显示的时候使用none

			<a href="#" style="display:block">块级</a>
			<a href="#" style="display:inline-block">行内块级</a>
			<a href="#" style="display:table">table</a>
			<a href="#" style="display:inline">行内元素</a>
			<a href="#" style="display:none">none</a>

显示：

**visibility:hidden;**默认是visible

在这里插入图片描述

透明度

	/*	background:rgba(0,0,0,0.3);*/不会影响子元素的颜色
	
		background:#000;
		opacity:0.3     会影响子元素的颜色

在这里插入图片描述

垂直对齐方式

vertical-align
top
middle
bottom
baseline（img中和图片的基线一样）

使用场合：
1，table中，控制文字的垂直对齐
2，img标签，控制图片与前后文字的垂直对齐方式

img{
			vertical-align:bottom;
		}
	</style>
	</head>
	<body>
		<img src="../img/book.png" alt="">我是帅哥，我很帅气

在这里插入图片描述

光标的样式

cursor
取值：
default:默认箭头
pointer：手
text：大写的I
crosshair：十字
wait：转圈，等待
help：问号

列表

列表标示项list-style-type

list-style-type:none;去点
list-style-type:circle;空心圆
在这里插入图片描述
列表项图片
list-style-image:url("…/img/微信.png");
在这里插入图片描述

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<meta http-equiv="Cache-Control" content="max-age=3600">
	<!--引入外部样式-->
	<style>
		ul{
		/*	list-style-type:circle;*/
			list-style-image:url("../img/微信.png");
		}
	</style>
	</head>
	<body>
		<ul>
			<li>烤馍</li>
			<li>花生米</li>
			<li>啤酒</li>
			<li>串</li>
			<li>烤腰子</li>
		</ul>
		
	</body>
</html>

列表项位置

list-style-position:inside;

在这里插入图片描述

简写方式

在这里插入图片描述

高鹏飞白羊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue css
w_t_y_y的博客
07-14 493
1、修改vue element自带样式：加上/deep/，如： .myinput /deep/ .el-input__inner { border: none; margin-bottom: 0px; height: 100%; } /deep/ .el-select__tags { white-space: nowrap; overflow: hidden; } el-input__inner、el-select__tags均为element自
css
qq_34850703的博客
06-28 390
CSS3 Study 总览 什么是CSS 怎么使用CSS CSS 选择器 美化网页(文字, 阴影, 背景, 超链接, 列表, 渐变效果…) 盒子模型 浮动 定位 网页动画(特效) 什么是CSS 什么是CSS cascading Style Sheet 层叠级联样式表, 用于美化网页, 比如高度, 宽度, 文字, 阴影, 背景, 超链接, 列表, 渐变效果… CSS发展史 CSS1.0 只能做一些简单的样式调整,比如字体加粗等. CSS2.0 DIV + CSS, HTML 与 CSS结构分离, 代码
Css显示省略号
记录常见的问题以及解决办法
05-27 4160
单行省略号 width:100px; //设置宽度 max-width:200px; //也可以设置最大宽度 overflow: hidden;//溢出隐藏 white-space: nowrap; // 强制一行显示 text-overflow: ellipsis;// 显示。。。省略号 多行省略号 width: 100px; //设置宽度 max-width:200px; //也可以设置最大宽度 overflow : hidden; // 溢出隐藏 display: -
css显示隐藏的方法
m0_74899723的博客
11-18 3264
第一个值设置宽度，第二个值设置高度。background-position 属性，设置背景图像（由 background-image 定义）的起始位置。如果设置为 50% 50%，图像的中心点将与元素的中心点对齐显示。CSS 背景属性用于定义 HTML 元素的背景，通过背景属性我们可以定义元素的背景颜。默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。background-color 属性，设置元素的背景颜色。background-image 属性，为元素设置背景图像。左上角是 0% 0%；
CSS 设置文字只显示一行，多余显示省略号
热门推荐
轻风细雨_林木木
05-10 11万+
CSS 设置文字只显示一行，多余显示省略号 .view-text{ /** 思路： 1.设置inline-block属相 2.强制不换行 3.固定高度 4.隐藏超出部分 5.显示“……” */ display: inline-block; white-space: nowrap; width: 100%; ov......
Broadway:练习CSS显示和位置
03-21
"Broadway:练习CSS显示和位置"这个主题，显然关注的是如何通过CSS来调整元素在网页中的展示方式和它们的位置关系。 首先，我们需要了解CSS的基本结构。CSS由选择器和声明组成，选择器指向我们想要改变样式的HTML...
css中文显示
08-29
当涉及到中文显示时，CSS扮演着至关重要的角色。在处理中文字符时，可能会遇到各种问题，如乱码、字体不正确或者显示不全等。下面我们将详细探讨如何使用CSS确保网页中的中文能够正确、美观地呈现。 首先，我们要...
通过CSS显示垂直文本以垂直方式显示文本元素
09-25
在网页设计中，通常我们习惯于使用水平布局来展示内容，但有时为了创新或特定设计需求，我们需要将文本元素以垂直方式显示。CSS提供了一种简单有效的方法来实现这一效果，尤其是在现代浏览器环境下，不再像过去那样...
div css显示对联带关闭代码.rar
07-03
在这个"div css显示对联带关闭代码.rar"压缩包中，很显然包含了一个实现对联显示并带有关闭功能的JavaScript特效，同时使用CSS进行美化和控制。 对联通常是指在网页两侧平行显示的文本，就像传统的诗词对仗一样。在...
nodejs之MySQL插入数据
weixin_43755916的博客
09-06 9406
const mysql=require(‘mysql’); //创建链接池 var pool=mysql.createPool({ host:‘127.0.0.1’, port:3306, user:‘root’, password:‘123456’, database:‘course’, //使用的数据库 connectionLimit:20 //设置连接池的数量 }); //插入数据 pool...
nodejs 追加写入appendFile
weixin_43755916的博客
09-03 3491
追加写入appendFile 具有创建文件和追加写入的功能 fs.appendFile（路径，内容，回调函数） fs.appendFileSync（路径，内容） 如果文件不存在会创建文件，如果文件存在会追加到末尾 fs.appendFile(’./data1.txt’,‘hello\n’,(err)=>{ if(err) throw err; console.log(‘写入成功’); });...
nodejs读取文件readFile
weixin_43755916的博客
09-03 3000
nodejs读取文件readFile(路径，回调函数)、fs.readFileSync（路径） 读取的数据格式为buffer //读取文件 fs.readFile(’./data1.csv’,(err,data)=>{ if(err){throw err;} console.log(data); }); 练习：判断文件num.txt是否存在，如果不存在，创建该文件，写入数字0。读取文件中的内...
nodejs定时器
weixin_43755916的博客
08-23 2492
1、一次性定时器 //一次性定时器 var timer=setTimeout(回调函数，时间) var timer=setTimeout(()=>{ console.log(‘哈哈哈！蹦蹦蹦’); },3000); //清除一次性定时器clearTimeout clearTimeout(timer); //周期性定时器var timmer=setInteval(回调函数，时间) var ...
nodejs目录导入，第三方模块导入，核心模块
weixin_43755916的博客
08-23 1905
//目录导入，在目录中加入一个package.json文件，文件中键入{“main”:“test.js”}，意思是包名找test.js var obj=require(’./newdir’); console.log(obj); 第三方模块下载 自动下载地址： https://www.npmjs.com/ 需要已经安装OK的npm，一般安装了nodejs就会默认安装npm 在你的nodejs...
HTML属性和值
weixin_43755916的博客
09-10 903
通过属性和值进行修饰 <标记 属性1=“值1” 属性2=“值2” 属性3=“值3”></标记> 属性必须声明在开始在标记中 属性分类： 1，标准属性（通用属性） 所有元素都支持的属性 id：定义元素在页面中唯一标示 tittle：鼠标悬停在元素上的提示文本 class：css中，引用类选择器 style：css中，定义行内样式 ,2，专用属性，只对一些（某个）标签起作用 &...
nodejs中间件
weixin_43755916的博客
09-05 897
中间件的作用是为主要的业务逻辑所服务 分类： 应用级的中间件 路由级的中间件 内置的中间件 第三方中间件 错误级中间件 1，应用级中间件 每一个中间件就是调用一个函数，需要配合其他的中间件或者路由使用 拦截所有的路由server.use(函数) const express=require(‘express’); var server=express(); server.listen(8888);...
nodejs之MySQL修改语句
weixin_43755916的博客
09-06 862
//使用连接池 const mysql=require(‘mysql’); //创建链接池 var pool=mysql.createPool({ host:‘127.0.0.1’, port:3306, user:‘root’, password:‘123456’, database:‘course’, //使用的数据库 connectionLimit:20 //设置连接池的数量 }); //修...
使用中间件获取post请求参数
weixin_43755916的博客
09-06 858
HTML文件 用户登录 用户名： 密码： js文件 // const express=require(‘express’); //引入body-parser中间件 const bodyParser=require(‘body-parser’); var server=express(); server.listen(8888); //引入中间件,托管静态资源到publi...
nodejs的MySQL模块
weixin_43755916的博客
09-06 844
//引入MySQL模块 const mysql=require(‘mysql’); //链接数据库:1,普通链接；2，连接池 普通链接 //1，创建链接 var connection=mysql.createConnection({ host:‘127.0.0.1’, port:3306, user:‘root’, password:‘123456’, database:‘course’ //使用...
css显示输入框下划线
最新发布
06-16
要在CSS中为输入框添加下划线，可以使用`text-decoration`属性。具体来说，您可以使用以下代码： ```css input { text-decoration: underline; } ``` 这将使所有输入框的文本下划线生效。如果您只想对特定的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值