CSS3-margin,padding,border
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的更多相关文章
- html,body { margin:0; padding:0;border:0}
body,html /* 设置窗口DIV为浏览器大小*/ { margin:; padding:; height:100%; } 下面代码 <!DOCTYPE html> <html ...
- html/css 盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 (学习HTML过程中的小记录)
html/css 盒子布局 Margin .Padding .border 以及 清除浮动的知识 (学习HTML过程中的小记录) 作者:王可利(Star·星星) width 是"宽 ...
- border,padding,margin盒模型理解
安静的敲着键盘,已势不可挡的姿势逼近php,我想我是一个幸福的人,未来不可期,做好现在,偶尔写着自己能看懂的API,慢慢悠悠的回味一下前端基础知识. 本文盒模型理解. <!DOCTYPE htm ...
- 10-[CSS]-盒模型:border,padding,margin
1.CSS盒子模型 HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型. 盒子模型通过四个边界来描述:margin(外边距),border(边框 ...
- 【CSS3】---盒模型margin、padding及border
盒模型--边框 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 如下面代码为 div 来设置边框粗细为 2px.样式为实心的.颜色为红色的边框: div ...
- 奇怪的margin,padding,table
为什么有的时候margin,padding不管用?写了float以后就管用了? 为什么table 不给width,就默认是100%,里面的td会平均分配teble的宽度,若你想给其中一些td宽度,剩下 ...
- margin、padding、border区分
margin 是设置两个标签的间隔,也就是距离: padding 这个是比如一个p标签,它是100px*100px,我们使用的时候p标签的文字是贴着p标签的最左侧的,想要它的文字距离边界远一点,好看一 ...
- CSS3 3D转换——rotateX(),rotateY(),rotateZ()
CSS3 允许使用 3D 转换来对元素进行格式化. ㈠浏览器支持 Internet Explorer 10 和 Firefox 支持 3D 转换. Chrome 和 Safari 需要前缀 -webk ...
- 利用sklearn对MNIST手写数据集开始一个简单的二分类判别器项目(在这个过程中学习关于模型性能的评价指标,如accuracy,precision,recall,混淆矩阵)
.caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { border: 1px so ...
随机推荐
- ios调用c#后台接口报文格式
- NSString *soapMessage = - [NSString stringWithFormat: - @"<?xml version=\"1.0\" ...
- 【leetcode】Climbing Stairs (easy)
You are climbing a stair case. It takes n steps to reach to the top. Each time you can either climb ...
- 在微信浏览器中如何让他自动关闭当前页面回到会话框js
<script type="text/javascript"> wx.config(jssdkconfig); require(['jquery', 'util'], ...
- 3ds max 分离对象
转换为可编辑面片,将编辑环境设置为以下状态: 选中所需面片,分离
- 解决eclipse中maven web工程打包成war(发布到tomcar)时lib中没有jar包的解决方法
可能有两个原因:1.maven中某些jar包下载不下来 从其他地方下载jar文件放到相应maven本地库的.m2里2..classpath文件中缺少(下面代码的作用是制定maven的jar发布路径)& ...
- 直接放个DB2 SQL STATEMENT大全好了!
SQL statements This topic contains tables that list the SQL statements classified by type. SQL sch ...
- myeclipse 8.5 注册码
刚才启动突然发现MyEclipse原来是收费的...汗一把,到弹出注册框我才知道.....老天啊我活的该有多窝囊.. 弹框很烦人,我一个穷书生既想继续学习又囊中羞涩无力购买,只好用盗版了(找个理由辩解 ...
- Clr Via C#读书笔记---CLR寄宿和应用程序域
#1 CLR寄宿: 开发CLR时,Microsoft实际是将他实现成包含在一个dll中的COM服务器.Microsoft为CLR定义了一个标准的COM接口,并为该接口和COM服务器分配了GUID.安装 ...
- 设计模式学习之观察者模式(Observer,行为型模式)(7)
1.观察者模式又叫做发布-订阅模式. 2.观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象.这个主题对象在状态发生变化时,会通知所有观察者对象,使它们能够自动更新自己. 3 ...
- Power BI for Office 365介绍
微软在七月份发布了一个新产品,它建立在微软的云的第一个数据平台- Power BI for Office 365.Satya Nadella,服务器和工具业务总裁,在当天的上午在微软的年度全球合作伙伴 ...