css007 margin padding border
css007 margin padding border
1、理解盒模型(盒模型:就是把一些东西,包括html各种标签都包含在一个
看不见的盒子里)
1/在web浏览器中任何标签都是一个盒子,内容的周围环绕着装饰盒子的不同属性
Pad ding:内容和其框线之间的距离
Margin:一个标签和另一个标签之间的距离
Border:盒子周边的直线
Background-color:填充边框内部空间的间隔
2、用margin和padding控制空间 (margin控制盒子外部和其他元素之间的空间;
padding控制盒子里面内容到盒子的距离,在一般浏览器都会有默认的行距或者各种缩进距离。一般要用margin和padding清零。Margin和padding后面可以跟1到4个值,如果是两个值的话,分别代表上下 和 左右。一般的顺序是:上右下左(顺序一定不能搞乱了)。可以指定方向,比如margin-top)
1、margin和padding都是在内容的周围添加空间。
2、边距冲突:当margin-bottom 遇到(冲突)下面一个元素的margin-top时,浏览器是应用他们之间比较大的那个(只应用一个,不是两个相加)
3、可以用margin的负值消除不必要的空隙(margin是比较少数可以用负值的一个css属性。Padding一定要用正值)
4、行内盒子,块级盒子及其其他显示设置:css有两种不同的盒子:块级盒子(block box) 行内盒子(inline box)
5、Display属性可以改变盒子的属性:display:block/inline/inline-block;
3、添加边框(border属性。例如:border:1px solid #fff;代表画一个1像素,
颜色为黑色的边框。Border的上下左右和margin、padding用法一样在实践1中的吧PDF转变成html中有多处用到border来代替<div>标签,这样可以省掉一些代码开销和时间开销。比如友情链接的绿色边框线的叠加。页脚浅绿色图层的叠加)
1、Border 属性的块级设置方法:border:1px solid #fff;
2、单独格式化各条边框:例如:border-top:1px solid red;
3、可以用none隐藏某一条边框:如
border:1px solid red;
border-top:none; (两条代码代表画一个没有顶的边框)
4、还可以对每条边框定义颜色,宽度,样式:(可以对一个盒子设置两条下边框吗?有没有办法让后面设置的css样式不覆盖前面设置的样式??)
如:border-width:20px;
border-style:double;
border-color:red;
可以对边框设置不同的颜色:如
border:2px dashed
border-color:red yellow blue black;
4、设置背景色(background-color)
background-color:red;/#f00; /rgb(255,0,0);
5、创建圆角(单词忘了怎么写了。。)
Border-radius:20px;(后面跟的值如果是四个代表的位置(从左上顺时针))
6、添加阴影(text-shadow,上一个章节刚刚学到的,例如:
text-shadow:5px 9px 2px #fff;其中第一个值代表水平方向:正值在右。第二个值代表垂直方向,正值在下 。第三个值代表模糊度,值越大越模糊,第四个值 代表颜色。)(问题:第三个值可以是负的吗?)
(上一节是文本的,这一节是盒子的)
border-shadow后面跟的值和上一节中的text-shadow用法一样
有两个可选的值:inset (嵌入式阴影) spead(外部阴影)
border:inset 3px 4px 5px red;
7、确定高度和宽度 (height 和 width 不是继承的属性,但是后面的值可以填上inherit 代表继承父类的宽高。一般border的使用都会配合宽高,这样才能画出一个正常的 形状出来)
1、box-sizing属性跳帧盒子的宽度
box-sizing:content-box;/padding-box;/border-box;
2、用overflow属性控制溢出文本
Overflow:visible;/scroll;/auto;/hidden;
3、宽度的最小化和最大化
max-width
max-height
min-width
min-width
8、用浮动元素包围内容(float:left/right; 浮动是的样式更加多样,在浮动后
记得清除浮动,不然会影响接下来的html内容,啥问题都会出现,可怕了,实践1的那个pdf转化为html中,就是没有清楚浮动,一堆问题调了好久。清除浮动:可以 在浮动结束后写:overfloat:hidden;也可以在接下来的内容中写:clear:left/right/both;)
1、背景和边框是不能浮动的。。。
2、clear:none;完全关闭清楚属性
注:蓝色为看目录是自己根据之前知识表达出来的,黑色为看书后补充或者修改。红色为看完该知识点后产生的问题。
css007 margin padding border的更多相关文章
- margin padding border
Difference between margin and padding? Remember these 3 points: The Margin is the extra space around ...
- css样式margin padding border
- CSS中的margin、border、padding区别
CSS padding margin border属性详解 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来 ...
- 【转】图解CSS padding、margin、border属性
http://www.cnblogs.com/linjiqin/p/3556497.html 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(b ...
- [html]CSS中的margin、border、padding区别
图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. ...
- python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- css的padding,border,margin的意思
下面的内边距(padding).边框(border) .外边距(margin)的意思是我自己的理解. 代码如下: <!DOCTYPE html> <html lang="e ...
- 盒模型大小取决于它的padding,margin,border数值
盒模型规定了元素框处理元素内容width与height值.内边距padding.边框border 和 外边距margin 的数值大小.边框内的空白是内边距padding,边框外的空白是外边距margi ...
- padding/border与width的关系
本文讲述 padding / border 的设置后是否对 width 有影响,width 等于 auto 与 100% 的区别 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边 ...
随机推荐
- MVC认知路【点点滴滴支离破碎】【三】----IIS7.5上部署MVC4.0
发布web到iis不能运行Google ----- ╲ http://stackoverflow.com/questions/12057540/installing-asp-net-mvc-4-o ...
- Android ListView 详解
我做Android已经有一段时间了,想想之前在学习Android基础知识的时候看到了许许多多博主的博文 和许多的论坛.网站.那时候就非常感谢那些博主们能吧自己的知识分享在互联网上,那时候我就想 如果我 ...
- HTML5基础知识(3)--required属性
1.required属性规定在提交之前要填写输入域(不能为空). 2.代码 <body> <form> 账号:<input type="text" r ...
- (01)javascript 数据类型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- git将本地代码 和服务器git@osc 上的代码 关联
将本地代码 和服务器git@osc 上的代码 关联 要使用git 首先,你得安装一个git 下载 http://git-scm.com/downloads 安装完成后,需要简单的配置一下,打开 Git ...
- js-处理金额(正则表达式)
function checkRates(str){ var re = /^(([1-9][0-9]*\.[0-9][0-9]*)|([0]\.[0-9][0-9]*)|([1-9][0-9]*)|([ ...
- js学习笔记7----return,arguments及获取元素样式
1.return:返回值 1)函数名+括号:fn() ===> return; 2) 所有函数默认返回值:undefind; 3) return后面所有的代码都不会执行; 2.arguments ...
- C++ 复制控制之复制构造函数
7月26日更新: 过了这么长的时间回过头来看,发现文章中有几个点说错(用红字标出): 构造函数不是只有唯一一个参数,它也可以是多参数形式,其第二参数及后继以一个默认值供应. 不是没有声明复制控制函数时 ...
- js-FCC算法Smallest Common Multiple。找出两个参数和它们之间的连续数字的最小公倍数。
存档. 找出能被两个给定参数和它们之间的连续数字整除的最小公倍数. function smallestCommons(arr) { //分解质因数法,分解为若干个质数相乘 var arrratio=[ ...
- Leetcode Move Zeros
Given an array nums, write a function to move all 0's to the end of it while maintaining the relativ ...