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 ...
随机推荐
- JAVA 中转义符的理解
生物信息中有时候会遇到JAVA写的程序,今天阅读源码的时候发现对于正则中的转义符不好理解,后来查资料后终于弄明白了,这里详细说明一下: 字符串的表示有三种方法:1.直接单字符,例如"A&qu ...
- Dynamics CRM2016 Set Values of all Data Types using Web API
之前的博客里有谈到了web api的增删改查,里面会涉及到各种类型字段的赋值,因为时间和精力关系,没有对所有的字段类型一一测试,这篇博文中给出了全部的 http://inogic.com/blog/2 ...
- docker 部署cassandra
摘要 本文主要介绍在redhat7 平台,利用docker 部署cassandra 集群,除了介绍基本的部署步骤,另外主要 讨论类似于cassandra 这种分布式集群系统部署 docker如何进行网 ...
- Swift类型推测在可选调用中的小提示
我们知道Swift中协议里也有对应于Objc中的可选方法或计算属性,当然协议必须以@objc伪指令修饰否则不可以哦. 如下示例: @objc protocol Transaction{ fun com ...
- Linux下创建软链接
创建软链接: ln -s /newdisk/app-tpl/apache-tomcat-7.0.47/webapps/app-tpl-webapp/ /newdisk/UCMSServer/tomca ...
- Mybatis源码学习之TypeHandler
ORM框架最重要功能是将面向对象方法中的对象和关系型数据库中的表关联了起来,在关联过程中就必然涉及到对象中的数据类型和数据库中的表字段类型的转换,Mybatis中的org.apache.ibatis. ...
- DoesNotExist at /admin/
DoesNotExist at /admin/ User has no account. Request Method: GET Request URL: http://127.0.0.1:8000/ ...
- setting.py
""" Django settings for sitea project. For more information on this file, see https:/ ...
- 使用Intent传递对象
Intent 的用法相信你已经比较熟悉了,我们可以借助它来启动活动.发送广播.启动服务等.在进行上述操作的时候,我们还可以在Intent 中添加一些附加数据,以达到传值的效果,比如在FirstActi ...
- Java并发框架——AQS之如何使用AQS构建同步器
AQS的设计思想是通过继承的方式提供一个模板让大家可以很容易根据不同场景实现一个富有个性化的同步器.同步器的核心是要管理一个共享状态,通过对状态的控制即可以实现不同的锁机制.AQS的设计必须考虑把复杂 ...