Start -ZJ的博客

CSS的一些小总结 在实现当删除某个div块后，后续的div块能自动补位时，可以不用JS的效果，直接把div设置成float属性，利用浮动的特性来完成这样效果。 在设置浮动时，如果div里还需要一个通过弹性布局完成的效果，那就再加一个，反而能节省很多代码量，效果也更好。 ...

今天运用到了first-child与nth-child()，发现怎么也用不对，重新查了下发现自己对这两个伪类的理解有错误，就重新开个帖子。 first-child 先来段代码: H5: <div> <h2>2</h2> <p>XX</p> <p>XXX</p> <p>XXXX</p>...

单行省略： width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 多行后省略的情况： width:100% overflow : hidden;//超出的部分隐藏 text-overflow: ellipsis;//...

最近遇到了一个需要在搜索框内加入一个放大镜图标的需求，就像是这样。 这个本来是挺好解决的一个问题，只要在搜索框内加两句 background-image: url('../Imgry/fangdajing.png'); background-repeat:no-repeat;/*图标是否重复*/ 就可以了。都是现在的问题是图标并不是在边缘(网上搜索了下大部分都是在最左或者最右)，所以必...

今天使用inline-block想在一个div里上下排列两个p元素，都是怎么排都不对。 如图： 具体的H5代码： <div class="modify-rank-install"> <ul> <li class="modify-rank-install-big"><div><p>KKKKKK</p...

position也是flex的其中一种。 position的属性有absolute，relative,fixed,static,sticky,inherit,initial。 其中主要用到的就是前四个。 1.static就是默认值，没有采取定位。 2.absolute会将元素脱离文本流，同时相对于父元素进行定位。 3.relative会保留其文本位置，同时相对于原本的位置进行定位。 4...

最近在看一个H5网页怎么用inline-block来调整布局。因为在工作中公司不提倡使用position来定位。所以最近看了flex的弹性布局，float浮动和今天的inline-block内联块元素。 一般来说用到inline-block都会想到inline和block。所以就说说这两的特点。 inline的特点: 1.能使元素变成行内元素。让元素可以在一行里并排，不会换行。 2.不能更...

今天遇到了一个问题，就是在制作自适应网页时DIV中的图片无法做到同div一同缩放。后来发现以下代码可以解决。 这个是H5的代码 <div class="badyOneBlock1Photo"> <img src="Imagry/photo.png" alt="" class="badyOneBlock1Photo1"> </div> CSS代码：...

之前一直都是使用position来定位块的位置。现在新学了一个比较主流的flex来定位块的位置。感觉确实比之前的好多了。 现在总结下大概的用法。 flex是把一个div分成主轴和交叉轴，其中主轴方向的定位有三个。 1.flex-direction：这个是决定主轴的方向。 row(从左到右)|row-revers(从右到左)|column(从上到下)|column-revers(从下到上)...