学习笔记(盒子深入)

盒子尺寸构成
  • 一个盒子的宽度构成:
    左外边距 + 左边框宽 + 左内边距 + width值 + 右内边距 + 右边框宽 + 右外边距
  • 一个盒子的高度构成:
    上外边距 + 上边框宽 + 上内边距 + height值 + 下内边距 + 下边框宽 + 下外边距
margin外边距细化:

margin还可以细分为4个方向,每个方向都可以单独控制,如下:
margin-top: 上外边距
margin-right: 右。。。
margin-bottom:下。。。
margin-left: 左。。。
margin: 一个值; ——设置上,右,下,左4个方向均为该值;
margin:值1 值2; ——设置上下margin为值1,左右margin为值2;
margin:5px 10px; 表示上下margin是5px,左右margin是10px
margin:0 auto; 表示上下margin是0,左右margin是auto——auto对标准浏览器就解析为两边相等
margin:值1 值2 值3;——设置上margin为值1,左右margin为值2, 下margin为值3;
margin:值1 值2 值3 值4;——分别设置上,右,下,左4个方向的值;

padding内边距细化
  同上
border边框细化
  • 12个对边框线的控制属性

border-top-style: 顶部边框的线型。常见线型:solid , dashed, dotted
border-top-width: 顶部边框的线宽;
border-top-color: 顶部边框的线色;
border-right-style, border-right-width, border-right-color:。。。。。。。。。。。。。。。。。。。。。

  • 3个设置线的某方面特性的综合属性

border-style: 可以使用1-4个值,用来设置4个方向的线的线型,其规则同margin值的设置。
比如:border-style:solid dashed; 表示上下边框为实线,左右边框为虚线;
border-width: 同理,可以设置1-4个值,表示4个方向的线宽。
border-color:同理。

  • 4个设置每个方向边框的所有特性的综合属性

border-top: 线型 线宽 线颜色;
border-right: 线型 线宽 线颜色;
border-bottom: 线型 线宽 线颜色;
border-left: 线型 线宽 线颜色;

  • 一次性设置4个方向的3个特性

border: 线型 线宽 线颜色;

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1 92
  • 一、CSS(Cascading Style Sheet)层叠样式表 CSS优点 批量控制网页的外观 精确控制网页的...
    咸鱼有梦想呀阅读 435评论 0 3
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,038评论 1 4
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,866评论 0 6
  • 引言 这次给大家带来了CSS-盒子模型部分的笔记,大家一同交流😊 认识盒子模型之前,先来了解一下CSS元素的分类吧...
    zhaolion阅读 4,327评论 9 85