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的更多相关文章

  1. margin padding border

    Difference between margin and padding? Remember these 3 points: The Margin is the extra space around ...

  2. css样式margin padding border

  3. CSS中的margin、border、padding区别

    CSS padding margin border属性详解 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来 ...

  4. 【转】图解CSS padding、margin、border属性

    http://www.cnblogs.com/linjiqin/p/3556497.html 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(b ...

  5. [html]CSS中的margin、border、padding区别

    图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. ...

  6. python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  7. css的padding,border,margin的意思

    下面的内边距(padding).边框(border) .外边距(margin)的意思是我自己的理解. 代码如下: <!DOCTYPE html> <html lang="e ...

  8. 盒模型大小取决于它的padding,margin,border数值

    盒模型规定了元素框处理元素内容width与height值.内边距padding.边框border 和 外边距margin 的数值大小.边框内的空白是内边距padding,边框外的空白是外边距margi ...

  9. padding/border与width的关系

    本文讲述 padding / border 的设置后是否对 width 有影响,width 等于 auto 与 100% 的区别 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边 ...

随机推荐

  1. MVC认知路【点点滴滴支离破碎】【三】----IIS7.5上部署MVC4.0

    发布web到iis不能运行Google   ----- ╲ http://stackoverflow.com/questions/12057540/installing-asp-net-mvc-4-o ...

  2. Android ListView 详解

    我做Android已经有一段时间了,想想之前在学习Android基础知识的时候看到了许许多多博主的博文 和许多的论坛.网站.那时候就非常感谢那些博主们能吧自己的知识分享在互联网上,那时候我就想 如果我 ...

  3. HTML5基础知识(3)--required属性

    1.required属性规定在提交之前要填写输入域(不能为空). 2.代码 <body> <form> 账号:<input type="text" r ...

  4. (01)javascript 数据类型

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. git将本地代码 和服务器git@osc 上的代码 关联

    将本地代码 和服务器git@osc 上的代码 关联 要使用git 首先,你得安装一个git 下载 http://git-scm.com/downloads 安装完成后,需要简单的配置一下,打开 Git ...

  6. js-处理金额(正则表达式)

    function checkRates(str){ var re = /^(([1-9][0-9]*\.[0-9][0-9]*)|([0]\.[0-9][0-9]*)|([1-9][0-9]*)|([ ...

  7. js学习笔记7----return,arguments及获取元素样式

    1.return:返回值 1)函数名+括号:fn() ===> return; 2) 所有函数默认返回值:undefind; 3) return后面所有的代码都不会执行; 2.arguments ...

  8. C++ 复制控制之复制构造函数

    7月26日更新: 过了这么长的时间回过头来看,发现文章中有几个点说错(用红字标出): 构造函数不是只有唯一一个参数,它也可以是多参数形式,其第二参数及后继以一个默认值供应. 不是没有声明复制控制函数时 ...

  9. js-FCC算法Smallest Common Multiple。找出两个参数和它们之间的连续数字的最小公倍数。

    存档. 找出能被两个给定参数和它们之间的连续数字整除的最小公倍数. function smallestCommons(arr) { //分解质因数法,分解为若干个质数相乘 var arrratio=[ ...

  10. Leetcode Move Zeros

    Given an array nums, write a function to move all 0's to the end of it while maintaining the relativ ...