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. [转]python集合set

    Python中集合set是基本数据类型的一种,它有可变集合(set)和不可变集合(frozenset)两种.创建集合set.集合set添加.集合删除.交集.并集.差集的操作都是非常实用的方法. 来源网 ...

  2. log4net编译后命名空间找不到的问题

    log4net编译后命名空间找不到的问题问题:工程A添加dll引用后,可以在代码中引入log4net的命名空间.工程B引用A.A能编译成功,B不能编译成功,提示找不到命名空间. 解决: 点击项目属性- ...

  3. AutoMapper DynamicMap天坑

    如果调用Mapper.DynamicMap该方法,会将所有映射重置为默认映射,即以字段名匹配映射.

  4. HTML cellpadding与cellspacing属性

    单元格(cell) -- 表格的内容 单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间 单元格间距(表格间距)(cellspacing) - ...

  5. struts2中IOC控制反转应用

    package com.bjsxt.struts2.user.action; import java.util.Map; import org.apache.struts2.interceptor.A ...

  6. python中read、readline和readlines的区别

    read        读取整个文件 readline    读取下一行 readlines   读取整个文件到一个迭代器以供我们遍历(读取到一个list中,以供使用,比较方便). 123.txt内容 ...

  7. LINUX BASH SHELL，小小学习一下

    注意点要注意的: 整数运算一般通过 let 和 expr 这两个指令来实现,如对变量 x 加 1 可以写作:let "x = $x + 1" 或者 x=`expr $x + 1` ...

  8. HDU4666 Hyperspace(曼哈顿)

    题目链接. 分析: 这是多校的一个题,当时没做出来.学长说让用multiset. 用multiset将每一个数的1<<dim个状态全部保存.假设状态 i, 最远曼哈顿距离应当是 max[i ...

  9. BZOJ 1028 [JSOI2007]麻将

    1028: [JSOI2007]麻将 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 1270  Solved: 576[Submit][Status][ ...

  10. HDOJ 1163 Eddy's digital Roots 九余数定理+简单数论

    我在网上看了一些大牛的题解,有些知识点不是太清楚, 因此再次整理了一下. 转载链接: http://blog.csdn.net/iamskying/article/details/4738838 ht ...