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. java中的几种单例模式

    目前比较常见的有4种(DCL为懒汉模式的线程安全版本). 单例模式的实现一般需要满足以下条件: 1.构造方法私有化,实例属性私有化. 2.必须仅在类的内部完成实例的初始化过程. 3.提供公共静态方法, ...

  2. 利用python模拟鼠标点击自动完成工作,提升你的工作效率!

    没有什么能比学以致用让学习变得更有动力的了. 不知道大家在工作中有没有一些工作需要重复的点击鼠标,因为会影响到财务统计报表的关系,我们每个月底月初都要修改ERP中的单据日期,单据多的时候光修改就能让你 ...

  3. Acwing198 反素数

    原题面:https://www.acwing.com/problem/content/200/ 题目大意:对于任何正整数x,其约数的个数记作g(x),例如g(1)=1.g(6)=4.如果某个正整数x满 ...

  4. Nature

    1.主干 (1)<河图+洛书>:启发伏羲作八卦. (2)<三坟+五典>:失传:伏羲.神农.轩辕.少昊.颛顼.帝喾.唐尧.虞舜. (3)<八索+九丘>:失传:八卦之书 ...

  5. (转)让一个进程启动时Windbg自动Attach上去

    如何让一个进程启动时Windbg自动Attach上去 以IE为例:需要在注册表中创建一项HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\Current ...

  6. Html5 经验

    http://knockoutjs.com/documentation/introduction.html knockout的模式 MVVM 四大重要概念 声明式绑定UI界面自动刷新依赖跟踪模版 一些 ...

  7. asp.net mvc3用file上传文件大小限制问题

    在Windows2008下,如果上传比较大的文件,可能会出现404错误,(请求筛选模块被配置为拒绝超过请求内容长度的请求). 可通过如下方法解决: 打开URTracker根目录下的web.config ...

  8. Linux gcc(ar命令)打包库到另一个库中的另外一种方法

    最近的项目中需要在Libcurl写一个wrapper,最好的办法是把我的wrapper和libcurl包在一起,做一个新的静态库 但是很遗憾,直接用以下命令产生的libmywrapper.a 是不能用 ...

  9. 【收藏】收集的各种Python爬虫、暗网爬虫、豆瓣爬虫、抖音爬虫 Github1万+星

    收集的各种Python爬虫.暗网爬虫.豆瓣爬虫  Github 1万+星 磁力搜索网站2020/01/07更新 https://www.cnblogs.com/cilisousuo/p/1209954 ...

  10. 一百零九、SAP的OO-ALV之三,屏幕绘制器的使用

    一.在Screen页面,点击格式,会打开屏幕绘制器 二.点击定制控制,和PS一样画出一个显示区域的画布容器 三.双击之后,在弹出的属性页面写入一个名字,保存 四.激活屏幕后关闭 五.关闭屏幕绘制器之后 ...