如何设置span的宽度,怎么设置span的宽度
内容导航：
一、前端基础CSS如何布局以及文档流，对于新手来说，特别有用
一、 网页布局方式
1、什么是网页布局方式 布局可以理解为排版，我们所熟知的文本编辑类工具都有自己的排版方式
比如word，nodpad++等等 而网页的布局方式指的就是浏览器这款工具是如何对网页中的元素进行排版的
2、网页布局/排版的三种方式
1、标准流
2、浮动流
3、定位流
二、标准流’
标准流的排版方式，又称为：文档流/普通流，所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
1. 浏览器默认的排版方式就是标准流排版方式
2. 在CSS中将元素分为三类：分别是 块级 行内 行内块级
3. 在标准流中有两种排版方式，一种是垂直排版，一种是水平排版 垂直排版，如果元素是块级元素，那么就会垂直排版 水平排版，
如果元素是行内元素或行内块级元素，那么就会水平排版
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title></title> <style type=text/css> div,h4,p { border: 1px solid red; } span，strong,b { border: 1px solid #000; } </style></head><body><div>我是div</div><h4>我是标题</h4><p>我是段落</p><span>span</span><strong>我是强调</strong><b>我是加粗</b></body></html>
三、浮动流
1、浮动流是一种半脱离标准流的排版方式那什么是脱离文档流？什么又是半脱离文档流？
1.1 什么是脱离文档流？
1、浮动元素脱离文档流意味着
1.不再区分行内、块级、行内块级，无论是什么级的元素都可以水平排版
2.无论是什么级的元素都可以设置宽高 综上所述，浮动流中的元素和标准流中的行内块级元素很像
<!DOCTYPE html><html><head> <title></title> <meta charset=utf-8> <style> * { margin: 0; padding: 0; } /* 不再区分行内、块级、行内块级，无论是什么级的元素都可以水平排版：span和p都显示到一行 无论是什么级的元素都可以设置宽高：span这种行内元素也可以设置宽高 */ .box1 { width: 100px; height: 100px; background-color: red; float: left; } .box2 { width: 100px; height: 100px; background-color: blue; float: left; } </style></head><body><span class=box1>我是span</span><p class=box2>我是段落</p></body></html>
2、浮动元素脱标文档流意味着
1.当某一个元素浮动走之后，那么这个元素看上去就像被从标准流中删除了一样，这个就是浮动元素的脱标
2.如果前面一个元素浮动走了，而后面一个元素没有浮动，那么垂直方向的元素会自动填充，浮动元素重新归位后就会覆盖该元素
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>浮动元素脱标</title> <style> .box1 { float: left; width: 100px; height: 100px; background-color: red; } .box2 { width: 150px; height: 150px; background-color: blue; } </style></head><body><div class=box1></div><div class=box2></div></body></html>
注意点：
1、浮动流只有一种排版方式，就是水平排版，它只能设置某个元素左对齐或者右对齐，没有居中对齐，也就是没有center这个取值
2、一旦使用了浮动流，则margin:0 auto;失效
1.2、 那什么又是半脱离文档流？
脱离分为：半脱离与完全脱离， 其中完全脱离指的是元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样
而之所以称为半脱离：是因为浮动元素浮动之后的位置取决于它在浮动之前的标准流中的位置，跟标准流还是有一定的关系，
比如说浮动的元素在浮动之前处于标准流的第二行，那么他浮动之后也是处于浮动流的第二行，不会去找其他行的浮动元素去贴靠，
打一个比方就是：浮动流就是在标准流上面覆盖的一层透明薄膜，元素浮动之后就会被从标准流中扔到浮动流这个薄膜上，
他在这个薄膜上的位置还是以前在标准流的位置上找同方向的浮动元素进行贴靠，贴靠的准则就是：
（1）同一个方向上谁先浮动，谁在前面
（2）不同方向上左浮动找左浮动，右浮动找右浮动
浮动元素浮动之后的位置取决于它在浮动之前的标准流中的位置
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>浮动元素排序规则</title> <style> .box1 { float: left; width: 100px; height: 100px; background-color: red; } .box2 { width: 150px; height: 150px; background-color: blue; } .box3 { float: left; width: 250px; height: 250px; background-color: yellow; } .box4 { width: 300px; height: 300px; background-color: rebeccapurple; } </style></head><body><div class=box1>1</div><div class=box2>2</div><div class=box3>3</div><div class=box4>4</div>
同一个方向上谁先浮动，谁在前面
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>浮动元素排序规则</title> <style> .box1 { float: left; width: 100px; height: 100px; background-color: red; } .box2 { float: left; width: 150px; height: 150px; background-color: blue; } .box3 { float: left; width: 250px; height: 250px; background-color: yellow; } .box4 { float: left; width: 300px; height: 300px; background-color: rebeccapurple; } </style></head><body><div class=box1>1</div><div class=box2>2</div><div class=box3>3</div><div class=box4>4</div></body></html>
不同方向上左浮动找左浮动，右浮动找右浮动
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>浮动元素排序规则</title> <style> .box1 { float: left; width: 100px; height: 100px; background-color: red; } .box2 { float: left; width: 150px; height: 150px; background-color: blue; } .box3 { float: right; width: 250px; height: 250px; background-color: yellow; } .box4 { float: right; width: 300px; height: 300px; background-color: rebeccapurple; } </style></head><body><div class=box1>1</div><div class=box2>2</div><div class=box3>3</div><div class=box4>4</div></body></html>
1.3、 浮动元素贴靠问题
当父元素的宽度足够显示所有元素时，浮动的元素就会并列显示 当父元素的宽度不足够显示所有元素时，
浮动的元素就贴前一个元素，如果还不够，就会再贴前一个元素 直到贴到父元素左边，此时无论是否宽度足够都会在这一行显示了
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>浮动元素贴靠问题</title> <style> .father { width: 400px; height: 400px; border: 1px solid #000; } .box1 { float: left; width: 50px; height: 300px; background-color: rebeccapurple; } .box2 { float: left; width: 50px; height: 100px; background-color: green; } .box3 { float: left; width: 250px; /*width: 300px;*/ /*width: 310px;*/ /*width: 400px;*/ height: 100px; background-color: red; } </style></head><body><div class=father> <div class=box1>1</div> <div class=box2>2</div> <div class=box3>3</div></div></body></html>
四、定位流
1、相对定位就是相对于自己以前在标准流中的位置来移动
格式： position：relative需要配合以下四个属性一起使用 top:20px; left:30px; right:40px; bottom:50px;
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title></title> <style> * { margin:0; padding:0; } div { width: 100px; height: 100px; } .box1 { background-color: red; } .box2 { background-color: green; position: relative; top: 20px; left: 20px; } .box3 { background-color: blue; } </style></head><body><div class=box1></div><div class=box2></div><div class=box3></div></body></html>
1.1、 相对定位的注意点
1 在相对定位中同一个方向上的定位属性只能使用一个 top/bottom 只能用一个 left/right 只能用一个
2 相对定位是不脱离标准流的，会继续在标准流中占用一份空间
3 由于相对定位是不脱离标准流的，所以在相对定位中是区分块级、行内、行内块级元素的
4 由于相对定位是不脱离标准流的，并且相对定位的元素会占用标准流中的位置，所以当给相对定位的元素设置margin/padding
等属性时会影响到标准流的布局，
即，给相对定位的标签设置marin或padding，是以该标签原来的位置为基础来进行偏移的
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title></title> <style> * { margin:0; padding:0; } div { width: 100px; height: 100px; } .box1 { background-color: red; } .box2 { background-color: green; position: relative; top: 20px; left: 20px; /*相对于该标签原来的位置进行偏移*/ margin-top: 50px; } .box3 { background-color: blue; } </style></head><body><div class=box1></div><div class=box2></div><div class=box3></div></body></html>
1.2 相对对位的应用场景
1.用于对元素进行微调
2.配合后面学习的绝对定位来使用
绝对定位就是相对于body或者某个定位流中的祖先元素来定位
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title></title> <style> div { width: 100px; height: 100px; } .box1 { background-color: red; } .box2 { position: absolute; /*left: 0;*/ /*top: 10px;*/ background-color: green; } .box3 { background-color: blue; } </style></head><body><div class=box1></div><div class=box2></div><div class=box3></div></body></html>
2、固定定位
1、固定定位（和绝对定位高度相似，和背景的关联方式也高度相似） 背景的关联方式background-attachment: fixed;
可以让图片不随着滚动条的滚动而滚动 而固定定位可以让某一个元素不随着滚动条的滚动而滚动
2、注意点
1.固定定位的元素是脱离标准流的，不会占用标准流中的空间
2.固定定位和绝对定位一样不区分行内、块级、行内块级 3、E6不支持固定定位
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title></title> <style> * { margin: 0; padding: 0; } .bg { width: 600px; height: 1000px; border: 1px solid #000; background-image: url(-); background-repeat: no-repeat; background-attachment: fixed; } div { width: 100px; height: 100px; } .box1 { background-color: red; } .box2 { border: 1px solid #000; border-radius: 50%; text-align: center; line-height: 100px; background-color: green; position: fixed; right: 0; bottom: 0; } .box3 { background-color: blue; } .box4 { background-color: yellow; height: 2000px; } </style></head><body><div class=bg></div><div class=box1></div><div class=box2>回到顶部</div><div class=box3></div><div class=box4></div></body></html>
3、静态定位
1.什么是静态定位?
默认情况下标准流中的元素position属性就等于static, 所以静态定位其实就是默认的标准流 静态定位应用场景:
2.一般用于配合JS清除定位属性z-index属性
3.z-index属性：用于指定定位的元素的覆盖关系 定位元素的覆盖关系:
默认情况下定位的元素一定会盖住没有定位的元素
默认情况下写在后面的定位元素会盖住前面的定位元素
默认情况下所有元素的z-index值都是0, 如果设置了元素的z-index值, 那么谁比较大谁就显示在前面
4.注意点：从父现象 父元素没有z-index值, 那么子元素谁的z-index大谁盖住谁 父元素z-index值不一样, 那么父元素谁的z-
index大谁盖住谁
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title></title> <style> * { margin: 0; padding: 0; } /*div {*/ /*width: 100px;*/ /*height: 100px;*/ /*}*/ /*.box1 {*/ /*background-color: red;*/ /*position: relative;*/ /*top: 0px;*/ /*left: 0px;*/ /*!*z-index: 3;*!*/ /*}*/ /*.box2 {*/ /*background-color: green;*/ /*position: absolute;*/ /*top: 50px;*/ /*left: 50px;*/ /*!*z-index: 2;*!*/ /*}*/ /*.box3 {*/ /*background-color: blue;*/ /*position: fixed;*/ /*left: 100px;*/ /*top: 100px;*/ /*!*z-index: 1;*!*/ /*}*/ .father1 { width: 200px; height: 200px; background-color: red; position: relative; z-index: 5; } .father2 { width: 200px; height: 200px; background-color: green; position: relative; z-index: 4; } .son1 { width: 100px; height: 100px; background-color: blue; position: absolute; left: 200px; top: 200px; z-index: 1; } .son2 { width: 100px; height: 100px; background-color: yellow; position: absolute; left: 250px; /*top: 250px;*/ z-index: 2; top: 50px; } </style></head><body><!--<div class=box1></div>--><!--<div class=box2></div>--><!--<div class=box3></div>--><div class=father1> <div class=son1></div></div><div class=father2> <div class=son2></div></div></body></html>
最后送福利了，自己是从事了五年的前端工程师，整理了一份最全面前端学习资料，只要私信：“前端等3秒后即可获取地址，
里面概括应用网站开发，css，html，JavaScript，jQuery，Ajax，node，angular等。等多个知识点高级进阶干货的相关视频资料，等你来拿
二、如何设置span宽度
最近制作网站时发现给span设置宽度会无效，通过查阅CSS2标准中关于width 的定义发现，原来CSS中的 width 属性并不总是有效的，如果对象是
inline 对象，width 属性就会被忽略，Firefox 和 IE
是遵循CSS标准，因而直接设置span宽度会无效。在span的CSS中增加display属性，将span设置为block类型的Element，这样宽度的确有效了，但把前后文字隔在不同行里面，这样其实span就完全变成了div。例：span
{ background-color:#ffcc00; display:block; width:150px;}很多人会建议再增加一个CSS 属性
float ，这样的确在某种条件下能解决问题。深圳网站工作室提示，如果span前面没有文字
，那的确是可行的。但是如果有了，前后文字就会连在一起，而span跑到了第二行。例：span { background-color:#ffcc00;
display:block; float:left; width:150px;}下面代码的
CSS定义完美解决了span的宽度设置问题。由于浏览器通常对不支持的CSS属性采取忽略处理的态度，所以最好将 display:inline
-block行写在后面，这样在Firefox里面，如果到了未来的Firefox 3，这一行就能起作用，代码可以同时兼容各种版本。例：span {
background-color:#ffcc00; display:-moz-inline-box; display:inline-block;
width:150px;}当新建HTML时加上了<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0
Transitional//EN” “
三、HTML的
有如下结构
-
title:
“aa” -
content:
“bbb”
…
我想让 title:, content:等宽，就像表格一样，请问该如何设置CSS
谢谢
1楼的不行ul .li .span {with:##.px; line-style:none;}span是行列元素，无法设置边距。
你给你可li标签加添text-align:center实现居中
四、可以设置柱状图的宽度
答：在图形属性-画布宽/高度中修改像素可以调整
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 55@qq.com 举报，一经查实，本站将立刻删除。转转请注明出处：https://www.szhjjp.com/n/109007.html
