【说站】css内联样式的盒子模型
CSS 模型 样式 盒子 内联
2023-06-13 09:13:22 时间
css内联样式的盒子模型
1、内联样式是不能设置width和height的。
2、它可以设置水平内边距,会影响页面布局,会将水平方向其他元素挤开。
但是垂直内边距则不会影响页面布局,它是选择覆盖其他元素。
3、它可以设置边框,垂直边框不会影响页面布局。
但是水平边框会(可以理解为跟水平内边距一样)
同时,内联元素支持水平方向的外边距,相邻元素外边距不会重叠而是求和。
内联元素不支持垂直外边框。
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
background-color: #bfa;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
}
.s1{
/*
内容区、内边距 、边框 、外边距
* */
/*
* 内联元素不能设置width和height
*/
/*width: 200px;
height: 200px;*/
/*
* 设置水平内边距,内联元素可以设置水平方向的内边距
*/
padding-left: 100px ;
padding-right: 100px ;
/*
* 垂直方向内边距,内联元素可以设置垂直方向内边距,但是不会影响页面的布局
*/
padding-top: 50px;
padding-bottom: 50px;
/*
* 为元素设置边框,
* 内联元素可以设置边框,但是垂直的边框不会影响到页面的布局
*/
border: 1px blue solid;
/*
* 水平外边距
* 内联元素支持水平方向的外边距
*/
/* margin-left:100px ;
margin-right: 100px; */
/*
* 内联元素不支持垂直外边距
*/
margin-top: 200px;
margin-bottom: 200px;
}
.s2{
/*
* 为右边的元素设置一个左外边距
* 水平方向的相邻外边距不会重叠,而是求和
*/
/* margin-left: 100px; */
}
</style>
</head>
<body>
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
<div></div>
</body>
</html>
以上就是css内联样式的盒子模型,希望对大家有所帮助。
相关文章
- CSS硬件加速
- CSS小技能:常用样式属性、选择器分类、盒子模型
- css怎么改鼠标样式,如何利用CSS改变鼠标的样式
- yuicompressor java_使用YUICompressor自动压缩JavaWeb项目中的JS与CSS文件
- CSS 零基础到实战(05)布局、盒子模型、弹性盒子【前端就业课 第二阶段】
- js动画和css3动画_js控制css动画
- 【说站】css中flex布局如何使用
- 【说站】css盒子模型的属性介绍
- 使用html css实现180箭头旋转,纯CSS实现箭头旋转「建议收藏」
- html中相对定位怎么写,css相对定位
- 【面试题解】CSS盒子模型与margin负值
- 【CSS教程】简约渐变色登陆布局html+css代码
- 【CSS】盒子模型内边距 ① ( 内边距概念 | 内边距设置语法 | 内边距设置效果 | 代码示例 )
- 【CSS】盒子模型外边距 ③ ( 插入图片 | 插入图片位置移动 - 修改外边距 | 背景图片 | 背景图片移动位置 - 修改背景位置 background-position )
- 【CSS】盒子模型圆角边框 ( 通过设置 border-radius 样式设置圆角矩形圆角半径 )
- 【CSS】课程网站 Banner 制作 ① ( Banner 栏测量 | Banner 盒子模型代码 | 代码示例 )
- 【CSS】课程网站 网格商品展示 模块制作 ② ( 网格商品展示盒子模型测量及样式 | 处理列表间隙导致意外换行问题 | 代码示例 )
- CSS 盒子模型
- CSS顶级技巧大放送,div+css布局必知
- 使css兼容IE8的小技巧
- JQuery确定css方框模型(盒模型BoxModel)
- php压缩多个CSS为一个css的代码并缓存
- asp.netCheckBoxList各项最小宽度CSS样式(兼容性good)