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 ...
随机推荐
- Objective-C中的消息发送总结
关于OC中的消息发送的实现,在去年也看过一次,当时有点不太理解,但是今年再看却很容易理解. 我想这跟知识体系的构建有关,如果你不认识有砖.水泥等这些建筑的基本组成部分,那么我们应该很难理解建筑是怎么建 ...
- 我为什么放弃使用MyBatis3的Mapper注解
最近在使用MyBatis3做项目.在使用注解实现Mapper的时候遇到了比较奇葩的问题:在实现数据的batch insert的时候总是报错.好不容易可以正常插入了,但是又不能返回自增的主键id到实体b ...
- eclipse安装和中文汉化，以及配置
官网下载 eclipse http://www.eclipse.org/downloads/eclipse-packages/ ----选择 "Eclipse IDE for Java De ...
- 供应商导入的API补充（详解EBS接口开发之供应商导入）
--供应商 --创建 AP_VENDOR_PUB_PKG.Create_Vendor ( p_api_version IN NUMBER, p_init_msg_list IN VARCHAR2 := ...
- [tornado]websocket 最简单demo
想法 前两天想看看django 长轮询或者是websocket的方案,发现都不太好使. tornado很适合做这个工作,于是找了些资料,参照了做了个最简单demo,以便备用. 具体的概念就不说了,to ...
- 使用DWR实现自动补全 类似百度搜索框的自动显示效果
使用DWR实现自动补全 自动补全:是指用户在文本框中输入前几个字母或汉字的时候,自动在存放数据的文件或数据库中将所有以这些字母或汉字开头的数据提示给用户供用户选择 在日常上网过程中,我们经常使用搜索引 ...
- java.io.FileNotFoundException: ..\lib\commons-el.jar
安装openfire成功后,启动遇到java.io.FileNotFoundException: ..\lib\commons-el.jar错误,并不是缺少了jar包,只需以管理员身份运行即可解决.
- Makefile自动生成
automake/autoconf入门作为Linux下的程序开发人员,大家一定都遇到过Makefile,用make命令来编译自己写的程序确实是很方便.一般情况下,大家都是手工写一个简单Makefile ...
- CUDA5.5 的环境变量设置
为了方便,我写了这个文件用于设置cuda5.5的环境变量. 其中有些环境变量可能用不到,大家根据需要修改就是了. export CUDA_HOME=/usr/local/cuda-5.5 export ...
- linu下C语言之BMP图片操作编程(下)
前面提高了一个将BMP左转的程序,右转其实也是类似的操作,就不写了,这节,我们来实现,将一张BMP图进行灰度处理,代码贴上: #include <stdio.h> #include < ...