-
css/padding属性如何禁用
2016-02-14 02:39:561.不理解为什么,padding:0应该是一个人畜无害的属性才对啊 2.怎么办,既不可能去修改公用的css样式,也不可能不引入这个css文件 css不存在"解除一个属性定义",只能"复写这个属性定义" 那么应该将padding属性设置成什么... -
VB控件属性使用大全
2011-12-15 12:02:34控件具有很多相同的属性,如标识控件名称的Name属性、标识控件标题的Caption属性、有效属性Enable、可见属性Visible、标识控件位置和大小的Top、Left、Width、Height、属性、定义背景色的BackColor属性、定义前景色... -
0.4.28版本什么时候能发布呀?
2020-12-08 20:04:19| width| 列宽 | number | - | 140 | | minWidth | 最小列宽 | number | - | - | | filter | 过滤器名(只有配置在全局的filter才有效) | string | - | - | | render | 处理数据的函数,接收行... -
span设置固定宽度
2013-12-04 22:34:34<span> 标签是被用来组合文档中的行内元素。相信对一般的网页设计师来讲是非常熟悉的朋友了,使用相当频繁,但我们往往很少对SPAN设定样式,一般也没什么必要,... CSS中的width属性并不总是有效的,如果对象是inlin<span> 标签是被用来组合文档中的行内元素。相信对一般的网页设计师来讲是非常熟悉的朋友了,使用相当频繁,但我们往往很少对SPAN设定样式,一般也没什么必要,大多数都留给DIV老朋友了。
在做"善良公社"项目时,用到了SPAN,因为是用来实现放块效果,所以给它定义了固定宽度,本以为胸有成竹的事,可执行网页时发现设定的宽度没有效果,让我郁闷了几分钟,看似很简单的样式定义尽然是无效。后来网上搜索了相关资料,是这么解释的:CSS中的width属性并不总是有效的,如果对象是inline对象,width属性就会被忽略。Firefox和IE原来是遵循了标准才这样做的。
原因知道后,解决方案也就出来了,添加代码所示:
style="width:600px;text-align:left;display:inline-block;"
效果对比
下面对<span>标签进行一下详细介绍。
原始代码:
<style type="text/css"> .sc { width: 300px; list-style: none; font-size: 15px; } .sc li { list-style: none; width: 100%; margin: 10px 0px 0px 0px; } .sc span { width: 100px; text-align: center; display: inline-block; background: #C00; color: #FFF; } </style> <div class="sa"> <span>张连海</span> <span>张 连 海</span> </div>
效果如下:
一、形如<span>ABC</span>独立行设置SPAN为固定宽度
方法如下:
span {width:60px;text-align:center; display:block; }
测试实例:
<style type="text/css"> .sa span { width: 100px; text-align: center; display: block; background: #C00; margin: 10px 0px 0px 0px; color: #FFF; font-size: 15px; } </style> <div class="sa"> <span>张连海</span> <span>张 连 海</span> </div>
测试效果:
二、形如<span>ABC</span>DEF格式行设置SPAN为固定宽度
方法如下:
span{width:60px; text-align:center; display:block;float:left;}
测试实例:
<style type="text/css"> .sb { width: 300px; list-style: none; font-size: 15px; } .sb li { list-style: none; width: 100%; margin: 10px 0px 0px 0px; } .sb span { width: 100px; text-align: center; display:block; float: left; background: #C00; color: #FFF; } </style> <ul class="sb"> <li><span>张连海</span>博客</li> <li><span>张 连 海</span>欢 迎 光 临</li> </ul>
测试效果:
三、形如ABC<span>DEF</span>GH格式行设置SPAN为固定宽度
方法如下:
span{width:60px; text-align:center; display:inline-block;}
测试实例:
<style type="text/css"> .sc { width: 300px; list-style: none; font-size: 15px; } .sc li { list-style: none; width: 100%; margin: 10px 0px 0px 0px; } .sc span { width: 100px; text-align: center; display: inline-block; background: #C00; color: #FFF; } </style> <ul class="sc"> <li>Welcome to <span>张连海</span>博客</li> <li>Welcome to <span>张 连 海</span>欢 迎 光 临</li> </ul>
测试效果:
提示:完美兼容就是把display属性设为inline-block,同时也可兼容前两种情况。
四、block,inline,inline-block之间区别
display:block;——类似与DIV标签的宽高边距等属性均可定制的元素特性;
display:inline;——类似与<a>、<strong>标签的宽高等属性不可定制的元素特性;
display:inline-block;——“全”可定制属性的元素特性;
五、如何设置让SPANfloat:right不换行
1、如何让<li>AAA<span>BBB</span></li>里头的BBB靠右对齐且不换行?
如果对span使用float属性,在IE下会导致span换到下一行,Firefox则正常。可以采用下面相对定位方法实现同行且居右对齐,即可实现。
li {position:relative;} li span{position:absolute;right:0px;}
2、反着写<span>也比较方便
比如写做<li><span>AAA</span>BBB</li>,这样把AAA放到SPAN里,BBB放到外面。只需要:
li {text-align:right;} li span{float:left;}
-
在学校里学不到的知识:position: absolute;和float浮动可以直接变成行内块元素
2020-02-20 20:25:39我是一名web小白,目前现在是一名初中生,这是我第一次写博客,目前,我也是正在自学web前端。这是我对定位和浮动元素的个人...2.只对margin属性left和right有效,top和bottom无效。对padding的上下左右都有效 3....我是一名web小白,目前现在是一名初中生,这是我第一次写博客,目前,我也是正在自学web前端。这是我对定位和浮动元素的个人看法,请大家在品论去建议建议,我以后会更努力的。我也不会什么写作文,布局之类的,请大家见解!
行内元素
什么是行内元素呢?
1.无法设置width和height。
2.只对margin属性left和right有效,top和bottom无效。对padding的上下左右都有效
3.不能独占一行。
我们可以用css属性中的display:inline;来转换成行内元素行内元素的标签有哪些?
span,b,i,sub,sup,a,strong,img,input等。
块元素
什么是块元素呢?
1.可以设置width和height。
2.margin属性的上下左右都有效,padding属性的上下左右也是都有效。
3.独占一行的。
我们可以用css中的display:block属性来转换成块级元素。块元素的标签有哪些?
我们最常见的div,p,ul,li,h1到h6,hr,from表单等。
行内块元素
什么是行内块元素呢?
1.可以设置width和height。
2.不独占一行。
我们可以用css中的display:inline-block属性来转换成行内块元素。已经跟你们说了什么是行内元素,块元素和行内块元素,接下来就可以说浮动和position:absoulte来变成行内块元素。
<span class="span1">我是个span行内元素</span> <div class="div1">我是div块元素</div>
.span1{ width: 100px; height: 100px; background-color: red; } .div1 { width: 200px; height: 200px; background-color: blue; }
因为div是一个块元素,他需要独占一行,所以没有在span后边。
此时我们对span元素设置的width和height都没有生效。接下来我们改变css一下代码。
.span1{ position: absolute; width: 100px; height: 100px; background-color: red; } .div1 { width: 200px; height: 200px; background-color: blue; }
此时span元素width和height的属性生效了,形成了行内块元素。给span元素定位属性时,span元素脱离了文档流,所以div元素会上去,此时span元素覆盖在div元素上边。接下来我们去试一下加浮动会不会是一样的效果。
结果是一样的,变成了行内块元素,仔细的人应该都开出来了,他的文字变了,这种情况我就想问下大家为什么它的文字会环绕这个span元素呢?那我就跟大家讲一下浮动属性吧,其实最初的浮动属性用的是图像,出现浮动的目的就是让文本环绕图像,后来css就允许用于其他元素了。
有许多小伙伴用了浮动或是position:absolute属性后,他的页面效果就不是想像的那样了,很着急,也找不出错误,看了我这篇文章就知道自己的错误了吧。
感谢大家的阅读,多点点赞,支持支持我,这是我的第一篇文章。
有兴趣的也可以加Q群1056384633可以讨论讨论。 -
当 width 或 height 属性设置为 auto 时,mode 属性失效 例子代码(点击展开) export default class ImageExample { palette() { return { width: "654rpx", height: "1000rpx", background: "#eee", views...
-
从入门到精通HTML5——PDF——网盘链接
2018-02-27 18:13:2810.1.7 滚动范围属性——width、height 208 10.1.8 滚动背景颜色属性——bgcolor 209 10.1.9 滚动空间属性——hspace、vspace 209 10.2 添加背景音乐 211 10.2.1 设置背景音乐——bgsound 211 10.2.2 ... -
语言程序设计课后习题答案
2012-12-27 17:02:37面向对象的编程语言将客观事物看作具有属性和行为的对象,通过抽象找出同一类对象的共同属性(静态特征)和行为(动态特征),形成类。通过类的继承与多态可以很方便地实现代码重用,大大缩短了软件开发周期,并使得... -
Step1:先画条蛇
2020-12-08 22:52:30对提升性能还是有效的 - <code>update方法:每次的动画循环都会调用的方法,根据基类的速度来更新其位置 - <code>render方法:基类的绘制自身的方法,里面就只有一个绘制镜像的操作,... -
Web语义化标准解读
2020-11-25 23:26:16所以我们需要更有效的去减少让自己恶心的成本。。 但这些都只是部分客观原因,主要原因在于我们对于Web语义化的理解度不够以及非正确的工作流。 以表现为中心(面向UI) VS 以信息为中心(面向语义) 以表现为... -
flash shiti
2014-03-14 10:32:4115. 下列那几个属性是flash mx 不建议使用的属性 □ A. scroll □ B. maxscroll □ C. _droptarget □ D. _highquality 16. 下面的语句说法正确的是: □ A. 目前Flash 最新的创作平台是Flash MX,播放插件是Flash ... -
CuteEditor v 6.6 含KeyGen注册机
2010-05-31 00:37:45这个时候编译的时候应该没有错误了,如果还出现什么windows集成身份验证的错误,那么我们要修改IIS里面的配置,在iis的这个站点的属性里面有个目录安全性,再点身份验证和访问控制的编辑,把集成windows身份验证前面... -
C++MFC教程
2013-05-21 13:37:15int Width( ) const; 得到宽度 int Height( ) const; 得到高度 CSize Size( ) const; 得到尺寸 CPoint& TopLeft( ); 得到左上角坐标 CPoint& BottomRight( ); 得到右下角坐标 CPoint CenterPoint( ) const; ... -
十个案例学会 React Hooks
2020-11-22 18:44:01并对其修改触发组件重新渲染。比如下面这个简单的计数器组件,很好诠释了类组件如何运行:在线 Demo <pre><code>javascript import React from "react"; class App extends React.Component { ... -
实现类似Office助手的小精灵
2004-07-16 00:00:00简便统一的编程方法,对由菜单、按钮、提示框等组成的传统人机交互方式产生了很大影响, 在多媒体创作、Web应用、教育软件、软件帮助系统和辅助工具制作等方面,具有广阔的应用前景。 一、 Microsoft Agent技术... -
Android UI组件实例集合
2012-09-11 11:31:29仿照Path应用首页左下角的Button动画效果写了个简单的Demo,由于数学不好,坐标总是和理想有出入,只是大致实现了动画效果,若果有人能把坐标算对,那么修改我的demo就能做成类似Path的那种动画效果!希望大家出点力... -
XML轻松学习手册--XML肯定是未来的发展趋势,不论是网页设计师还是网络程序员,都应该及时学习和了解
2008-12-05 08:39:07可是一大堆的概念和术语往往让人望而生畏,很多朋友问我:XML到底有什么用,我们是否需要学习它?我想就我个人学习过程的心得和经验,写一篇比较全面的介绍文章。首先有两点是需要肯定的: 第一:XML肯定是未来的... -
react-native 之布局篇
2021-01-10 04:06:31这对图片的高清化很重要,如果我的图片大小为100*100 px. 设置宽度为100 * 100. 那在iphone上的尺寸就是模糊的。 这个时候需要的图像大小应该是 100 * pixelRatio的大小 。 <p>react 提供了PixelRatio 的... -
嗨,送你一张Web性能优化地图
2021-01-08 14:30:23对于性能优化需要做些什么以及性能瓶颈是什么,通常我们并不清楚。 不包括那些对性能优化有丰富经验的高手 事实上关于Web性能有很多可以优化的点,其中涉及到的知识大致可以划分为几类:度量... -
Visual C++程序员实用大全(精华版).(水利水电.邓劲生.张晓明译).part3
2016-06-21 21:11:38222 使用sizeof操作来判断字符串的有效长度 223 使用sizeof判断数组中字符串的数量 224 访问字符串中的单个字符 225 动态分配字符串 226 示例:反转一个字符串中的字符 第二十三章 函数和变量 227 理解函数 228 理解... -
Visual C++程序员实用大全(精华版).(水利水电.邓劲生.张晓明译).part4
2016-06-21 21:13:27222 使用sizeof操作来判断字符串的有效长度 223 使用sizeof判断数组中字符串的数量 224 访问字符串中的单个字符 225 动态分配字符串 226 示例:反转一个字符串中的字符 第二十三章 函数和变量 227 理解函数 228 理解... -
Visual C++程序员实用大全(精华版).(水利水电.邓劲生.张晓明译).part1
2016-06-21 21:05:54222 使用sizeof操作来判断字符串的有效长度 223 使用sizeof判断数组中字符串的数量 224 访问字符串中的单个字符 225 动态分配字符串 226 示例:反转一个字符串中的字符 第二十三章 函数和变量 227 理解函数 228 理解... -
Visual C++程序员实用大全(精华版).(水利水电.邓劲生.张晓明译).part2
2016-06-21 21:09:54222 使用sizeof操作来判断字符串的有效长度 223 使用sizeof判断数组中字符串的数量 224 访问字符串中的单个字符 225 动态分配字符串 226 示例:反转一个字符串中的字符 第二十三章 函数和变量 227 理解函数 228 理解... -
powerbuilder
2013-11-21 17:11:48功能定义打印作业使用的字体,对每个打印作业PowerBuilder支持八种字体。 语法PrintDefineFont(printjobnumber,fontnumber,facename,height,weight,fontpitch,fontfamily, italic,underline) 参数printjobnumber:用... -
VC之美化界面篇本文专题讨论VC中的界面美化,适用于具有中等VC水平的读者。读者最好具有以下VC基础:
2009-06-17 10:17:32pDC->StretchBlt(0, 0, rt.Width(), rt.Height(), &dc, 0, 0, hb.bmWidth, hb.bmHeight, SRCCOPY); return TRUE; } HBRUSH CUi4Dlg::OnCtlColor(CDC* pDC, CWnd* pWnd, UINT nCtlColor) { //设置透明背景... -
我的收藏页面:依靠Cookie持久化,实现对文章的收藏和展示 项目分类:在WanAndroid上发布的项目 网址导航:展示常用的开发网站 搜索功能:输入搜索、搜索推荐、历史搜索等等 关于我们:鸿洋wanAndroid介绍 love...
-
网上购物系统
2012-12-18 17:53:18="+id,"","height=200,width=600,l最新网上购物系统 eft=190,top=0,resizable=yes,scrol最新网上购物系统 lbars=yes,status=no,toolbar=no,最新网上购物系统 menubar=no,location=no");} 最新网上购物系统 >在该触发... -
功能很强,可以对第三方App进行测试,获取屏幕上任意一个APP的任意一个控件属性,并对其进行任意操作,但有两个缺点:1. 测试脚本只能使用Java语言 2. 测试脚本要打包成jar或者apk包上传到设备上才能运行。 我们希望...
-
新版Android开发教程.rar
2010-12-14 15:49:11什么是开放手机联盟? 开放手机联盟, Open Handset Alliance :是美国 Google 公司与 2007 年 11 月 5 日宣布组建的一个全球性的联 盟组织。这一联盟将会支持 Google 发布的 Android 手机操作系统或者应用软件,...
-
亚马逊克隆与React:使用具有购物篮功能的ReactJS和带有条带付款的Amazon克隆!-源码
-
MMM 集群部署实现 MySQL 高可用和读写分离
-
leetcode剑指offer68II-二叉树的最近公共祖先(C语言实现)
-
迷宫生成-源码
-
Mysql数据库面试直通车
-
React-源码
-
redux-context-sample:使用Context API重构react-redux应用程序-源码
-
2021 PHP租车系统 毕业设计 毕设源码 源代码使用教程
-
【硬核】一线Python程序员实战经验分享(1)
-
使用 Linux 平台充当 Router 路由器
-
Samba 服务配置与管理
-
linux基础入门和项目实战部署系列课程
-
封装app分发源码+支持免签绿标.zip
-
个人学习记录-AD2021
-
MySQL 管理利器 mysql-utilities
-
dubbo简单demo
-
龙芯实训平台应用实战(希云)
-
Android后台开发4
-
MySQL 高可用工具 heartbeat 实战部署详解
-
用Hadoop进行分布式数据处理第2部分:进阶