CSS知识点
文章平均质量分 68
wait......
这个作者很懒,什么都没留下…
展开
-
CSS之关于min-width、max-width、min-height和max-height的使用
????min-height设div父盒子A中有个div子盒子B,设B的min-height为H,则H为盒子B的最小高度值,意思是:当B中内容填充的高度小于H时,B的高度就是H;当B中内容填充的高度大于H时,B的高度就是其中内容填充到的高度。通俗一点来说,就是如果min-height的高度设小了还可以变大,但是设大了就只能这样。看下面的例子:当H为100px时:==>⭐️最小就为100px,若你填充的内容高度小于100,就以最小为准当H为5px时:==>⭐️最小为5px原创 2021-12-01 23:44:29 · 3698 阅读 · 0 评论 -
CSS基础之利用ul制作焦点图的小圆点
今天地效果图:这个博客只是为了记录一下这个效果,感觉自己的基础其实不太扎实,有关居中,位置等属性的利用还是不够了解,需要多写多练这是个很基础的内容,希望之后可以很流利地写出来吧<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <原创 2021-10-07 22:49:27 · 755 阅读 · 0 评论 -
CSS之如何从icomoon引入及使用字体图标
如何引入字体图标?从网上下载字体图标:点进去之后,在其中选择你想要的图标,如果觉得不够用的话,可以点击左下角选择生成更多的图标选择好图标后:下载好之后,需要注意了,注意如何操作来在html文件中引入字体图标:(假如你想引入图标的html文件叫k)把下载包中的fonts文件夹放入k所在的根目录中把下载包中的style.css文件中@font-face的内容复制到k的style标签中在下载包中的demo.html中找到对应图标后面的小方框(如下图),复制到k想要放的标签比如原创 2021-10-08 20:22:05 · 834 阅读 · 1 评论 -
CSS布局之各种需要掌握的小技巧~
话不多说,直接开始~1. vertical-align属性vertical-align定义的是周围元素相对于当前元素的对齐方式属性有:topmiddlebaselinebottom下图为bottom对齐下图为baseline对齐:下图为middle对齐:vertical-align属性对于inline元素、inline-block元素和table-cell元素有效,对块元素无效。同时,对于div中的img来说,若为div添加边框的话,边框和img之间总会有白边,这是因为ve原创 2021-10-09 22:52:44 · 118 阅读 · 0 评论 -
CSS基础之伪类选择器的总结~
在这篇博客中,我会结合具体例子来分析伪类选择器(可能概念性不是很强,但是好用 ~ )属性选择器input[value] 意思是选择的input标签,必须具有value属性input[type=text] 意思是选择的input标签,必须是属性type值为text的元素div[class^=box] 意思是选择的div标签,属性class的值是以box开头的div[class$=box] 意思是选择的div标签,属性class的值是以box结尾的div[class*=box] 意思是选原创 2021-10-12 23:59:04 · 688 阅读 · 0 评论 -
为什么要清除浮动及如何清除浮动
先来看例子:什么叫浮动呢?浮动其实是指元素从网页的正常流动中移除,即脱离文档流。选择将元素在其容器的左侧或右侧放置其实就是指元素在脱离文档流之后,元素一直向最左边或者右边靠拢,直至碰到父元素或者另一个浮动元素。我们为什么要清除浮动呢?大家请看图一,在父盒子未设置高度时,子盒子又设置了浮动,导致父盒子高度塌陷,因为父盒子在计算高度时并未将浮动的子盒子算入。所以我们要避免这种情况,也就是清除浮动,使得结果如同图二或者图三。那我们要如何清除浮动呢?额外标签法(不是很推荐)这种方法见如下代码原创 2021-10-15 15:39:23 · 137 阅读 · 0 评论 -
CSS之calc函数
calc函数可以通过加减乘除计算来获得高度、宽度值等比如width:calc(180px+20px)可以得到宽度为200px的盒子但calc的使用完全不仅于此父元素的子元素可以通过设置width:calc(100%)达到和父盒子一样的宽度,也可以通过设置widthLcalc(100% - 20px)得到比父盒子少20px的盒子千万要注意! 100%和减号以及减号和20之间一定要有空格,否则就无法得到想要的效果。...原创 2021-10-17 00:00:02 · 1171 阅读 · 0 评论