首页 > Web开发 > 详细

css盒模型简介

时间:2020-03-31 01:03:47      阅读:95      评论:0      收藏:0      [点我收藏+]

前端css盒子模型 

盒模型的组成:内容区、内填充(补白)、边框、外边距。

 

 

  • 标准盒模型

技术分享图片

 

 

 

1.内填充(padding)

  • padding用法
内填充,长在内容和盒子之间,在盒子内容
控制子元素在父元素中的位置,会把盒子撑大
如果想让盒子保持原有大小,需要在原有的宽高上减掉padding
如果没有设置固定宽高,不需要减
不能设置负值,不会对背景图造成影响
可以单独设置一边(padding-left \ right \ top \ bottom)

 

 

 

 

 

 

 

 

  •  padding设置特点
padding:30px;    四周
padding:10px 30px;  上下、左右
padding:10px 30px 50px;  上、左右、下
padding:10px 30px 50px 100px;  上、右、下、左

 

 

 

 

 

 

 

2.外边距(margin)

  • margin用法
长在元素之外
控制同级元素之间的位置关系
不会对盒子的大小造成影响
可以设置负值
可以单独设置一边(margin-left \ right \ top \ bottom)
margin:0 auto; 让当前元素在父元素中左右居中

 

 

 

 

 

 

 

 

 

 

 

  • margin常出现的bug
  1. 给第一个子元素设置margin-top,会作用在父元素上面,称为margin传递
  2. 上下都添加margin时会有重叠部分,且取最大值,称为margin重叠

 

 

 

 

 

  • margin设置特点
margin:30px;    四周
margin:10px 30px;  上下、左右
margin:10px 30px 50px;  上、左右、下
margin:10px 30px 50px 100px;  上、右、下、左

 

 

 

 

 

 

3.边框(border):边框长在元素的宽高之外

边框的意思,描述盒子的边框

边框有三个要素: 粗细 线性样式 颜色

 

  • 简写:
border :solid     5px  red;
        线性样式      粗细     颜色

 

 

 

 

  • 给单一方向添加边框: 

border-left:10px solid red;
border-right:10px solid red;
border-top:10px solid red;
border-bottom:10px solid red;

 

 

 

 

 

  • border 其他设置方法:

border-width\border-style\border-color


      这三个属性能单独拿出来进行设置
      这三个属性每个最多能有4个属性值

 

1个属性值 四周
2个属性值 上、下
3个属性值 上、左右、下
4个属性值 上、右、下、左(顺时针旋转)

 

 

 

 

 

 

 

 

 

属性值 边框类型
solid 实线边框
dashed 虚线边框
dotted 点状线
none 无边框

css盒模型简介

原文:https://www.cnblogs.com/singlef/p/12595568.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!