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. 产品经理进阶：如何用UML的顺序图表达思想？

    当大家把UML建模语言下的各图形都有所了解后会发现,通过这些图可以全面的.立体的从各个角度表达产品,让产品的表达变得更丰富.更形象. "手中无剑.心中有剑",大多数产品人并不了解计 ...

  2. SCSS 复用 class 样式

    SCSS 复用 class 样式 @mixin & @include 复用的变量名称,不可以是 .class 开头️ css-varibale-name .css-class-name Mix ...

  3. Roman Numerals All In One

    Roman Numerals All In One 罗马数字 refs https://www.mathsisfun.com/roman-numerals.html https://www.maths ...

  4. css infinite loop animation

    css infinite loop animation @keyframes loop { 0% { transform: translateX(0%); } constructed styleshe ...

  5. tree ignore & bash & cmd

    tree ignore & bash & cmd tree ignore https://unix.stackexchange.com/a/47806 https://zaiste.n ...

  6. css3 & content & attr & data-*

    css3 & content & attr & data-* content: attr(data-value); https://github.com/oliviale/CS ...

  7. Flutter 模拟youtube快进icon

    import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends State ...

  8. DENIEL SOIBIM：如何保持坚持

    丹尼尔·索比姆作为加州理工高材生,在2005年通过创建投资俱乐部对潜力公司进行天使投资,获得了美国Blue Run高层的重视,并相继担任Blue Run潜力营收专家评估师,2009年成为星盟集团的副总 ...

  9. 两百万SPC空投来袭，带动市场热情！

    NGK投放项目的时间节点总是以牛市为主,像是上一次的BGV项目投放就在2020年末的数字加密货币牛市,其结果想必各位生态建设者们都已经见到了,在登陆交易所首日便高收于近889美金,创下惊人的近一千七百 ...

  10. WPF 之绘画（十一）

    一.WPF 绘画 WPF 可以绘制线段(Line).矩形(Rectange).椭圆(Ellipse).路径(Path).具体使用如下所示: <!--(1)线段:Line--> <Li ...