前端css杂记

1em等于16px,页面默认是16px,一个字宽高都等于16px; 当行内元素display:inline的元素设置float:left浮动后,display值也被设置成block;总结:无论行内元素还是块元素,被设置浮动之后,display属性值都变为block;更具体的说,是变成了Inline-block ①:①和②的结果不一样,宽高应该写在一起,否则容易出现小问题 <style> .container{ margin:40px auto; width:400px; height: 500…

前端CSS编程之道-LESS

由于前端css编写繁琐,最近开始学习LESS,用LESS编写文件.less文件可以直接编译成我们要的.css文件学习Less 我下面是我练习时的截图,希望小伙伴也能动手自己写一下,而不是复制粘贴模式学习.动手敲能体会不一样 1.下载国内的koala的预处理器,可以自动把less编译成css 2.使用sublime安装插件,推荐这种方式,因为我们是前端攻城狮变量用@来声明变量…

扯一扯前端css的整体架构设计：（2）base基础类的那些事儿

周一下午在实验室写了第一篇博文,有几个人捧场,那咱就得接着下去啊.然后我觉得现在写的内容更多的偏向于谈一下我对于前端css架构的理解和前端经验的一个小总结,所以就把标题里原来的[项目总结]给删掉了.但是这不是说以后文章就不提我手里这个半死不活的类电商网站了,还得接着提,要不然拿什么自黑呢~~ [回顾一下上一篇] 上一篇里我主要针对于我最近写的一个项目的前端结构,开始介绍了一些前端结构的一些知识或者说是经验吧. 为什么前端css也有架构,为什么要考虑css的架构,怎么实现css的简单架构,这些问题…

Web前端-CSS必备知识点

Web前端-CSS必备知识点 css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位. 链接: <link rel="stylesheet" type="text/css" href="sheet.css" title="default"> link标签: <link rel="styleshe…

WEB前端 CSS(非布局)

目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器直接选择器组合选择器分组选择器也叫并集选择器属性选择器伪类选择器伪元素选择器 CSS选择器是一个查找的过程,高效的查找影响页面加载的效率 CSS选择器的优先级 CSS声明 CSS非布局声明 CSS布局声明除了css 对样式有影响,标签元素的其它属性也会有一些影响.如的type类型 WEB前端 CSS CSS被用于同时控制多重页面的样式和布局样式很多:关键在于布局的耗时和难点通过CSS可以将html中的格式化都剥离…

前端 CSS 目录

前端 CSS 介绍前端 CSS语法前端 CSS 注释…

{前端CSS} 语法 Css的几种引入方式 css选择器选择器的优先级 CSS属性相关背景属性边框 CSS盒子模型清除浮动 overflow溢出属性　　定位（position）z-index

前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 CSS实例每个CSS样式由两个组成部分:选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束. CSS注释 /*这是注释*/ CSS的几种引入方式行内样式行内式是在标记的style属性中设定CSS样式.不推荐大规模使用. <p style="c…

前端CSS - 相对定位,绝对定位,固定定位

前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进行位置调整,那么就要使用相对定位了 position:relative; → 必须先声明,自己要相对定位了, left:100px; → 然后进行调整. top:150px; → 然后进行调整. 1.2 相对定位的特性 - 不脱标,老家留坑,形影分离相对定位不脱标,真实位置是在老家,只不过影子出去…

前端 CSS 继承性和层叠性

CSS有两大特性:继承性和层叠性前端 CSS的继承性前端 CSS层叠性 CSS选择器优先级前端 CSS 优先级样式设置important…

day 45 前端CSS

前端——CSS选择器

目录前端CSS CSS三种引入方式 CSS标签选择器基本选择器 1.元素选择器 2.类选择器 3.id选择器 4.通用选择器组合选择器 1.后代选择器空格 2.儿子选择器 > 3.毗邻选择器 + 4.弟弟选择器 ~ 属性选择器中括号[ ] 1.精确属性查找 2.更精确属性查找 3.精确度再提高查找组合选择器 1.标签组合选择伪类选择器 1.日常状态 2.鼠标悬浮时 3.鼠标按下时 4.鼠标送开时 5.鼠标聚焦之后触发伪元素选择器 1.选择首字 2.再标签之前添加文本 3.在标签之…

零基础学WEB前端-CSS

CSS指层叠样式表(Cascading Style Sheets),CSS 是标准的布局语言,用来控制元素的尺寸.颜色.排版.CSS 由 W3C 发明,用来取代基于表格的布局.框架以及其他非标准的表现方法.样式 (style) 定义如何显示 HTML 元素:样式通常存储于样式表中:外部样式表存储于 CSS 文件中. CSS可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显示效果功能.简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能. 1.CSS基础…

前端CSS兼容的一些思路

半夜睡不着觉,起来写第一博. 近段时间,公司要给一个网站产品增加一个换色功能,安排我负责该事项. 之前参与过一些定制项目,是基于该产品的二次开发,说实话里面的前端结构很混乱.所以第一步就是将html前端标签进行了重构,规范了标签结构和className.第二步就开始按照产品原有的样式增加CSS代码. 在这时碰到了一个圆角边框的问题,以前的代码是在每个页面写一个固定结构的div,使用背景图片来实现圆角边框.代码结构大致如下: .top_border{background:url(topborder…

前端css：“圣杯布局”

昨天面试前端,一面危险通过,面试官建议我看看“圣杯布局”,听起来很玄妙的名字,花了一晚上弄明白怎么回事,惊讶于前端工作的细节和技巧! 我先看几个基础,在后面要用到的: 1.CSS right/left 属性 right/left属性规定元素的右/左边缘.定义了定位元素右/左外边,与其包含块右/左边界之间的偏移. right:50px:设置元素位置,使其右边缘距离其包含元素的右边缘5.它的右边和包含它的元素的右边之间的距离5px: <html> <head> <style ty…

前端CSS的工程化——掌握Sass这四大特性就够了

初遇 CSS,一见倾心记得刚遇见css的时候,咱像是见了美人儿一样,简直是爱不释手啊,简简单单写几行算不上代码的代码,就能做出这么漂亮的东西,这也成了咱前端之路的最初动力. 然而,随着项目体量和页面复杂度的增加,咱很快就发现这美人儿非但不漂亮,而且缺胳膊少腿儿的: 缺少模块系统.模块系统是软件工程化的基石,CSS 的这个缺陷对前端项目的工程化管理造成了很大阻力,导致开发大型应用时编码和维护都异常困难.js 一开始也没有模块系统,后来各种轮子频出,什么CMD,AMD,UMD全蹦出来了,乱哄哄的,…

前端CSS技术全解（一）

一.概述 1)用HTML完成样式工作哪个标签有哪个属性难以记忆需求变更影响较大(例如像修改成功法则以下的文字颜色需要修改4个地方) <h1 align="center"> <font face="微软雅黑" color="red">成功法则</font> </h1> <p align="center"> <font face="微软雅黑"…

前端 CSS预处理器Less

引文 Less是一种动态的样式语言.Less扩展了CSS的动态行为,比如说,设置变量(Variables).混合书写模式(Mixins).操作(Operations)和功能(Functions)等等,最棒的是,Less使用了现有的CSS语法,也就是说,你可以直接把你现成的样式文件“style.css”直接改成“style.less”,他也能正常工作.如下. <link rel="stylesheet/less" href="less/style.less" /…

Web前端性能杂记

前面说过,用户感受的响应时间是取决于诸多因素的,我们几乎不能得到真实的用户响应时间.对于Web应用前端性能的研究也不是为了准备得到一个响应时间,其性能一部分取决于Web服务器和应用服务器(下载资源,执行等),另一部分取决于浏览器的实现机制.界面JS文件的执行等,所以我们讨论前端性能的目的是减少总的响应时间,或者说让用户“感觉很快”. 一.与前端性能相关的头信息 a)Accept-Encoding:编码方式.是否支持压缩,支持何种格式的压缩: b)Connetion:连接.是否持久连接: c)Ex…

