Css3盒子模型-css学习之旅（5）
主要内容：
盒子模型内边距，外边距，边框，外边距合并
主要包括：margin（外边距）padding（内边距） border（边框）centent（内容）
内边距：padding，paddingleft，paddingright，paddingtop，paddingbottom
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First html</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<table border = "1">
<tr><td>
内边距
</td></tr>
</table>
</body>
</html>td{
padding: 100px;
}效果图
边框：1.可以创建出任何的边框并且应用于任何格式；2.border-style：定义了包括10种样式，包括none3.边框的单边框样式：border-top-style，border-bottom-style：border-style-right：border-left-style
同样还有border-width和border-color等属性 ，同样有top，bottom，和right和right四个属性
css3的行的边框属性：border-radius：边框圆角；box-shsdow：边框阴影；border-image：边框图片
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First html</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<p>css边框样式</p>
</body>
</html>p{
border-radius: 10px;
width:100px;
background-color: aquamarine;
border: 2px solid blue;
}效果图
外边距：接收任何单位，cm，px，百分数
属性值：margin以及top等四个方位的属性
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First html</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="mg">边框</div>
</body>
</html>body{
margin: 0;
}
.mg{
margin:100px;
width: 100px;
height: 100px;
background-color: brown;
}
Css3盒子模型-css学习之旅（5）的更多相关文章
- CSS自学笔记（10）:CSS3盒子模型
CSS3为CSS技术的升级版本.最新版本. 就CSS而言,它是一个模块,是一个庞大而又复杂的模块,但是在CSS3中,将这一个庞大的模块分解为一个个容易理解的同时又很精简的小模块,同时CSS3中又添加了 ...
- CSS3盒子模型
web前端必须了解的CSS3盒子模型 1.需要了解的属性以及属性值 display:box或者display:inline-box box-orient:horizontal | vertical ( ...
- CSS3盒子模型(上)
CSS的盒子模型分为三个大模块: 盒子模型 . 浮动 . 定位,其余的都是细节.要求这三部分,只要是学前端的无论如何也要学的非常精通. 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就 ...
- CSS3盒子模型(中)
在CSS盒子模型(上)讲到了盒子模型的边框,内外边距,外边距合并等知识,接下来要总结的是盒子模型的布局常用到的一些CSS属性,比如:float.position等知识. 盒子模型布局稳定性 开始学习盒 ...
- css3盒子模型及其定位
盒子模型常见相关属性和属性取值 /*基本属性*/ padding: padding-left/right/top/bottom border: border-left/right/top/bottom ...
- 标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)
盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版.其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上 ...
- CSS3——盒子模型 border(边框) 轮廓(outline)属性 margin外边距 padding填充
盒子模型 包括——边距,边框,填充,和实际内容 Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框. Padding(内边距) - 清 ...
- CSS3 —— 盒子模型
盒子模型 主要的属性就5个:width.height.padding.border.margin.如下: width和height:内容的宽度.高度(不是盒子的宽度.高度). padding:内边距 ...
- css3盒子模型中的box-sizing属性的使用_box sizing常用的3种属性
box-sizing属性用来定义元素的width和height所表示的区域,该属性一般有三种值:content-box.border-box.inherit.其中inherit表示box-sizing ...
随机推荐
- 六星经典CSAPP-笔记(11)网络编程
六星经典CSAPP-笔记(11)网络编程 参照<深入理解计算机系统>简单学习了下Unix/Linux的网络编程基础知识,进一步深入学习Linux网络编程和TCP/IP协议还得参考Steve ...
- hive中的NULL(hive空值处理)
HIVE表中默认将NULL存为\N,可查看表的源文件(hadoop fs -cat或者hadoop fs -text),文件中存储大量\N, 这样造成浪费大量空间.而且用java.python直接进入 ...
- How to kill a particular user terminal on Linux
Intro. Sometimes, the application we launched from command promp failed to exit. What we require is ...
- 干货：MySQL 索引原理及慢查询优化
MySQL凭借着出色的性能.低廉的成本.丰富的资源,已经成为绝大多数互联网公司的首选关系型数据库.虽然性能出色,但所谓"好马配好鞍",如何能够更好的使用它,已经成为开发工程师的必修 ...
- sum,filter和map参数里面的玄机
首先是sum函数. 最常见的用法似乎是: >>> sum([1,2,3]) 6 但其实这是默认首个元素是数字0.我们可以指定其他数字: >>> sum([1,2,3 ...
- 可能是CAP理论的最好解释
一篇非常精彩的解释CAP理论的文章,翻译水平有限,不准确之处请参考原文,还请见谅. Chapter 1: "Remembrance Inc" Your new venture : ...
- Android Multimedia框架总结（六）C++中MediaPlayer的C/S架构
转载请把头部出处链接和尾部二维码一起转载,本文出自: http://blog.csdn.net/hejjunlin/article/details/52435789 前面几节中,都是通过java层调用 ...
- Android之Animation动画各属性的参数意思（二）
现在就来讲讲Animation里这四个标签的属性. 一.这四个标签alpha.scale.translate.rotate共有的属性为: android:duration 动画持续时间, ...
- Linux--Web应用服务和MySQL数据库
(1) WWW是一种交互式图形界面的Internet服务,具有强大的信息连接功能,是 人们在网上查找.浏览信息的主要手段.它使得成千上万的用户通过简单的 图形界面就可以获取各个大学.组织.公司 ...
- Cocos2D中节点Z序的计算规则
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 免责申明:本博客提供的所有翻译文章原稿均来自互联网,仅供学习交 ...