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>
css样式之边框和内外边距的更多相关文章
- 0019 盒子模型（CSS重点）：边框、内外边距、布局稳定性、PS
typora-copy-images-to: media 第01阶段.前端基础.盒子模型 盒子模型(CSS重点) css学习三大重点: css 盒子模型 . 浮动 . 定位 主题思路: 目标: 理解: ...
- css盒模型。边框和内外边距
css盒模型: 外边距 边框 内填充 内容 盒模型分为两种: 标准盒模型: 怪异盒模型(IE盒模型): 边框:border border: 10px solid blue;表示设置10像素蓝色实线条的 ...
- css - 盒子内外边距
css - 盒子内外边距 元素内边距 内边距是指元素包含的内容离元素边框之间的间距,padding会撑大盒子.在浏览器中显示的元素宽高包含了padding. div{ width:200px; ...
- css关于内外边距的详细解释
贴图吧,图一眼明了. 无效果时候有 只有一个<div>啦啦啦</div> 只有padding时候有: padding详细设计时: 解释:padding是对内的,如padding ...
- css3-8 内外边距中的注意要点有哪些
css3-8 内外边距中的注意要点有哪些 一.总结 一句话总结:padding,border都是外延的.margin会合并. 1.两元素样式都有margin:15px,他们中间的距离是15px还是30 ...
- 学习微信小程序之css11内外边距集合
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Android UI系列-----长度单位和内外边距
这篇随笔将会记录一下在控件布局时,设定距离的三种长度单位:px.dp.sp以及内外边距的属性 1.三种长度单位 ①px:px是我们常见的一种距离单位,它表示的是一个单位像素,我们经常说我们手机或者电脑 ...
- css盒子模型、边框border、外边距margin、填充padding、轮廓outline
盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...
- css内外边距属性
盒子模型: 所有HTML元素可以看作盒子,在CSS中,"box model"是用来设计和布局时 使用. CSS盒模型本质上是一个盒子, 封装周围的HTML元素, 它包括:边距,边框 ...
随机推荐
- 通过 Xshell 5 连接 centOS 7 服务器
一. 在安装好了centOS 7 的服务上,打开终端 运行 ip -s addr 命令 获取服务的IP地址 [root@localhost ~]# ip -s addr1: lo: <LOOPB ...
- Windows下命令行连接mysql及导入sql文件
嗯,今天要把phpcms的模板放到服务器上,,,呃,phpMyAdmin死活连接不上数据库,这又是个神马情况无奈,又想到命令行了,好吧,最近喜欢上命令行了,不过这果然还是命令行强大啊,啊哈哈下面呢,我 ...
- UVA - 1614 Hell on the Market（贪心）
Time Limit: 3000MS Memory Limit: Unknown 64bit IO Format: %lld & %llu Submit Status Descript ...
- 推荐一个PHP扩展 来真正实现PHP多线程的开发
PHP扩展下载:https://github.com/krakjoe/pthreadsPHP手册文档:http://php.net/manual/zh/book.pthreads.php <?p ...
- JavaScript and html的关系
HTML--------------------------->DOM, BOM, Event Request/Response------------->Ajax 日期处理 http:/ ...
- h.264 Mode Decision
Mode Decision(模式选择)决定一个宏块以何种类型进行分割.宏块的分割类型有以下几种: //P_Skip and B_Skip means that nothing need to be e ...
- 使用 Spring Boot 快速构建 Spring 框架应用,PropertyPlaceholderConfigurer
Spring 框架对于很多 Java 开发人员来说都不陌生.自从 2002 年发布以来,Spring 框架已经成为企业应用开发领域非常流行的基础框架.有大量的企业应用基于 Spring 框架来开发.S ...
- jstack(Stack Trace for Java)
功能 用于生成虚拟机当前时刻的线程快照(一般称为threaddump或javacore文件).线程快照就是当前虚拟机内每一条线程正在执行的方法堆栈的集合,生成线程快照的主要目的是定位线程出现长时间 ...
- 【博弈论】HDU 5754 Life Winner Bo
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5754 题目大意: 4种棋子,象棋中的 1王,2车,3马,4后,选其一,B和G轮流走,不能往左上走,一 ...
- 【数学】HDU 5753 Permutation Bo
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5753 题目大意: 两个序列h和c,h为1~n的乱序.h[0]=h[n+1]=0,[A]表示A为真则为 ...