CSS栏
关注
分享
扫一扫
文章平均质量分 79
记录CSS的琐碎知识
城楠_327
在校生，前端学习ing，代码能力不强，博客只是自己加深记忆和提升能力的学习工具，
展开
-
rem单位的使用
remrem（root em）是一个相对单位，rem是根据html的字体大小来改变样式的大小。 <style> html { font-size: 24px; } div { width: 10rem; height: 20rem; background-color: pink; } </sty原创 2021-06-07 23:05:38 · 862 阅读 · 0 评论 -
flex布局知识梳理
flex布局知识梳理flex的前言flex布局的基本概念flex布局的概念关于主轴与侧轴flex父元素属性1.flex-direction2.justify-content3.flex-wrap4.align-items5.align-content6.flex-flowflex子元素属性1.flex属性2.align-self属性3.order属性flex的前言当我们在制作页面的时候，使用传统的布局方式会比较繁琐，浮动定位等各种需要考虑；而flex布局就表现的极为简单，可以很轻松的解决盒子的伸缩和排列原创 2021-06-07 16:48:56 · 211 阅读 · 0 评论 -
logo的SEO优化，原来这样的logo才是一个好logo！
什么是SEOSEO（Search Engine Optimization），中文名叫搜索引擎优化。百度百科的解释：是一种利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名一个具有注脚的文本。通俗的说法，就是当别人通过关键词进行搜索时，让你的网站优先出现在前面或者首位的一种技术和优化思路。关于网站logo的SEO优化当我们在写网站的时候，做到logo的时候，如果我们只是简单的放一个盒子再将logo图片放上去的话，SEO不会认为你的这个logo是一个好logo，就不会让用户在搜索关键字的时候让你的网站出原创 2021-06-06 23:07:02 · 548 阅读 · 0 评论 -
文字溢出了怎么办？省略号解决！
单行文字溢出省略号显示 <style> div { width: 100px; height: 100px; border: 1px solid black; } </style> <body> <div>我是一大段的文字，你能看得见我吗？</div> </body>首先我们先将文字设置为一行显示，不原创 2021-06-04 17:33:46 · 547 阅读 · 0 评论 -
CSS也能画三角形！
在画三角形之前，我们先看看三角形是怎么来的:我们先设定一个大小为0，但是大小相同但是颜色不同的4边框，看看会是什么样的效果：<style> div { width: 0px; height: 0px; border-top: 50px solid red; border-bottom: 50px solid pink; border-left: 50px s原创 2021-06-03 23:44:12 · 136 阅读 · 0 评论 -
解决！外边距合并-嵌套块元素塌陷
什么时候会出现外边距合并的现象呢？两个嵌套关系的块元素，如果父元素和子元素都有垂直外边距，那么父元素会塌陷外边距较大的值，这种现象也就是嵌套块元素塌陷。演示一下，我们定义两个嵌套关系的块元素，父元素贴着浏览器上边，子元素贴着父元素上边 <style> body { margin: 0; } .dad { width: 300px; height:原创 2021-06-03 20:32:35 · 327 阅读 · 0 评论 -
CSS的定位知识点总结
CSS定位的学习为什么要学习定位？什么是定位呢？static 静态定位（了解即可）relative 相对定位绝对定位 absolutefixed固定定位为什么要学习定位？在学习之前，我们要思考一下，定位出现的意义是什么，有什么用呢？我们学习定位之前学习了浮动，但是我们会发现许多效果难以实现，比如说京东首页的轮播图的左右箭头：然后往下拖，发现顶部和右侧的定位栏会固定在屏幕上：看完这些相比对定位的存在的原因有了一定的了解了吧。什么是定位呢？定位，可以让一个盒子在另一个盒子的内部自由移动，想定到原创 2021-06-03 13:50:57 · 336 阅读 · 0 评论 -
CSS的选择器总结
CSS选择器基础选择器标签选择器类选择器id选择器通配符选择器复合选择器后代选择器子选择器并集选择器伪类选择器链接伪类focus选择器CSS3新增选择器属性选择器结构伪类选择器伪元素选择器基础选择器标签选择器标签选择器是值用HTML标签名作为选择器，可以把某一类标签全部选择出来。语法格式：标签名{ 属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; }<style> div { color原创 2021-06-03 00:33:38 · 363 阅读 · 0 评论 -
学习float清除浮动
为什么要清除浮动？我们在其他设备逛购物商城的时候，会看到有推荐商品，但是推荐的商品的数量不是固定的，有可能会增多也有可能会减少，我们希望商品能撑开商品展示页，高度随着商品的数量改变而适当改变，所以我们不能给商品展示页的高度写固定。我们给商品展示页里写入3个商品，但是我们没有给展示页高度，而里面的商品自动撑开了展示页，满足了我们的需求。<style> .shop_page { width: 500px; border: 4px原创 2021-06-01 16:09:17 · 145 阅读 · 0 评论 -
关于CSS的两种盒模型介绍
介绍盒模型所谓的盒模型，可以把HTML的布局元素看做是一个个盒子组成页面，盒子里装着各种需要内容。例如小米的官网，头部导航栏、logo、搜索框、侧边分类栏、轮播区域、还有下面的各种功能区其实本质上大部分是一个个盒子，然后在往盒子里扔些内容。 那么盒模型究竟是什么样的呢？我们来看一下盒子的“解剖图”：可以看到一个普通的盒模型是由 content（盒子内容）、padding（内边距）、border（边框）还有margin（外边距） 构成，也可以看出来padding、border和margin原创 2021-05-30 14:34:37 · 180 阅读 · 0 评论