随笔分类 -  html和css

htmlcss小记
摘要：1，float不是绝对意义上的浮动，absolute才是（float无法压住盒子里面的文字 和图片，absoulte可以）（写两个盒子上面一个盒子浮动下面的盒子放img或者盒子里写文字进行测试） 2，加了定位或者浮动的盒子 margin:0 aruto 就失效了，如何居中对齐？（垂直居中同理） 首先 阅读全文
posted @ 2019-12-17 21:30 handsomehe 阅读(133) 评论(0) 推荐(0)
通过相对定位实现字穿线效果
摘要：主要思想两个盒子外面的盒子作为线 里面的盒子相对定位背景为白色加上padding即可 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .line { widt 阅读全文
posted @ 2019-12-15 19:47 handsomehe 阅读(257) 评论(0) 推荐(0)
panding不会撑开盒子的情况
摘要：如果一个盒子没有给定宽度/高度，则padding 不会影响本盒子大小。 下面代码son会向右移动20px但是son的宽度不变 如果想改变他的宽度需要给他加上一个宽度但是没必要 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> 阅读全文
posted @ 2019-12-14 21:36 handsomehe 阅读(746) 评论(0) 推荐(0)
html引入相对路径的详解
摘要：1，当html与图片在同级目录时可直接引用 <img src="3.jpg" alt=""> 2，(1)当html与存放图片的文件夹在同级目录时 <img src="images/3.jpg" alt=""> (2)images文件夹里面还有一个文件夹test 图片在test里面 <img src= 阅读全文
posted @ 2019-12-02 19:11 handsomehe 阅读(3197) 评论(0) 推荐(0)
脱标定位盒子撑不开父级元素情况
摘要：脱标定位元素是内容有多大撑多大 （但是宽度不会超出他的相对的那个元素 可以理解为父级元素） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box { wi 阅读全文
posted @ 2019-10-07 19:16 handsomehe 阅读(451) 评论(0) 推荐(0)