前端学习总结——CSS

CSS（cascading style sheet）层叠样式表

• 给文档添加样式：优先级：内联样式>内部样式表>外部样式表
  • 内联样式
  • 内部样式表
  • 外联样式表

• CSS书写顺序：
  • 显示属性：display/position/float/clear
  • 自身属性：width/height/margin/padding/border/background
  • 文本属性：color/font/text-align/vertical-align/whitespace

常用样式总结：

• 单行文本截断并添加省略号：

white-space: nowrap;/* 不换行 */
overflow-x: hidden;
text-overflow：ellipsis;/* 隐藏部分加省略号 */
word-wrap: normal;

•  容器内多行文本垂直居中方法：

.container {
  display：table；/* 外层容器 */
}
.content {
  display：table-cell; /* 内层文本 */
  vertical-align：middle;
}

•  行内块和行内元素文本对齐方式调整：

vertical-align：bottom；/* 默认 */
vertical-align：top；
vertical-align：middle；
vertical-align：10px;
vertical-align：-10px；

• 如何让内盒子在外盒子中居中？外层盒子固定宽高，内层给100%，外层设定padding
• 给定位元素设置相对定位relative和绝对定位absolute的区别和联系：
  • 都是使用left/right top/bottom来设置位置
  • absolute新建一个层并把原来的位置腾出来，定位是相对于其上级定位元素（包括绝对定位和相对定位元素）的位置，若其上级都没有定位元素，就是相对于HTML文档
  • relative新建了一个层，但是原来的位置不给腾出来，相对于原来位置的定位
  • 一般我们设置定位都是给父级元素一个relative，给子级元素一个absolute，这样可以直接设置子级相对父级元素的位置
• 清除浮动：
  
  • 块级元素无法识别浮动元素的位置，高度塌陷问题

 

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

 

• margin塌陷问题：子元素设置margin-top，父元素随子元素一起有了这个margin值，而不是子元素相对于父元素在其上增加margin；
  
  • 让父级元素触发BFC（Block Formatting Context，块格式化上下文），下列方式会导致BFC：
    • float: right/left
    • position: absolute/fixed
    • display: inline-block; table-cell;(多行文本垂直居中)
    • flex
    • overflow: hidden/auto/scroll
  • 或者给父级元素：border-top: 1px solid transparent;

• 背景图片属性设置：

background-color: #fff;
background-image: url(/img/bg.png);
background-repeat：no-repeat；
background-attachment: fixed;/* fixed：背景图片固定在视口，不滚动；scroll：默认值，背景repeat并滚动 */
background-position:center center;/* x | y； 可以是百分数，像素值，left，right | bottom，top， */ 
background-size: 100% 100%；/* 值可以是：百分数，像素值，另外，cover：图片占满整个盒子，缩放窗口时切掉多余的部分，图片不变形；contain：图片在盒子内部完整呈现，只按照原比例调整大小，但盒子不一定占满 */

• 网站的ico图标设置：
  • 把后缀为.ico的小图标下载下来之后, 放在项目根目录下
  • 在HTML里, head标签中间引入代码: <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
• 两种盒模型：

box-sizing: content-box;/* 默认值，标准盒模型，width、height的值只包括内容，不包括边框border、内边距padding、外边距margin */
box-sizing: border-box;/* 怪异盒模型，设置的width、height的值包括内容、内边距padding和边框，但不包括外边距margin */

• 如何设置水平垂直居中？
  • 内联元素水平居中：给父级添加 text-align: center
  • 内联元素垂直居中：line-height: 20px（父级元素的高度）
  • 块级元素水平居中：margin: 0 auto （要求块级元素自己有设置宽度）
  • 块级元素居中：绝对定位，设置top: 50%; left: 50%，给元素水平和垂直方向的margin值设为自身宽或高的一半的负值
  • flex布局（下面具体说）
• flex布局
  • 弹性容器{ display: flex }，里面的所有一级子元素称为弹性子元素；
  • 弹性盒子有横轴、纵轴，根据横纵轴来布局；
  • 弹性子元素里面的元素跟所有设置都无关；
  • 弹性子元素默认在弹性容器内一行展示；
  • 弹性容器的属性：
    • flex-direction：row从左向右，row-reverse从右向左，column从下往上，column-reserve从上往下。解释：子元素在容器中的排列方向，默认从左向右排列；
    • justify-content：flex-start，center，flex-end，space-between，space-around。解释：子元素在横轴上的对齐方式；
    • align-items：flex-start，flex-end，center，stretch，baseline。解释：子元素在纵轴的对齐方式；
    • flex-wrap：no-wrap，wrap，wrap-reverse。子元素超过一行时的换行方式；
    • align-content：center，space-between，space-around，stretch。多行子元素行与行之间如何对齐；
  • 弹性子元素的属性：
    • flex，可以设置固定值：{ flex: 0, 0, 30px }；也可以设置数字：{ flex: 1 }，其中的1,2,3,4……代表弹性元素如何分配空间，数字越大分配到的空间就越大
    • align-self：弹性元素自身在纵轴的对齐方式
       
• CSS新特性
  • transition: property duration timing-function delay; （CSS属性名 过渡时间 过渡曲线 过渡延长时间）
  • transform
    
    • transform: rotate(30deg) 旋转
    • transform: translate(100px, 20px) 移动
    • transform: scale(2, 1.5) 缩放　
    • transform: skew(30deg, 10deg) 扭曲
  • animation: move 1s linear;  // 定义动画的时间 动画的名称 动画的贝塞尔曲线