css盒子模型设置的缩略形式
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盒子模型设置的缩略形式的更多相关文章
- (5)css盒子模型(基础上)
CSS 盒子模型概述 ***什么是CSS的盒子模型呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content).边框(border).内边距(padding).外边距(margin ...
- 前端面试必备的css盒子模型
今天同学发给了我一份前端基础的面试题,第一道便是对css盒子模型的理解,我看到的第一眼想到的是div,然后就...懵逼了,知其然不知其所以然.所以打算写一写盒子模型的概念理解啥的,如有写的不当的地方, ...
- css盒子模型(box-sizing)
盒子模型 关于CSS重要的一个概念就是CSS盒子模型.它控制着页面这些元素的高度和宽度.盒子模型多少会让人产生一些困惑,尤其当涉及到高度和宽度计算的时候.真正盒子的宽度(在页面呈现出来的宽度)和高度, ...
- [HTML/CSS]盒子模型,块级元素和行内元素
目录 概述 盒子模型 块级元素 行内元素 可变元素 总结 概述 在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项 ...
- css盒子模型的深入理解,在块级、行内元素的区别和特性
css盒子模型用于处理元素的内容.内边距.边框和外边距的方式简称.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的 ...
- CSS 盒子模型(一)
CSS 盒子模型(一) 本人在校学生,主学后端,后来发现前端的基础都忘得差不多了才想着写文章回来复习!欢迎留言交流. 什么是盒子呢? 拿下举例,我们可以把每个红框都比作一个盒子,他们可以是任意的 HT ...
- 深入理解CSS盒子模型
在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...
- 每天学点前端——基础篇1:css盒子模型,绝对定位和相对定位
什么是css盒子模型(Box Model)? W3C中解释为:规定了元素框处理元素内容.内边距.边框和外边距的方式: MDN:文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性--比如 ...
- CSS 盒子模型概述
一.简介 CSS 盒子模型(元素框)由元素内容(content).内边距(padding).边框(border).外边距(margin)组成. 盒子模型,最里面的部分是实际内容:直接包围内 ...
随机推荐
- DOM 操作表格
操作表格<table>标签是 HTML 中结构最为复杂的一个,我们可以通过 DOM 来创建生成它,或者 HTML DOM 来操作它.(PS:HTML DOM 提供了更加方便快捷的方式来操作 ...
- 前端面试题:CSS实现水平垂直居中
这是一个挺常见的前端面试题,但是没有做过总结.有的时候可能会使用完了,很长一段时间不去使用,会慢慢忘记.所以,温故而知新,还是很有必要的. 一.绝对定位元素的居中实现 这一种工作中用的应该是最多的,兼 ...
- Change the environment variable for python code running
python程序运行中改变环境变量: Trying to change the way the loader works for a running Python is very tricky; pr ...
- HTTP通信安全和Web攻击技术
一.HTTPS,确保Web安全 在HTTP协议中可能存在信息窃听或身份伪装等安全问题,HTTP的不足: 通信使用明文(不加密),内容可能会被窃听 不验证通信方的身份,因此有可能遭遇伪装 无法证明报文 ...
- SpringCLoud之搭建Zuul网关集群
1.使用技术 Springboot,SpringCloud,Zuul,Nignx 2.目的 使用Zuul搭建微服务高可用的网关 3.项目创建 3.1 创建注册中心(略) 3.2 创建一个hello-s ...
- CentOS下安装Chrome浏览器
1. 下载安装脚本, 在下载目录中,执行以下命令,将安装脚本下载到本地 wget https://intoli.com/install-google-chrome.sh 2.然后授予可执行权限 chm ...
- FPGA设计中遇到的奇葩问题之“芯片也要看出身”
FPGA设计中遇到的奇葩问题之“芯片也要看出身”(一) 昨夜西风凋碧树.独上高楼,望尽天涯路 2000年的时候,做设计基本都是使用Xilinx公司的Virtex和Virtex-E系列芯片.那时候Alt ...
- Python全栈开发,Day2
一.Pycharm的使用 1.创建项目 2.python调整字体大小随ctrl+鼠标滚轮上下滚动 3.python新建程序自动补全编码和环境 4.设置断点(在代码前面行号后面单击鼠标左键) 5.调试断 ...
- 简述php标记符有哪些
<?php ?> 是PHP的解析符(长标记),所有需要运行的代码都要放到解析符中. 1 2 3 <?php echo "hello world"; ?> 短 ...
- Solr基本命令
启动Solr 安装Solr后,进入到Solr主目录中的bin文件夹,并使用以下命令启动Solr. [Hadoop@localhost ~]$ cd [Hadoop@localhost ~]$ cd S ...