zher_leon

2020年10月16日

摘要：在标准盒模型下，width和height是内容区域即content的width和height。而盒子总宽度为在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右) 而IE盒模型或怪异盒模型显而易见的区别就是，width和heigh 阅读全文

posted @ 2020-10-16 21:53 zher_leon 阅读(87) 评论(0) 推荐(0) 编辑

随手记十——淘宝静态页面

摘要：用了一个多星期来学习淘宝布局，2/3的时间花在了自己摸索写出的淘宝1.0，勉强写完后用剩下1/3的时间学习并写了2.0，觉得还是记录一下学习进度比较好。一、首先打开真正的淘宝页面，它长这样：二、我自己写的1.0，如下，多多少少有点儿丑了三、这是看了教学视频之后写出的淘宝2.0 四、总结写1. 阅读全文

posted @ 2020-10-16 21:36 zher_leon 阅读(540) 评论(0) 推荐(0) 编辑

2020年9月29日

随手记九——溢出文字处理、背景图片填充、图片代替文字

摘要：溢出容器，要打点展示 1、单行文本 2、多行文本 1、单行文本：打开百度我们可以看到一些新闻推送，有些新闻推送如下，在句子后面有...显示，单行文本超出了容器的宽度，所以用打点的方式来显示。为了实现以上效果，我们可以使用 while-space:nowrap;可以使文字溢出部分不要换行 overf 阅读全文

posted @ 2020-09-29 17:17 zher_leon 阅读(127) 评论(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 阅读(129) 评论(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 阅读(169) 评论(0) 推荐(0) 编辑

随手记五——盒子模型和层模型

摘要：盒子模型：打开浏览器随机一个页面，右键检查元素，能看到有一个图，这就是盒模型。每一个元素结构都可以看作是一个盒模型。盒模型=margin+border+padding+(content=width+height).在面试的时候，很多公司都有一道笔试题求盒子的实际宽高。利用盒模型来画一个远视图：阅读全文

posted @ 2020-09-27 17:26 zher_leon 阅读(175) 评论(0) 推荐(0) 编辑

随手记四——一些课堂笔记和小技巧、总结

摘要：利用边框画一个三角形：用div做一个块模型，并将他的宽高设置为0px，这样我们看到的色块都是边框，每一条边都是一个小三角形，将右和下边框设置为红色，再将左上边框设置为透明色，于是就可以得到以上三角形。以上为两种写法，第二种更简洁。一些特性： border: 1px solid black；边框阅读全文

posted @ 2020-09-27 17:05 zher_leon 阅读(179) 评论(0) 推荐(0) 编辑

2020年7月29日

随手记三——理解相邻兄弟选择器的辛酸过程

摘要：前情：如随手记二中提到的相邻兄弟选择器，如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。格式如：h1 + p {margin-top:50px;} 这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 阅读全文

posted @ 2020-07-29 17:44 zher_leon 阅读(118) 评论(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 阅读(133) 评论(0) 推荐(0) 编辑

公告