web前端开发css模型 Web前端开发知识点之CSS的使用方式

web前端开发css模型 Web前端开发知识点之CSS的使用方式很多朋友对这方面很关心，我爱编程网整理了相关文章，供大家参考，一起来看一下吧！

Web前端工程师要掌握的CSS技巧

今天小编要跟大家分享的文章是关于Web前端工程师要掌握的CSS技巧。正在从事web前端工作的小伙伴们快来和小编一起看一看吧，希望本篇文章能够对正在从事web前端工作的小伙伴们有所帮助。


1、元素的margin的top、bottom及padding的top、bottom使用百分比作为单位时，其是相对父元素的宽度width的而不是我们想象的高度height；举个例子：





其实出现这种现象，我们可以巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）当然该元素高度上的百分比是相对其父元素高度的百分比的，min-height及max-height也适用这条规律。





2、含有定位属性的元素，其top、bottom单位为百分比时，该百分比是相对于父元素的高度的。同理，left、right则是相对于父元素的宽度的。





这一点，我昨天在查资料写这篇文章—最全面的元素水平垂直居中方法汇总的时候就发现有个大牛也理解错了—-CSS布局奇淫技巧之_各种居中里面的第八点。3、边框宽度不允许使用百分比值这点就不解释了。4、width：100%当父容器里有绝对定位的子元素时，子元素设置width:100%实际上指的是相对于父容器的padding+content的宽度。当子元素是非绝对定位的元素时width:100%才是指子元素的content，其等于父元素的content宽度。





将上面子元素的position改成了relative后，其宽度就变成了parent宽度。





5、line-height你知道line-height:150%和line-height:1.5的区别吗？知道了就可以跳过此处，不知道继续看下面：举个例子：





上面可以看到line-height有单位时，子元素是继承父元素的line-height的，无单位时，其line-height等于无单位的数值乘以子元素本身的字体大小。显然为了不出现意外，还是建议首选无单位的。6、ex和ch单位ex：取当前作用效果的字体的x的高度，在无法确定x高度的情况下以0.5em计算；ch:以节点所使用字体中的“0”字符为基准，找不到时为0.5em；





ex和ch单位，类似于em和rem,依赖于当前的字体和字体大小。但是，不同的是，这两货是基于字体的度量单位，依赖于设定的字体。ch单位通常被定义为数字0的宽度。你可以在EricMeyers的博客里找到关于它的一些有意思的讨论，例如将一个等宽字体的字母”N”的宽度设置为40ch，那么在另一种类型的字体里它却可以包含40个字母。这个单位的传统用途主要是盲文的排版，但是除此之外，肯定还有可以应用他的地方。ex定义为当前字体的小写x字母的高度或者1/2的1em。很多时候，它是字体的中间标志。





x-height;theheightofthelowercasex这些单位有很多用途，大部分用于版式的微调。比方说，sup元素（上角文字标），可以通过position:relative;bottom:
1ex;实现。类似的方法，你可以实现一个下角文字标。浏览器默认的方式是利用上标和下标特定垂直对齐规则，但是如果你想更细粒度更精确得控制，你可以像下面这样做：Css代码





7、使用calc时运算符之间要有空格，否则可能无效。


以上就是小编今天为大家分享的关于Web前端工程师要掌握的CSS技巧的文章，希望本篇文章能对正在从事web前端相关工作的小伙伴们有所帮助。想要了解更多web前端相关知识记得关注北大青鸟web培训官网。最后祝愿小伙伴们工作顺利！

web前端开发需要掌握哪些知识

1.HTML
知识要点：web工作原理、HTML4及HTML5、常见标签、相对路径与绝对路径、HTML5标签
2.CSS+布局
知识要点：CSS基本语法、基本选择器、复合选择器、背景图片、盒子模型、精灵图、常见网页布局、浮动定位、Flex布局、响应式布局、移动端适配、网页动画、CSS3新特性、Less预处理器
3.ECMA基础
知识要点：ECMA基本语法、数据类型、运算符、分支结构、循环结构、函数、常见内置对象的属性和方法、Array、Math、Date、String
4.DOM
知识要点：DOM模型、节点类型、节点的基本操作、JS操作样式表、克隆节点、获取坐标位置、获取元素尺寸、节点的各种属性和方法。
5.BOM+jQuery
知识要点：History、Location、Navigate、定时器、线程、事件循环、web工作原理、性能优化、事件对象、正则表达式、jQuery框架
6.vue框架基本语法
知识要点：vue基本语法、双向绑定、组件传值、条件渲染、列表渲染、事件处理、表单绑定、自定义事件、插槽、过渡、动画、动态路由、嵌套路由、编程式导航、导航守卫、路由懒加载、脚手架、生命周期、vuex、axios、ts、vue3
7.vue案例
知识要点：将知识点融会贯通到案例中。
8.react基本语法
知识要点：react简介、jsx语法、元素渲染、组件和props、state、生命周期、表单、条件渲染、组合继承、hooks、性能优化、redux
9.react案例
知识要点：将知识点融会贯通到案例中
新增内容：微信小程序及uni-app框架
知识要点：
小程序框架（配置/程序与页面注册/路由），开发者工具
小程序框架组件学习（基础/视图/表单/地图/媒体/导航/开发能力）
小程序框架组件学习（地图/媒体/导航/开发能力）
小程序API（基础/路由/界面/网络/数据缓存/位置服务）
小程序API（设备/媒体/开放接口/授权/登录/支付）
10.Node服务器与数据库及框架
Node原生模块、跨域、安全校验、数据加密、数据库基本操作、express框架、koa框架
11.Node 项目周/WebPack

