css内边距 边框
/*1 元素的各边都有 10 像素的内边距 四个值上、右、下、左 两个上下,左右 三个值:上,左右,下*/
/*p {padding: 10%;}*/ h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
} /*下面这条规则把段落的内边距设置为父元素 width 的 10%:*/
p {padding: 10px 50px 100px 20px; background: red}
内边框:
border-style:
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style
等价:
p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}
border-color: blue red;
border-top-width
border-width: 15px 5px 15px 5px;
综合:宽度,样式,颜色
border: medium double rgb(250,0,255)
外边框:
margin: top right bottom left
定位:
static元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
relative 相对定位:元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
absolute 绝对定位:元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
fixed 固定定位:元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
}
/*fixed对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。而其层叠通过z-index属性定义。*/
/*对象脱离正常文档流 绝对定位,使用top,right,bottom,left等属性进行绝对定位。而其层叠通过z-index属性定义。*/
/*relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。*/
css内边距 边框的更多相关文章
- (转)css内边距与外边距的区别,精辟啊
css内边距与外边距的区别 (2012-05-02 13:54:54) 转载▼ 标签: 杂谈 分类: css 本文也是网上看了后收藏的,忘了原地址(以后收藏文章得注意) 你真的了解margin吗?你知 ...
- CSS 内边距 (padding) 实例
CSS 内边距 (padding) 实例元素的内边距在边框和内容区之间.控制该区域最简单的属性是 padding 属性. CSS padding 属性定义元素边框与元素内容之间的空白区域.CSS 内边 ...
- CSS 内边距 padding 属性
CSS padding 属性定义元素边框与元素内容之间的空白区域. ㈠padding(填充) ⑴当元素的 padding(填充)内边距被清除时,所释放的区域将会受到元素背景颜色的填充. ⑵单独使用 p ...
- CSS 内边距 外边距
CSS 内边距 外边距 <html> <!-- style="margin: 0 auto" 将网页上方空白边距填满--> <body style=& ...
- CSS权威指南 - 内边距 边框 和 外边距
九十年代的完全用表格布局,简单的段落边框都需要用表格.CSS让布局更方便. 基本元素框 basic element boxes 如同第七章基本视觉格式化那一章讲到,每个文档元素会生成一个元素框,这个框 ...
- css内边距与外边距的区别
你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用 padding而不是margin?你知道负margin吗?你 ...
- CSS框模型(框模型概述、内边距、边框、外边距、外边距合并)
CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景. ...
- CSS——【元素内边距padding、元素外边距margin、元素边框border-width、元素大小width/height】与【元素显示大小】的关系
一.基本知识 padding:元素内边距,指的是元素内边框到元素中内容的距离. 用法: padding:长度|百分比 padding-top:长度|百分比 padding-bottom:长度|百分比 ...
- CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
随机推荐
- 基于Cocos2d-x学习OpenGL ES 2.0系列——编写自己的shader(2)
在上篇文章中,我给大家介绍了如何在Cocos2d-x里面绘制一个三角形,当时我们使用的是Cocos2d-x引擎自带的shader和一些辅助函数.在本文中,我将演示一下如何编写自己的shader,同时, ...
- 自定义 Core Data 迁移
本文转载至 http://objccn.io/issue-4-7/ 感谢本文作者 朱宏旭 的不啬分享 自定义 Core Data 迁移似乎是一个不太起眼的话题.苹果在这方面只提供了很少的文档,若是初次 ...
- thrift安装及使用
下载Thrift:http://thrift.apache.org/download ■ 将thrift-0.11.0.exe重命名为thrift.exe: ■ 解压thrift-0.11.0.tar ...
- Web服务器配置Gzip压缩提升网站性能
前言: HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术.大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度.这一般是指WWW服务器中安装的一个功能,当有人来访问这个服 ...
- LeetCode 80 Remove Duplicates from Sorted Array II(移除数组中出现两次以上的元素)
题目链接:https://leetcode.com/problems/remove-duplicates-from-sorted-array-ii/#/description 给定一个已经排好序的数组 ...
- mac下用户用户组命令行操作
使用mac的时候需要像linux一样对用户和群组进行操作,但是linux使用的gpasswd和usermod在mac上都不可以使用,mac使用dscl来对group和user操作. 查看用户组: ds ...
- Android 基于 Speex 的高度封装语音库,0 耦合,没三方jar包
作者:林冠宏 / 指尖下的幽灵 掘金:https://juejin.im/user/587f0dfe128fe100570ce2d8 博客:http://www.cnblogs.com/linguan ...
- Egret第三方库的制作和使用(模块化 第三方库)
一.第三方库的制作 官方教程:第三方库的使用方法 水友帖子:新版本第三方库制作细节5.1.x 首先在任意需要创建第三方库的地方,右键,选择"在此处打开命令窗口" 输入egret c ...
- MVC + ajaxform 文件上传
一.前端cshtml代码 <tr> <td width="130" align="right">添加附件:</td> @us ...
- srilm使用杂记
训练n-gram语言模型 ngram-count -text train.txt -order -lm model -kndiscount -interpolate -gt3min -gt4min 计 ...