摘要: padding是内边距,会影响我们在浏览器中看到的元素的实际大小,内边距会让元素的内容增大,和其他元素没有关系! margin是外边距,不会影响我们在浏览器中看到的元素的实际大小,外边距不会让元素的内容增大,是和另一个元素的间距! 1 <!DOCTYPE html> 2 <html> 3 <head 阅读全文
posted @ 2020-10-27 17:03 鬼牛阿飞 阅读(1821) 评论(0) 推荐(0) 编辑
摘要: css盒子模型padding和margin的区别: padding是内边距,会影响我们在浏览器中看到的元素的实际大小,内边距会让元素的内容增大,和其他元素没有关系! margin是外边距,不会影响我们在浏览器中看到的元素的实际大小,外边距不会让元素的内容增大,是和另一个元素的间距 阅读全文
posted @ 2020-10-27 16:47 鬼牛阿飞 阅读(1112) 评论(0) 推荐(0) 编辑
摘要: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .box{ 阅读全文
posted @ 2020-10-27 16:39 鬼牛阿飞 阅读(128) 评论(0) 推荐(0) 编辑
摘要: 问题:margin的兼容margin-top的传递 描述:大盒子里面嵌套小盒子,给小盒子添加margin-top值,不但没有实现和大盒子之间的间距,反而传递到大盒子上,导致整体下移 解决兼容性问题: overflow:hidden解决margin-top的传递问题(此处不是溢出隐藏) padding 阅读全文
posted @ 2020-10-27 16:06 鬼牛阿飞 阅读(805) 评论(1) 推荐(0) 编辑
摘要: 并列盒子的margin(双margin的重叠)面试题:一个盒子有上边距,另一个盒子有下边距,会出现margin边距的重叠问题?解决:取大值,并不是他们的相加之和,而是谁大听谁的! <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title 阅读全文
posted @ 2020-10-27 15:34 鬼牛阿飞 阅读(135) 评论(0) 推荐(0) 编辑
摘要: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 .triangle{ 8 width: 0px; 9 height: 0px; 10 border-width: 10 阅读全文
posted @ 2020-10-27 15:11 鬼牛阿飞 阅读(388) 评论(0) 推荐(0) 编辑
摘要: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 .arrow{ 8 width: 20px; 9 height: 20px; 10 b 阅读全文
posted @ 2020-10-27 14:03 鬼牛阿飞 阅读(382) 评论(0) 推荐(0) 编辑
摘要: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .content{ width: 100px; heigh 阅读全文
posted @ 2020-10-27 11:55 鬼牛阿飞 阅读(1228) 评论(0) 推荐(0) 编辑
摘要: 如上图,padding值是复合属性按照顺时针(上右下做)顺序,其中padding的内边距影响盒子大小的实际宽高 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type=" 阅读全文
posted @ 2020-10-27 11:30 鬼牛阿飞 阅读(342) 评论(0) 推荐(0) 编辑
摘要: 盒子模型的宽度width高度height;宽度和高度的单位px像素,使用%动态计算(自适应和响应式) 1 <div class="pag1"></div> 2 <div class="pag2"></div> 3 <div class="pag3"></div> 4 <div class="pag4 阅读全文
posted @ 2020-10-27 11:03 鬼牛阿飞 阅读(1191) 评论(1) 推荐(0) 编辑
摘要: 如上截图,选中h2元素,真实的宽度868px,高度25.2px,受填充内边距padding值5px与边框值1px的影响,最终h2的实际宽高为868X252.2px,其中外边距margin不考虑 什么是css盒子模型? 阅读全文
posted @ 2020-10-27 10:24 鬼牛阿飞 阅读(322) 评论(0) 推荐(0) 编辑