我爱编程网

Web前端开发知识点之CSS的使用方式

今天小编要跟大家分享的文章是关于Web前端开发知识点之CSS的使用方式。本文章小编从与HTML的结合方式、CSS语法、选择器以及盒子模型四个方面进行讲解。下面来和小编一起看一看吧！


一、与HTML的结合方式


CSS与HTML的结合方式一共有三种，分别是：外部样式、内部样式和内联样式。


①外部样式


当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在文档的头部：


_








或者可以像下面这样在





②内部样式


当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用





③内联样式


要使用内联样式，你需要在相关的标签内使用样式(style)属性。


_


Thisisaparagraph





由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。


二、CSS语法


CSS语法规则由两个主要的部分构成：选择器，以及一条或多条声明。


选择器通常是您需要改变样式的HTML元素。


每条声明由一个属性和一个值组成。两条声明之间被分号分开。


属性是您希望设置的样式属性。每个属性有一个值。属性和值被冒号分开。


在下面这个例子中，h1是选择器，color和font-size是属性，red和14px是值。





三、选择器


CSS的选择器主要分为两大类，一类基本选择器；一类扩展选择器。


①基本选择器


基本选择器包括id选择器，元素选择器和类选择器。


id选择器可以为标有特定id的HTML元素指定特定的样式。id选择器以"#"来定义。例如下面代码指定id为red的标签中文本为红色。


#red{color:red;}


元素选择器可以为相应的HTML元素指定特定的样式。元素选择器前面没有任何字符。例如下面代码指定div标签中文本为红色。


div{color:red;}


类选择器可以为标有特定class的HTML元素指定特定的样式。类选择器以一个点号显示。例如下面代码指定class为center的标签中文本居中对齐。


.center{text-align:center}


②扩展选择器


扩展选择器是在基本选择器的基础上扩展出来的，下面介绍几种常见的。


*选择器(*
{})可以为HTML的所有元素指定特定的样式。例如下面代码指定HTML页面中所有文本为红色。


*{color:red;}


并集选择器(选择器1,选择器2{})可以为多个选择器指定特定的样式。例如下面代码指定div和span两种标签中文本为红色。


div,span{color:red;}


子选择器(选择器1选择器2{})可以为选择器1中的选择器2指定特定的样式。例如下面代码指定div中span标签文本为红色。


divspan{color:red;}


父选择器(选择器1>选择器2{})可以为含有选择器2的选择器1指定特定的样式。例如下面代码指定含有span的div标签文本为红色。


div>span{color:red;}


属性选择器(元素[属性="属性值"])可以为含有该属性且属性值等于该值的元素指定特定的样式。其中，元素和属性值可以省略。例如下面代码指定align属性等于center的div标签文本为红色。


div[align="center"]{color:red;}


伪类选择器(元素:状态{})可以为该元素处于该状态时指定特定的样式。例如下面的代码指定鼠标悬浮在超链接上时文本为红色。


a:hover{color:red;}


四、盒子模型


所有HTML元素可以看作盒子，在CSS中，"box
model"这一术语是用来设计和布局时使用。


CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。


盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。


下面的图片说明了盒子模型：






Margin(外边距)-清除边框外的区域，外边距是透明的。


Border(边框)-围绕在内边距和内容外的边框。


Padding(内边距)-清除内容周围的区域，内边距是透明的。


Content(内容)-盒子的内容，显示文本和图像。



默认情况下，标签的width和height属性指的是content(内容)的宽和高，我们在设置边框和边距的时候一定要注意。如果想要让width和height是最终盒子的大小，可以设置下面的代码：


box-sizing:border-box;


以上就是小编今天为大家分享的关于Web前端开发知识点之CSS的使用方式的文章，希望本篇文章能够对正在从事web前端工作和学习的小伙伴们有所帮助，想要了解更多web前端知识记得关注北大青鸟web培训官网，最后祝愿小伙伴们工作顺利，城市一名优秀的web前端程序员。


文章来源：原创_绲墓适_

以上就是我爱编程网为大家带来的web前端开发css模型 Web前端开发知识点之CSS的使用方式，希望能帮助到大家！