css备忘录

1. 元素隐藏

	display:none	visibility: hidden	opacity: 0
DOM 结构	浏览器不会渲染 display 属性为 none 的元素，不占据空间；	元素被隐藏，但是会被渲染不会消失，占据空间;	透明度为 100%，元素隐藏，占据空间；
事件监听	无法进行 DOM 事件监听；	无法进行 DOM 事件监听；	可以进行 DOM 事件监听；
性能	动态改变此属性时会引起重排，性能较差；	动态改变此属性时会引起重绘，性能较高；	提升为合成层，不会触发重绘，性能较高；
继承	不会被子元素继承，毕竟子类也不会被渲染；	会被子元素继承，子元素可以通过设置 visibility: visible; 来取消隐藏；	会被子元素继承,且，子元素并不能通过 opacity: 1 来取消隐藏；
transition	transition 不支持 display。	visibility 会立即显示，隐藏时会延时	opacity 可以延时显示和隐藏

display: none与visibility: hidden的区别

• display: none的元素不占据任何空间，visibility: hidden的元素空间保留；
• display: none会影响css3的transition过渡效果，visibility: hidden不会；
• display: none隐藏产生重绘 ( repaint ) 和回流 ( relfow )，visibility: hidden只会触发重绘；
• 株连性：display: none的节点和子孙节点元素全都不可见，visibility: hidden的节点的子孙节点元素可以设置 visibility: visible显示。visibility: hidden属性值具有继承性，所以子孙元素默认继承了hidden而隐藏，但是当子孙元素重置为visibility: visible就不会被隐藏。

元素隐藏方法总结

• 如果希望元素不可见、不占据空间、资源会加载、DOM 可访问： display: none；
• 如果希望元素不可见、不能点击、但占据空间、资源会加载，可以使用： visibility: hidden；
• 如果希望元素不可见、可以点击、占据空间，可以使用： opacity: 0；
• 如果希望元素不可见、可以点击、不占据空间，可以使用： opacity: 0; position: absolute;；
• 如果希望元素不可见、不能点击、占据空间，可以使用： position: relative; z-index: -1;；
• 如果希望元素不可见、不能点击、不占据空间，可以使用： position: absolute ; z-index: -1;；

2. CSS元素分类

替换or不可替换元素

从元素本身的特点来讲，可以分为替换和不可替换元素。

替换元素

替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。

例如：浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；

又例如：根据<input>标签的type属性来决定是显示输入框，还是单选按钮等。

