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. Mybatis3.0防止SQL注入

    一.什么是SQL注入 引用搜狗百科: SQL注入,就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令,比如很多影视网站泄露VIP会员密码大 ...

  2. JavaScript奇技淫巧44招

    JavaScript是一个绝冠全球的编程语言,可用于Web开发.移动应用开发(PhoneGap.Appcelerator).服务器端开发(Node.js和Wakanda)等等.JavaScript还是 ...

  3. HTML5验证及日期显示

    以前忽略了HTML5的强大功能,谁知有了它数据大部分都不需要自己验证,显示日历也不需要插件啦,一些小功能分享给大家 1.Email输入框,自动验证Email有效性. <!DOCTYPE HTML ...

  4. ViewPage和ActionBar打造滑动视图

    滑动效果非常流畅,可以将页签放置到ActionBar上,点击页签可以切换ViewPage,滑动ViewPage会同步更显Tabs. main.xml <?xml version="1. ...

  5. UART接口

    1.UART UART(Universal Asynchronous Receiver and Transmitter)通用异步收发器(异步串行通信口),是一种通用的数据通信协议,它包括了RS232. ...

  6. 【HDOJ】1313 Round and Round We Go

    大数乘,果断java A了. import java.util.Scanner; import java.lang.StringBuilder; import java.math.BigInteger ...

  7. Ubuntu中Samba的安装配置和使用[图文]

    Samba服务在Ubuntu服务器版本中默认并没有安装. 1. Samba软件包的安装 使用源安装,在终端中输入如下命令: #sudo apt-get install samba#sudo apt-g ...

  8. oracle number 和sqlserver numeric的区别

    number如果不指定范围默认是可以输入所有位数的小数,numeric如果不指定小数默认是不允许输入小数

  9. HDOJ 2072 单词数

    Problem Description lily的好朋友xiaoou333最近很空,他想了一件没有什么意义的事情,就是统计一篇文章里不同单词的总数.下面你的任务是帮助xiaoou333解决这个问题. ...

  10. 挂载nfs系统问题之： Root-NFS: Server returned error -13 while mounting

    今天换了个路由器,由于是自动分的IP,现在的IP和之前的不在同一网段.以前是192.168.0.xxx,现在是192.168.1.xxx.本以为将serverip,ipaddr,bootargs这些参 ...