美文网首页
CSS样式之行盒模型 ------ 2020-01-19

CSS样式之行盒模型 ------ 2020-01-19

作者: 自己写了自己看 | 来源:发表于2020-01-19 14:11 被阅读0次

1、行盒模型

// 盒模型分类:块盒、行盒、行块盒;

// 常见的行盒:
img、strong、em、i、img、video、audio;

2、行盒模型的显著特点:

/**
1、盒子沿着内容延伸;
2、行盒不能设置宽高,所以调整行盒的高度可用办法有:字体大小,行高,字体类型,等间接调整方式;
3、内边距(填充区):水平方向有效,垂直方向不会实际占据空间,会改变背景的大小;
4、边框:水平方向有效,垂直方向不会实际占据空间;
5、外边距:水平方向有效,垂直方向不会实际占据空间;
*/

3、一些行盒表现的是行块盒的特性:

// img、video、audio
// 这类元素是行盒,但是变现上类似于行块盒,盒模型中所有的尺寸都有效;

相关文章

  • CSS样式之行盒模型 ------ 2020-01-19

    1、行盒模型 2、行盒模型的显著特点: 3、一些行盒表现的是行块盒的特性:

  • flex 总结

    布局相关 所有 Weex 组件都支持以下通用样式规则。 盒模型 Weex 盒模型基于 [CSS 盒模型],每个 W...

  • 2019-04-05

    CSS基础样式&盒模型&字体图标 1.IE 盒模型和W3C盒模型有什么区别? IE盒模型的width包括conte...

  • 第4课 一张图让你对CSS盒模型过目不忘

    一、CSS与CSS盒模型 1. 什么是CSS? CSS即层叠样式表(全称:Cascading Style Shee...

  • Weex——公共样式

    所有 weex 标签都有以下基本样式规则。 weex 盒模型基于 CSS 盒模型,每个 weex 元素都可视作一个...

  • 6.3盒模式

    盒模型 什么是CSS盒模型? CSS盒模型仅仅是一个形象的比喻, HTML中的标签都是盒模型 CSS盒模型指那些可...

  • css怪异盒模型样式

    盒模型有两种:① 标准模式② 怪异模式(quirks 模式)---------------------------...

  • CSS基础样式&盒模型

    1、IE 盒模型和W3C盒模型有什么区别? IE盒模型中,给元素设置的宽高包括其padding和border值,而...

  • html、css学习笔记(五)

    布局模型是建立在盒模型基础之上在网页中,不同于CSS 布局样式或 CSS 布局模板。 元素有三种基本布局模型:1、...

  • 盒模型

    什么是CSS盒模型? CSS盒模型仅仅是一个形象的比喻, HTML中的标签都是盒模型 CSS盒模型指那些可以设置宽...

网友评论

      本文标题:CSS样式之行盒模型 ------ 2020-01-19

      本文链接:https://www.haomeiwen.com/subject/yqyrzctx.html