CSS使用经验

CSS使用经验

本文不详细介绍css的各种属性，主要记录下css开发中的脉络
思路：先布局，然后定位元素位置，最后根据要求调整元素信息（大小、颜色等）

一、CSS几大要点

1.简介

• 层叠样式表（Cascading Style Sheets，缩写为 CSS）是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言）文档的呈现方式。CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。
• html元素在渲染时，会被解析成一个一个dom，根据设置的css样式展示在布板上。

2.渲染单位

• 单位

单位	类型	说明
px	绝对	固定的，不会根据任何其他元素的测量而改变
vw（viewpoint width）	相对	相对于视口的宽度
vh（viewpoint height）	相对	相对于视口的高度
rem（font size of the root element）	相对	相对于根 ( ) 元素 (默认字体大小通常为 16px ),常用
em（font size of the element）	相对	相对于父元素
%	相对	相对于父元素

3.盒子模型：content 的大小基本固定

.box {
  width: 350px;
  height: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}

4.选择器：用来操作标记dom元素的工具

名称	实例	说明
id选择器	< id=''>	全局唯一,尽量不要使用
class选择器	< class=''>	常用

5.布局

名称	涵义	元素	备注
块级元素（deploy:block）	宽=100%，每次都会新启一行 。padding、margin、width 和 height 都有效	'div 、h1 ~ h6、p、ul、ol、dl、table、address、form'	都是段落渲染
内联元素（deploy:inline）	宽度和高由text的内容决定，padding 和 margin 有效，width 和 height 通常无效	"a、b、label、span、img、em、strong、i、input"	内容渲染
行内元素（deploy:inline-block）	padding、margin、width 和 height 都有效
deploy:flex	一维布局，适合做局部布局。比如：导航栏，手机端局部排版	父元素属性："flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content" 子元素属性："flex-grow、flex-shrink、flex-basis、flex、align-self、order"
deploy:grid	二维布局，适合做整体

/*flex*/
/*主轴方向(重要)*/
flex-direction:row| row-reverse | column | column-reverse
// row：水平方向，从左到右
// row-reverse：水平方向，从右到左
// column：垂直方向，从上到下
// column-reverse：垂直方向，从下到上
/*是否换行(重要)*/
flex-wrap：nowrap | wrap | wrap-reverse // 不换行|换行| 换行（cross-start、cross-end互换）
/*flex-direction + flex-wrap简写*/
flex-flow：row wrap
/*主轴对齐方式(重要)*/
justify-content：flex-start| flex-end|center| space-between| space-around|space-evenly
// flex-start：左对齐（默认）
// space-between：两端对齐，项目间隔相等
// space-evenly：所有间隔均等（包括边缘）
/*单行项目对齐方式(重要)*/
align-items：stretch| flex-start| flex-end| center| baseline
// stretch（默认）：拉伸填满容器高度
// center：垂直居中
// baseline：按项目基线对齐
/*多行整体对齐方式(重要)*/
align-content：flex-start|flex-end|center|space-between|space-around|stretch


/*grid*/
grid-template-columns: 100px 100px 100px // 3列的宽度
grid-template-rows: 100px 100px 100px // 3列的行高
grid-row-gap：20px // 行间距
grid-column-gap：20px // 列间距
grid-gap：20px 20px  //<grid-row-gap> <grid-column-gap> 合并简写
grid-auto-flow：row | column // item先行后列 | item先列后行

定位：元素的渲染起始点，并且:标记的元素脱离布板，相当于再新图层

定义	涵义
top	定位元素的上外边距边界与其包含块上边界之间的偏移
right	定位元素右外边距边界与其包含块右边界之间的偏移
bottom	定位元素下外边距边界与其包含块下边界之间的偏移
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移

css拼写	涵义	备注
position：static	元素的默认位置，默认图层，top, right, bottom, left值在这里不起作用
position：relative	相当于元素的默认位置，默认图层，top, right, bottom, left设置定位，不会影响其它元素位置
position：absolute	相当于html起始点定位(需要祖先元素有定位信息)，相当与新图层，top, right, bottom, left设置定位
position：fixed	相当于浏览器窗口定位，相当与新图层，需要top、right、weith、heigt设置定位

• 正常定位使用图标/图片上，其它元素上的数字等。

ul {
  position:fixed //
  left:5px // 左边浮动5px
}
li {
    position:absolute // 相对于父元素
    top:XXX
}

二、技巧

1、初始化：消除浏览器之间的css初始值

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}
ul,
li {
    list-style: none;
}

2、常用参数

// 背景
background: [background-color：颜色] [background-image：图片] [background-repeat：重复] [background-attachment：图像是够固定] [background-position：图像定位] [background-size：图像覆盖尺寸] [background-origin：背景图像的定位区域] [background-clip：背景图像的绘制区域];

// 字体
font: [font-style：斜体] [font-variant：小型大写字母] [font-weight：字体的粗细] [font-size：字体的大小] / [line-height：行高] [font-family：字体族];
font: italic small-caps bold 16px/2 Arial, sans-serif;

// 边框
border: [border-width：宽度] [border-style：样式] [border-color：颜色];

// 元素外空白
margin: [top] [right] [bottom] [left];
margin: 10px 20px; /* 上下10px，左右20px */

// 元素和内容空白
padding: [top] [right] [bottom] [left];
padding: 10px 20px; /* 上下10px，左右20px */