add: CSS 基础回顾

This commit is contained in:
qianguyihao 2019-10-03 22:49:06 +08:00
parent 0ea740c0a7
commit 3975268ef4
8 changed files with 60 additions and 177 deletions

View File

@ -15,9 +15,9 @@
html中的单位只有一种那就是像素px所以单位是可以省略的但是在CSS中不一样。
<font color="#0000FF">**CSS中的单位是必须要写的**,因为它没有默认单位。</font>
- **绝对单位:**
### 绝对单位
1 `in`=2.54`cm`=25.4`mm`=72`pt`=6`pc`。
1 `in`=2.54`cm`=25.4`mm`=72`pt`=6`pc`。
各种单位的含义:
@ -27,7 +27,8 @@ html中的单位只有一种那就是像素px所以单位是可以省略
- `pt`点Points或者叫英镑 (1点 = 1/72英寸)
- `pc`皮卡Picas (1 皮卡 = 12 点)
- **相对单位:**
### 相对单位
`px`:像素
`em`印刷单位相当于12个点
`%`:百分比,相对周围的文字的大小
@ -40,6 +41,10 @@ html中的单位只有一种那就是像素px所以单位是可以省略
## 字体属性
CSS中有很多**非布局样式**(与布局无关),包括:字体、行高、颜色、大小、背景、边框、滚动、换行、装饰性属性(粗体、斜体、下划线)等。
这一段,我们先来讲一下字体属性。
### 行高
CSS中所有的行都有行高。盒子模型的padding绝对不是直接作用在文字上的而是作用在“行”上的。
@ -56,7 +61,6 @@ CSS中所有的行都有行高。盒子模型的padding绝对不是直
为了严格保证字在行里面居中,我们的工程师有一个约定: **行高、字号,一般都是偶数**。这样可以保证它们的差一定偶数就能够被2整除。
### 如何让单行文本垂直居中
小技巧:如果一段文本只有一行,如果此时设置**行高 = 盒子高**,就可以保证单行文本垂直居中。这个很好理解。
@ -206,7 +210,6 @@ CSS样式中常见的文本属性有以下几种
![](http://img.smyhvae.com/2015-10-03-css-18.png)
## 列表属性
```html
@ -230,8 +233,6 @@ ul li{
![](http://img.smyhvae.com/2015-10-03-css-26.png)
## overflow属性超出范围的内容要怎么处理
`overflow`属性的属性值可以是:
@ -295,12 +296,7 @@ ul li{
![](http://img.smyhvae.com/2015-10-03-css-31.png)
## 鼠标的属性cursor
## 鼠标的属性 cursor
鼠标的属性`cursor`有以下几个属性值:
@ -372,7 +368,6 @@ p:hover{
爆料一下,表示博主有两年多的平面设计经验,我做设计的时间其实比写代码的时间要长,嘿嘿···
## 导航栏的制作(本段内容请忽略)
现在我们利用float浮动属性来把无序列表做成一个简单的导航栏吧效果如下
@ -435,8 +430,6 @@ p:hover{
国庆这四天,连续写了四天的博客,白天和黑夜,从未停歇,只交替没交换,为的就是这每日一发。以后会不断更新的。
## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>?不妨关注我的微信公众号:**千古壹号**id`qianguyihao`)。
@ -446,4 +439,3 @@ p:hover{
![](http://img.smyhvae.com/2016040102.jpg)

View File

@ -1,11 +1,5 @@
> 本文最初于2015-10-03发表于[博客园](http://www.cnblogs.com/smyhvae/p/4853995.html),并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我一起入门和进阶前端。
## 本文主要内容
- CSS概述
@ -14,15 +8,13 @@
- CSS几种扩展选择器`后代选择器`、`交集选择器`、`并集选择器`
- CSS样式优先级
## 前言
现在的互联网前端分三层:
- HTML超文本标记语言。从**语义**的角度描述页面**结构**。
- CSS层叠样式表。从**审美**的角度负责页面**样式**。
- JSJavaScript 。从**交互**的角度描述页面**行为**。
- JSJavaScript。从**交互**的角度描述页面**行为**。
## CSS 概述
@ -30,7 +22,6 @@ CSSCascading Style Sheet层叠样式表。CSS的作用就是给HTML页面
css的最新版本是css3**我们目前学习的是css2.1**。 因为css3和css2.1不矛盾必须先学2.1然后学3。
接下来我们要讲一下为什么要使用CSS。
**HTML的缺陷**
@ -49,15 +40,12 @@ css的最新版本是css3**我们目前学习的是css2.1**。 因为css3和c
比如说有一个样式需要在一百个页面上显示如果是html来实现那要写一百遍现在有了css只要写一遍。现在html只提供数据和一些控件完全交给css提供各种各样的样式。
### CSS的重点知识点
盒子模型、浮动、定位
### CSS 整体感知
我们先来看一段简单的css代码
```html
@ -98,12 +86,10 @@ css的最新版本是css3**我们目前学习的是css2.1**。 因为css3和c
![](http://img.smyhvae.com/20170710_1605.png)
我们写css的地方是style标签就是“样式”的意思写在head里面。后面的课程中我们将知道css也可以写在单独的文件里面现在我们先写在style标签里面。
如果在sublime中输入`<st`或者`<style`然后按tab键可以自动生成的格式如下建议
```html
<style type="text/css"></style>
```
@ -118,13 +104,10 @@ type表示“类型”text就是“纯文本”css也是纯文本。
css对换行不敏感对空格也不敏感。但是一定要有标准的语法。冒号分号都不能省略。
## CSS语法
**语法格式:**(其实就是键值对)
```html
选择器{
属性名: 属性值;
@ -132,7 +115,6 @@ css对换行不敏感对空格也不敏感。但是一定要有标准的语
}
```
或者可以写成:
```css
@ -150,7 +132,6 @@ css对换行不敏感对空格也不敏感。但是一定要有标准的语
}
```
**解释:**
- 选择器代表页面上的某类元素,选择器后一定是大括号。
@ -208,15 +189,12 @@ p{color: red;}
注意CSS只有`/* */`这种注释,没有`//`这种注释。而且注释要写在`<style>`
接下来我们要开始真正地讲css的知识咯。
css怎么学CSS有两个知识部分
1 选择器,怎么选;
2 属性,样式是什么
## CSS的一些简单常见的属性
> 我们先来接触CSS的一些简单常见的属性因为接下来需要用到。后期会专门用一篇文章来写CSS的属性。
@ -231,7 +209,6 @@ color:red;
color属性的值可以是英语单词比如red、blue、yellow等等也可以是rgb、十六进制(后期详细讲)。
**字号大小:**fos
```html
@ -261,10 +238,8 @@ font是“字体” weight是“重量”的意思bold粗。
```html
font-weight: normal;
```
normal就是正常的意思。
**斜体:**fsi
```html
@ -279,7 +254,6 @@ italic就是“斜体”。
font-style: normal;
```
**下划线:**tdu
```html
@ -294,9 +268,6 @@ decoration就是“装饰”的意思。
text-decoration:none;
```
PScss没啥难的就是要把属性给记忆准确。
## CSS和HTML结合的方式样式表
CSS和HTML结合的方式其实就是问你css的代码放在哪里比较合适。CSS代码理论上的位置是任意的**但通常写在`<style>`**`<style>`css
@ -305,12 +276,11 @@ CSS和HTML的结合方式有3种
- **行内样式**在某个特定的标签里采用style**属性**。范围只针对此标签。
- **内嵌样式表**在页面的head里采用`<style>`**标签**。范围针对此页面。
- **引入外部样式表css文件**的方式。这种方式又分为两种:
- **引入外部样式表css文件**的方式。这种引入方式又分为两种:
- 1、采用`<link>`标签。例如:`<link rel = "stylesheet" type = "text/css" href = "a.css"></link>`
- 2、采用import必须写在`<style>``@import url(a.css) ;`
> 两种引入样式方式的区别:外部样式表中不能写<link>标签,但是可以写import语句。
> 两种引入样式方式的区别:外部样式表中不能写<link>标签但是可以写import语句。
下面来详细的讲一讲这三种方式。
@ -320,8 +290,8 @@ CSS和HTML的结合方式有3种
该方式比较灵活,但是对于多个相同标签的同一样式定义比较麻烦,适合局部修改。
举例:
```html
<p style="color:white;background-color:red">我不会就这样轻易的狗带</p>
```
@ -347,8 +317,6 @@ CSS和HTML的结合方式有3种
</style>
<body>
<p>洗白白</p>
<p style="color:blue">你懂得</p>
@ -367,29 +335,33 @@ CSS和HTML的结合方式有3种
> 两种引入样式方式的区别:外部样式表中不能写<link>标签但是可以写import语句。
**具体操作如下:**
我们先在html页面的同级目录下新建一个`a.css`文件那说明这里面的代码全是css代码此时就没有必要再写`<style>`
`a.css`的代码如下:
```css
p{
border: 1px solid red;
font-size: 40px;
}
```
上方的css代码中注意像素要带上px这个单位不然不生效。
然后我们在html文件中通过`<link>`标签引入这个css文件就行了。效果如下
![](http://img.smyhvae.com/2015-10-03-css-04.png)
这里再讲一个补充的知识link标签的rel属性
**`<link>`标签的rel属性**
其属性值有以下两种:
- `stylesheet`:定义的样式表
- `alternate stylesheet`:候选的样式表
这里再讲一个补充的知识:**`<link>`标签的rel属性**。其属性值有以下两种:
- `stylesheet`:定义的样式表
- `alternate stylesheet`:候选的样式表
看字面意思可能比较难理解,我们来举个例子,一下子就明白了。
举例:
现在定义我们来定义3种样式表
现在我们来定义3个样式表
a.css定义一个实线的黑色边框
```css
@ -464,7 +436,6 @@ p{
![](http://img.smyhvae.com/2015-10-03-css-06.png)
再比如说,我想让“生命壹号学完了安卓,继续学前端哟”这句话中的“前端”两个变为红色字体,那么我可以用`<span>`标签把“前端”这两个字围起来,然后给`<span>`标签加一个标签选择器。
代码如下:
@ -510,7 +481,6 @@ p{
![](http://img.smyhvae.com/2015-10-03-css-08.png)
id选择器的选择符是“#”。
任何的HTML标签都可以有id属性。表示这个标签的名字。这个标签的名字可以任取但是
@ -619,12 +589,10 @@ css中用`.`来表示类。举例如下:
![](http://img.smyhvae.com/20170711_1706.png)
上图所示css和js都在用同一个id会出现不好沟通的情况。
我们记住这句话:**类上样式id上行为**。意思是说,`class`属性交给css使用`id`属性交给js使用。
**上面这三种选择器的区别:**
- 标签选择器针对的是页面上的一类标签。
@ -637,7 +605,6 @@ css中用`.`来表示类。举例如下:
效率不高,如果页面上的标签越多,效率越低,所以页面上不能出现这个选择器。
举例:
```css
@ -652,7 +619,6 @@ css中用`.`来表示类。举例如下:
![](http://img.smyhvae.com/2015-10-03-css-09.png)
## CSS的几种高级选择器
**高级选择器:**
@ -664,11 +630,8 @@ css中用`.`来表示类。举例如下:
下面详细讲一下这几种高级(扩展)选择器。
### 1、后代选择器: 定义的时候用空格隔开
对于`E F`这种格式,表示**所有属于E元素后代的F元素**,有这个样式。空格就表示后代。
后代选择器,就是一种平衡:共性、特性的平衡。当要把**某一个部分的所有的什么**,进行样式改变,就要想到后代选择器。
@ -687,12 +650,10 @@ css中用`.`来表示类。举例如下:
</style>
```
空格就表示后代。`.div1 p` 表示`.div1`的后代所有的`p`。
这里强调一下:这两个标签不一定是连续紧挨着的,只要保持一个后代的关联即可。也就是说,选择的是后代,不一定是儿子。
举例:
```html
@ -750,18 +711,14 @@ css中用`.`来表示类。举例如下:
上面css中的`div div p`,也能使文字的颜色变红。通过浏览器的审查元素,我们可以看到 p元素的祖先列表
![](http://img.smyhvae.com/20170711_1836.png)
讲到这里我们再提一个sublme的快捷键。
在sublime中输入`p#haha`按tab键后会生成`<p id="haha"></p>`。
在sublime中输入`p.haha`按tab键后会生成`<p class="haha"></p>`。
### 2、交集选择器定义的时候紧密相连
定义交集选择器的时候,两个选择器之间紧密相连。一般是以标签名开头,比如`div.haha`,再比如`p.special`。
@ -808,10 +765,8 @@ h3.special{
![](http://img.smyhvae.com/20170711_1852.png)
注意,交集选择器没有空格。所以,没有空格的`div.red`(交集选择器)和有空格的`div .red`(后代选择器)不是一个意思。
交集选择器可以连续交:(一般不要这么写)
```css
@ -822,9 +777,6 @@ h3.special.zhongyao{
上面这种写法,是 IE7 开始兼容的IE6 不兼容。
### 3、并集选择器定义的时候用逗号隔开
三种基本选择器都可以放进来。
@ -841,17 +793,14 @@ p,h1,#mytitle,.one{
![](http://img.smyhvae.com/2015-10-03-css-10.png)
## 一些 CSS3 选择器
> 所有的css3选择器我们放在HTML5和CSS3课上介绍。暂时先接触一部分。
PS我们可以用`IETester`这个软件测一下CSS在各个版本IE浏览器上的显示效果。
> 所有的 CSS3 选择器,我们放在 CSS3 的内容里介绍。本文暂时先接触一部分。
### 浏览器的兼容性问题
> 我们可以用`IETester`这个软件测一下CSS在各个版本IE浏览器上的显示效果。
IE 微软的浏览器随着操作系统安装的。所以每个windows都有IE浏览器。各版本如下
- windows xp 操作系统安装的IE6
@ -868,12 +817,8 @@ IE 微软的浏览器随着操作系统安装的。所以每个windows都
测试结果如下:
![](http://img.smyhvae.com/20170711_1939.png)
我们可以在[百度统计](http://tongji.baidu.com/data/)里查看浏览器的市场占有率:
- IE9 5.94%
@ -889,7 +834,6 @@ IE 微软的浏览器随着操作系统安装的。所以每个windows都
我们可以用「IETester」软件看看css在各个浏览器中的显示效果。
### 1.子代选择器,用符号`>`表示
> IE7开始兼容IE6不兼容。
@ -922,7 +866,6 @@ div的儿子p。和div的后代p的截然不同。
</div>
```
### 2.序选择器
> IE8开始兼容IE6、7都不兼容
@ -976,7 +919,6 @@ div的儿子p。和div的后代p的截然不同。
}
```
### 3.下一个兄弟选择器
> IE7开始兼容IE6不兼容。
@ -1009,16 +951,13 @@ div的儿子p。和div的后代p的截然不同。
<h3>我是一个标题</h3>
```
效果如下:
![](http://img.smyhvae.com/20170711_1950.png)
这种选择器作用不大。
##我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>?不妨关注我的微信公众号:**千古壹号**id`qianguyihao`)。
@ -1026,4 +965,3 @@ div的儿子p。和div的后代p的截然不同。
扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外:
![](http://img.smyhvae.com/cnblogs/%E7%94%9F%E5%91%BD%E5%9B%A2%E9%98%9F%E5%85%AC%E4%BC%97%E5%8F%B7%E4%BA%8C%E7%BB%B4%E7%A0%81.jpg)

View File

@ -209,7 +209,6 @@ a标签有4种伪类即对应四种状态要求背诵。如下
当然了,在写`a:link`、`a:visited`这两个伪类的时候,要么同时写,要么同时不写。如果只写`a`属性和`a:link`属性,不规范。
## 动态伪类举例
我们在第一段中描述过,下面这三种动态伪类,针对所有标签都适用。

View File

@ -1,11 +1,8 @@
> 本文最初于2017-07-29发表于[博客园](http://www.cnblogs.com/smyhvae/p/7253929.html),并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我一起入门和进阶前端。
> 以下是正文。
## 本文重点
- CSS的继承性
@ -23,7 +20,6 @@
![](http://img.smyhvae.com/20170724_2359.png)
上方代码中我们给div标签增加红色属性却发现div里的每一个子标签`<p>`也增加了红色属性。于是我们得到这样的结论:
> 有一些属性,当给自己设置的时候,自己的后代都继承上了,这个就是**继承性。**
@ -34,35 +30,26 @@
![](http://img.smyhvae.com/20170725_2122.jpg)
上图中我们给div加了一个border但是发现只有div具备了border属性而p标签却没有border属性。于是我们可以得出结论
- 关于文字样式的属性都具有继承性。这些属性包括color、 text-开头的、line-开头的、font-开头的。
- 关于盒子、定位、布局的属性,都不能继承。
以后当我们谈到css有哪些特性的时候我们要首先想到继承性。而且要知道哪些属性具有继承性、哪些属性没有继承性。
## CSS的层叠性
很多公司如果要笔试,那么一定会考层叠性。
### 层叠性:计算权重
**层叠性就是css处理冲突的能力。** 所有的权重计算,没有任何兼容问题!
CSS像艺术家一样优雅像工程师一样严谨。
我们来看一个例子,就知道什么叫层叠性了。
![](http://img.smyhvae.com/20170725_2132.png)
@ -70,20 +57,20 @@ CSS像艺术家一样优雅像工程师一样严谨。
当多个选择器,选择上了某个元素的时候,要按照如下顺序统计权重:
> **id的数量类的数量标签的数量**
- id 选择器
- 类选择器、属性选择器、伪类选择器
- 标签选择器、伪元素选择器
因为对于相同方式的样式表其选择器排序的优先级为ID选择器 > 类选择器 > 标签选择器
针对上面这句话,我们接下来举一些复杂一点的例子。
### 层叠性举例
#### 举例1计算权重
![](http://img.smyhvae.com/20170725_2138.png)
如上图所示,统计各个选择器的数量,优先级高的胜出。文字的颜色为红色。
PS不进位实际上能进位奇淫知识点255个标签等于1个类名但是没有实战意义
@ -94,12 +81,10 @@ PS不进位实际上能进位奇淫知识点255个标签等于1
上图可以看到,第一个样式和第二个样式的权重相同。但第二个样式的书写顺序靠后,因此以第二个样式为准(就近原则)。
#### 举例3具有实战性的例子
![](http://img.smyhvae.com/20170726_2221.png)
现在我要让一个列表实现上面的这种样式第一个li为红色剩下的li全部为蓝色。
如果写成下面这种代码是无法实现的:
@ -112,14 +97,12 @@ PS不进位实际上能进位奇淫知识点255个标签等于1
![](http://img.smyhvae.com/20170726_2229.png)
上图中,第二个样式比第一个样式的权重要大。因此在实战中可以实现这种效果:**所有人当中,让某一个人为红,让其他所有人为蓝。**
这种方式好用是好用,但用好很难。
就拿上方代码来举例,为了达到这种效果,即为了防止权重不够,比较稳妥的做法是:**把第二个样式表照着第一个样式表来写,在此基础上,给第二个样式表再加一个权重。**
上面这个例子很具有实战性。
#### 举例4继承性造成的影响
@ -169,10 +152,8 @@ PS不进位实际上能进位奇淫知识点255个标签等于1
</body>
</html>
```
### 层叠性:权重计算的问题大总结(非常重要)
层叠性。层叠性是一种能力就是处理冲突的能力。当不同选择器对一个标签的同一个样式有不同的值听谁的这就是冲突。css有着严格的处理冲突的机制。
@ -181,14 +162,11 @@ PS不进位实际上能进位奇淫知识点255个标签等于1
![](http://img.smyhvae.com/20170727_2050.png)
上面这个图非常重要,我们针对这个图做一个文字描述:
- 选择上了,数权重,(id的数量类的数量标签的数量)。如果权重一样,谁写在后面听谁的。
- 没有选择上,通过继承影响的,就近原则,谁描述的近听谁的。如果描述的一样近,比如选择器权重,如果权重再一样重,谁写在后面听谁的。
### CSS样式表的冲突的总结
- 1、对于相同的选择器比如同样都是类选择器其样式表排序行级样式 > 内嵌样式表 > 外部样式表(就近原则)
@ -210,66 +188,53 @@ PS不进位实际上能进位奇淫知识点255个标签等于1
![](http://img.smyhvae.com/2015-10-03-css-16.png)
### 题目演示
CSS的层叠性讲完了我们来做几个题目吧。
#### 题目1
![](http://img.smyhvae.com/20170727_0851.png)
#### 题目2
![](http://img.smyhvae.com/20170727_0853.png)
#### 题目3
![](http://img.smyhvae.com/20170727_0855.png)
#### 题目4
![](http://img.smyhvae.com/20170727_0857.png)
## 权重问题深入
### 同一个标签,携带了多个类名,有冲突:
这里需要补充两种冲突的情况:
- 1、对同一个标签如果用到了了多个相同的内嵌样式表它的优先级 **定义**的样式表中,谁最近,就用谁。
- 1、对同一个标签如果用到了了多个相同的内嵌样式表它的优先级**定义**的样式表中,谁最近,就用谁。
- 2、对于同一个标签如果引用了多个相同的外部样式表它的优先级html文件中引用样式表的位置越近就用谁。
例如:(就近原则)
![](http://img.smyhvae.com/20170727_2021.png)
上图中,**文字显示的颜色均为红色**。因为这和在标签中的挂类名的书序无关只和css的顺序有关。
### !important标记
### !important标记优先级最高
来看个很简单的例子:
![](http://img.smyhvae.com/20170727_2029.png)
上图中显然id选择器的权重最大所以文字的颜色是红色。
如果我们想让文字的颜色显示为绿色,只需要给标签选择器的加一个`!important`标记,此时其权重为无穷大。如下:
![](http://img.smyhvae.com/20170727_2035_2.png)
important是英语里面的“重要的”的意思。我们可以通过如下语法
```
@ -288,7 +253,6 @@ font-size:60px !important;
错误的语法:
```
font-size:60px; !important; 不能把!important写在外面
font-size:60px important; 不能忘记感叹号
@ -298,7 +262,6 @@ font-size:60px important; 不能忘记感叹号
**1!important提升的是一个属性而不是一个选择器**
```css
p{
color:red !important; 只写了这一个!important所以只有字体颜色属性提升了权重
@ -316,10 +279,8 @@ font-size:60px important; 不能忘记感叹号
所以综合来看字体颜色是red听important的字号是50px听id的
**2!important无法提升继承的权重该是0还是0**
比如HTML结构
```html
@ -352,21 +313,15 @@ font-size:60px important; 不能忘记感叹号
![](http://img.smyhvae.com/20170727_2046.png)
PS! important做站的时候不允许使用。因为会让css写的很乱。
现在,我们知道层叠性能比较很多东西:
选择器的写法权重,谁离的近,谁写在下面。
PS做网站的时候!important 尽量不要用。否则会让css写的很乱。
## 知识回顾
> 我们把以上内容和上一篇文章做一个简单的知识回顾。
### CSS属性
> css属性面试的时候会有笔试笔试没有智能感应的。
> css属性面试的时候会有笔试笔试没有智能提示的。
加粗,倾斜,下划线:
@ -376,7 +331,6 @@ font-style:italic;
text-decoration:underline;
```
背景颜色、前景色:
```
@ -405,45 +359,34 @@ div,p
*
```
IE7能够兼容的儿子选择器、下一个兄弟选择器。如下
```
div>p
h3+p
```
IE8能够兼容的
```
ul li:first-child
ul li:last-child
```
### css两个性质
- 继承性:好的事儿。继承从上到下,哪些能?哪些不能?
- 层叠性:冲突,多个选择器描述了同一个属性,听谁的?
再看几个题目:
![](http://img.smyhvae.com/20170727_0900.png)
![](http://img.smyhvae.com/20170727_0901.png)
![](http://img.smyhvae.com/20170727_0902.png)
![](http://img.smyhvae.com/20170727_0903.png)
权重问题大总结,最后有个例子,比较难,暂时略掉。
## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>?不妨关注我的微信公众号:**千古壹号**id`qianguyihao`)。
@ -451,6 +394,3 @@ ul li:last-child
扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外:
![](http://img.smyhvae.com/2016040102.jpg)

View File

@ -8,17 +8,15 @@ css 进阶的主要内容如下。
- html 元素的分类和特性
- html 元素默认样式和定制化
- css 选择器
- css 常见属性
- css 常见属性(非布局样式)
### 2、css 布局相关
- 布局属性和组合解析
- css 布局属性和组合解析
- 常见布局方案介绍
- 常见布局方案
- 三栏布局案例
@ -50,11 +48,11 @@ css 进阶的主要内容如下。
## 常见问题
> 不会css 的前端称之为伪前端。
> 不会 css 的前端称之为伪前端。
- html 元素的嵌套关系是怎么确定的?那些嵌套不可以发生?
比如说,为什么 div 可以放在 a 标签里面?
- 比如说,为什么 div 可以放在 a 标签里面?
- css 选择器的权重是如何计算的?写代码时要注意什么?

View File

@ -7,7 +7,7 @@
- html 元素的嵌套关系
- html 元素的默认样式和定制化
- html 元素的默认样式和 CSS Reset
- html 常见面试题
@ -126,7 +126,7 @@ div 是最常见的元素大多数场景下都可以用div实在不行
按照内容分类:
20191003_1946.png
![](http://img.smyhvae.com/20191003_1946.png)
图片来源:<https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content>
@ -140,7 +140,7 @@ div 是最常见的元素大多数场景下都可以用div实在不行
**注意**:在 HTML5 中 `a > div` 是合法的, `div > a > div`是不合法的 ;但是在 html 4.0.1 中, `a > div` 仍然是不合法的。
## html 元素的默认样式和定制化
## html 元素的默认样式和 CSS Reset
比如下拉框这种比较复杂的元素,是自带默认样式的。如果没有这个默认样式,则该元素在页面上不会有任何表现,则必然增加一些工作量。

View File

@ -0,0 +1,11 @@
## 前言
CSS中有很多**非布局样式**,这些样式(属性)和与布局无关,包括:
- 字体、字重、颜色、大小、行高
- 背景、边框
- 滚动、换行
- 装饰性属性(粗体、斜体、下划线)等。

View File

@ -1,7 +1,7 @@
## 深圳IT互联网大厂有哪些2019年版
> 本文更新于201905。
> 本文最初更新于201905。
### 一线大厂
@ -23,14 +23,19 @@
- oppo深圳
- 商汤科技(人工智能领域独角兽)
- 平安系列(平安科技、平安寿险、平安产险、平安金融等,各自独立,可分开投简历)
- 顺丰
- 微众银行
### 独角兽公司
- 商汤科技(人工智能领域的独角兽)
- 超级猩猩(运动健身领域的独角兽)
### 三线大厂
- 有赞(深圳)