CSS

JavaScript，jQuery 的css方法无效是怎么回事

admin web前端 暂无评论 1,420 浏览
今天遇到一个问题。
试图通过jquery，给某节点增加css属性，使其实现预期的样式表现。
但不生效。
但又用了别的方式实现。

不生效的写法:

//这种写法不生效。
 $dom.find("p.text-p").css("-webkit-line-clamp",3) ;
 //或
  $dom.find("p.text-p").css({"-webkit-line-clamp":3}) ;

 

生效了的写法：

	//此处这个3，可以是个变量。
	$dom.find("p.text-p").attr("style", "-webkit-line-clamp:" + 3);

 

注，这种情况只是css()方法对于某些特殊的css属性不生效，一般属性还是可以的。

猜测是直接改写dom结构，相当于写成了inline样式。即
<p style="xxxxxx">yyyy</p>
这样的形式。

 

…
Read more

CSS实现文字垂直居中的7种方法

admin web前端 暂无评论 1,701 浏览

一、问题描述： 当高度固定或不固定时，单行或多行文本难以实现垂直居中；

二、解决方法：

1、使用line-height属性，将line-height设置与元素高度等高。

局限性：只适用于单行文本，局限性大。

代码：

.box {
	height: 100px;
	line-height: 100px;
	white-space: nowrap;
}

2.padding：设置相等的上下padding值。

局限性：有高度限制时不能垂直居中。

代码：

.box{
	padding-top: 30px;
	padding-bottom: 30px;
}

3.绝对定位居中：top:0; bottom:0; left:0; right:0; margin:auto;

…
Read more

原写给后端程序员的前端开发流程与正确姿势.

admin web前端 暂无评论 610 浏览

写给后端程序员的前端开发流程与正确姿势.

关键词:node.js,npm,webpack,laravel mix,package.json,js代码压缩.

一直以来,后端程序员可能出于对前端的不太熟悉,尤其对于现代的前端工程化更不太熟悉.一看到nodejs,npm等名词就发懵.但后端程序员在实践中还是多多少少会接触前端的.可能你需要修改别人的前端代码,或自己开发前端代码(您可能是全栈程序员了).

想必你修改或写前端代码,也和我以前一样,直接从网上找模板(包括html,css.js)修改成自己样式.或自己从头写html.css.js.

不管是哪种类型,你一般是直接修改Html页面里引入的css.js吧:).

你可能也有些困惑 ,怎么别人的js代码看着像加密过似的,不知如何下手修改?

而你自己从头写的css,js则会直接被引入到Html页面里.

css,js代码里有一些注释,还有一些空格,空行等内容 ,直接在html页里引用是其实是没有经过压缩(去空格,去空行,去注释)的代码.会加大网络传输量,导致加载会慢一些.

而且,你写的js.没有经过压缩(去空格,注释,变量,函数重命名为短名称等),导致别人可能会偷盗你的代码.

如果你压缩了js后,再发布你的代码 ,而你的js看起来像经过加密一样,别人也基本看不懂你的代码了.

而你要做的就是开发代码与发布代码相分离.

本教程教你使用laravel-mix进行正确前端开发(注:laravel-mix最初是用于php框架laravel的前端资源编译工作 ,现在可用于任何语言的任何前端项目).

 

你项目的目录结构应该如下:

my-app/

----------index.html

-----------src/

----------------app.css

----------------app.js

-----------dist/

-----------------app.js

-----------------app.css

 

其中…

                    
Read more

谈一谈对 TailwindCSS 的看法

admin web前端 暂无评论 2,120 浏览
作者：山月
链接：https://www.zhihu.com/question/337939566/answer/1752928891
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

谈一谈对 TailwindCSS 的看法

从 NPM.DEVTOOL 的标签中可以看出: 每个月 npm 下载量高达 300 万次，jsDelivr 下载量更是高达 900 万次，Star 数也即将突破 38K，依赖于它的 Packge 及 Github Repo 更是成千，足见其受欢迎程度。然而你需要使用它时，Node 的版本最好大于 12.13.0

本人的 CSS 方案常用 TailwindCSS，在这里谈一点感受，并对一些常见的问题解答一下

TailwindCSS 因为一个 class 代表一个 CSS 属性这种原子化 CSS

…
Read more

CSS框架：Tailwind的优缺点

admin web前端 暂无评论 2,501 浏览

Tailwind

Tailwind是一款utility-first的框架，可以被用于快速地构建UI。作为一个utility-based的CSS库，它比那些语义和精益标记（lean markup）更注重实用性和速度。在创建网站时，您只需要确定项目的范围，而无需自行编写CSS。虽然Tailwind并不提供默认的主题，您也找不到任何内置的UI组件，但是您可以使用预设计的部件菜单，来构建目标网站。

…
Read more

TailwindCSS 作者谈开发初衷

admin web前端 暂无评论 1,272 浏览

知乎问题：如何评价CSS框架TailwindCSS？

原文：CSS Utility Classes and "Separation of Concerns"

最近Tailwindcss频繁出现在我的视野里，从单词拼写中看，多多少少与css有点关系。近几年是JS框架大行其道，CSS方面少有新的框架出现。

昨天突然看到尤大神在Github上的动态，fork了该项目，看来马上要火的节奏啊！

图片

我们来看下这个tailwindcss究竟是个什么东西，有什么独特的功能和优势，最重要的是能否给我们开发者带来显而易见的效率的提升。

首先看官网对它的定义

Rapidly build modern websites without ever leaving your HTML.

tailwindcss 基于比组件更小、更灵活的工具类思想的 CSS 框架。这个思想简单来说就是用 class 保证灵活、便于自定义组件，而不是在组件基础上实现个性化。

图片

可以看到代码的特点是一个Html标签伴随着一堆的CSS类，这种写法好像也不陌生。就是将样式封装的粒度更细。所以很多人看到就说“这不就是原子类吗？”

作者有多年工作经验，其对待 CSS 的心路历程如下：…

Read more