css 菜鸟笔记（ing）

我大一的css都学了些什么？我当时在干什么？我现在为什么如此“快乐”？（…灵魂三问）
看css像看天书？？？？我崩了。
接下来但凡看到一个不会的css属性，我就把它记下来，奥利给！

（1） .clsss-one.class-two 与 .class-one .class-two

前者同级生效，后者嵌套生效（区分点在于有无空格）

（2）-moz -ms -webkit

• -moz代表firefox浏览器私有属性
• -ms代表ie浏览器私有属性
• -webkit代表safari、chrome私有属性

这些都是为了兼容老版本的写法。

（3）css渐变

linear-gradient（线性渐变）
常用语法：background-image: linear-gradient(direction, start-color,end-color...);

radial-gradient（径向渐变）
常用语法：background-image: radial-gradient(direction, start-color,end-color...);

更多：CSS3 渐变

（4）css选择器 ~、+、>

• A~B 表示选择A标签之后的所有B标签，且A、B具有相同的父元素。
• A+B 表示选择紧邻在A标签后的B标签，且A、B具有相同的父元素，所选到的仅为一个B标签。
• A>B 表示选择A元素里面的B元素，且B元素为A元素里面的第一代。
  
  

（5）display

display属性用于设置一个元素应该怎样显示，默认为inline，即内联元素，元素前后没有换行符。

常用的值有：none（不显示该元素），block（显示为块级元素，元素前后带有换行符），inline，inline-block（行内块元素）。

更多取值：display属性

（6）行内元素与块级元素

块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：

和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;

块级元素主要有：

address , blockquote , center , dir , div , dl , fieldset , form , h1
, h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript ,
ol , p , pre , table , ul , li

内联元素主要有：

a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em ,
font , i , img , input , kbd , label , q , s , samp , select , small ,
span , strike , strong , sub , sup ,textarea , tt , u , var

可变元素(根据上下文关系确定该元素是块元素还是内联元素)：

applet ,button ,del ,iframe , ins ,map ,object , script

CSS中块级、内联元素的应用：

主要用的CSS样式有以下三个：

display:block – 显示为块级元素
display:inline – 显示为内联元素
display:inline-block – 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

（7）伪类与伪元素

常见伪类与伪元素
伪类与伪元素的用法示例

（8）flex弹性盒布局

flex布局 语法篇
fle布局 实例篇
FlexBox标准及兼容写法速查表

（9）list-style

list的简写属性，包括list-style-type、list-style-position、list-style-image。

• list-style-type ：设置列表项标记的类型，比如none（无标记），disc（默认，实心圆），circle（空心圆）…
• list-style-position ：设置列表项标记的放置方式，取值有outside（默认，保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。）、inside（列表项目标记放置在文本以内，且环绕文本根据标记对齐。）、inherit。
• list-style-image ：设置图像来替换列表项标记，如list-style-image:url('sqpurple.gif');

【注意】请始终设置list-style-type以防止图片无法使用的情况。

（10）min-height

定义元素的最低高度，不包括填充，边框，或页边距，默认值有length、%、inherit。

（11）text-transform

控制文本的大小写。属性值有：

• none ：默认，定义带有小写字母和大写字母的标准的文本。
• capitalize ：文本的每个单词以大写字母开头。
• uppercase ：定义仅有大写字母。
• lowercase ：定义仅有小写字母。
• inherit