CSS的基础样式

  • border 边框

复合写法

border:border-width  border-style border-color;

border-width:边框宽度 top right bottom left

border-style:边框样式  solid实线 dashed虚线 dotted 点线(点线IE6无法识别)

border-color:边框颜色/英文单词/十六进制/RGB

border-radius 圆角

border:transparent透明(可以写在复合写法里)

边框并不是一条直线,而是三角形。

  • padding 内边距,内填充

padding-top上内边距 padding-right右内边距

padding-bottom下内边距 padding-left左内边距 (顺序:上右下左   顺时针)

padding复合写法

padding:10px; 只写一个值表示:上右下左都是10px;

padding:10px 20px; 两个值:第一个值代表上下   第二个值代表左右

padding:10px 20px 30px; 三个值:第一个值代表上 第二个值代表左右 第三个值代表下

padding:10px 20px 30px 40px; 四个值:第一个值代表上 第二个值代表右 第三个值代表下 第四个值代表左

  • margin 外边距

margin-top上内边距 margin-right右内边距

margin-bottom下内边距 margin-left左内边距 (顺序:上右下左   顺时针)

其他如padding 一致

标签的嵌套 确定父子级关系

  • margin的例外

  1.第一个自己的margin-top会在特定的情况下穿透父级

规避方法:

① 给父级加边框

② 给父级加overflow:hidden;(溢出隐藏)

③ 不要用margin-top,父级的padding-top代替

  2.兄弟关系的margin-top和margin-bottom会叠压

规避方法:只设置一个 top或 bottom

最新文章

  1. ElasticSearch第四步-查询详解
  2. JavaWeb-springMVC
  3. FIleText转换为JSONObject对象
  4. [Tool] WireShark基本使用
  5. CentOS 7安装Gnome GUI 图形界面
  6. *[codility]Peaks
  7. iphone编程,使用代码结束程序
  8. 网络NSURLSession
  9. class 类(2)
  10. ubuntu下一个rootusername入口mysql,如何查看username和password,如何改变rootpassword
  11. 两个数组各个数相加或相乘变成一个矩阵求第K大
  12. 强行在MFC窗体中渲染Cocos2d-x 3.6
  13. 环境搭建 - Java(Windows)
  14. Java 中 Equals和==的区别(转)
  15. LVS简单介绍
  16. Python linux 上的管理工具 pyenv 安装, pip 使用, python项目(版本分割, 项目分割, 虚拟环境创建)
  17. boostrap小图标
  18. 在Linux下判断系统当前是否开启了超线程
  19. 微信小程序navigator跳转失效
  20. [剑指Offer] 54.字符流中的第一个不重复的字符

热门文章

  1. MySql 执行计划解读
  2. 【CV论文阅读】Faster R-CNN: Towards Real-Time Object Detection with Region Proposal Networks
  3. ZOJ 题目2859 Matrix Searching(二维RMQ)
  4. [React Native] Prevent the On-screen Keyboard from Covering up Text Inputs
  5. OC中APPDelegate[[UIApplication shareApplication]delegate]]Swift实现
  6. Shine.js实现动态阴影效果
  7. kettle_删除“共享输出表”引发的错误
  8. HDFS02
  9. ALSA声卡驱动中的DAPM详解之三:如何定义各种widget
  10. webview 播放H5视频问题 黑屏 只有声音没有画面