首页 > TAG信息列表 > 行盒

html盒模型

盒模型 box：盒子，每个元素在页面都会生成一个矩形区域（盒子） 盒子的类型 盒子分为两种类型： 行盒：display等于inline的元素 块盒：display等于block的元素 行盒在页面中不换行、块盒独占一行 display默认值为inline 浏览器默认样式表的块盒：容器元素、h1~h6、p 常见的行盒：span、a、img、v

行盒的盒模型

行盒的盒模型 常见的行盒: 包含具体内容的元素 span、strong、em、i、img、video、audio 显著特点 盒子沿着内容延伸行盒不能设置宽高 调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整宽高。 内边距 (填充区) 水平方向有效，不会实际占据空间。 (垂直方向仅会影响背景

深入理解line-height和vertical-align

深入理解line-height和vertical-align 1.什么是行高（line-height）？ line-height用于设置文本的最小行高，可以简单理解为一行文字所占据的高度。但是行高的严格的定义是：两行文字基线（baseline）之间的距离。 那么什么是基线（baseline）呢？ 基线是与小写字母x最底部对齐的线，具体可参考下面的

CSS布局

浮动 浮动是个行级的行为，当遇到浮动元素的时候，会首先"假装"它是个行内元素进行排版，排好后就往浮动的方向挤到挤不过去为止（遇到边界或者其它浮动元素）。 run <html> <head><title>囧</title></head> <body> <div style=""> <span>囧</span>囧囧囧<div st

行盒的盒模型

行盒的盒模型 常见的行盒：包含具体内容的标签。 span,strong,em,i,img,video,audio 显著特点 1.盒子沿着内容延伸 2.行盒不能设置宽高 <style> p,span{ background: lightblue; border: 2px solid; line-height: 3; }

4. CSS进阶

@规则 at-rule:@规则、@语句、css语句、css指令 @import "./reset.css"; import @import “路径” 表示导入另外一个css文件 在network中可以看见加载的css文件 charset @charset “utf-8”; 这个指令必须要写到第一行; 告诉浏览器该css文件，使用的字符编码集是utf-8 web字

浮动

浮动：float：left 元素靠左靠上 float：right 元素靠右靠上 浮动盒子在排列时，会避开常规流块盒子， 常规流块盒子在排列时无视浮动盒子 行盒在排列时，会避开浮动元素 如果文字直接写在块盒当中，浏览器会自动给文字加上一个行盒，（该行盒叫做匿名行盒）包裹文字

CSS 浮动

浮动 视觉格式化模型，大体上将页面中盒子的排列分为三种方式： 常规流 浮动 定位 应用场景 文字环绕 横向排列 浮动的基本特点 修改float属性值为： left:左浮动，元素靠上靠左 right：右浮动，元素靠上靠右 默认值为none 当一个元素浮动后，元素必定为块盒（更改display属性为block） 浮动

行盒的特征，尺寸和定位

什么是行盒：display属性为inline的元素。 常见行盒：文字元素：span、abbr、em、i、strong、b 图片和多媒体：img、video、audio 含义：页面具体内容（文字、图片、多媒体）都会生成行盒，（注意：文字：必须放置到行盒内，否则会生成匿名行盒；图片和多媒体：默认会生成行盒，通常不要对它们的盒子类型进行改

在区域中国填充内容

在区域中填充内容 页面制作过程回顾 得到设计图 划分页面区域: HTML：结构元素 CSS：块盒 填充区域中的内容 HTML：文字、图片和多媒体元素等 CSS：行盒 图片和多媒体 图片：img元素：        src属性：图片路径 alt属性：图片无法显示时使用的替代文本 title属性：鼠标悬停时显示的文字

弹性布局

  弹性布局 1. 一个盒子，如果将其display属性设置为 flex ，该盒子变为弹性盒（弹性容器），该盒子的所有子元素，自动变为弹性项目。弹性盒本身按照自身的定位体系排列，弹性布局影响的仅仅是弹性盒中的弹性项目 2. 属性： l flex-direction ：更改主轴方向 l row 行 默认值 l row-reverse 反

盒模型学习（一）

原文链接：http://www.cnblogs.com/SheldonGe/archive/2013/03/31/2991002.html 盒模型概念： html文档中的每个元素(element)和文本都会被转换为一个矩形盒，而html文档中元素树(tree of elements)最终在浏览器中是以树状结构的盒(tree of boxes)进行显示的。

浮动

浮动 视觉格式化模型，大体上将页面中盒子的排列分为三种方式： 常规流 浮动 定位 应用场景 文字环绕 横向排列 浮动的基本特点 修改float属性值为： left：左浮动，元素靠上靠左 right：右浮动，元素靠上靠右 默认值为none 当一个元素浮动后，元素必定为块盒(更改display属性为block) 浮动

行盒子和嵌套元素

图片：img元素 src 属性：图片路径 alt 属性：图片无法显示时使用的替代文字 title （全局属性）：鼠标悬停时显示的文字   全局属性：所有元素通用的属性   title 、 lang （该元素内使用的是什么自然语言） 视频：video元素 src 属性：视频路径 （推荐mp4） controls 属性：【布尔属性】指定后，会显示播放

弹性布局

 弹性布局 一个盒子，如果将其display属性设置为flex，该盒子变为弹性盒（弹性容器），该盒子的 所有子元素，自动变为弹性项目。弹性盒本身按照自身的定位体系排列，弹性布局影响的仅 仅是弹性盒中的弹性项目 属性： flex-direction：更改主轴方向   l  row 行 默认值 l  row-reverse 反向 

行盒与行块盒

一.行盒 什么是行盒：display属性为inline的元素。 常见行盒：文字元素：span、abbr、em、i、strong、b 图片和多媒体：img、video、audio  含义：页面具体内容（文字、图片、多媒体）都会生成行盒，（注意：文字：必须放置到行盒内，否则会生成匿名行盒；图片和多媒体：默认会生成行盒，通常不要对它们的盒子类