CSS盒子模型

4 篇文章 0 订阅
一、盒子内容溢出处理
overflow: 在标准文档流中,溢出的内容在页面中不占位
visible(默认值):对溢出内容不做处理
hidden:溢出的内容隐藏掉
scroll:水平和垂直方向都会出现滚动条,只不过滚动条是否可用取决于该方向是否溢出
auto:哪个方向溢出内容哪个方向就会出现滚动条



text-overflow:text-overflow属性指定当文本溢出包含它的元素,应该发生什么
text-overflow: clip/ellipsis;
clip:修剪文本
ellipsis:显示省略符号来代表被修剪的文本

注意:text-overflow必须和overflow:hidden;white-space:nowrap;一起使用。

a、边框
border-style:solid/dashed/dotted/double/none(默认值)
border-color:设置边框颜色
border-width:设置边框粗细

以上三个属性,只要告诉浏览器border-style的值(none除外),那么颜色和粗细就有默认值

border-top-color
border-top-width
border-top-style

border-right-color
border-right-width
border-right-style

border-bottom-color
border-bottom-width
border-bottom-style

border-left-color
border-left-width
border-left-style

border-top  border-right  border-bottom  border-left
border

b、padding:设置盒子的内容到盒子边框之间的距离
padding:上  右  下  左
上  左右  下
上下   左右
padding-top
padding-right
padding-bottom
padding-left

c、margin:设置盒子与盒子之间的距离
值可以设置1个\两个\三个\四个  跟padding对应的方向一致

margin-top
margin-right
margin-bottom
margin-left


margin用于设置盒子与盒子之间的距离
所谓的盒子与盒子有两种情况


第一种:父级盒子 与  子级盒子

给子级盒子设置margin-top的时候,该margin-top会作用在父级盒子上,这是一种css bug
解决方法一:给父级盒子设置padding-top:0.1px;


设置父级盒子与子级盒子之间的距离 有两钟方式
第一种给父级设置padding
第二中给子级盒子设置margin


第二种:同级盒子
同级盒子(都是块级元素并且在标准文档流中)垂直排列,他们之间的距离是看上面的margin-bottom大还是下           面盒子的margin-top大,谁大margin值就用谁的,这是一种唯一的特殊情况,是css bug 我们称之为margin合并
其他的情况margin都会叠加


行内元素部分支持盒子模型属性
        不支持:width,height,margin-top,margin-bottom   不支持margin:0 auto;


行内块元素部分支持盒子模型属性
不支持margin:0 auto;中的auto这个值
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值