CSS-基础

CSS属性

padding：内边距;    margin：外边距;

padding | margin: top&bottom&left&right;

padding | margin: top&bottom left&right;

padding | margin: top right&left bottom;

padding | margin: top right bottom left;

.margin-div {
   margin: 20px;
   margin: 20px 20px;
   margin: 20px 20px 20px;
   margin: 20px 20px 20px 20px
}

font-size: 字号;   font-family: 字体;   font-style: 字体样式;   font-weight: 字体粗细;

font: style weight size family;  复合属性

.font-p {
   font: italic bold 16px sans-serif;
}

border-width: 边框宽;   border-top-width: 上边框宽;   border-left-width: 左边框宽; 

border-color: 边框颜色;   border-style: solid（实线）、dashed（虚线）;  边框样式

border-radius: 圆角;   border-top-left-radius: 左上圆角;   border-bottom-right-radius: 右下圆角;   

border: 1px solid #222222;  复合属性

.border-img {
   border: 1px solid #222222; 
}

color: #元素颜色;   background-color: #背景颜色;   background-image: url('imgUrl'); 

background-repeat: no-repeat（不平铺）、repeat-x（横向平铺）、repeat-y（纵向平铺）;

background-attachment: scroll（随页面滚动）、fixed;   

background-position: x y;  背景位置：top、bottom、left、right、center）

background: url('imgUrl') no-repeat left top;  复合属性

.background-div {
   background: url('imgUrl.jpg') no-repeat left top; 
}

text-align: left、center、right;  水平对齐方式（父元素设置）

vertical-align: baseline（基线）、sub（下标）、sup（上标）、text-top（顶部对齐）、text-bottom（底部对齐）、%或长度、middle（中部）、top（与同级最高元素顶部对齐）、bottom（与top相反）;  垂直对齐方式（子元素设置）

/*
* 设置vertical-align的元素要有平级的元素作为参考，
* 而且元素display都为inline-block（行内块元素） 
*/
.sup-div {
   text-align: center;
}
.sub-div {
   vertical-align: center;
}

overflow: visible（显示）、auto（自动）、hidden（隐藏）、scroll（滚动）;  超出范围显示样式

z-index: auto | 数字（1为初始值）;图层顺序 

float: none（默认）、left（向左）、right（向右）;  浮动样式

position: static（默认）、absolute（绝对定位）、relative（相对定位）、fixed（绝对定位）; 定位属性

/* absolute相对于static定位以外的第一个父元素进行定位；fixed相对于浏览器窗口进行定位 */
.position-div {
   position: absolute;
   left: 20px;
   top: 20px;
   width: 180px;
   height: 180px;
}

display: inline（内联）、block（块）、inline-block（内联块）、none（显示 | 隐藏）、flex（弹性盒）;

块元素：div、p、h1、ol、ul、dl、table、form

内联元素：a、span、i、label、em、strong、code

内联块元素：img、input、button

1）inline：能与其他元素并列显示，不可以设置宽高

2）block：可以设置宽高，但不能与其他元素并列显示，父元素为flex布局例外

3）inline-block：可以设置宽高，且能与其他元素并列显示

/*
* float: left|right; position: absolute|fixed; 
* 会把元素的display改为inline-block, display为none例外
*/
.display-div {
   display: inline-block;
}

flex：弹性盒模型，父元素设置，类似于一个容器，对应属性如下

justify-content: flex-start（左对齐）、flex-end（右对齐）、center（水平居中）、space-between（间隔相等）、space-around（类似于ios-Tabbar）;  水平对齐方式

align-items: flex-start（上对齐）、flex-end（下对齐）、center（垂直居中）、stretch（纵向铺满）;  垂直对齐方式

flex-direction: row（从左到右）、row-reverse（从右到左）、column（自上而下）、column-reverse（自下而上）;  布局方向

flex-wrap: nowrap（默认不换行）、wrap（正常换行）、wrap-reverse（第二行在第一行上方）;换行规则 

flex-flow: flex-direction flex-wrap；复合属性

.flex-div {
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   flex-direction: row;
   flex-wrap: nowrap;
}

text: 文本设置，对应属性如下

text-indent: 首行缩进;   line-height: 行高;   word-spacing: 单词间隔;   letter-spacing: 字符间隔;   

text-decoration: underline（下划线）、overline（上划线）、line-through（删除线）;

text-transform: none（默认）、uppercase（大写）、lowercase（小写）、capitalize（以大写字母开头）;   

text-overflow: clip（剪切）、ellipsis（省略号）;  文本超出怎么显示

