让内联元素支持宽高的几个设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
span{
    /*float: left;*/
    /*position: absolute;*/
    /*display: inline-block;*/　　/*display: block;*/
    width: 100px;
    height: 100px;
    background:red;
}
</style>
</head>
<body>
<span>123</span>
</body>
</html>

原文地址：https://www.cnblogs.com/xiadengqi/p/9759543.html

时间： 2024-08-28 17:12:45

让内联元素支持宽高的几个设置的相关文章

块级元素和内联元素的宽高是如何确定的

在刚接触CSS的时候,每次给元素添加样式,都习惯性的写上宽是多少,高是多少,为自己挖坑无数,还暗自抱怨说CSS好烦,不过它真的是好烦,脾气很怪. 好,言归正传.在讨论元素的宽高是如何确定的之前,我们先明确一下文档流的概念:对于内联元素,是从左到右排列的,当宽度不够时换行:对于块级元素,是从上到下排列的,每一个元素都另起一行. 一.内联元素宽高的确定宽度:不受width的限制,有文字内容决定的,padding 和 margin 可以改变宽度. 高度:不受height的限制,padding 和ma

给内联元素设置宽高的几种方式

内联元素默认不能设宽高,其宽高由其内容自动撑开让内联元素具有宽高属性的几种方式 1,给内联元素转换成块级元素或内联块级元素 block或inline-block 2,让内联元素脱离文档流,比如绝对定位.固定定位或浮动 span{ width:3rem; height:100%; float:left; }

CSS/块级元素与内联元素的深入理解

今天终于对html中的块级元素和行内元素有了一个较为理性的认识.首先w3c对于block和inline的解释为: 一.block的研究通过w3c的解释,也就是说block(块级)元素是独占一行显示的.它的兄弟元素必定不会与其在同一行中(除非脱离了文档流).下面来说说block元素默认宽度的问题. 1.没设置宽度:默认为浏览器可视区同宽(浏览器默认样式被重置后). 看到的那条黄线实为一个未设置宽高的DIV,边框为1像素黄色实线,可以看出是布满整个屏幕的. 2.自身没设置宽度,但是父元素设置了宽度

XHTML+CSS基础知识（二）：块状元素与内联元素

W3C标准中规定的HTML元素有91个,他们可以被分为块状元素(block element)和内联元素(inline element)两种. 块状元素一般是其他元素的容器元素,块状元素一般都从新的一行开始,它可以容纳文本.内联元素和其他块状元素,通过width和height属性可以设置其大小. 常见的块状元素有div.p.table.h1~h6.ul.ol.li.dl.dt.dd.center.form. 其中form元素比较特殊,因为XHTML规范当中规定它只能容纳块状元素. 内联元素即非块状

块内元素和内联元素

块内元素特征: 1.默认独占一行 2.支持所有的CSS属性内联元素特征: 1.宽高由内容撑开 2.不支持宽高设置 3.一行可以显示多个同类标签 4.不支持上下的margin 5.代码换行被解析 display: inLine-block{ 1.让块在一排显示 2.内联元素支持宽度 3.默认内容撑起宽度 }

4、内联元素

一.内联元素 1)内联元素特征 1.同排可以继续跟同类的标签 2.内容撑开宽度 3.不支持宽高 4.不支持上下的margin 5.代码换行被解析 2)内联元素代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> span, em{ height: 50px; background-color: ye

块元素block，内联元素inline; inline-block;

block:块元素的特征 div ol li 等: 1.只有高度不设置宽度的时候默认撑满一行: 2.默认块元素不在一行: 3.支持所以CSS命令: inline:内联元素的特征 span i strong 等: 1.宽高由内容撑开: 2.不支持宽高: 3.一行上显示同类的内联元素: 4.不支持上下的margin; 5.元素换行可以被解析: inline-block: 元素特征 1.块元素在一行内显示; 2.行内元素支持宽高; 3.没有宽度的时候内容撑开宽度;

内联元素的盒子模型与文档流定位padding属性

内联元素的盒子模型 1.内联元素不能设置width宽度和高度height span{width:200px ; height:200px} 与 span{width:100px ; height:100px} 表现效果相同,由此可见内联元素不可以设置高度和宽度 2.内联元素可以设置水平方向的内边距padding-left或padding-right span{padding-left:20px ; padding-right:200px} 3.内联元素可以设置垂直

HTML-块级元素和内联元素

HTML-块级元素和内联元素块级元素内联元素 address - 地址 block - 块引用 center - 居中对齐块(不推荐) dir - 目录列表(HTML5踢出) div - 常用的不能再常用了 dl - 列表 fieldset - 一个包含着form组的框 form - 表了个单 h1 ~ h6 各种尺寸标题 hr - 水平分隔线(不推荐) menu - 菜单列表 noframes - 浏览器不支持frames显示的块 noscript - 浏览器不支持script显示的块 o