CSS行内元素盒模型
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 .box1{
8 width:200px;
9 height:200px;
10 background-color:orange;
11 }
12 .s2{
13 border:10px red solid;
14 margin:100px;
15 /*
16 行内元素的盒模型
17 -行内元素不支持设置宽度和高度
18 -行内元素可以设置padding,但是垂直方向padding不会影响页> 面的布局
19 -行内元素可以设置border，垂直方向的border不会影响页面的
布局
20 -行内元素可以设置margin，垂直方向的margin不会影响布局
21 */
22 }
23 a{
24 background-color:orange;
25 width:100px;
26 height:100px;
27 /*
28 display用来设置元素显示的类型
29 可选值：
30 -inline将元素设置为行内元素
31 -block将元素设置为块元素
32 -inline-block将元素设置为行内块元素
33 -行内块，即可以设置宽度和高度单又不会独占一行
34 -table将元素设置为一个表格
35 -none元素比在我们页面中显示
36 visibility用来设置我们元素的显示状态
37 -可选值
38 -visible 默认值，元素在页面中正常显示
39 -hiden 元素在页面中隐藏不显示，但依然占据我们页面的
位置
40 */
41 display:inline-block;
42
43 }
44
45 </style>
46 </head>
47 <body>
48 <a href="javescript:;">超链接</a>
49 <span class="s2">我是sapn2</span>
50 <div class="box1"></div>
51 </body>
52 </html>
~
CSS行内元素盒模型的更多相关文章
- （1-1）line-height的定义和行内框盒子模型
(1-1)line-height的定义和与行内框盒子模型的关系 一.line-height的定义 line-height的定义: 行高,又称为两基线的距离.默认基线对齐(因为CSS所有*线:总之就是各 ...
- css——行内元素和块级元素的具体区别与行内块元素
(学习笔记) 行内元素(inline)和块级元素(block)都是display属性的值.要知道行内元素和块级元素的区别,首先要了解他们的特性. 行内元素的特性:“行内”,顾名思义,在一行之内,所以相 ...
- CSS里有哪些常见的块级元素和行内元素以及其区别？
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...
- css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性
一.各种元素的width height margin padding 特性(具体css元素的分来参看二) 1.块级元素 width. height. margin的四个方向. padding的四个方向 ...
- C#基础-css行内元素、块级元素基础
一.行内元素与块级元素 块级元素列表 <address> 定义地址 <caption> 定义表格标题 <dd> 定义列表中定义条目 <div> 定义文档 ...
- 初学css 行内元素与块级元素
行内元素与块级元素直观上的区别 1.行内元素会在一条直线上排列,都是同一行的,水平方向排列块级元素各占据一行,垂直方向排列.块级元素从新行开始结束接着一个断行. 2.块级元素可以包含行内元素和块级元素 ...
- CSS 行内样式 页内样式 外部样式
行内标签: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...
- CSS行内元素和块级元素的居中
一.水平居中 行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可; 对于块级元素有以下几种居中方式: 1.将元素放置在table中,再将table的marg ...
- css 行内元素和块级元素
1. 块级元素默认在新行开始,如常见的div和p标签,行内元素默认在同行开始显示,如a,span标签 2.块级元素一般用于做容器,可容纳行内和块级元素,可设置width和height,行内元素只能容纳 ...
随机推荐
- C# 类(9) - 接口 Interface
Interface 接口 类似 抽象类,也不能被实例化...(前面说的静态类,加上抽象类,还有这个,都3个了)接口其实比 抽象类 更加抽象.接口的方法(这个方法还不能有实体代码,和抽象类的抽象方法差不 ...
- Spring(二) Mini版Spring的实现
实现思路 先来介绍一下 Mini 版本的 Spring 基本实现思路,如下图所示: 自定义配置 配置 application.properties 文件 为了解析方便,我们用 application. ...
- HDU 4511 小明系列故事——女友的考验 （AC自动机 + DP）题解
题意:从 1 走到 n,要求所走路径不能出现给定的路径,求最短路 思路:因为要求不能出现给定路径,那么我可以求助ac自动机完成判断. 我们可以在build的时候标记哪些路径不能出现,显然下面这种表示后 ...
- 可重入锁ReentrantLock解析
说到可重入锁,先从AQS的ConditionObject说起,AQS的内部类ConditionObject是构建显示锁条件队列的基础.之前AQS的解析没有说这个内部类,这里和ReentrantLock ...
- ubuntu+将主机编译的库链接到虚拟环境Python中
这里且以opencv为例: cd ~/.virtualenvs/YOUR_ENV/lib/python3.5/site-packages/ ln -s /usr/local/lib/python3.5 ...
- GitHub rename the default branch from master to main
GitHub rename the default branch from master to main master => main Repository default branch Cho ...
- funny 生成器
funny 生成器 https://www.zhihu.com/question/380741546/answer/1190570384 举牌小人生成器 https://small-upup.upup ...
- 应该如何看待VAST的未来价格与价值？
提起数字货币的价格,很多币圈人士都是滔滔不绝,随口一举例,便是百倍千倍的数字货币.可是提起数字货币的价值,就很少有币圈人士能举出几个有力的例子,常常顾左右而言他,场面十分尴尬.之所以会这样,是因为很多 ...
- Renice INC：法国葡萄酒为什么独占世界鳌头?
提起葡萄酒,许多人首先想到的就是法国.法国有着悠久的酿酒历史和精湛工艺,"82年的拉菲"几乎成了大众认识葡萄酒的代名词.市面上的进口葡萄酒琳琅满目,原产国众多,意大利.西班牙.美国 ...
- 解决ROS及Fast-RTPS安装和使用中raw.githubusercontent.com无法连接的问题
资料参考: https://blog.csdn.net/weixin_44692299/article/details/105869229