css里面的盒子模型里面设置padding,margin的上下或者左右的大小有很多方式,下面说说两种不同的方式:

original method:

padding-top:0px
padding-right:20px
padding-bottom:30px
padding-left:10px

new method:

padding:0px 20px 30px 10px
// top right bottom left respectively

同理:

margin-top:0px
margin-right:20px
margin-bottom:30px
margin-left:10px
margin:0px 20px 30px 10px

如果上下左右的值都是一样的话,那我们可以这样设置:

the old method:

padding-top:20px
padding-right:20px
padding-bottom:20px
padding-left:20px

the new method:

padding:20px

如果上下值和左右值分别一样呢:

the old method:

margin-top:0px
margin-right:20px
margin-bottom:0px
margin-left:20px

the new method

margin:0px 20px
// top and bottom right and left respectively

border的属性设置:

the old method

border-width:thin
border-style:solid
boder-color black

the new method:

border:thin solid black
//width style color respectively

border的属性设置更加灵活多变:

boder:solid thin black
border:blcak solid thin
border:solid
boder:blcak solid

还有很多其他的简写方式,我就不一一阐述了。

css盒子模型设置的缩略形式的更多相关文章

  1. (5)css盒子模型(基础上)

    CSS 盒子模型概述 ***什么是CSS的盒子模型呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content).边框(border).内边距(padding).外边距(margin ...

  2. 前端面试必备的css盒子模型

    今天同学发给了我一份前端基础的面试题,第一道便是对css盒子模型的理解,我看到的第一眼想到的是div,然后就...懵逼了,知其然不知其所以然.所以打算写一写盒子模型的概念理解啥的,如有写的不当的地方, ...

  3. css盒子模型(box-sizing)

    盒子模型 关于CSS重要的一个概念就是CSS盒子模型.它控制着页面这些元素的高度和宽度.盒子模型多少会让人产生一些困惑,尤其当涉及到高度和宽度计算的时候.真正盒子的宽度(在页面呈现出来的宽度)和高度, ...

  4. [HTML/CSS]盒子模型,块级元素和行内元素

    目录 概述 盒子模型 块级元素 行内元素 可变元素 总结 概述 在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项 ...

  5. css盒子模型的深入理解,在块级、行内元素的区别和特性

    css盒子模型用于处理元素的内容.内边距.边框和外边距的方式简称.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的 ...

  6. CSS 盒子模型(一)

    CSS 盒子模型(一) 本人在校学生,主学后端,后来发现前端的基础都忘得差不多了才想着写文章回来复习!欢迎留言交流. 什么是盒子呢? 拿下举例,我们可以把每个红框都比作一个盒子,他们可以是任意的 HT ...

  7. 深入理解CSS盒子模型

    在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...

  8. 每天学点前端——基础篇1:css盒子模型,绝对定位和相对定位

    什么是css盒子模型(Box Model)? W3C中解释为:规定了元素框处理元素内容.内边距.边框和外边距的方式: MDN:文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性--比如 ...

  9. CSS 盒子模型概述

    一.简介   CSS 盒子模型(元素框)由元素内容(content).内边距(padding).边框(border).外边距(margin)组成.     盒子模型,最里面的部分是实际内容:直接包围内 ...

随机推荐

  1. 23飞机大战__pygame 快速入门

      1. 使用 pygame 创建图形窗口 小节目标 游戏的初始化和退出 理解游戏中的坐标系 创建游戏主窗口 简单的游戏循环 可以将图片素材 绘制 到 游戏的窗口 上, 开发游戏之前需要先知道 如何建 ...

  2. sass @import 规则

    @import 根据文件名引入. 默认情况下,它会寻找 Sass 文件并直接引入, 但是,在少数几种情况下,它会被编译成 CSS 的 @import 规则: 如果文件的扩展名是 .css. 如果文件名 ...

  3. join优化

    1.left outer join先执行连接操作,再将结果通过WHERE语句进行过滤 select s.ymd,s.symbol,s.price_close,d.dividend from stock ...

  4. re模块 时间模块

    # 正则模块'''正则就是用一些具有特殊含义的符号组合到一起用来描述字符或字符串的方法或者说,正则就是用来描述一类事物的规则它内嵌在python中,并通过re模块实现正则表达式模式被编译成一系列的字节 ...

  5. URL编码表

    url编码是一种浏览器用来打包表单输入的格式. 定义 url编码是一种浏览器用来打包表单输入的格式.浏览器从表单中获取所有的name和其中的值 ,将它们以name/value参数编码(移去那些不能传送 ...

  6. CodeChef Max-digit Tree(动态规划)

    传送门. 题解: 最主要的问题是如何判断一个数是否合法,这就需要发现性质了. 这个状态划分还是不太容易想到, 每次加的数\(∈[0,k)\),也就是个位一直在变变变,更高的位每次都是加一,这启发我们状 ...

  7. 【HDOJ6645】Stay Real(堆)

    题意:给定一个n个点的堆,每个点有一个值a[i],每个点必须将在其所有儿子被取之后才能被取 有两个人都按最佳策略行动,问结束之后两人分别取的值之和 n<=1e5,1<=a[i]<=1 ...

  8. InputStream类的available()方法

    InputStream类的available()方法 这个方法可以在读写操作前先得知数据流里有多少个字节可以读取需要注意的是,如果这个方法用在从本地文件读取数据时,一般不会遇到问题,但如果是用于网络操 ...

  9. [CSS]CSS浮动塌陷及解决办法

    一. CSS浮动 先看一个例子 <html !DOCTYPE> <head> <title>HTML2</title> <style> .d ...

  10. 关于JS的面向对象的思考和总结

    面向对象编程的概念和原理 1.面向对象编程是什么 它是用抽象的方式创建基于现实世界模型的编程模式(将数据和程序指令组合到对象中) 2.面向对象编程的目的 在编程中促进更好的灵活性和可维护性,在大型软件 ...