CSS
好程序员IT
这个作者很懒,什么都没留下…
展开
-
好程序员web前端培训分享CSS定位的教程
好程序员web前端培训分享CSS定位的教程,CSS定位 (Positioning) 属性允许你对元素进行定位。 CSS定位和浮动 CSS为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务。 定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然,这个功能非常强大,也很让人吃惊。要知道,用户代理对CSS2中定位的支持远胜于对其它方面的原创 2020-07-27 16:33:07 · 119 阅读 · 0 评论 -
好程序员web前端培训分享HTML/CSS部分面试题
好程序员web前端培训分享HTML/CSS部分面试题。准备参加web前端面试的小伙伴们一起看一看吧,希望能够对大家有所帮助! 1、什么是盒子模型? 在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分。这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。 2、行内元素有哪些?块级元素有哪些?原创 2020-07-15 13:34:52 · 220 阅读 · 0 评论 -
好程序员web前端培训分享HTMLCSS学习笔记BFC
好程序员web前端培训分享HTMLCSS学习笔记BFC,BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域,只有Block-level box(块)参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。BFC的布局规则一、内部的Box会在垂直方向,一个接一个地放置。二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠(按照最大margin值设置)三、每个元素的原创 2020-06-30 23:59:59 · 543 阅读 · 0 评论 -
好程序员web前端培训分享React学习笔记(二)
好程序员web前端培训分享React学习笔记(二),组件的数据挂载方式,属性(props)props是正常是外部传入的,组件内部也可以通过一些方式来初始化的设置,属性不能被组件自己更改,但是你可以通过父组件主动重新渲染的方式来传入新的 props 属性是描述性质、特点的,组件自己不能随意更改。 之前的组件代码里面有props的简单使用,总的来说,在使用一个组件的时候,可以把参数放...原创 2020-04-26 14:57:12 · 134 阅读 · 0 评论 -
好程序员web前端培训分享React学习笔记(一)
好程序员web前端培训分享React学习笔记(一),React的起源和发展:React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。React与传统MVC的关系轻量级的视图层库!A JavaScript library ...原创 2020-04-26 14:36:06 · 178 阅读 · 0 评论 -
好程序员web前端教程系列之CSS菜单图标知识整理
好程序员web前端教程系列之CSS菜单图标知识整理,CSS是一种用来表现HTML或XML等文件样式的计算机语言,它是web前端人才必须要掌握的基础技能之一。想要学习web前端,最开始的基础学习一定是CSS。接下来的好程序员web前端教程就给大家简单分享CSS菜单图标相关知识。 一般在写网页的时候会遇到一些小图标,通常一些复杂的图标我们可以选择使用第三方图标库,但是一些比较简单的小图标,像这种...原创 2020-03-02 15:03:53 · 180 阅读 · 0 评论 -
web前端开发必学知识点 你都掌握了吗
一.基础学习 主要就是html、css、JavaScript。建议直接从html5、css3、ES5入手进行来学习。由于该部分是web前端开发中的基础部分,因此建议大家基础一定要打牢固。二.与美工相关、后端开发、设计相关的学习优秀的web前端开发工程师,将熟知自己工作界面的各种布局。因此,这也将是你工作中的重点。根据公司的不同,大家可扩大知识面,加深对自身产品的理解。 ...原创 2019-06-04 17:31:15 · 151 阅读 · 0 评论 -
好程序员分享学web前端技术都需要掌握什么
好程序员分享学web前端技术都需要掌握什么,随着Web前端概念的普及,网站重构的影响力正以惊人的速度增长。XHTML+CSS布局、DHTML和Ajax像一阵旋风,铺天盖地席卷而来,各种规模的IT企业都对自己的网站进行了重构。前端开发的入门门槛其实非常低,与服务器端语言先慢后快的学习曲线相比,前端开发的学习曲线是先快后慢。所以,对于从事IT工作的人来说,前端开发是个不错的切入点。 那么想...原创 2019-06-17 17:12:19 · 152 阅读 · 0 评论 -
好程序员web前端分享引用类型与基本类型
好程序员web前端教程分享引用类型与基本类型,本文将从以下六个方面讲解引用类型和基本类型 1. 概念 2. 内存图 3. 引用类型和基本类型作为函数的参数体现的区别 4. 引用类型的优点: 5. 引用类型的赋值(对比基本类型) 6. 浅拷贝和深拷贝 以下为详细内容: 1. 概念: 基本类型也叫简单类型,存储的数据是单一的,如:学生的个数就是...原创 2019-06-24 17:32:37 · 202 阅读 · 0 评论 -
好程序员web前端精讲 web前端三要素
web前端就业前景十分广阔,吸引了行里行外无数的小伙伴入坑求学。好程序员今日开讲,解析web前端三要素,无论是小白上路还是技术进阶都有必要一读!话不多说,三要素是哪三个重要知识点呢!这就开讲!所谓三要素,即HTML、CSS、JavaScript语言。 三种语言都是web前端开发中的基础技术性语言,更是各大企业招聘的重点。当然,互联网发展十分迅速,这三种技术语言也将随之演变,如现今的HTM...原创 2019-06-04 16:33:47 · 191 阅读 · 0 评论 -
好程序员HTML5大前端分享web前端面试题集锦三
1、HTML语义化的理解?答案:HTML语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;在没有样式CSS的情况下也以一种文档格式显示,并且是容易阅读的;搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于SEO;使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。2、父元素透明,但是又不影响子元素的透明度怎么实现?答案:方法一:用rgba方法二:再加上一层与...原创 2019-06-03 17:00:37 · 152 阅读 · 0 评论 -
好程序员学习笔记:函数
一、函数具有某种特定功能的一段代码,函数简化了代码,提高了代码的复用性,增加了安全性简化了操作。其包括修饰词、返回值类型、函数名(参数列表、{ 、函数体、执行的代码、return 返回值、}等构成。具体来说:修饰词:确定当前函数的适用范围,一般使用的是public(公共的),这里暂不多述。返回值类型:提示当前函数返回值的类型,返回值可以不存在,但是必须给出,即使没有所需void,如...原创 2019-06-06 14:37:44 · 150 阅读 · 0 评论 -
好程序员HTML5大前端分享学Web前端开发有哪些要求
互联网的迅速普及无疑便利了我们的生活,各种编程语言也是俘获了各类编程工作者的芳心。Web前端就是其中之一。前端工程师一度成为大家仰慕的高薪阶层。零基础入行着实有些许不便,,那么,有同学提问web前端开发有什么硬性要求吗?要求高吗?好程序员今日就陪大家说道说道!一、学习HTML5和CSS3基础互联网发展速度之快让众人瞠目结舌,4G时代刚刚站稳脚跟,5G时代意见拉开了新的...原创 2019-06-05 15:36:43 · 228 阅读 · 0 评论 -
好程序员web前端分享CSS3颜色值HSLA表示方式
说明:本文档兼容性测试基础环境为:windows系统;IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51说明:HSLA(H,S,L,A)取值:H:Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360S:Saturation(饱和度)。取值为:0.0% - 100.0%...原创 2019-05-16 16:49:09 · 234 阅读 · 0 评论 -
好程序员web前端分享CSS学习:HSLA颜色模式
好程序员web前端分享CSS学习:HSLA颜色模式一、理论:1.HSLA颜色模式a.HSLA在HSL基础上增加了不透明度,值越大透明度越低b.HSLA颜色模式的浏览器兼容性和HSL一样,只有较新版本的主流浏览器才支持2.RGBA和HSLA颜色模式二者可以完全相互替换3.RGBA/HSLA的IE兼容方案a.在IE8以下版本,一般在前面设置一个非透明色,在其后紧跟一个RGBA/HSLA颜色模式b....原创 2019-05-16 16:34:34 · 281 阅读 · 0 评论 -
好程序员web前端教程分享CSS技巧!
好程序员web前端教程分享CSS技巧!现在学web人越来越多,小白的问题也越来越多,那么今天就为大家分享一下CSS学习技巧!在web前端工作中离不开css的使用。为了帮助大家提高自己的css使用技巧,下面让我们一起来看一看吧!1、使用 :not() 为导航添加/取消边框很多人会这样给导航添加边框,然后给最后一个取消掉:/* add border */.nav li {...原创 2019-06-25 18:00:52 · 329 阅读 · 0 评论 -
好程序员Web前端教程分享CSS派生选择器的讲解
CSS 高级语法CSS id 选择器派生选择器通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁。在 CSS1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中,它们称为派生选择器,但是无论你如何称呼它们,它们的作用都是相同的。派生选择器允许你根...原创 2019-06-25 18:14:28 · 305 阅读 · 0 评论 -
好程序员web前端学习路线分享CSS浮动-文档流篇
好程序员web前端学习路线分享CSS浮动-文档流篇,纯文本的排列,文档流就像我们的文本内容一样,所有的文字都会紧挨着,一个个排列下来,如果到了边界,就会换一行排列。当然如果敲回车或者按下空格键一般都会认为是一个词间距,因为英文中每个单词之间是有距离的,不像中文每个汉字连在一起的。所以不管你敲了几个回车,不管你敲了几个空格。程序都认为只有一个词间距的空格距离。我们把这种现象称为空白折叠现象。下图...原创 2019-09-18 10:57:16 · 179 阅读 · 0 评论 -
好程序员web前端学习路线分享CSS浮动-清除浮动篇
好程序员web前端学习路线分享CSS浮动-清除浮动篇,为什么要清除浮动 这里所说的清除浮动,并不是不要浮动了,而是清除浮动与浮动之间的影响。那么到底会有什么影响呢?1.高度塌陷 举个例子我们看一下。 我们在这里设置了div0是外容器,div1是内部容器,div1因为设置了宽高是100,所以显示的时候就是一个橙色的100*100的方块,但是div0仅设置了背景色,因为d...原创 2019-09-18 10:46:46 · 413 阅读 · 0 评论 -
好程序员web前端学习路线分享前端基础面试题
好程序员web前端学习路线分享前端基础面试题,希望对大家有所帮助。1、HTML语义化的理解?答案:HTML语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;在没有样式CSS的情况下也以一种文档格式显示,并且是容易阅读的;搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于SEO;使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。2、父元素透明,但是又不影响子元素...原创 2019-09-09 17:33:36 · 121 阅读 · 0 评论 -
好程序员web前端学习路线分享css3中的渐进增强和降级
好程序员web前端学习路线分享css3中的渐进增强和降级,渐进增强和降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3,但是 CSS3 特效太优秀不忍放弃,所以在高级浏览器中使用CSS3,而在低级浏览器只保证最基本的功能。二者的目的都是关注不同浏览器下的不同体验,但是它们侧重点不同,所以导致了工作流程上的不同。渐进增强(Progressive Enhancement...原创 2019-08-29 16:24:22 · 226 阅读 · 0 评论 -
好程序员web前端教程分享异步加载CSS的一些方法
好程序员web前端教程分享异步加载CSS的一些方法,在我们写页面的时候,我们做最主要的任务就是提高页面的性能和弹性加载速度,以不会延迟页面的呈现的形式来加载CSS。这是因为在默认情况下,-浏览器会同步加载外部的CSS- 在下载和解析CSS时会影响所有页面呈现 这两种情况都会导致潜在的延迟。当然,这也是在开始渲染页面之前,应该至少加载网站的CSS的一部分,并且为了立即将该初始C...原创 2019-07-30 17:39:01 · 132 阅读 · 0 评论 -
好程序员分享Css详解bem书写规范
好程序员分享Css详解bem书写规范,bem是基于组件的web开发方法。其思想是将用户界面分隔为独立的块,从而使开发复杂的UI界面变得更简单和快,且不需要粘贴复制便可复用现有代码。BEM由Block、Element、Modifier组成。选择器里用以下连接符扩展他们的关系:`__:双下划线用来连接块和块的子元素 ` :仅作为连字符使用,连接块或元素或修饰符的多个单词(也可以直接写成驼峰式...转载 2019-07-23 17:02:08 · 164 阅读 · 0 评论 -
好程序员web前端分享应该怎样学好web前端?
好程序员web前端分享应该怎样学好web前端?作为一个想学好web前端的新人来说,这是一个很好的问题,所以尽早的选择好方向、规划好自己的学习路线,比别人多一点付出更多的努力,你就算是赢在了起跑线上。下面就一起看一看想要学习web前端应该掌握哪些学习方法吧!1、一定要重视基础首先建立第一条技能线:就是前端由html,css,js组成;然后将其细化为第二条线,html是由html4和html5...原创 2019-06-24 17:24:56 · 657 阅读 · 0 评论 -
好程序员分享CSS标签的分类、及显示模式
好程序员分享CSS标签的分类、及显示模式,标签的类型(显示模式)HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素。一、块级元素(block-level)每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。常见的块元素有<h1>~<h6>、<p>、<div>、&l...转载 2019-07-01 16:43:54 · 170 阅读 · 0 评论 -
好程序员web前端干货之web前端开发框架汇总
好程序员web前端干货之web前端开发框架汇总,其实一个前端开发框架其实就是一系列产品化的HTML/CSS/JavaScript组件的集合,我们可以在设计中使用它们。前端开发框架有很多,其中有一些写得很棒。为了让大家看的更明白,下文列举了目前应用最广泛的几款前端开发框架。记住,这些框架并不仅仅是CSS 栅格之类的一些东西,它们包括的是整套的前端开发框架。一、BootstrapBoost...原创 2019-05-20 15:19:59 · 496 阅读 · 0 评论 -
好程序员web前端技术分享css3旧版弹性盒
好程序员web前端技术分享css3旧版弹性盒1、display:box说明:(必须加前缀)设置弹性盒使用如下属性,必须在父代设置display:box;2、box-orient说明:在父级上设置该属性,则子代按水平排列或竖直排列。 注:所有主流浏览器不支持该属性,必须加上前缀。1)horizontal 水平排列,子代总width=父级width。若父级...原创 2019-05-07 16:32:57 · 106 阅读 · 0 评论 -
好程序员web前端分享CSS元素类型
学习目标1、元素类型分类依据和元素类型分类2、元素类型的转换3、inline-block元素类型的应用4、置换和非置换元素的概念和应用案例一、元素类型分类依据和元素类型分类根据css显示分类,XHTML元素被分为三种类型:块状元素,内联元素1.块状元素(block element)A)块状元素在网页中就是以块的形式显示,所谓块状就是元素显示为矩形区域,常用的块状元素包...原创 2019-04-29 17:57:03 · 149 阅读 · 0 评论 -
好程序员web前端分享CSS基础篇
学习目标1、CSS简介 2、CSS语法 3、样式的创建 4、两种引入外部样式表的区别 5、样式表的优先级和作用域 6、CSS选择器 7、选择器的权重 8、浮动属性的简单应用 9、HTML、CSS注释一、CSS简介css:层叠样式表 英文全名:cascading style sheets,WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制,简单说就...原创 2019-04-29 17:13:07 · 157 阅读 · 0 评论 -
好程序员web前端培训分享HTML基本结构和基本语法
HTML基本结好程序员web前端培训分享HTML基本结构和基本语法构和HTML基本语法好程序员web前端培训分享HTML基本结构和基本语法HTML基本结构HTML的基本语法1、<常规标记><标记 属性=“属性值” 属性=“属性值”></标记>标记也可叫标签或叫元素例如:<head></head>2.空标记<...原创 2019-04-29 15:40:46 · 172 阅读 · 0 评论 -
好程序员web前端分享HTML基础篇
好程序员web前端分享HTML基础篇,最近遇到很多新手,都会问,如果要学web前端开发,需要学什么?难不难学啊?多久能入门之类的问题?那么今天好程序员就先来给大家分享一下web前端学习路线:HTML基础学习目标1、本专业介绍、HTML相关概念,HTML发展历史 2、WEB标准,W3C/WHATWG/ECMA相关概念 3、相关软件的应用以及站点的创建 4、HTML基本结构和HTML语法...原创 2019-04-29 14:22:44 · 167 阅读 · 0 评论 -
好程序员分享DIV+CSS3和html5+CSS3有什么区别
好程序员web前端分享DIV+CSS3和html5+CSS3有什么区别,不管是DIV+CSS3还是html5+CSS3,他们都是我们对网页开发布局方式的统称,但是DIV+CSS3作为网页的基础开发这句话其实并不严谨,因为而div只是HTML的一个比较重要的元素而已,而标准的叫法应是HTML+CSS,我们要比较的其实是html+css3和html5+css3在布局开发到底有什么不同!以前的...原创 2019-04-24 16:46:01 · 280 阅读 · 0 评论 -
好程序员web前端分享主流CSS image比较
好程序员web前端分享主流CSS image比较在还原设计图的时候,难免会碰到一些样式图片的引用。如何来对这些图片做优化呢?本文简单的梳理了一下目前几种比较常用的使用方式。 注:1. 有更好的方法的话,欢迎补充。2. 下文未对性能问题做真实的测试,请保持一颗好奇的心,并告诉我们CSS Sprite 这是目前使用比较多的方式。也是我个人认为相对最优的一种解决方式。当然,这里的最优指的是特定环境。...原创 2019-04-19 17:15:27 · 213 阅读 · 0 评论 -
好程序员web前端分享12个CSS高级技巧汇总
好程序员web前端分享下面这些CSS高级技巧,一般人我可不告诉他哦。 使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-child 选择项目 对图标使用SVG 优化显示文本 对纯CSS滑块使用 max-height 继承 box-sizing 表格单元格等宽 用Flexbox摆脱外边距的各种hack 使...原创 2019-04-28 17:45:22 · 157 阅读 · 0 评论 -
好程序员web前端分享18个用CSS制作出来的东西
好程序员web前端分享18个用CSS制作出来的东西,与流行的看法相反,CSS不仅仅是用来提供一个WEB页面的基本风格,以使它看起来更有吸引力。还有很多其他的事情,CSS也可以做的很好。由于它创建动画和交互的能力,CSS集合HTML以及JavaScript给WEB开发者提供了尝试不同方法的机会。 浏览器就像一个空的画布,WEB开发者可以在这里尽情的发挥。下面是18个人们用CSS创建的又酷...原创 2019-04-23 16:17:36 · 167 阅读 · 0 评论 -
好程序员web前端开发测验之css部分
好程序员web前端开发测验之css部分Front End Web Development Quiz CSS 部分问题与解答Q: CSS 属性是否区分大小写?<p><font size="3"> ul {</font></p> <p><font size="3"> MaRGin: 10px;</font>&...原创 2019-04-23 15:50:22 · 148 阅读 · 0 评论 -
好程序员web前端分享值得参考的css理论:OOCSS、SMACSS与BEM
好程序员web前端分享值得参考的css理论:OOCSS、SMACSS与BEM最近在The Sass Way里看到了Modular CSS typography一文,发现文章在开头部分就提到了OOCSS、 SMACSS、 BEM、这3个词。“如果还不知道这些是什么,请先不要继续看下去”,联想到作者这样友好(gāo lěng)的提醒,作为围观群众,自然要有所回应。所以,本文在这里分别介绍它们。OO...原创 2019-04-23 15:36:51 · 127 阅读 · 0 评论 -
好程序员web前端分享css初始化代码
好程序员web前端分享css初始化代码,CSS初始化是指重设浏览器的样式。不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一。如果没对CSS初始化往往会出现浏览器之间的页面差异。每次新开发网站或新网页时候通过初始化CSS样式的属性,为我们将用到的CSS或html标签更加方便准确,使得我们开发网页内容时更加方便简洁,...原创 2019-04-18 17:01:58 · 174 阅读 · 0 评论 -
好程序员web前端分享CSS Bug、CSS Hack和Filter学习笔记
CSS Bug、CSS Hack和Filter学习笔记1)CSS Bug:CSS样式在各浏览器中解析不一致的情况,或者说CSS样式在浏览器中不能正确显示的问题称为CSSbug.2)CSS Hack: CSS中,Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法,因为它们都属于个人对CSS代码的非官方的修改,或非官方的补丁。有些人更喜欢使用patch(补丁)来描述这种行为。3)...原创 2019-05-05 15:45:30 · 168 阅读 · 0 评论 -
好程序员web前端教程之CSS3渐变
好程序员web前端教程之CSS3渐变,CSS3渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可实现。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。1、线性渐变语法:background: linear-gradient(dire...原创 2019-05-08 15:48:08 · 172 阅读 · 0 评论