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元素, 它包括:边距,边框 ...
随机推荐
- Java简介(2)-基本概念
1.抽象类:规定一个或多个抽象方法的类别本身必须定义为abstract,抽象类只是用来派生子类,而不能用它来创建对象 2.final类:又称“最终类”,它只能用来创建对象,而不能被继承,与抽象类刚好相 ...
- JavaScript-学习一加载不动
为先加载的js后加载的html 加载完js运行时因为未加载html的原因导致找不到js所控制的元素 所以解决的方法就是把js放到控制元素的下方 或者html的底部 做成函数的时候可以放在头部,也就是说 ...
- angularJS学习笔记一
AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让 ...
- c程序代码的内存布局(学好C的基础)
一个程序本质上都是由 BSS 段.data段.text段三个组成的.这样的概念在当前的计算机程序设计中是很重要的一个基本概念,而且在嵌入式系统的设计中也非常重要,牵涉到嵌入式系统运行时的内存大小分配, ...
- C语言字符数组越界现象
今天在用C的过程中发现一个奇怪的现象.代码如下: ]; chs[] = 'a'; chs[] = 'b'; printf(]); 结果 输出 是 a. 在网上查了一下.有个网友是这样回答的: “ 我 ...
- 转:OWASP发布Web应用程序的十大安全风险
Open Web Application Security Project(OWASP)是世界范围内的非盈利组织,关注于提高软件的安全性.它们的使命是使应用软件更加安全,使企业和组织能够对应用安全风险 ...
- Cracking the coding interview--Q2.4
Write code to partition a linked list around a value x, such that all nodes less than xcome before a ...
- UART接口
1.UART UART(Universal Asynchronous Receiver and Transmitter)通用异步收发器(异步串行通信口),是一种通用的数据通信协议,它包括了RS232. ...
- sphinx coreseek SetSortMode(SPH_SORT_ATTR_ASC, '') 对float 排序设置bug
when I use SetSortMode(SPH_SORT_ATTR_ASC, 'floatVar'), it works unexpectedly. for example, I have a ...
- linux mount / umount 命令的基本用法
linux mount / umount 命令的基本用法 及 开机自动挂载 格式:mount [-参数] [设备名称] [挂载点] 其中常用的参数有: -a 安装在/etc/fstab文件中类出的所有 ...