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样式之边框和内外边距的更多相关文章

  1. 0019 盒子模型（CSS重点）：边框、内外边距、布局稳定性、PS

    typora-copy-images-to: media 第01阶段.前端基础.盒子模型 盒子模型(CSS重点) css学习三大重点: css 盒子模型 . 浮动 . 定位 主题思路: 目标: 理解: ...

  2. css盒模型。边框和内外边距

    css盒模型: 外边距 边框 内填充 内容 盒模型分为两种: 标准盒模型: 怪异盒模型(IE盒模型): 边框:border border: 10px solid blue;表示设置10像素蓝色实线条的 ...

  3. css - 盒子内外边距

    css - 盒子内外边距 元素内边距 内边距是指元素包含的内容离元素边框之间的间距,padding会撑大盒子.在浏览器中显示的元素宽高包含了padding. div{     width:200px; ...

  4. css关于内外边距的详细解释

    贴图吧,图一眼明了. 无效果时候有 只有一个<div>啦啦啦</div> 只有padding时候有: padding详细设计时: 解释:padding是对内的,如padding ...

  5. css3-8 内外边距中的注意要点有哪些

    css3-8 内外边距中的注意要点有哪些 一.总结 一句话总结:padding,border都是外延的.margin会合并. 1.两元素样式都有margin:15px,他们中间的距离是15px还是30 ...

  6. 学习微信小程序之css11内外边距集合

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Android UI系列-----长度单位和内外边距

    这篇随笔将会记录一下在控件布局时,设定距离的三种长度单位:px.dp.sp以及内外边距的属性 1.三种长度单位 ①px:px是我们常见的一种距离单位,它表示的是一个单位像素,我们经常说我们手机或者电脑 ...

  8. css盒子模型、边框border、外边距margin、填充padding、轮廓outline

    盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...

  9. css内外边距属性

    盒子模型: 所有HTML元素可以看作盒子,在CSS中,"box model"是用来设计和布局时 使用. CSS盒模型本质上是一个盒子, 封装周围的HTML元素, 它包括:边距,边框 ...

随机推荐

  1. jQuery判断浏览器

    在jQuery1.9版本之前,jQuery 提供了 browser 标记 <script type="text/javascript" src="http://aj ...

  2. Dapper中使用存储分页。

    #region 分页获取数据 /// <summary> /// 分页获取数据 /// </summary> /// <typeparam name="T&qu ...

  3. PHP之路——PHPStudy虚拟主机

    一: Apache/conf/httpd.conf打开以下扩展 LoadModule rewrite_module modules/mod_rewrite.so LoadModule vhost_al ...

  4. HTML 基础元素

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 至芯FPGA培训中心-1天FPGA设计集训(赠送FPGA开发板)

    至芯FPGA培训中心-1天FPGA设计集训(赠送开发板) 开课时间2014年5月3日 课程介绍 FPGA设计初级培训班是针对于FPGA设计技术初学者的课程.课程不仅是对FPGA结构资源和设计流程的描述 ...

  6. RUBY，玩玩~~~

    我觉得吧,这东瀛的红宝石,也得玩玩,毕竟,RUBY ON RAILS,PUPPET等也是一股力量. 作为混IT圈的,知道总没坏处. 就是感觉和C,C++,JAVA,C#,PHP,甚至PYTHON的感觉 ...

  7. <frameset><frame><iframe>网页框架

    这几个标签都属于同一类功能,就是框架内镶功能: 1)<frameset>意为把页面分解成一定部分,让每一部分显示不同的内镶框架,如(请复制到DW尝试): <html> < ...

  8. SSH的内网穿透

    SSH的内网穿透 1.内网:     ssh -N -f -R 2222:127.0.0.1:22 lienzh@我的PC的IP2.外网:     ssh -p 2222 root@localhost ...

  9. Aho_Corasick自动机（AC自动机）

    首先,AC自动机不是Accept自动机,别以为把这段代码复制到OJ上就全都自动AC了…… 其实这玩意是Aho-Corasick 造出来的,所以你懂的. 那么这玩意能干嘛咧? •字符串的匹配问题 •多串 ...

  10. 无向图求割点 UVA 315 Network

    输入数据处理正确其余的就是套强联通的模板了 #include <iostream> #include <cstdlib> #include <cstdio> #in ...