border 边框
复合写法 border:border-width border-style border-color;

border-width 边框宽度
border-style 边框样式:solid实线 dashed虚线 dotted点线 (点线 IE6不认)
border-color 边框颜色:英文单词/十六进制/rgb

border-width还能再细分为
boder-top-width border-right-width
border-bottom-width border-left-width

当宽高为0px时,边框均等100px,会构成四个三角形拼成的正方形;
之上添加 border-radius:50%; 会构成四个三角形拼成的圆形;

transparent 透明
可以把颜色设置成透明

padding设置内边距(或者叫内填充)
padding-top
padding-right
padding-bottom
padding-left

padding复合写法:
一个值指定上右下左都是这个值
两个值指定上下、左右
三个值指定 上 左右 下
四个值指定 上 右 下 左
(四个值简记为顺时针的顺序)

div标签的占地面积宽高等于
(width+border+padding)x(height+border+padding)
边框border 内填充padding都是具有占地面积的

margin 外边距(分上右下左);
复合写法:与padding一样意思;

标签的嵌套:确定父子级关系,
1.第一个子级的margin-top会在特定的情况下穿透父级(穿透父级指的是它直接对父级生效,带着父级一起在上方形成边距);
规避方法:(1)给父级加边框;
(2)给父级加overflow:hidden;
(3)用父级的padding-top代替子级的margin-top;

2.兄弟关系的margin-top和margin-bottom会叠在一起导致重叠;
解决方式:兄弟之间的margin-top 和margin-bottom无法避免,只能将其中一个设置成两者之和来加以修正

css 的基础样式--border--padding--margin的更多相关文章

  1. 一、CSS的基础样式

    CSS的基础样式 border 边框 复合写法 border:border-width  border-style border-color: border-width:边框宽度 top right ...

  2. Uint 5.css继承权重,盒模型和border padding

    一 .css的继承性和权重 1.1 继承性:继承是CSS的一个主要特征,它是依赖于祖先-后代的关系的.继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代. 可以被继承的属性有 ...

  3. Html 常见标签,css基础样式,css的浮动和清流,浏览器的兼容

    1.html模板<!DOCTYPE html><html><head> <meta charset="UTF-8"> <tit ...

  4. CSS盒子模型中的Padding属性

    CSS padding 属性 CSS padding 属性定义元素边框与元素内容之间的空白区域,不可见.如果想调整盒子的大小可以调整内容区,内边距,边框. CSS padding 属性定义元素的内边距 ...

  5. 【转】图解CSS的padding,margin,border属性(详细介绍及举例说明)

    W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).边框距(p ...

  6. [转]图解CSS的padding,margin,border属性(详细介绍及举例说明)

    图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...

  7. 图解CSS的padding,margin,border属性(详细介绍及举例说明)

    图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...

  8. css之display样式,padding,margin

    1. 块级标签变成行内标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  9. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

随机推荐

  1. HTML中用自定义字体实现小图标icon(不是原作, 只是一个研究笔记)

    最近在做一个项目时, 研究了一下新浪微博的前端, 看到首页中那个图标了吗, 以前看到这类效果的第一反应就是用一个gif之类的图标做出来!! 但在研究的过程, 发现了一个小技巧, 注意那个em标签中的文 ...

  2. C# enable为false时不变颜色

            [System.Runtime.InteropServices.DllImport("user32.dll ")]         public static ex ...

  3. Google的搜索API的Delphi封装

    这个东西实现了已经有一段时间了,那个时候谷歌还没有退出中国内地呢!而现在呢,谷歌都退了有一些日子了!紧以此纪念一番! 话说谷歌API,我相信很多人应该都知道!不晓得在实际应用中,用的人多不多(我说的不 ...

  4. H5页面单点登录跳回首页 http url参数转义

    在往首页跳的时候因为是单点登录进来的,url后面会带有参数,然后存入会话,所以我要拿到原本存入会话的参数放入url后面 但是返回的时候页面报错了 http://localhost:18086/h5ap ...

  5. windows中的运行命令

    首先按“开始”-“运行”,或按WIN键+R,进入『运行』窗口. 下面是常用的运行命令 (按英文字符顺序排列) appwize.cpl----添加.删除程序 access.cpl-----辅助功能选项 ...

  6. UVA - 211 The Domino Effect(多米诺效应)(dfs回溯)

    题意:根据多米诺骨牌的编号的7*8矩阵,每个点可以和相邻的点组成的骨牌对应一个编号,问能形成多少种由编号组成的图. 分析:dfs,组成的图必须有1~28所有编号. #pragma comment(li ...

  7. 51nod 1439:互质对 容斥原理

    1439 互质对 题目来源: CodeForces 基准时间限制:2 秒 空间限制:131072 KB 分值: 160 难度:6级算法题  收藏  取消关注 有n个数字,a[1],a[2],-,a[n ...

  8. 在spark udf中读取hdfs上的文件

    某些场景下,我们在写UDF实现业务逻辑时候,可能需要去读取某个文件. 我们可以将此文件上传个hdfs某个路径下,然后通过hdfs api读取该文件,但是需要注意: UDF中读取文件部分最好放在静态代码 ...

  9. Docker Python 例子

    版权所有,未经许可,禁止转载 章节 Docker 介绍 Docker 和虚拟机的区别 Docker 安装 Docker Hub Docker 镜像(image) Docker 容器(container ...

  10. .NET via C#笔记17——委托

    一.委托的内部实现 C#中的委托是一种类型安全的回调函数,假设有这样一个委托: internal delegate void Feedback(int value); 编译器会生成一个类: inter ...