margin  padding  border:

1.当属性值为0的时候,不需要在后面添加单位

2.当同时出现top margin以及bottom magin的时候,浏览器应用较大的哪一个

3.不能在行内元素的上下设置padding以及margin,只能够设置左右

但img标签是个例外

4.Css允许给任何元素设计圆角(从左上角开始,顺时针进行),但前提是该元素有背景色或者边框

5.圆角border-radius:x x x x(左上,右上,右下,左下);x x(左上角右下角,右上角左下角)

椭圆:border-radius:40px/20px(水平方向/垂直方向)

圆形:border-radius:40px

6.属性的前缀:适配不同的浏览器

-webkit- :chrome,Safari

-moz- :Firefox

-o- :Opera

-ms- :IE

7.box-shadow:水平偏移量     垂直偏移量      阴影半径     阴影颜色

还有两个可选项,insert-----第一个值(告诉浏览器将阴影画在方框内部)

spread----第四个值(添加一个阴影的尺寸)

8.修改浏览器计算元素的屏幕宽度以及高度:

box-sizing:border-box -----------------(IE7暂时不支持)会自动调整到适应不同设备的尺寸,当元素的宽度设定为50%的时候,该元素就会占据50%的空间,即使添加了border以及padding也一样

*{

-moz-box-sizing:border-box;

-webkit-box-sizing:border-box;

box-sizing:border-box;}

9.使用overflow属性控制溢出文本

visible:

scoll:添加滚动条,即使没有超出,滚动条也会出现

auto:滚动条是可选的,与scoll一样,只是它是在只有需要的时候才会出现

hidden:掩藏任何超出盒子的那部分内容

10.使用min-height:要使该元素至少达到某一高度值,如果里面的内容超出了这个高度,则浏览器会使整个元素变高

11.在浮动元素中,都应该设置元素的宽度

12.想让边框样式或者背景在遇到浮动元素的时候消失,则需要找到该样式,添加代码overflow:hidden

13.清除浮动:clear属性会指示元素不要包围浮动项目,清除浮动的时候,本质上是迫使它落到浮动项目的下方

14.如果只设置了body的背景色,则背景色会填充整个屏幕,但如果不仅body中设置了背景色,html中也设置了,则body的背景色只会填充内容

给网页添加图片:

1.background-attachment: scroll--------随文本一块滚动 ; background-attachment: fixed-----固定在一个位置上

CSS3-margin,padding,border的更多相关文章

  1. html,body { margin:0; padding:0;border:0}

    body,html /* 设置窗口DIV为浏览器大小*/ { margin:; padding:; height:100%; } 下面代码 <!DOCTYPE html> <html ...

  2. html/css 盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 (学习HTML过程中的小记录)

    html/css  盒子布局 Margin .Padding .border 以及 清除浮动的知识 (学习HTML过程中的小记录) 作者:王可利(Star·星星) width     是"宽 ...

  3. border,padding,margin盒模型理解

    安静的敲着键盘,已势不可挡的姿势逼近php,我想我是一个幸福的人,未来不可期,做好现在,偶尔写着自己能看懂的API,慢慢悠悠的回味一下前端基础知识. 本文盒模型理解. <!DOCTYPE htm ...

  4. 10-[CSS]-盒模型:border,padding,margin

    1.CSS盒子模型 HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型. 盒子模型通过四个边界来描述:margin(外边距),border(边框 ...

  5. 【CSS3】---盒模型margin、padding及border

    盒模型--边框 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 如下面代码为 div 来设置边框粗细为 2px.样式为实心的.颜色为红色的边框: div ...

  6. 奇怪的margin,padding,table

    为什么有的时候margin,padding不管用?写了float以后就管用了? 为什么table 不给width,就默认是100%,里面的td会平均分配teble的宽度,若你想给其中一些td宽度,剩下 ...

  7. margin、padding、border区分

    margin 是设置两个标签的间隔,也就是距离: padding 这个是比如一个p标签,它是100px*100px,我们使用的时候p标签的文字是贴着p标签的最左侧的,想要它的文字距离边界远一点,好看一 ...

  8. CSS3 3D转换——rotateX(),rotateY(),rotateZ()

    CSS3 允许使用 3D 转换来对元素进行格式化. ㈠浏览器支持 Internet Explorer 10 和 Firefox 支持 3D 转换. Chrome 和 Safari 需要前缀 -webk ...

  9. 利用sklearn对MNIST手写数据集开始一个简单的二分类判别器项目(在这个过程中学习关于模型性能的评价指标,如accuracy,precision,recall,混淆矩阵)

    .caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { border: 1px so ...

随机推荐

  1. 【linux】ps

    来源:http://blog.chinaunix.net/uid-25681671-id-3201927.html Linux下PS命令详解 要对系统中进程进行监测控制,查看状态,内存,CPU的使用情 ...

  2. ios 宏定义 系统版本 判定

    当需要判断iOS系统版本的时候,相信很多人都会这么干: #define SystemVersion [[UIDevice currentDevice] systemVersion].floatValu ...

  3. MyEclipse在线安装maven插件最新地址

    http://repository.sonatype.org/content/sites/forge-sites/m2e/0.10.0/S/20100209-0800/

  4. 模拟赛1030d1

    [问题描述]从1− ?中找一些数乘起来使得答案是一个完全平方数,求这个完全平方数最大可能是多少.[输入格式]第一行一个数字?.[输出格式]一行一个整数代表答案对100000007取模之后的答案.[样例 ...

  5. Maven 在sts不会自动下载包的问题

    1.查看maven配置setting.xml是否有设置远程仓库 2.sts是否正确配置指定了setting.xml 3.是否开启线上下载,如下图

  6. ios Push证书 转换步骤

    1.将aps_developer_identity.cer转换成aps_developer_identity.pem格式openssl x509 -in aps_developer_identity. ...

  7. 1 Ionic和Hybird应用介绍

    1.Ionic是什么,它和Angular.Cordova有什么关系? Ionic通过整合各种技术和功能使构建Hybird应用更加快速.容易和美观.Ionic生态系统基于Angular和Cordova, ...

  8. JavaScript基础——数据类型

    JavaScript使用数据类型来确定如何处理被分配给一个变量的数据.变量的类型决定了你可以对变量进行什么操作,如循环或者执行.下面描述了最常用的变量类型. 字符串(String):此数据类型将字符数 ...

  9. 【数据库】 Sqlserver 2008 error 40出现连接错误的解决方法

    经常要连接到远程数据库上,因此常常碰到这个错误,然后又屡次忘记解决方法,所以今天坐下笔迹,好下次能快速回忆起来. 一.首先检查数据库的TCP/TP是否启动 1.启动Sql server配置管理器 2. ...

  10. 无废话Android之activity的生命周期、activity的启动模式、activity横竖屏切换的生命周期、开启新的activity获取他的返回值、利用广播实现ip拨号、短信接收广播、短信监听器(6)

    1.activity的生命周期 这七个方法定义了Activity的完整生命周期.实现这些方法可以帮助我们监视其中的三个嵌套生命周期循环: (1)Activity的完整生命周期 自第一次调用onCrea ...