-
第一种解决抖动的方法 border: 10px solid transparent; 第二种解决抖动的方法
box-sizing 控制盒子width和height组成部分
可选值:
content-box 默认情况下, 盒子width指的内容区宽度
border-box 盒子的width和height指的是内容区,内边距,边框的大小
margin 外边距 指的是当前盒子和其他盒子之间的距离
margin-top 上外边距 盒子正值向下移动,负值向上移动
margin-right 右外边距 默认情况,设置margin-right是没有效果
margin-bottom 下外边距 盒子自己不动,挤下面的盒子移动,正值向下,负值向上
margin-left 左外边距 盒子正值向右移动,负值向左移动
margin:;
后也可跟多个值,4个,3个,2个,1个皆可,规则跟padding一样
水平方向有七个值 margin-left+border-left+padding-left+width+padding-right
+border-right+ margin-right 浏览器规定: 水平方向的七个值相加必须等于其父元素内容区的宽度,如果不等于, 那么浏览器就会自动调整七个值中的某值,让其成立,这就叫过度约束
10+10+20+100+20+10+10 ==600 ??如何调整:
1、七个值中如果没有auto,那么浏览器默认调整的是margin-right
10+10+20+100+20+10+ 430 ==600
2、七个值中如果有auto,则浏览器就会调整auto
可以设置auto大小的属性,是margin-left width margin-right
(1)1个auto,谁是auto,浏览器就调整谁
(2)2个auto
margin-left width auto margin-right固定值 调整width
width margin-right auto margin-left固定值 调整width
margin-left margin-right auto width 固定值 左右外边距平分,盒子会居中显示
(3)3个auto
margin-left width margin-right 调整width总结: 浏览器调整 width>margin 子元素是在父元素的内容区中排列的 如果子元素的大小超过了父元素,则子元素会从父元素中溢出 使用overflow属性设置父元素如何处理溢出的子元素 可选值: visible 默认值 子元素会从父元素中溢出,在父元素外部的位置显示 hidden 溢出的内容将会被裁剪不会显示 scroll 生成两个滚动条,通过滚动条来查看完整的内容 auto 根据需要生成滚动条 额外两个属性,了解一下 overflow-x overflow-y
学习编程的第九天
最新推荐文章于 2024-03-25 21:49:11 发布