CSS学习笔记(六)

边框

一、格式:

  • 1、同时设置四条边 :border 宽度 样式 颜色
    注意点:颜色可以省略 宽度也可以省略 样式不可以省略

  • 2、四条边连写
    border-width :上 右 下 左
    border-style :上 右 下 左
    border-color :上 右 下 左
    注意点:
    顺时针赋值 上右下左
    省略时的规律
    省略左边 :和右边一致
    省略下左 : 和对边一致
    省略三边 和设置的一边一致

二、内边距

padding 边框内容之间的距离就是内边距
写法 和 边框 一致

三、外边距

margin
<b>外边距在垂直方向合并</b>

四、盒子模型

  • html中所有的标签都是盒子
  • css3中新增了一个 box-sizing属性:能够保证盒子元素的宽高不变
  • box-sizing的取值:
    content-box : 元素的宽高 = 边框 + 内边距 + 内容宽高
    border-box : 元素的宽高会恒等于 width 和 height

<strong>注意点:</strong>

  • 1、如果两个盒子是嵌套关系 那么设置了里面一个盒子顶部的外边距,外面一个盒子也会被顶下来
  • 2、如果外面的盒子不不想被一起顶下来,那么外面的盒子添加一个边框属性
  • 3、企业开发中,需要控制嵌套关系盒子之间的距离,应该首先考虑padding

行高和字号

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 盒模型 什么是CSS盒模型? CSS盒模型仅仅是一个形象的比喻, HTML中的标签都是盒模型 CSS盒模型指那些可...
    Jackson_yee_阅读 353评论 0 0
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,901评论 0 6
  • 盒模型 边框属性 什么边框? 边框就是环绕在标签宽度和高度周围的线条 边框属性的格式 连写(同时设置四条边) bo...
    极客江南阅读 10,035评论 12 74
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,842评论 1 92
  • 我们生活当中每天都会发生各种各样的小事。如果用心去发现的话,仔细想一下也非常的有意思。 (1)一个人的幸福 暑假两...
    守望小确幸阅读 589评论 5 8