前端学习 -- 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 -- 内联元素的盒模型的更多相关文章
- 内联元素的盒子模型与文档流定位padding属性
内联元素的盒子模型 1.内联元素不能设置width宽度和高度height span{width:200px ; height:200px} 与 span{width:100 ...
- css 内联元素
内联元素又名行内元素(inline element),和其对应的是块元素(block element),都是html规范中的概念.内联元素的显示,为了帮助理解,可以形象的称为“文本模式”,即一个挨着一 ...
- css 内联元素inline 行框全解
首先看一篇文章: CSS框模型:一切皆为框 — 从行框说起 一 行框 看图说话 上图代表了框模型中的行框.line-height 属性设置行间的距离(行高).该属性会影响行框的布局.在应用到一个块级元 ...
- CSS块级-内联元素，盒子模型
CSS元素 元素分类和区别 常用的块状元素有: <div>.<p>.<h1>~<h6>.<ol>.<ul>.<li> ...
- 前端研究CSS之内联元素块级化/区域大小/文字和图标的位置
做了一天的小按钮基本都是文字+小图标的组合,问题挺多处理的不好,现在总结一下做个了断. //页面结构 <span class="b"> <a href=" ...
- CSS - 内联元素span 强制换行失败的可能原因
在CSS中,标签span 强制换行失败:(使用display:block) 可能原因:float:left or float:right
- 内联元素于与块元素的转换 相对定位、绝对定位以及fixed定位 Z轴覆盖
今天上午学习了内联元素于与块元素的转换 个人觉的display:none将元素非常好用,可以配合当鼠标放到这里会出现. 转换成行内元素display: inline; 转换成块元素displ ...
- 18 12 27 css 盒模型使用 以及相关技巧问题 元素溢出 块元素、内联元素、内联块元素
盒子模型的实际尺寸 盒子的width和height设置的是盒子内容的宽和高,不是盒子本身的宽和高,盒子的真实尺寸计算公式如下: 盒子宽度 = width + padding左右 + border左右 ...
- css position, display, float 内联元素、块级元素
position属性:position属性指出一个元素的定位方法.有4种可能值:static, relative, absolute or fixed: static:默认值,元素按照在文档流中出现的 ...
随机推荐
- 利用备份技术获取apk本地存储数据
即使设备没有root,我们也可以通过物理访问设备来获取应用程序的数据,我们还可以通过此方法改变一个应用程序的数据.如果一个应用程序将数据存储在客户端, 使用简单的密码或pin检查,攻击者有可能使用这种 ...
- [LOJ#6198]谢特[后缀数组+trie+并查集]
题意 给你一个长度为 \(n\) 的字符串,问 \(LCP(i,j)+(w_i\ xor\ w_j)\) 的最大值,其中 \(LCP\) 表示两个后缀的最长公共前缀. \(n\le 10^5\) 分析 ...
- 【DDD】业务建模实践 —— 发布帖子
本文是基于上一篇‘业务建模战术’的实践,主要讲解‘发表帖子’场景的业务建模,包括:业务建模.业务模型.示例代码:示例代码会使用java编写,文末附有github地址.相比于<领域驱动设计> ...
- manjaro设置国内源
升级系统到最新 sudo pacman -Syyu 配置源 kate /etc/pacman.conf 官方镜像源(包括 core, extra, community, multilib ) sudo ...
- java算法面试题
前言:线上面试题与大家分享,并记录求职道路的酸甜苦辣,特此留念. 李雷和韩梅梅坐前后排,上课想说话怕被老师发现,所以改为传小纸条.为了不被老师发现他们纸条上说的是啥,他们约定了如下方法传递信息:将26 ...
- Nextcloud13私有云盘安装指南
一.环境说明: ※操作系统版本CentOS 7.5 Minimal-1804 ※操作系统版本已经使用163 YUM源 ※ Nextcloud版本 13.05 ※ 数据库使用MariaDB,安装在同一台 ...
- DevOps on AWS之Cloudformation概念介绍篇
Cloudformation的相关概念 AWS cloudformation是一项典型的(IAC)基础架构即代码服务..通过编写模板对亚马逊云服务的资源进行调用和编排.借助cloudformation ...
- 一份超全超详细的 ADB 用法大全
http://blog.csdn.net/u010375364/article/details/52344120
- PHP学习笔记2
PHP Switch语句 用于根据多个不同条件执行不同动作.如果不在每个条件后加break,将会输出所有结果. <?php $language="java"; switch( ...
- c# dataGridView cell添加下拉框
应用场景: dataGridView需要某一个cell变成下拉框样式. 思路详解: dataGridVie添加固定格式的row. 代码: DataGridViewRow row = new DataG ...