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. ORA-00933 UNION 与 ORDER BY

    原文:http://blog.csdn.net/lwei_998/article/details/6093807 The UNION operator returns only distinct ro ...

  2. Windows环境下 配置memcached (php)

    memcached就不用介绍了-- 1:在Windows下安装memcached服务端软件,已经下载并上传云盘  ---传送门 记得带钥匙:ykrc 解压缩后里面的安装说明内有安装教程. 2:软件安装 ...

  3. Python学习笔记：05类

    类 Python是面向对象的语言,面向对象最重要的三个优点有: 多态:多态使对象具备不同的行为方式.(可以认为声明了接口,但是实现方式可能多样) 封装:封装是对全局作用域中隐藏多余信息的原则(创建对象 ...

  4. Primary Expression

    Primary expressions are the building blocks of more complex expressions. They are literals, names, a ...

  5. 基于Redis的CAS服务端集群

    为了保证生产环境CAS(Central Authentication Service)认证服务的高可用,防止出现单点故障,我们需要对CAS Server进行集群部署. CAS的Ticket默认是以Ma ...

  6. Rxjava+Retrofit2+Okhttp3多文件上传(服务器端代码+客户端代码)

    所有代码亲测可用,如有问题,欢迎指正. 首先在ApiService接口文件中新建文件上传接口 public interface ApiService { static final String BAS ...

  7. 如何在github上创建一个Repository (Windows)

    一种方式是利用Github for windows工具 来操作github,这个是我推荐的方式 1 请先下载一个工具Github for windows,下载地址为:https://windows.g ...

  8. 转：MySQL导入.sql文件及常用命令

    在MySQL Qurey   Brower中直接导入*.sql脚本,是不能一次执行多条sql命令的,在mysql中执行sql文件的命令: mysql> source   d:/myprogram ...

  9. ISO7816协议的几个关键时间特性

    PPS: PPS是在PCK起始延后12个etu后完成,这个在2004版中是16etu 进行错误提示时,错误提示的延时时间是1etu到2etu 当D=64时,终端必须确保当前发出的第一个字符和最后一个接 ...

  10. 自己的缺省(sheng)源

    write无力吐槽了 #include <cstdio> #include <iostream> #include <algorithm> #include < ...