前端学习 -- Css -- 内联元素的盒模型

内联元素不能设置width和height；
设置水平内边距,内联元素可以设置水平方向的内边距：padding-left，padding-right；
垂直方向内边距，内联元素可以设置垂直方向内边距，但是不会影响页面的布局；
为元素设置边框,内联元素可以设置边框，但是垂直的边框不会影响到页面的布局；
水平外边距内联元素支持水平方向的外边距；
内联元素不支持垂直外边距；
为右边的元素设置一个左外边距，水平方向的相邻外边距不会重叠，而是求和。

示例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">span {background-color: #FFA500;}/*** 宽120 高120 颜色为#0000FF的div*/.box1 {width: 120px;height: 120px;background-color: #0000FF;}.s1 {/*内容区、内边距 、边框 、外边距* *//** 内联元素不能设置width和height,設置了也沒有效果*/width: 200px;height: 200px;/** 水平方向上内边距左为100px,右为100px*/padding-left: 100px;padding-right: 100px;/** 垂直方向内边距，内联元素可以设置垂直方向内边距，但是不会影响页面的布局*/padding-top: 50px;padding-bottom: 50px;/** 为元素设置边框,*     内联元素可以设置边框，但是垂直的边框不会影响到页面的布局*/border: 2px yellow solid;/** 水平外边距100px*/margin-left: 100px;margin-right: 100px;/** 内联元素不支持垂直外边距,因此设置如下完全没有效果*/margin-top: 200px;margin-bottom: 200px;}.s2 {/** 为右边的元素设置一个左外边距* 水平方向的相邻外边距不会重叠，而是求和*/margin-left: 100px;}</style></head><body><span class="s1">章台路</span><span class="s2">还见褪粉梅梢</span><span>试花桃树</span><span>愔愔坊陌人家</span><div class="box1"></div></body></html>

效果：

代码放到github上面了：

https://github.com/soyoungboy/htmlCssStudy/blob/master/HelloHBuilder/lesson16.html

自己可以运行下看看效果

前端学习 -- Css -- 内联元素的盒模型相关推荐

CSS→代码语法、优先级、选择器、权值、字体文本、颜色、长度值、块状内联元素、盒模型、布局模型→层模型绝对相对定位、div排列、水平居中
CSS全称为"层叠样式表 (Cascading Style Sheets)" 绝圣弃智,民利百倍: 绝仁弃义,民复孝慈: 绝巧弃利,盗贼无有. 此三者,以为文不足,故令有所属,见素 ...
CSS 5 CSS 内联元素和块状元素
CSS 文章目录 CSS 5 CSS 内联元素和块状元素 5.1 内联元素[inline] 5.2 块级元素[block] 5.3 内联元素与块级元素的区别 5.3.1 内联元素 5.3.2 块状 ...
css 内联元素浮动
css 内联元素浮动后, 会转为块元素 <!DOCTYPE html> <html lang="en"> <head><meta char ...
css 内联元素、块级元素、内联块级元素
对于display我想很多人都不陌生,然而在谈到内联元素,行内元素等词,还是会有人脑袋瓜子充满了疑问???我曾经自以为已经了解并懂得如何使用display,在学习vertical-align及替换元素 ...
html内联元素属性,【前端】HTML__内联元素与块元素
在HTML4.0时代,HTML的元素类型分内联元素(inline element)和块元素(block-level element). 第一.内联元素内联元素是是一种基于语义级的基本元素,一般只能容 ...
块元素与内联元素的盒子模型、浮动
目录 1.盒子模型 2.盒子模型的边框 3.盒子模型的内边距 4.盒子模型的外边距 5. 垂直外边距的重叠 6.清除浏览器默认内外边距 7.内联元素的盒子 8.dispaly详解 9.overflow ...
前端学习（1744）：前端调试值之调试元素的盒模型
CSS进阶（7）—— 内联元素的掌管者line-height和vertical-align（上）
在CSS世界中,块级元素一般负责结构,而内联元素则负责文字内容,而CSS设计的初衷就是面向图文混合排版,因此内联元素在CSS世界中有着非常重要的地位.由于本章内容较多,因此特分为上下两章,依旧可以根据 ...
CSS的块级元素和内联元素，以及float
说明:之前有一点搞错了,就是float其实是浮动起来,其它元素会位于它的底层. 最近在系统地学习HTML5,感觉补上了好多缺失的知识. 例如: 锚点定位其实可以通过 id 来实现: CSS 使用 !i ...

前端学习 -- Css -- 内联元素的盒模型

前端学习 -- Css -- 内联元素的盒模型相关推荐

最新文章

热门文章