这是我参与「第四届青训营 」笔记创作活动的的第1天 主要内容为CSS

CSS

1.使用方式

CSS的使用方式分为四种分别为外联式 嵌入式 内联式 导入式

link和@import的区别

1. link是html标签 @import是css提供的
2. 页面被加载时 link标签会同时加载，而import引用的css会等到页面被加载完成才会加载
3. import只能在IE5以上识别 而link是标签无兼容问题
4. 可以通过js操作dom，插入link标签改变样式，而dom是基于文档的，无法使用@import插入央视
5. 如果同时引用然后存在相同的样式，import的样式会被css文件层叠掉，link的方式样式权重高于import的权重。

2.CSS工作过程

3.CSS选择器

类型

基本选择器

1. 通配符选择器
2. id选择器
3. 类选择器
4. 标签选择器
5. 伪类选择器
6. 伪元素选择器
7. 属性选择器

属性选择器的三种使用方式

1. 全局匹配

[disabled] {
  color: red;
  font-size: 20px;
}

会作用到全部包含disabled属性的元素上

2.与标签选择器混用

input[type='password'] {
  color: red;
  font-size: 20px;
}

与标签选择器一起使用 只会作用到符合条件的元素上

3.部分匹配

 a[href^='#']{
  color: red;
  font-size: 20px;
}
 a[href$='.jpg']{
  color: red;
  font-size: 20px;
}

通过^和$来部分的匹配属性值

组合选择器

包括5种形式

1. 直接组合
2. 后代组合
3. 亲子组合
4. 兄弟选择器
5. 相邻兄弟选择器

选择器组

选择器中间用逗号隔开 所有选择器选中的元素都会使用样式

选择器优先级

4.颜色

颜色可以用三种方式来设置

1. 直接写颜色的名字
2. 使用RGB
3. 使用HSL

注:可以在RGB和HSL后面加a 设置透明度alpha属性

5.字体

常用属性

1. font-family 字体类型

   建议:字体列表最后写上通用的字体族 英文字体写在中文字体前

2. font-size ：字体大小

3. font-style ：字体风格

4. fong-weight：字体粗细

字体粗细一般值从100-900设置,normal对应400,bold对应700,但是如果字体支持才可以从100-900设置 有的字体可能只支持normal和bold

5. line-height ：行高
6. text-align ：文字对齐方式
7. letter-spacing 字母间距
8. word-spacing 单词间距

6.继承问题

某些属性会自动继承自父元素的计算值，除非显示的指定一个数值，一般跟文字相关的都会自动继承，和模型相关的不会继承，如果想强制继承可以使用inherit属性

如果没有指定同时也没有继承到值则使用初始值

line-height继承问题

• line-height如果继承过来的是数值 那么元素就直接等于继承来的值，
• 如果是2/1.5这种比例，会将比例继承过来，
• 如果是百分比那么会将计算好的数值继承过来。

CSS求值过程

对于font-size这种最终可以直接计算出值的属性在resolving阶段就会把值计算出来，但是对于width，height这种属性如果值是百分比最终需要到运行环境才能得到具体值的话还需要一步formatting，继承到的是父元素的计算值，所以继承的1.2em并不是得到的1.2em而是它的计算值

布局

常规流的盒子属性

width height padding border margin

margin塌陷问题

相邻元素的margin-top和margin-bottom会发生重叠，取大的值为双方的间隙，空白元素也会发生重叠。 解决方案:

1. 外层元素padding代替margin
2. 内层元素透明边框 border:1px solid transparent
3. 内层元素创建bfc:例如使用绝对定位或者overflow:hidden等方式创建bfc
4. 外层元素overflow:hidden创建bfc

盒模型分类

浏览器内核根据cssbo模型将盒子分为标准盒模型和怪异盒模型，

• box-sizing设置为content-box的时候为标准盒模型 content就是width为他设置padding,border等会撑大盒子。
• box-sizing设置为border-box时为怪异(IE)模型，width就是content+padding+border

块级元素和行内元素

布局中的常规流

IFC

BFC

块级元素和行内元素共同出现在同一元素内

如果一个容器中同时有块级和行级 会为两行文字添加一个块级盒子 我们在布局中不会看到 css排版引擎中会处理

flex布局

flex是一种弹性布局，当父盒子设置为display：flex时，里面的盒子都会变成它的子盒子，子盒子浮动会无效化，父盒子和子盒子分别都有6种可设置属性：

容器

• flex-direction（主轴方向）
• flex-warp（换行）
• flex-flow（flex-direction和flex-warp）
• justify-content（主轴方向盒子、空隙排列方式）
• align-items（侧轴方向盒子排列方式）
• align-content（侧轴方向盒子、空隙排列方式，换行时有效）

子单元

• order（排列顺序）
• flex-grow（剩余空间放大比例）
• flex-shrink（剩余空间缩小比例）
• flex-basis（剩余空间具体分配空间）
• flex（前三总合）
• align-self（单个子盒子侧轴排列方式）

flex布局子元素不是行内块，是其布局的子元素，可以设置宽高

grid布局

flex流式布局仅仅能处理一维的布局，对于二维的布局来说处理能力很弱，所以二维使用grid布局。 布局有时候不是流式的一条线 所以flex不方便 所以grid主要是二维布局

容器

display: grid
grid-template-columns
grid-template-rows
grid-template-areas
grid-template-gap
justify-items 
align-items 
place-items //前两个属性之和
justify-content 
align-content 
place-content 

子单元

grid-column-start 
grid-column-end 
grid-row-start 
grid-row-end
grid-area 
justify-self
align-self 
place-self

布局中的float

float主要是为了文字环绕图片的场景设计的

• 浮动的元素会脱离文档流
• 浮动后面的元素如果是块级元素，会占据块级元素的文本位置，与背景和边框重叠
• 浮动不会重叠
• 会将块级元素和行内元素变成行内块元素

浮动的问题

1. 用浮动来进行布局，浮动的元素会脱离文本流，会造成父元素高度塌陷的问题
2. 因为浮动元素脱离标准流，不占据原来的位置，所以与浮动元素同级的非浮动元素位置会变化。
3. 如果这个元素不是第一个浮动元素的话，前面的元素也要进行浮动，不然容易影响页面结构显示。

所以尽量避免使用浮动来进行布局，只在文字环绕图片的情况使用就好。

清除浮动的方法

1. 父元素固定宽高：简单，代码少，无兼容问题。但是内部元素高度不确定的情况下无法使用。

2. 添加新元素:在浮动元素后面添加一个空的div，css属性设置clearboth。简单，代码量少，没有兼容问题，但是需要添加无意义的HTML标签，不利于后期维护。

3. 使用伪元素:仅使用css实现，不容易出错。但是仅支持IE8以上和非IE浏览器。

4. 触发父元素BFC;也是使用css实现，代码少，浏览器支持性好。但是用overflow:hidden实现的元素可能造成内部正常显示的元素被裁剪。

布局中的position

position主要有四个属性为，absolute,relative,fixed``static

static是position的默认值，按照标准文档流来排列。

absolute依据最近一层的定位元素定位。脱离文档流，可以通过left,bottom，right,top设置

relative依据自身来定位。relative定位的元素不会脱离文档流，原来的位置仍然保留。

fixed是相对浏览器的窗口进行定位的，同样会脱离文档流，即使拖动滚动条，元素的位置也不变，浏览器的一些广告效果就是这样的。

学习CSS的建议