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-1)line-height的定义和行内框盒子模型

    (1-1)line-height的定义和与行内框盒子模型的关系 一.line-height的定义 line-height的定义: 行高,又称为两基线的距离.默认基线对齐(因为CSS所有*线:总之就是各 ...

  2. css——行内元素和块级元素的具体区别与行内块元素

    (学习笔记) 行内元素(inline)和块级元素(block)都是display属性的值.要知道行内元素和块级元素的区别,首先要了解他们的特性. 行内元素的特性:“行内”,顾名思义,在一行之内,所以相 ...

  3. CSS里有哪些常见的块级元素和行内元素以及其区别?

    根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...

  4. css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性

    一.各种元素的width height margin padding 特性(具体css元素的分来参看二) 1.块级元素 width. height. margin的四个方向. padding的四个方向 ...

  5. C#基础-css行内元素、块级元素基础

    一.行内元素与块级元素 块级元素列表 <address> 定义地址 <caption> 定义表格标题 <dd> 定义列表中定义条目 <div> 定义文档 ...

  6. 初学css 行内元素与块级元素

    行内元素与块级元素直观上的区别 1.行内元素会在一条直线上排列,都是同一行的,水平方向排列块级元素各占据一行,垂直方向排列.块级元素从新行开始结束接着一个断行. 2.块级元素可以包含行内元素和块级元素 ...

  7. CSS 行内样式 页内样式 外部样式

    行内标签: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...

  8. CSS行内元素和块级元素的居中

    一.水平居中 行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可; 对于块级元素有以下几种居中方式: 1.将元素放置在table中,再将table的marg ...

  9. css 行内元素和块级元素

    1. 块级元素默认在新行开始,如常见的div和p标签,行内元素默认在同行开始显示,如a,span标签 2.块级元素一般用于做容器,可容纳行内和块级元素,可设置width和height,行内元素只能容纳 ...

随机推荐

  1. 007.NET5 Log4Net组件使用

    NET 5 Log4Net组件使用 1. Nuget引入程序集:log4net + Microsfot.Extensions.Logging.Log4Net.AspNetCore 2. 准备配置文件 ...

  2. ES-Next @Decorator All In One

    ES-Next @Decorator All In One @装饰器 import { logged } from "./logged.mjs"; class C { @logge ...

  3. live chat for website UX

    live chat for website UX increase customer satisfaction using a live chat https://crisp.chat/en/live ...

  4. js & class & init

    js & class & init how to call class init method in js when create an instance 在初始化类实例的时候调用,类 ...

  5. moment.js 时间格式转换

    moment.js 时间格式转换 moment.js 时间转化 bug 格式错误 bug 02:00 => 14:00 format HH 与 hh HH === 24 小时制 hh === 1 ...

  6. ng 基础

    文档 组件的工作只管用户体验,而不用顾及其它. 它应该提供用于数据绑定的属性和方法,以便作为视图和应用逻辑的中介者 组件应该把诸如从服务器获取数据.验证用户输入或直接往控制台中写日志等工作委托给各种服 ...

  7. RocketMq灰皮书(二)------本地部署启动MQ

    RocketMq灰皮书(二)------本地部署启动MQ Windows10本地部署RocketMQ 在上一篇文章中,我们对rocket的几个基本概念进行了介绍,也了解了业内几大消息中间件的区别.在本 ...

  8. 02_Mysql用户管理之Navicat下载及安装

    Navicat可以说是最好的Mysql客户端管理软件了,本博客将带你完成Navicat的下载与安装. 1.下载(https://www.navicat.com.cn/products)

  9. Python安装教程

    1.下载好Python安装包后,双击打开(第一个是32位,第二个是64位,根据自己电脑位数进行选择): 2.打开后如下,先将下方的Python添加到系统环境变量勾选上,再点击第一个默认安装即可: 3. ...

  10. DQL:data query language用来查询数据库表中的数据

    对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 如果没有查询条件,则每次查询所有的行.实际应用中,一般要指定查询的条件.对记录进行过滤. 查询 ...