![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
yzhSWJ
一个爱小猪的程序员
展开
-
css box-sizing:border-box
此时子元素的宽高为500px(content 478px + padding 40px + border 4px)所以就覆盖了父元素的黑色背景,只能看到子元素的灰色背景。,宽高会加上padding和border的值,需要我们手动去计算,减去padding和border的值,并调整content的值,以免超过给定的宽高。比如,给父元素parent设置宽高为500px,背景色为黑色;,padding和border的值就不会在影响元素的宽高,相当于把padding和border的值都算在content里。原创 2022-12-09 14:57:38 · 1899 阅读 · 0 评论 -
web开发之前端rem适配方案
设计稿常见尺寸宽度:一般情况下,我们以一套或者两套适应大部分的屏幕,放弃极端屏或对其优雅降级,牺牲一些效果,现在基本以750为准。动态设置html标签font-size大小(如果不明白为什么要动态设置html的大小,请查看rem跟em的区别这篇文章) 元素大小取值方法:......原创 2022-07-04 09:17:39 · 1085 阅读 · 0 评论 -
媒体查询:引入资源
媒体查询:引入资源原创 2022-07-03 16:15:41 · 151 阅读 · 0 评论 -
css中的rem跟em的区别
em是相对于父元素的字体大小来说:页面效果 rem是相对于html元素的字体大小来说:原创 2022-07-02 16:22:11 · 222 阅读 · 0 评论 -
修改input输入框样式
首先要将input输入框的默认样式去掉-web-kit-appearance:none; -moz-appearance: none;然后将input输入框的轮廓去掉:outline:0;完成样式input[type="text"],#btn1,#btn2{ box-sizing: border-box; text-align:center; font-size:1.4em; height:2.7em; border-radius:4px; border原创 2021-08-02 13:25:22 · 8951 阅读 · 0 评论 -
Css样式
1.图片(img)的等比例自动缩放.timelineImg{ width: auto; height: auto; max-width: 100%; max-height: 100%;}原创 2021-05-25 15:44:15 · 71 阅读 · 0 评论 -
table表格,让thead固定,tbody有滚动条
table tbody {display:block;height:195px;overflow-y:scroll;}table thead, tbody tr {display:table;width:100%;table-layout:fixed;}table thead {width: calc( 100% - 1em )}原创 2020-12-24 09:55:36 · 313 阅读 · 0 评论 -
如何让子div在父div居中显示
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .father { width: 12.5rem; height: 12.5rem; border: 1px solid #000000; } .child { width:原创 2020-05-09 12:51:03 · 537 阅读 · 0 评论