css样式之边框和内外边距
1、css样式之边框：border
实心的边框：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>页面一</title>
</head>
<body>
<div style="border:1px solid blue;height:200px"></div>
</body>
</html>
虚心的边框：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>页面一</title>
</head>
<body>
<div style="border:1px dotted blue;height:200px"></div>
</body>
</html>
2、css样式之内外边距
外边距：margin
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>页面一</title>
</head>
<body>
<div style="height:200px;border:1px solid red;">
<div style="height:30px;background-color:#999;margin-top:10px;margin-left:1250px;margin-right:10px;">
guojianglin
</div>
</div>
</body>
</html>
内边距：padding
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>页面一</title>
</head>
<body>
<div style="height:200px;border:1px solid red;">
<div style="height:30px;background-color:#999;padding-top:50px;">
guojianglin
</div>
</div>
</body>
</html>
转载于:https://www.cnblogs.com/Brin-guo/p/4845350.html
css样式之边框和内外边距相关推荐
- css --- [读书笔记] 盒模型(边框、内外边距)
说明 源代码 学习 盒子模型(css重点) css学习三大重点: css盒子模型. 浮动. 定位 目标: 能说出盒子模型由哪四部分组成: 内容.边框.内外边距 能说出内边距的作用,设置不同数值分别代表 ...
- 前端笔记（5）盒子模型，边框，内外边距，盒子模型布局，ps基本操作，列表样式，圆角边框，盒子阴影
css样式表/层叠样式表(3) (1)盒子模型 (2)盒子边框 (3)表格的细线边框 (4)内边距padding 内盒尺寸计算(元素实际大小) padding不会影响盒子大小的情况 (5)外边距mar ...
- CSS盒子模型（内容区、边框、内外边距）
一.盒子模型 1.什么是盒子模型.为什么要设置盒子模型,盒子模型具体怎么构成,怎么设置? 把各种元素布局到页面,就像想买个桌子,放到家里,要知道桌子的大小,形状,然后才能放到家里所以我们把所有的元素都 ...
- html定义盒子距离顶底端像素,css - 盒子内外边距
css - 边距 元素内边距 内边距是指元素包含的内容离元素边框之间的间距,内边距不能设负值.内边距(padding).(边框)border都会撑大盒子,在浏览器中显示的元素的尺寸可能包含了盒子的pa ...
- 2021-04-05 web前端CSS之权重，盒子边框内外边距
视频学习:黑马程序员pink老师 笔记:层叠性 相同选择器给设置相同的样式--如果样式冲突,就近原则 样式不冲突,不会层叠 <!DOCTYPE html> <html lang=&q ...
- html盒子左右边框边距,CSS盒子模型、内外边距、边框、行高、背景
1.盒子模型 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margin)组成. ...
- html之CSS设计（文本、边框、列表标签、display设置、内外边距）
文章目录 一.文本属性 二.边框属性 三.列表标签 四.display设置 五.内外边距 本篇文章主要介绍CSS设计中的文本属性.边框边距.列表标签.display的几种用法,还有一个最容易被忽视的点 ...
- CSS边框、边距、轮廓（边框宽度/颜色/各边/简写属性/圆角边框/内外边距/高度宽度/框模型/轮廓宽度/颜色/属性/偏移）——万字长文|一文搞懂
目录 CSS边框 CSS 边框属性 CSS 边框样式 实例 CSS 边框宽度 实例 特定边的宽度 实例 CSS 边框颜色 实例 特定边框的颜色 实例 HEX 值 实例 RGB 值 实例 HSL 值 实 ...
- 【CSS】盒子模型案例 ( 盒子模型尺寸计算 | 盒子模型水平居中 | 盒子模型内外边距设置 | 背景图片及位置设置 | 盒子嵌套设置 )
文章目录 一.实现效果 二.基本 HTML 结构 三.设置最外层盒子样式 ( 盒子模型内外边距设置 ) 四.设置标题盒子样式 ( 盒子模型尺寸计算 | 盒子模型水平居中 ) 五.设置列表盒子样式 ( ...
最新文章
- 实现搜索框记录搜索历史_三个案例告诉你：“搜索框”该如何设计？
- 常用 Linux 发行版操作系统大盘点！
- 专家点评Nat Micro | 朱永群组首次发现特异地切割线性泛素链的全新去泛素化酶...
- PostMessage()和SendMessage()
- python读文件代码-Python遍历文件夹和读写文件的实现代码
- springboot第十讲
- Python入门100题 | 第034题
- redis缓存路由为空_Springboot使用RedisTemplate优雅地操作redis
- Vue——prop双向绑定解决方案
- 计算机操作系统——作业调度算法
- python generator_Python Generator漫谈
- app开发人脸登录和指纹登录_易讯云通讯推出“一键登录”，为App登录提供新方案...
- ABP理论学习之日志记录
- MYSQL 批量Insert ID顺序生成（仿雪花算法）
- Apache Commons Pool试用小记
- java array和数组_Java：数组和Arrays类的使用
- git拉取远程仓库命令代码
- 科技时代：继刷脸支付之后，无感停车成新热点
- 【移动安全技术】_安卓逆向5：绕过单机游戏的商店支付
- 电子计算机上面cutup,cutup(cut up用法总结)