html - 一道简单CSS的面试题
问题描述
今天刚刚碰到的 hr要求一个半小时完成
要求p自适应大小
边距都是30px,剩下的p全部自适应屏幕 如果有根据屏幕大小自动变化CSS样式的更好
要求已经写在图上了 有没有萌新前来练手
问题解答
回答1:<style type='text/css'><!-- html,body {height: 100%; } body, body * {margin: 0;padding: 0; } p {box-sizing: border-box;-webkit-box-sizing: border-box;border: 1px solid #333; } .header_left, .header_right {height: 40%;float: left;margin-top: 10%; } .header_left {width: 40%; } .header_right {width: 60%;border-left-style: none; } .clear {clear: both;border: none; } .main {margin-top: 5%;height: 45%;color: red;text-align: center; } .main_left, .main_right {float: left;width: 60%;height: 100%;border: none; } .main_right {width: 40%;border-left: 1px solid #333; }.main_left_top,.main_left_middle,.main_left_bottom,.main_right_top,.main_right_bottom { margin: 30px;}--></style> <p class='header_left'></p><p class='header_right'></p><p class='clear'></p> <p class='main'><p class='main_left'><p class='main_left_top'>随着内容适应大小</p><p class='main_left_top'>随着内容适应大小</p><p class='main_left_bottom'>随着内容适应大小</p> </p><p class='main_right'><p class='main_right_top'>随着内容适应大小</p><p class='main_right_bottom'>随着内容适应大小</p></p><p class='clear'></p> </p>回答2:
有2种方法实现一种是float,一种是flex,不过可能flex的兼容性不太好float布局
flex布局
回答3:这个问题不难啊,我会,分分钟搞定
回答4:图已经写得很详细了,只要根据图写出相应的布局就OK了。如果还是迷茫的,建议你从巩固一下p布局。
回答5:挺简单的,只是自适应不是响应式,都标着百分比了
相关文章:
1. javascript - 把字符串日期转换成一般时间格式后,发现小于10的数字不会自动添加0在前面,如下2. python相关问题求解决,有偿3. HTML5怎么访问本地文件?4. javascript - js判断一个数组是否重复5. 提示我模板文件不存在: tp5 application index view body.html6. javascript - prismplayer播放器全屏问题7. javascript - vue2.0中router.repalce跟router.push有什么区别,二者的应用场景是会有怎样的区别?8. javascript - 在sublime中如何给.vue文件注释?9. javascript - input输入框触发change事件后,外部元素会被选中10. javascript - 这种上传图片预览怎么做?