2020年10月16日
随手记十一——怪异盒模型和标准盒模型
摘要： 在标准盒模型下，width和height是内容区域即content的width和height。而盒子总宽度为 在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右) 而IE盒模型或怪异盒模型显而易见的区别就是，width和heigh 阅读全文
posted @ 2020-10-16 21:53 zher_leon 阅读(89) 评论(0) 推荐(0) 编辑
随手记十——淘宝静态页面
摘要： 用了一个多星期来学习淘宝布局，2/3的时间花在了自己摸索写出的淘宝1.0，勉强写完后用剩下1/3的时间学习并写了2.0，觉得还是记录一下学习进度比较好。 一、首先打开真正的淘宝页面，它长这样： 二、我自己写的1.0，如下，多多少少有点儿丑了 三、这是看了教学视频之后写出的淘宝2.0 四、总结 写1. 阅读全文
posted @ 2020-10-16 21:36 zher_leon 阅读(584) 评论(0) 推荐(0) 编辑
2020年9月29日
随手记九——溢出文字处理、背景图片填充、图片代替文字
摘要： 溢出容器，要打点展示 1、单行文本 2、多行文本 1、单行文本：打开百度我们可以看到一些新闻推送，有些新闻推送如下，在句子后面有...显示，单行文本超出了容器的宽度，所以用打点的方式来显示。 为了实现以上效果，我们可以使用 while-space:nowrap;可以使文字溢出部分不要换行 overf 阅读全文
posted @ 2020-09-29 17:17 zher_leon 阅读(135) 评论(0) 推荐(0) 编辑
2020年9月28日
随手记八——关于伪元素和仿淘宝导航栏
摘要： 关于伪元素： 一个标签从诞生的时候，在逻辑的最前的逻辑的最后的位置就已经有两个伪元素了，这是我们看不到，一旦我们操作出来，就可在是上面做一些CSS修改。它的元素结构是存在的，但又没有写到html里，可以当做元素来操作，但又没有html结构，所以叫伪元素。比如说： span::before{ cont 阅读全文
posted @ 2020-09-28 16:48 zher_leon 阅读(140) 评论(0) 推荐(0) 编辑
2020年9月27日
随手记七——关于float的一个上节没明白的问题
摘要： 在上节中，有一个地方有点没想明白，在此记录一下。 上节中提到，浮动元素产生了浮动流，所有产生了浮动流的元素，块级元素看不到他们，但是产生了bfc的元素、文本类属性的元素(inline)以及文本都能看到浮动元素。 这里我一开始理解为，块级元素是不能约束到浮动元素的，所以在使用float:right;时 阅读全文
posted @ 2020-09-27 22:46 zher_leon 阅读(134) 评论(0) 推荐(0) 编辑
随手记六——两个经典BUG和bfc
摘要： 两个经典BUG： 1、margin塌陷(父子级之间)：垂直方向的margin，父子元素是结合在一起的，它俩会取最大的值，父子一起移动。意思就是，现有一个父级wrapper和子级box，wrapper有一属性margin-top:100px;父子一起垂直方向移动，这时给box加一个margin-top 阅读全文
posted @ 2020-09-27 17:31 zher_leon 阅读(172) 评论(0) 推荐(0) 编辑
随手记五——盒子模型和层模型
摘要： 盒子模型： 打开浏览器随机一个页面，右键检查元素，能看到有一个图，这就是盒模型。每一个元素结构都可以看作是一个盒模型。 盒模型=margin+border+padding+(content=width+height).在面试的时候，很多公司都有一道笔试题求盒子的实际宽高。 利用盒模型来画一个远视图： 阅读全文
posted @ 2020-09-27 17:26 zher_leon 阅读(177) 评论(0) 推荐(0) 编辑
随手记四——一些课堂笔记和小技巧、总结
摘要： 利用边框画一个三角形： 用div做一个块模型，并将他的宽高设置为0px，这样我们看到的色块都是边框，每一条边都是一个小三角形，将右和下边框设置为红色，再将左上边框设置为透明色，于是就可以得到以上三角形。以上为两种写法，第二种更简洁。 一些特性： border: 1px solid black； 边框 阅读全文
posted @ 2020-09-27 17:05 zher_leon 阅读(181) 评论(0) 推荐(0) 编辑
2020年7月29日
随手记三——理解相邻兄弟选择器的辛酸过程
摘要： 前情：如随手记二中提到的相邻兄弟选择器，如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。 格式如：h1 + p {margin-top:50px;} 这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 阅读全文
posted @ 2020-07-29 17:44 zher_leon 阅读(120) 评论(0) 推荐(0) 编辑
2020年7月27日
随手记二——CSS样式和选择器
摘要： 一、随手记 1、面试问题：我们和什么打交道最多？ 答案是浏览器，那么主流浏览器有哪些，它的内核是什么呢？ 主流浏览器 内核 IE trident Firefox Gecko Geogle Chrome webkit/blink Safari webkit Opera presto 2、引入CSS有三 阅读全文
posted @ 2020-07-27 20:25 zher_leon 阅读(134) 评论(0) 推荐(0) 编辑