• 欢迎光临~

CSS笔记 - 03 盒模型

开发技术 开发技术 2022-10-12 次浏览

3. 盒模型

  • CSS将页面中的所有元素都设置为一个矩形的盒子,对页面的布局就相当于将不同的盒子摆放到不同的位置。

  • 盒模型组成部分:

    • 内容区(content)
    • 内边距(padding)
    • 边框(border)
    • 外边距(margin)

3.1 内容区

  • 元素中的所有子元素和文本内容都在内容区中排列

3.2 边框

  • 边框处于盒子边缘,是盒子内部和外部的分界线。边框的大小会影响到整个盒子的大小

  • 边框的常用属性:

    • 边框的宽度 border-width

    • 边框的颜色 border-color

    • 边框的样式 border-style

      • 实线 solid
      • 点状虚线 dotted
      • 虚线 dashed
      • 双线 double
    .box{
    	/*content部分属性设置*/
    	width: 200px;
    	height: 200px;
    	backgroud-color: green;
                
    	/*设定边框宽度*/
    	border-width: 10px;
                
    	/*设定边框颜色*/
    	border-color: orange;
                
    	/*设定边框样式*/
    	border-style: solid;
                
    	/*以下三个属性都可以被设置为none*/
    	border-width:none;
    	border-color:none;
    	border-style:none;
                
    	/*border简写设置*/
    	border: solid 10px orange;
    	border-top:solid 10px orange;
    }
    
    

3.3 内外边距

  • 内容区和边框之间的距离称为内边距(padding)

    • 内边距的设置会影响到盒子的大小,背景颜色会延伸到内边距上

    边框之外的区域称为外边距(margin)

    • 外边距不会影响可见框的大小,但是外边距会影响盒子的位置和实际占用空间

    • 默认情况下设置的左和上外边距会移动盒子自身,而设置的下和右边距会移动其它元素

    .box{        
    	padding: 10px;
    	padding: 10px 20px 30px 40px;
    	margin: 10px;
    	margin-bottom: 10px;
    }
    

3.4 行内元素的盒模型

  • 行内元素不支持设置宽度和高度

    行内元素可以设置padding,但垂直方向padding不会影响页面的布局

    行内元素可以设置border,但垂直方向的border不会影响页面的布局

    行内元素可以设置margin,但垂直方向的margin不会影响页面的布局

程序员灯塔
转载请注明原文链接:CSS笔记 - 03 盒模型
喜欢 (0)