Web前端基础知识整理-CSS篇

邱勇发布于2019-08-29 15:21 / 796人阅读

摘要：标签标签自定义盒模型一基本概念盒模型由里向外是由构成的。生成相对定位的元素，相对于其正常位置进行定位。相对与支付的高度，通常为字体高度的一半。视口被平均分为单位的相对于视口的高度。

CSS手册：http://t.mb5u.com/css3/
选择器
一、元素选择符

通配选择符(*):选择所有元素

类型选择符(E)：以文档对象类型作为选择符

id选择符(E#id):以唯一标识符id属性等于id的E对象作为选择符

class选择符(E.class):以class属性包含class的E对象作为选择符

二、关系选择符

包含选择符(E F):选择所有被E元素包含的F元素

子选择符(E>F):选择所有作为E元素的子元素F。

相邻选择符(E+F):选择紧贴再E元素之后F元素。

兄弟选择符(E~F):选择E元素后面的所有兄弟元素F。

三、属性选择符

四、伪类选择符

五、伪对象选择符

优先级：
标签选择符、伪类与伪对象：权重为1。
类选择符、属性选择符：权重为10。
ID选择符：权重为100。
内联style属性：权重为1000。
!important：权重为无穷。

盒模型
一、基本概念：盒模型由里向外是由：content、padding、border、margin构成的。
二、类型：标准盒模型、IE模型

标准盒模型：width=content

          height=content

IE盒模型：width=content+padding+border

        height=content+padding+border

三、CSS设置两种模型

/* 标准模型 */
box-sizing:content-box;

 /*IE模型*/
box-sizing:border-box;

定位
一、定位position分类

static默认值，没有定位，元素出现在正常的流中。

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

relative：生成相对定位的元素，相对于其正常位置进行定位。

fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。

inherit：规定应该从父元素继承 position 属性的值。

尺寸单位
一、文本相对长度单位

em（CSS1）：相对于当前对象内文本的字体尺寸

如果body的font-size：设置为14px，那么1em = 14px

ex（CSS1）：相对长度单位。相对与支付"x"的高度，通常为字体高度的一半。

ch（CSS3）：相对与数字“0”的宽度

rem（CSS3）：相对于根元素（html元素）font-size的计算倍数
如果html的font-szie：设置为14px，那么1rem = 14px

二、视口相对长度单位

vw（CSS3）：相对于视口的宽度。视口被平均分为100单位的vw

vh（CSS3）: 相对于视口的高度。视口被平均分为100单位的vh

vm（CSS3）: 相对于视口的宽度或高度。对于视口的宽度或高度，总是相对于小的那个。视口的宽度或高度被均分为100单位的vm

专线服务 idc机房托管 web前端基础 web前端零基础零基础web前端 web前端0基础

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113268.html

前端开发-从入门到Offer - 收藏集 - 掘金

摘要：一些知识点有哪些方法方法前端从入门菜鸟到实践老司机所需要的资料与指南合集前端掘金前端从入门菜鸟到实践老司机所需要的资料与指南合集归属于笔者的前端入门与最佳实践。工欲善其事必先利其器-前端实习简历篇 - 掘金有幸认识很多在大厂工作的学长，在春招正式开始前为我提供很多内部推荐的机会，非常感谢他们对我的帮助。现在就要去北京了，对第一份正式的实习工作也充满期待，也希望把自己遇到的一些问题和...

sf_wangchong 2019-08-20 16:10 评论0 收藏0
前端文档收集

摘要：系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法随笔分类 - HTML5 HTML5中40个最重要的技术点常用meta整理网页性能管理详解 HTML5 ...

jsbintask 2019-08-21 12:05 评论0 收藏0
前端文档收集

摘要：系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法随笔分类 - HTML5 HTML5中40个最重要的技术点常用meta整理网页性能管理详解 HTML5 ...

?xiaoxiao, 2019-08-05 12:00 评论0 收藏0
前端文档收集

摘要：系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法随笔分类 - HTML5 HTML5中40个最重要的技术点常用meta整理网页性能管理详解 HTML5 ...

muddyway 2019-08-29 13:21 评论0 收藏0
【连载】前端个人文章整理-从基础到入门

摘要：个人前端文章整理从最开始萌生写文章的想法，到着手开始写，再到现在已经一年的时间了，由于工作比较忙，更新缓慢，后面还是会继更新，现将已经写好的文章整理一个目录，方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理从最开始萌生写文章的想法，到着手...

madthumb 2019-08-23 14:15 评论0 收藏0