(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容，即是一个空元素，浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。

不可替换元素

(X)HTML的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）。段落<p>是一个不可替换元素，文字“段落的内容”全被显示。

显示元素

除了可替换元素和不可替换元素的分类方式外，CSS 2.1中元素还有另外的分类方式：块级元素（block-level）和行内元素（inline-level，也译作“内联”元素）

块级元素

在视觉上被格式化为块的元素，最明显的特征就是它默认在横向充满其父元素的内容区域，而且在其左右两边没有其他元素，即块级元素默认是独占一行的。

典型的块级元素有：<div>、<p>、<h1>到<h6>，等等。

通过CSS设定了浮动（float属性，可向左浮动或向右浮动）以及设定显示（display）属性为“block”或“list-item”的元素都是块级元素。但是浮动元素比较特殊，由于浮动，其旁边可能会有其他元素的存在。而“list-item”（列表项<li>），会在其前面生成圆点符号，或者数字序号。

行内元素

行内元素不形成新内容块，即在其左右可以有其他元素，例如<a>、<span>、<strong>等，都是典型的行内级元素。

display属性等于“inline”的元素都是行内元素。几乎所有的可替换元素都是行内元素，例如<img>、<input>等等。

不过元素的类型也不是固定的，通过设定CSS 的display属性，可以使行内元素变为块级元素，也可以让块级元素变为行内元素。

3. 行内元素与块级元素

display:inline形成的行内元素为行内非替换元素

display:inline-block能设置宽高,上下左右的padding和margin像block都生效，而不会独占一行。

行内元素与块级元素区别

	行内替换元素	行内非替换元素	块级元素
width/height	可设置	不可设置	可设置
margin	四个方向都能正常起作用	左右起作用，上下不起作用	四个方向都能正常起作用
padding	四个方向都能正常起作用	左右起作用，上下不起作用	四个方向都能正常起作用
换行	不自动换行	不自动换行	自动换行

行内非替换元素：

• height:行内非替换元素可用line-height来控制高度
• padding:对于有背景色和内边距的行内非替换元素，背景可以向元素上下延伸，但是行高没有改变。因此视觉效果就是与前面的行重叠
• margin:行内非替换元素的外边距不会改变一个元素的行高

行内元素间的空隙问题

产生原因

元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，所以元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，例如：当行内元素font-size:16px时，间距为8px

解决方案

• 将行内元素写成一排（代码可读性差）

• 父元素设置font-size为0，子元素单独再设置字体大小。

• 给行内元素设置浮动float（不过需要解决浮动可能带来的其他问题）或者给父元素加上display: flex。

  这两种方法的本质其实是将元素的类型进行了改变，不再是行内元素

4. link和@import的区别

两者都是外部引用CSS的方式，它们的区别如下：

• link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
• link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
• link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
• link支持使用Javascript控制DOM去改变样式；而@import不支持。

5. line-height 的理解及其赋值方式

（1）line-height的概念：

• line-height 指一行文本的高度，包含了字间距，实际上是下一行基线到上一行基线距离；
• 如果一个标签没有定义 height 属性，那么其最终表现的高度由 line-height 决定；
• 一个容器没有设置高度，那么撑开容器高度的是 line-height，而不是容器内的文本内容；
• 把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中；
• line-height 和 height 都能撑开一个高度；

（2）line-height 的赋值方式：

• 带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高
• 纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px
• 百分比：将计算后的值传递给后代

6. 对Flex布局的理解及其使用场景

Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis），项目默认沿水平主轴排列。

以下6个属性设置在容器上：

• flex-direction属性决定主轴的方向（即项目的排列方向）。
• flex-wrap属性定义，如果一条轴线排不下，如何换行。
• flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
• justify-content属性定义了项目在主轴上的对齐方式。
• align-items属性定义项目在交叉轴上如何对齐。
• align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

以下6个属性设置在项目上：

• order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
• flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
• flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
• flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
• flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。
• align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

7.border-radius

border-radius:为元素添加圆角边框

完整写法

border-radius:10px 20px 30px 40px/40px 30px 20px 10px

“/”前的四个数值表示圆角的水平半径，后面四个值表示圆角的垂直半径。(椭圆的水平半径和垂直半径)

常见简写

• border-radius：30px/20px；表示每个圆角的水平半径时30px,垂直半径为20px;
• border-radius:30px; 等同于：border-radius：30px 30px 30px 30px/30px 30px 30px 30px；

属性拆分

border-radius是最多可指定四个 border -*- radius 属性的复合属性: border-top-left-radius(左上角)、border-top-right-radius（右上）、border-bottom-right-radius（右下角）、border-bottom-left-radius（左下角）

• 四个值时：border-radius:30px 20px 30px 10px;(每个数值表示的是圆角的半径值，将每个角的水平和垂直半径都设置为对应的数值)左上（10px）,右上（20px），右下（30px）,左下（10px）
• 三个值时： border-radius:30px 50px 10px;(左上 右上左下 右下)，对角线相等
• 两个值时：border-radius:90px 50px;(第一个值左上角和右下角 第二个值右上角和左下角)
• 一个值时（常用）：border-radius:50px; 常用来设置圆形边框、圆角按钮，四个角的圆角值相同。

属性值（px/%）

1. px:半径值就是设置的像素值
2. %:以元素的宽高乘以百分数后得到值r1和r2，进行绘制。

例如

div{
	width:200px;
	height:100px;
	border-radius:50%;
}
/* 以上等同于 */
div{
	width:200px;
	height:100px;
	border-radius:100px/50px;
}

利用birder-radius让元素变成圆时，注意border与padding会改变盒子模型大小。此时直接将border-radius直接设置为50%能够形成圆，如果只设置成内容区域宽高的一半，形成的不是规则的圆(应计算整个盒子的宽高)。