.single-line {
   width: 285px;  /* 固定宽高 | 设置左右边距 */
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.much-line {
   display: -webkit-box;
   width: 285px;  /* 固定宽高 | 设置左右边距 */
   text-overflow: ellipsis;
   overflow:hidden;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   word-break:break-all;  /* 单词默认是不拆分换行 */
}

/* 换行类似（英语单词换行不强拆） word-wrap依赖于white-space
   word-wrap: break-word;
   white-space: normal;
*/

white-space: normal（默认）、nowrap（强行不换行）;

word-wrap: normal（断字点换行）、break-word（单词拆分）；与overflow-wrap作用一样

work-break: normal（默认）、break-all（暴力拆分）、keep-all（保持单词的完整性）;

.text-span {
   text-indent: 20px;
   line-height: 50px;
   white-space: nowrap;
   text-overflow: ellipsis;
}

filter: 滤镜效果，具体配置如下

filter: alpha(0%~100%);   filter: blur(高斯模糊度);   filter: grayscale(0%~100%);   

filter: dropShadow(offset-x, offset-y; 模糊度, #阴影颜色);

.filter-div {
   filter: alpha(80%);
   filter: dropShadow(0px, 0px,; 80, #222222);
}

transform: 转换属性，具体配置如下

transfrom: scale(0.5, 0.5);   transfrom: scale3d(1.5,1.5, 1.5);   transfrom: scaleX(1.5);   

transform: translate(2px，2px);    transform: translate3d(3px，3px, 3px);   transfrom: translateX(3px);   

transform: rotate(45deg);   transfrom:rotate3d(1, 0, 0, 45deg);   transfrom:rotateX(45deg); 

.transform-div {
   transfrom: scale(0.5, 0.5);
}

transition: propertyName 2s; 设置过度动画

transition: opacity 2s  (js：el.class.style.opacity = 0;  渐变隐藏)

transition: width 3s  (js：el.class.style.width = 300;  渐变缩放)

.transition-div {
   transition: opacity 2s;
}

div.transition-div : hover {
   opacity: 0.5
}

CSS的细节

class的优先性

1）CSS中class_l和class_h自上而下，class_h优先性高于class_l

2）class_l的属性property加上!important，优先性高于class_h的同一属性

3）class="class_l class_h"，引用多个class中间用空格隔开

/* class_h优先级高于class_l，class_l的color优先于class_h的color */
.class_l {
   width: 250px;
   height: 250px;
   border-width: 4px;
   border-color: #000000;
   color: #222222 !important;
}

.class_h {
   width: 30%;
   height: 30%;
   border-radius: 10px;
   color: #999999;
}

<div class="class_l class_h"></div>

元素约束

当父元素width固定时，block的文本元素设置margin-left和margin-right可以约束了文本的width，inline和inline-block无效（在达到宽度限制前）；

div中包含文本元素时，要实现“div不固定宽度，width随文本自适应”，div的display必须为inline-block，不然div会默认为父元素的宽度（div的父元素为flex布局除外）；

block的文本元素可设置margin-left和margin-right来约束宽度，不超出父元素边界，或直接设置width；

inline元素设置margin-top无效，margin-top与同行显示的inline-block元素一致；

inline-block的文本元素white-space: nowrap时，设置margin-left和margin-right无法固定宽度，文本太长会超出，所以必须设置width，隐藏超出部分overflow: hidden，并设置修剪样式text-overflow: ellipsis；

元素布局

flex布局和absolute | fixed定位不要同时使用，容易出现定位混淆，可在设置flex的元素外再套一个div，设置绝对定位；

absolute和fixed定位不受流式布局影响，relative设置top和left为负值也可以让图层重叠，margin-top和margin-left也是如此；

CSS初始化

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { 
   margin:0; 
   padding:0; 
}
body, button, input, select, textarea { 
   font:12px/1.5tahoma, arial, \5b8b\4f53; 
}
h1, h2, h3, h4, h5, h6 { 
   font-size:100%; 
}

CSS统一设置

.segment {
   width: 100%;
   height: 100%;
}

/* class="segment"的元素中的所有li元素 */
.segment li {
   display: inline-block;
   width: 1;
}

伪类和伪元素 

/* 伪类 */
a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

<!-- 伪类可以与 CSS 类配合使用 -->
<style type="text/css">
   a.red : hover {color: #FF0000}
</style>

<a class="red" href="css_syntax.asp">CSS Syntax</a>

/* 伪元素 
*  placeholder：占位文本 
*  first-line：文本的首行 
*  first-letter：文本的首字母 
*/
input::placeholder {
   color:#ff0000;
   font-variant:small-caps;
}

p:first-line {
   color:#0000ff;
   font-variant:small-caps;
}

p:first-letter {
   color:#ff0000;
   font-size:xx-large;
}

/* placeholder、first-line的属性
font、color、background、word-spacing、letter-spacing、text-decoration、vertical-align、text-transform、line-height、clear
*/

/* first-letter的属性
font、color、background、margin、padding、border、text-decoration、vertical-align、text-transform、line-height、float、clear
*/

<style>
   input.textField:placeholder {
      color: #FF0000;
   }
</style>
<input class="textField" placeholder="请输入账号">

HTML、JS设置CSS属性

<style type="text/css">
   .elementClass {
      background-color: #222222;
      height: 1;
      width: 1;
   }
   #element_id {
      background-color: #222222;
      height: 1;
      width: 1;
   }
</style>
<div class="elementClass" id="elementId">
<div style="background-color:#222222;height: 1;width: 1;" id="elementID">
<div id="element_id">

var elementId = document.getElementById('elementId')
el.class.style.backgroundColor = '#333333'

var element_id = document.getElementById('element_id')
el.class.style.backgroundColor = '#333333'

var elementID = document.getElementById('elementID')
el.class.style.backgroundColor = '#333333'