CSS
CSS
Lmq!
这个作者很懒,什么都没留下…
展开
-
CSS预处理器--Less
Less介绍Less变量变量是指没有固定的值,可以改变的。因为我们CSS中的一些颜色和数值等经常使用变量命名规范Less编译本质上,Less包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的css文件。所以我们需要把Less文件编译生成css文件,这样我们的html页面才能使用Less嵌套如果遇到(交集|伪类|伪元素选择器)内层选择器的前面没有&符号,则它被解析为父选择器的后代...原创 2022-04-05 14:31:05 · 121 阅读 · 0 评论 -
背景线性渐变
语法背景渐变必须添加浏览器私有前缀起始方向可以是:方位名词或者度数,如果省略 默认就是top原创 2022-04-04 17:07:03 · 229 阅读 · 0 评论 -
解决图片底部默认空白缝隙问题
问题出现原因:图片是行内块元素,行内块元素和行内元素是和文字的基线对齐的。所以图片下方会有一条空白缝隙。解决办法:1.不要让图片和文字基线对齐给图片添加vertical-align:middle | top | bottom等。(提倡使用)2.把图片转换为块级元素 display:block;...原创 2022-03-31 20:38:48 · 236 阅读 · 0 评论 -
实现图片和文字垂直对齐--vertical-align
CSS的vertical-align属性使用场景:经常用于设置图片或者表单(行内块元素)和文字垂直对齐。它只针对于行内元素或者行内块元素有效。原创 2022-03-31 16:06:23 · 1444 阅读 · 0 评论 -
移动WEB开发(流式布局、flex布局、rem适配布局)
一、流式布局视口:就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。我们移动端布局最想要的是理想视口。理想视口:对设备来说,是最理想的视口尺寸。需要手动添写meta视口标签通知浏览器操作。meta视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致,简单理解就是设备有多宽,我们的布局的视口就多宽。meta视口标签<meta name="viewport" content="width=device-width, user-scalable=no原创 2022-03-30 15:39:25 · 817 阅读 · 0 评论 -
复合选择器
复合选择器可以更准确、更高效的选择目标元素(标签)复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的常用的复合选择器包括:后代选择器、子代选择器、并集选择器、伪类选择器等等1.后代选择器(子孙后代)后代选择器又称为包含选择器,可以选择父元素里面的子元素。语法: 元素1 元素2 {样式声明}表示选择元素1里面的所有元素2(后代元素)2.子选择器(亲儿子选择器)子元素选择器只能选择作为某元素的最近一级子元素,简单理解就是选亲儿子元素。语法: 元素1 > 元素2原创 2022-03-15 09:59:09 · 2668 阅读 · 0 评论 -
外边距合并、塌陷
使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。1.相邻块元素垂直外边距合并当上下相邻的两个块元素(兄弟关系)相遇时。如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则它们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。解决方案:尽量只给一个盒子添加margin值。2.嵌套块元素垂直外边距的塌陷对于两个嵌套关系(父子关系)的块元素、父元素有上原创 2022-03-14 14:58:13 · 400 阅读 · 0 评论 -
LOGO SEO 优化
1.logo 里面首先放一个h1标签,目的是为了提权,告诉搜索引擎,这个地方很重要。2.h1 里面再放一个链接,可以返回首页的,把logo 的背景图片给链接即可。3.为了搜索引擎收录我们,我们链接里面要放文字(网站名称),但是文字不要显示出来。方法1:text-indent 移到盒子外面(text-indent: -9999px) ,然后overflow:hidden,淘宝的做法。方法2:直接给font-size: 0;就看不到文字了,京东的做法。4.最后给链接一个title属性,这样鼠原创 2022-03-10 10:55:38 · 281 阅读 · 0 评论 -
CSS-display、visibility、overflow元素的显示与隐藏
本质:让一个元素在页面中隐藏或者显示出来。1.display 属性display 属性用于设置一个元素应如何显示。display: none;隐藏对象display:block;除了转换为块级元素之外,同时还有显示元素的意思display 隐藏元素后,不再占有原来的位置。后面应用及其广泛,搭配JS 可以做很多的网页特效。2.visibility 可见性visibility属性用于指定一个元素应可见还是隐藏。visibility:visible ;元素可视vi.原创 2022-03-09 21:51:33 · 619 阅读 · 0 评论 -
CSS清除浮动
一、为什么需要清除浮动?由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为0时,就会影响下面的标准流盒子。由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响。二、清除浮动本质...原创 2022-03-09 15:18:28 · 69 阅读 · 0 评论 -
CSS布局
传统网页布局的三种方式网页布局的本质——用CSS 来摆放盒子。把盒子摆放到相应位置.CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序):普通流(标准流)浮动定位一、 标准流(普通流/文档流)所谓的标准流: 就是标签按照规定好默认方式排列.(1) 块级元素会独占一行,从上向下顺序排列。常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table(2)行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行。...原创 2022-03-09 11:12:51 · 1168 阅读 · 0 评论 -
css3新增选择器
CSS3 给我们新增了选择器,可以更加便捷,更加自由的选择目标元素。1.属性选择器2.结构伪类选择器3.伪元素选择器1.属性选择器(1)利用属性选择器就可以不用借助于类或者id选择器必须是input 同时具有value这个属性 选择这个元素 input[value]{ color:pink; }(2)属性选择器还可以选择属性=值的某些元素 input[type = text]{ co原创 2022-03-08 20:41:17 · 452 阅读 · 0 评论 -
网站TDK三大标签SEO优化
SEO(Search Engine Optimization)汉译为搜索引擎优化,是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。SEO 的目的是对网站进行深度的优化,从而帮助网站获取免费的流量,进而在搜索引擎上提升网站的排名,提高网站的知名度。页面必须有三个标签用来符合SEO 优化。1. title 网站标题title 具有不可替代性,是我们内页的第一个重要标签,是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。建议:网站名(产品名)-网站的介绍(尽量不要超过30个原创 2022-03-08 11:21:00 · 328 阅读 · 0 评论 -
CSS3盒子模型
css3中可以通过box-sizing来指定盒模型,可以分为两种情况:1.box-sizing:content-box 盒子大小为width+padding+border(以前默认的)2.box-sizing:border-box 盒子大小为width如果盒子模型我们改成了box-sizing:border-box,那么padding和border就不会撑大盒子了(前提padding和border不会超过width宽度)...原创 2022-03-07 20:19:42 · 1694 阅读 · 0 评论