后端自动构建前端css和js

引子: 别的复杂前端开发技术不会,用得多的还是手写代码,手动处理. 3年前手写合并压缩js和css文件的asp脚本代码目前还能正常运行,也就没有多大使用别的技术的动力. 直到近期被一个问题纠结着,今天花了一天时间摸索完成了一个后端构建功能. 目前接触到的项目前端开发模式基本上是一样的项目不会很大通用css.js.第三方库会独立成单个文件页面依赖的多个文件会合并成一个css或js文件,并进行自定义语法编译和压缩混淆多个页面会用到的但不够通用的会独立成一个html文件,内嵌style.scr…

前端css规范

文章整理了Web前端开发中的各种CSS规范,包括文件规范.注释规范.命名规范.书写规范.测试规范等. 一.文件规范 1.文件均归档至约定的目录中(具体要求以豆瓣的CSS规范为例进行讲解): 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core 通用UI元素样式库 /css/lib JS组件相关样式库 /css/ui 业务类的CSS是指和具体产品相关的文件,放在如下目录中: 读书 /css/book/ 电影 /css/movie/ 音乐 /cs…

【项目总结】扯一扯电商网站前端css的整体架构设计（1）

最近半忙不忙的写了一个外包网站,网站主要功能是艺术品竞拍和艺术衍生品的销售.工程已经完成了80%左右,现在前后端代码量已经50W行左右,我主要负责的是前端设计和前端布局.下面就先放一个网站的设计图吧,因为涉及到甲方的“商业机密”,所以打一下马赛克: 这篇文章主要算是我对于这个项目的总结或者说是对于这阶段自己看的一些前端书或者经验的一个总结吧,所以设计图就不贴那么多了.整个项目的设计图由最开始的ui定了个首页稿基调,剩下的界面大部分都是我在首页稿基础上做出来的,以后有机会再唠.PS:不过话说博客园…

web前端—css面试题

1.CSS 选择符有哪些? 2.CSS 优先级的选择过程? 优先级复合就近原则,同权重的情况下有限选择最近的属性. 载入样式的话是以最后载入的定位为准. 优先级: !important > id > class > tag(important要优先于内联样式) 3.阐述一下CSS3的新增伪类. 4.如何居中 div?如何居中一个浮动元素?如何让绝对定位的div居中? div居中:给div一个宽度,然后添加margin: 0 auto;属性即可. 浮动元素居中: 绝对定位的div居中: 5…

Bootstrap 简介(Web前端CSS框架)

目录1.简介2.特点3.组件4.Javascript插件5.定制自己的框架代码6.Bootstrap Less 1.简介Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成.Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国…

前端CSS的基本素养

前端开发的三驾马车——html.css.js,先谈谈CSS CSS 前期:解决布局.特效.兼容问题中级:网站风格的制定.色调.模块.布局方式.交互方式.逻辑设计等高级:模块命名.类的命名.文件的组织.共用模块的提取.代码的复用.可读性.扩展性.维护性 CSS模块 1.Base(基础) 基础的样式,就是一些需要最先定义好,针对于某一类元素的通用固定样式. 2.Layout(布局) 布局样式,是跟页面整体结构相关,譬如,列表,主内容,侧边栏的位置.宽高.布局方式等. 3.Module(模…

Bootstrap（Web前端CSS框架）

官方定义: Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. 即:Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目. 百科定义: 简介:Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,是一个CSS/HTML框架.Boot…