自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(13)
  • 收藏
  • 关注

原创 overflow:hidden使得同级的行内块元素不对称

行内元素的默认对齐方式是基线对齐即(vertical-align:baseline) 设置overflow不为visible之后改变了他的默认对齐方式为下边距边缘;其他行内元素依然还是基线对齐就会出现下沉的视觉效果。2、设置所有的行内元素的overflow不为visible。1、重新设置所有行内元素的对齐方式。

2022-11-15 19:40:21 202 1

原创 盒子边框宽度和设置的值不符的原因

盒子边框宽度和设置的值不符的原因

2022-09-12 22:37:10 1247

原创 定位,浮动

固定定位:固定定位是由浏览器界面为参考点,固定定位必须有宽度,没有宽度则就是内容撑开的宽度。如果没有就为0,不会继承父亲的宽度。添加固定定位会使得margin: 0 auto ;失效关于position:fixed的注意点 - 天天向上吧 - 博客园绝对定位:添加固定定位会使得margin: 0 auto ;失效相对定位: 不会使得margin:0 auto;失效...

2022-04-20 19:50:53 685

原创 节点的相关知识

节点至少拥有nodeType(节点类型)nodeName(节点节名称)nodeValue(节点值)这三个基本属性。元素节点:nodeType为1 属性节点:nodeType为2 文本节点:nodeType为3(包含文字,空格,换行等) a.nodeType 判断a节点类型获取父节点: var section = document.querySelector('section'); console.log(section.parentNode);...

2022-04-12 11:32:48 317

原创 元素隐藏和显示

display: none; 元素隐藏 从文档流消失,不占据空间,但是还存在DOM树中display:block; 元素显示 若之前盒子是行内块或行内元素使用后会变为块级元素display:inline; display:inline-block;同理opacity:0; 元素隐藏 opacity不透明度为0时透明opacity: 1; 元素显示 选择大于0的数就行0到1数字越大越明显...

2022-04-10 20:13:37 411

原创 :hover的知识点

控制自己本身div:hover { backgroun-color: red;}控制子元素样式div:hover div { background-color: red;}控制相邻同级元素div:hover+div { background-color: red;}控制不相邻同级元素div:hover~div { background-color: red;}相关的还有:active :link :visitedlink:平

2022-04-10 19:22:29 1300

原创 为什么 document.getElementsByTagName(‘‘)对innerHTML不起作用

为什么不改变呢?因为section = document.getElementsByTagName('section');返回的是一个对象,对象里面包含许多元素,所有我们需要明确是哪一个元素需要改变这样就会改变了,就算只有一个section标签,获取过来还是需要给定索引或者使用var section = document.getElementById('section');来获取id属性为section的元素,这样就可以直接 section.innerHTML = '改变了';因...

2022-04-10 13:02:53 992 1

原创 DOM获取元素和修改元素的几种方法

var a = document.getElementsByTagName('div'); 获取所有div元素返回对象没有div元素返回的还是对象var a = document.querySelectorAll('div'); 获取所有div元素没有div元素时返回空的对象两者区别:使用getElementsByTagName方法我们得到的结果就像是一个对象的索引,document.querySelectorAll方法我们得到的是一个对象的克隆,克隆所需要花费的时间是比较长的。var

2022-04-10 12:49:31 898

原创 表单,表格,列表

每个表格由 table 标签开始,表示一个表格每行由tr开始 每行中的元素由th或td开始thead语义标签,表示表格的头部tbody语义标签,表示表格的底部<table border='边框线的宽度' align='表格在页面中的对齐方式' bgcolor='表格的背景色' background='背景图片'> 这些标签已不支持使用 应该使用css相关指定样式指定样式格在页面中的对齐方式 使用margin来控制对齐反式bgcolor='表格的背景色 使用backgrou

2022-04-09 19:54:36 263

原创 background背景

HTML的高度是由内容来决定的当内容较少时背景图片不能铺满整个浏览器内容过多是背景图片会被拉长要想背景图片自适应浏览器大小只需将HTML宽度高度设为100%就可以铺满整个页面不会被拉长和缩短 html { height: 100%; background: url(./images/dog.png) no-repeat center/100% 100%; }html100%高度是浏览器的页面的高度,当 页

2022-04-09 14:54:17 282

原创 图片之间水平和垂直距离有间隙的原因和解决方法

有水平间隙的原因是代码中的换行导致的<body> <img src="./images/dog.png" alt=""> <img src="./images/dog.png" alt=""> <img src="./images/dog.png" alt=""></body>当我们代码并排时即可解决水平间隙问题<body> <img src="./images/dog.pn

2022-04-09 11:08:50 612

原创 设置vertical-align: middle;后文字不垂直居中的其中原因

给图片设置vertical-align: middle;中线对齐后图片后的文字不垂直居中出现的原因可能是给图片设置了上边距

2022-04-04 10:59:49 412

原创 解决移动端点击链接时有蓝色背景

* {-webkit-tap-highlight-color: rgba(0, 0, 0, 0)}

2022-04-03 16:55:00 498

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除