css记录
padding
padding-top是在绿色边框内,从顶部向下移20像素位置,默认padding-top 为0时,红色边框为20像素高,通过padding-top属性,为顶部增加了20像素,这时顶部为40像素高,最小为0,负数无效,因为他是内边距属性
padding-bottom:20px为底部向下增加20像素,通过调试工具可以看到颜色重合这部分则为增加的内边距,bottom向下增加底部边距上限非常大,3.35544e+7px
padding-left:20px 为从左边开始向右增加20px ,最小为0px,3.35544e+7px为上限
padding-right:20px为从右向左增加20px,最小为0px,3.35544e+7px为上限
<div style="background-color: green;height: 100px;">
<div style="height: 20px;background-color: red;padding-top: 20px">
</div>
</div>
<div style="height: 20px;background-color: #9B1C2E;padding: 20px">
如果只写padding
则会在红色框,会从上,右,下,左顺序在各边增加20像素
margin
margin-top:为向上及绿色边框上边框开始再向上增加20px像素,当减小到一定像素,这个绿色边框将会消失,最大增加上限3.35544e+7px
<div style="height: 20px;background-color: red;margin-top: 20px">
如果为边框增加border:1px 属性,那么改为margin-left,则是在绿色边框内,将红色内边框从左向右缩20像素,最大为绿色边框宽度,
margin-right则将红色内边框从右向左缩20像素
margin-bottom将红色内边框底部向绿色边框底部增加
css记录的更多相关文章
- 不常用但是很实用的css记录
本文主旨是记录一些不常用但是非常炫酷的css属性,提升用户体验的捷径之一. 1.background-attachment 滚动视差 https://codepen.io/Chokcoco/p ...
- 学习CSS记录:CSS文件引入到HTML中
1.直接写在标签元素中,通常称为行间样式.(优先级较高,有悖于结构与表现的分离,建议不使用) 例:<body style="background:red;"></ ...
- 学习CSS记录:选择符优先级
1.标有!important 关键字声明属性. 2.HTML中的CSS样式属性. 3.作者编辑的CSS文件模式属性. 4.用户设置的样式. 5.浏览器默认的样式. ------------------ ...
- CSS --记录
CSS3与文字渐变光影流动动画效果实现 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/word ...
- 小白学习css记录
一.复习 什么是CSS? 层叠样式表 -层叠样式只会被覆盖而不会被替代 CSS的使用方式 style属性---> <h1 style="css属性"></h ...
- keyup实现在输入状态不发送搜索请求,停止输入后发送
个人需求:通过keyup事件配合后台elasticsearch(弹性搜索),用户在输入状态不发送请求,等停止输入后发送请求. 这是个思考笔记,因为项目临时需要弹性搜索功能,所以临时想了这么个法子,方法 ...
- uni-app学习(二)
1. uni-app学习(二) 1.1. 好用css记录 一定透明度的背景色background: rgba(255,255,255,.6); 1.2. 好用的代码段 store(用户登录) expo ...
- HTML-T
a标签跳转 <a href="new_link" target="_blank">在新建页面打开链接</a>. <a href=& ...
- CodeForces 隐藏标签
设置css 记录. 以防忘记.
随机推荐
- SpringMVC Controller介绍
SpringMVC Controller 介绍 一.简介 在SpringMVC 中,控制器Controller 负责处理由DispatcherServlet 分发的请求,它把用户请求的数据经过业务处理 ...
- 安装rabbitmq
安装配置epel源 $ rpm -ivh http://dl.fedoraproject.org/pub/epel/6/i386/epel-release-6-8.noarch.rpm 安装erlan ...
- 将字符串转换成JSON对象
import net.sf.json.*; JSONObject jsStr = JSONObject.fromObject(params); //将字符串{"id":1} int ...
- sql server 2008 数据的行转列
create table tb(id int, value varchar(10)) insert into tb values(1,'aa') insert into tb values(1,'bb ...
- MySql: show databases/tables use database desc table
1. show databases mysql> show databases;+--------------------+| Database |+--------------------+| ...
- MySQL MHA 搭建&测试
一:背景介绍 MHA(Master HA)是一款开源的MySQL的高可用工具,能在MySQL主从复制的基础上,实现自动化主服务器故障转移.虽然MHA试图从宕机的主服务器上保存二进制日志,但并不是总是可 ...
- 【原创】js中input type=file的一些问题
1.介绍 在开发中,文件上传必不可少,input[type=file] 是常用的上传标签,但是它长得又丑.浏览的字样不能换,但是他长得到底有多丑呢.我们来看看在不同浏览器里的样子吧. <inpu ...
- C#中将DataTable转成List
学习MVC的时候,使用List<T>来存储数据给前台,但是从数据库中直接读取得到的是DataTable,虽然可以直接循环DataTable来得到list,但是如果每个实体类都通过这样的得到 ...
- imageNamed和imageWithContentsOfFile区别
在 Apple 官方帮助文档提供了两个加载图片的方法 imageNamed , 其参数为图片的名字 imageWithContentsOfFile , 其参数是图片文件的路径 下面主要是说一下他们的区 ...
- web前端学习部落22群 明白何谓Margin Collapse
明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较 ...