随笔分类 -  css

解决padding撑大盒子的问题
摘要：<html> <head> <meta charset="utf-8"> <title>搜索框</title> <style> div { width: 300px; height: 300px; border: 2px solid red; padding: 10px; box-sizing: b 阅读全文
posted @ 2025-07-21 17:26 神仙不在 阅读(17) 评论(0) 推荐(0)
单元格的合并
摘要：colspan='3' 合并3列,宽骨变宽 rowspan='3' 合并3行,高度变高 阅读全文
posted @ 2025-07-20 15:48 神仙不在 阅读(7) 评论(0) 推荐(0)
<base href="" target="_blank" />
摘要：写在body标签上面，a标签不用写target="_blank了，太舒服了 阅读全文
posted @ 2025-07-20 11:52 神仙不在 阅读(6) 评论(0) 推荐(0)
margin塌陷问题
摘要：第一个子元素的margin-top和最后一个子元素的marhin-bottom会作用到父元素上 解决办法 父元素的 css添加 overflow：hidden 阅读全文
posted @ 2025-07-19 19:12 神仙不在 阅读(10) 评论(0) 推荐(0)
关于margin的5句话
摘要：子盒子的margin从父级的内容开始算 2.盒子的margin-top和margin-left 会推开自己的位置,盒子的margin-right和margin-bottom 会推开兄弟的位置 3.行内元素只能设置左右margin,无法设置上下margin 4.块级元素的margin:0 aotu是父 阅读全文
posted @ 2025-07-19 18:44 神仙不在 阅读(6) 评论(0) 推荐(0)
结构伪类元素
摘要：<html> <head> <meta charset="utf-8"> <title></title> <style> /* 选中p元素的父亲的第一个儿子 */ p:first-child { color: red; } </style> </head> <body> <p>1111111111< 阅读全文
posted @ 2025-07-19 08:49 神仙不在 阅读(9) 评论(0) 推荐(0)
属性选择器
摘要：<html> <head> <meta charset="utf-8"> <title></title> <style> /* 第一种写法 */ [title] { color: red; } /* 第二种写法 */ [title='shuxing11'] { color: blue; } /* 第 阅读全文
posted @ 2025-07-19 07:07 神仙不在 阅读(8) 评论(0) 推荐(0)
兄弟选择器
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 紧紧相邻的兄弟p元素 */ div+p { color: red; } /* 所有的兄弟p元素 */ div~p { color: aqua 阅读全文
posted @ 2025-07-18 22:10 神仙不在 阅读(4) 评论(0) 推荐(0)