Html css样式总结

1.Html css样式总结

  CSS 定义 中文名称：层叠样式表 。 英文全称：Cascading Style Sheets ，简称CSS。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
（1）作用：用于选择或控制网页中的标签。
（2）分类：提供了标签选择器、类（class）选择器、id选择器三种基础选择器供开发者使用。

1.1. 定位position

  布局是html中非常重要的一部分，而定位在页面布局中也是使用频率很高的方法，本章节为定位在布局中的使用技巧和注意事项。
  position定位有4个属性，分别是static(默认），absolute（绝对定位），relative（相对定位），fixed（固定定位–相对于浏览器窗口）。

1.1.1. position:relative

  生成的位置相对于自身定位的，需要注意的是使用position:relative的元素并没有脱离文档流，且原来的位置占用的空间依旧存在，只是位置发生了变化。一般使用relative来改变位置比较少，主要是用来设置子级的absolute定位的参考对象。relative分为三种情况进行说明
（1）包含关系：父级absolute，子级relative；
（2）包含关系：父级relative，子级absolute；
（3）并列关系：兄弟标签都是relative；

1.1.1.1. 最具常见的用法就是父级标签relative，子级标签position来做到无论浏览器如何改变，都是相对浏览器的定位。

css：

#a{height:200px;width:200px;position: relative;background-color:red;left:50px;top:50px;
}
#b{height:50px;width:50px;position: absolute;background-color:green;left:20px;top:20px;
}

html：

<div id = "a">a<div id = "b">b</div>
</div>

1.1.1.2. 正常情况下同1的效果，不过需要注意的是，当标签中包含文字时，relative会发生调整。

1.1.1.3. 当不存在父级元素包裹时，relative的相对位置是根据最近的一个兄弟作为参考的。

css：

#a{height:200px;width:200px;position: relative;background-color:red;
}
#b{height:200px;width:200px;position:relative;background-color:green;left:50px;top:50px;
}

html：

<div id = "a">
</div>
<div id = "b">
</div>

  但当a标签也设置了left、top等相关属性时，兄弟标签b继续以a变化前作为参考相对位置。
css：

#a{height:200px;width:200px;position: relative;background-color:red;left:50px;top:50px;
}
#b{height:200px;width:200px;position:relative;background-color:green;left:20px;top:20px;
}

html：

<div id = "a">
</div>
<div id = "b">
</div>

1.1.2. position:absolute

  absolute定位是布局中最常用到的定位，其生成的位置是相对于带有position属性的父（父…)级来定位；如果父级都没有position属性，则相对于document来定位；使用absolute定位后，定位元素是脱离文档流的，这时候父级会检测不到定位元素的宽高。inline元素使用absolute定位之后，可以对其设置宽高；元素是不可以同时使用绝对定位和浮动的。

    <div class="relative-layout"><span class="relative-item">relative布局</span></div>

/*relative布局*/
.relative-layout {background-color: grey;position: relative;padding: 20px;
}.relative-item {position: absolute;right: 0.02rem;top: 0.11rem;background: red;color: #2ac845;
}

  可以看到在对子级span标签absolute定位之后，可以设置宽高，且父级无法检测到子级宽高，所以无法有子级来撑开；

1.1.3. position:fixed

  fixed定位是相对于浏览器窗口来定位的，所以也是脱离了文档流，与absolute一样，父级会检测不到定位元素的宽高。inline元素使用absolute定位之后，可以对其设置宽高；元素是不可以同时使用fixed定位和浮动的。
  z-index属性：
  使用定位后的元素都会有z-index属性，同级定位元素这个值越大，其显示越靠前。这项属性需要注意的是比较时是同级定位元素进行比较。

      <div class="fixed-layout"><div class="fixed-inner"></div></div><div class="fixed-layout2"><div class="fixed-inner2"></div></div>

/*fixed布局*/
.fixed-layout {height: 150px;width: 150px;background-color: grey;position: absolute;z-index: 1;
}.fixed-inner {height: 50%;width: 50%;background: red;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);z-index: 10;
}
.fixed-layout2{position: absolute;z-index: 2;height: 100px;width: 100px;background: green;
}
.fixed-inner2{position: absolute;left: 50%;top: 50%;z-index: 8;height: 50%;width: 50%;background: yellow;
}

  当两个拥有子元素的父级元素（绿色和灰色DIV）重叠时，层级高的父元素（绿色DIV）里的子元素（黄色DIV）永远在上层，即使层级底的父元素（灰色DIV）里的子元素（红色DIV）z-index的值较大。

1.2. 块级元素和行内元素

（1）块级元素：block
  每个块级元素默认占一行高度，一行内添加的块级元素一般无法添加其他元素，两个连续的块级元素会自动换行显示。块级元素一般可以嵌套块级元素和行内元素。
  常见的块级元素：div，h1-h6，dl，ul，li，ol，table，p，form。display:block；的元素都是块级元素。
（2）行内元素：inline
  也叫内联元素，行内元素一般是基于语义级的基本元素，只能容纳文本或其他行内元素。
  常见的行内元素：a，img，span，i，br，b，strong，label，input，select。元素样式是display:inline；的都是内联元素。
（3）行内元素和块级元素的区别
区别一：
  块级元素会独占一行，默认情况下自动填满父元素的宽度
   行内元素不会独占一行，相邻的行内元素会排在同一行，其宽度随内容的变化而变化
区别二：
   块级元素可以设置宽高
   行内元素不可以设置宽高，但是可以设置line-height来改变高度
区别三：
   块级元素可以设置margin,padding
   行内元素设置margin,padding，只有左右有效（margin-left，margin-right，padding-left， padding-right），上下无效（margin-top，margin-bottom，padding-top，padding-bottom）
区别四：
  块级元素：display:block
  行内元素：display:inline
  可以通过设置display切换

1.3. 文本属性

（1）color
  描述：设置文本的颜色
  允许值：<颜色名> | <十六进制值> | | | |
（2）direction
  描述：设置元素的文本方向
  允许值：ltr | rtl | initial | inherit
  注意：ltr:默认，文本方向从左到右。rtl:文本方向从右到左。initial:将此属性设置为其默认值。inherit:从其父元素继承此属性。
（3）text-align
  描述：设置文本的水平对齐方式
  允许值：left | center | right | justify
（4）vertical-align
  描述：设置元素的垂直对齐方式
  允许值：baseline | sub | super | bottom | text-bottom | middle | top | text-top | <百分比>
  注意：百分比是指相对于元素的行高。
（5）text-indent
  描述：设置文本第一行的缩进
  允许值：<长度> | <百分比>
  注意：百分比是指相对于父元素的宽度。当值为负值时可使用padding-left、margin-left来配合合负缩进。
（6）letter-spacing
  描述：设置字符间距
  允许值：normal | <长度>
（7）word-spacing
  描述：设置单词间距
  允许值：normal | <长度>
（8）line-height
  描述：设置行高
  允许值：normal | <长度> | <百分比> | <数字>
  注意：百分比是指相对元素的字体尺寸。
（9）text-transform
  描述：用于将文本修改为大写、小写或首字母大写
  允许值：none | uppercase | lowercase | capitalize | initial | inherit
  注意：uppercase:所有字符都转换为大写。lowercase:所有字符都转换为小写。capitalize:每个单词的第一个字符转换为大写。initial:将此属性设置为其默认值。inherit:从其父元素继承此属性
（10）text-decoration
  描述：用于文本装饰，下划线、上划线、删除线等
  允许值：[none | underline | overline | line-through | blink] [solid | double | dotted | dashed | wavy] <颜色>
  注意：underline:下划线。overline:上划线。line-through:中划线。solid:单实线。double:双实线。dotted:点状线。dashed:虚线。wavy:波浪线。

text-decoration: none;                     /*没有文本装饰*/
text-decoration: underline red;            /*红色下划线*/
text-decoration: underline wavy red;       /*红色波浪形下划线*/

（11）white-space
  描述：设置元素内部空白的处理方式
  允许值：normal | pre | nowrap | pre-wrap | pre-line | inherit
  注意：normal:默认，空白会被浏览器忽略。 pre:空白会被浏览器保留，其行为方式类似 HTML中的pre标签。 nowrap:文本不会换行，文本会在在同一行上继续，直到遇到标签为止。 pre-wrap:保留空白符序列，但是正常地进行换行。 pre-line:合并空白符序列，但是保留换行符。 inherit:规定应该从父元素继承 white-space 属性的值。
（12）text-shadow
  描述：为文本添加阴影
  允许值：none | h-shadow v-shadow blur color | initial | inherit
  注意：none:默认，不绘制阴影。 h-shadow:必需，水平阴影的位置，允许负值。 v-shadow:必需,垂直阴影的位置,允许负值。 blur:可选，模糊距离。 color:可选，阴影的颜色。
（13）text-overflow
  描述：用于如何向用户呈现未显示的溢出内容。
  允许值：clip | ellipsis | string
  注意：clip:修剪文本。ellipsis:显示省略符号来代表被修剪的文本。string:使用给定的字符串来代表被修剪的文本。
（14）word-break
  描述：规定自动换行的处理方法
  允许值：normal | break-all | keep-all
  注意：normal:使用浏览器默认的换行规则。break-all:允许在单词内换行。keep-all:只能在半角空格或连字符处换行。
（15）word-wrap
  描述：允许长单词或 URL 地址换行到下一行
  允许值：normal | break-word
  注意：normal:只在允许的断字点换行（浏览器保持默认处理）。break-word:在长单词或 URL 地址内部进行换行。
（16）text-align-last
  描述：设置最后一行文本的对齐方式
  允许值：start | end | right | center | justify
（17）text-emphasis
  描述：设置重点文本样式
  允许值：none | accent | dot | circle | disc | before | after
（18）line-break
  描述：设置如何断开带有标点符号的中文、日文或韩文文本的行。
  允许值：auto | loose |normal | strict | anywhere
  注意：anywhere:来使长标点符号进行换行。auto:使用默认的断行规则。loose:使用最不严格的断行规则. 一般用于报纸等短行。normal:使用一般严格的断行规则。strict:使用最严格的断行规则。

1.4. 字体属性

（1）font-family
  描述：设置文本的字体系列
  允许值：<系列名> | <一般系列>
（2）font-size
  描述：设置字体大小
  允许值：xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | <长度> | <百分比>
  注意：medium：默认值。百分比是指相对于父元素的字体尺寸的百分比。
（3）font-weight
  描述：设置字体粗细
  允许值：normal | bolder | lighter | number
  注意：normal:默认值,定义标准的字符。bold:定义粗体字符。bolder:定义更粗的字符。lighter:定义更细的字符。number:100、200、300、400、500、600、700、800、900，400等同于normal，而700等同于bold。
（4）font-style
  描述：设置字体粗细
  允许值：normal | italic | oblique | inherit
  注意：normal:默认值,标准的字体样式。italic:斜体的字体样式。oblique:倾斜的字体样式。inherit:从父元素继承字体样式。
（5）font-variant
  描述：是否以小型大写字母的字体显示文本
  允许值：normal | small-caps
  注意：normal:默认值,标准的字体样式。small-caps:小型大写字母的字体。

1.5. 颜色与背景

（1）background-color
  描述：设置背景色
  允许值：transparent | <颜色>
（2）background-image
  描述：设置背景图像
  允许值：none |
（3）background-repeat
  描述：设置背景重复，平铺方式
  允许值：no-repeat | repeat | repeat-x | repeat-y
（4）background-attacbment
  描述：设置背景附着，滚动和固定
  允许值：scrooll | fixed
（5）background-position
  描述：设置背景位置
  允许值：[<百分比> | <长度>] | [top | center | bottom] | [left | center | right]
（6）background
  描述：简写背景属性
  允许值：<背景颜色> <背景图像> <背景重复> <背景附着> <背景位置>
（7）background-clip
  描述：设置背景绘制的区域
  允许值：border-box | padding-box | content-box
注意：border-box:背景被裁剪到边框盒。padding-box:背景被裁剪到内边距框。content-box:背景被裁剪到内容框。
（8）background-size
  描述：背景图像的大小
  允许值：length | percentage | cover | contain
  注意：length:设置背景图片高度和宽度;第一个值设置宽度,第二个值设置的高度;如果只给出一个值,第二个是设置为 auto(自动)。percentage:将计算相对于背景定位区域的百分比;第一个值设置宽度,第二个值设置的高度,各个值之间以空格隔开指定高和宽,以逗号,隔开指定多重背景;如果只给出一个值,第二个是设置为"auto(自动)"。cover:保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。contain:保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
（9）background-origin
  描述：规定 background-position 属性相对于什么位置来定位。
  允许值：padding-box | border-box | content-box
  注意：如果背景图像的 background-attachment 属性为 “fixed”，则该属性没有效果。

1.6. 框与边框

（1）width
  描述：设置宽度
  允许值：auto | <长度> | <百分比>
（2）height
  描述：设置高度
  允许值：auto | <长度> | <百分比>
（3）margin
  描述：设置外边距
  允许值：<长度> | <百分比> | auto
（4）padding
  描述：设置内边距
  允许值：<长度> | <百分比>
（5）border-width
  描述：设置边框宽度
  允许值：medium | thin | thick | <长度>
  注意：thin:定义细的边框。medium:默认,定义中等的边框。thick:定义粗的边框。
（6）border-style
  描述：设置边框样式
  允许值：none | solid | dashed | dotted | double | groove | ridge | inset | outset
  注意：solid:单实线。dashed:虚线。dotted:点状线。double:双实线。groove: 定义3D沟槽边框。ridge: 3D脊边框。inset:3D嵌入边框。outset: 3D突出边框。
（7）border-color
  描述：设置边框颜色
  允许值：<颜色>
（8）border
  描述：设置边框， 简写属性
  允许值：<边框宽度> <边框样式> <边框颜色>
（9）border-radius
  描述：设置边框圆角
  允许值：<长度> | <百分比>
（10）outline-width
  描述：设置轮廓宽度
  允许值：medium | thin | thick | <长度>
  注意：thin:定义细的轮廓。medium:默认,定义中等的轮廓。thick:定义粗的轮廓。
（11）outline-style
  描述：设置轮廓样式
  允许值：none | solid | dashed | dotted | double | groove | ridge | inset | outset
  注意：solid:单实线。dashed:虚线。dotted:点状线。double:双实线。groove: 定义3D沟槽轮廓。ridge: 3D脊轮廓。inset:3D嵌入轮廓。outset: 3D突出轮廓。
（12）outline-color
  描述：设置轮廓颜色
  允许值：<颜色>
（13）outline
  描述：设置轮廓， 简写属性
  允许值：<轮廓宽度> <轮廓样式> <轮廓颜色>
（14）outline-offset
  描述：指定轮廓与元素的边缘或边框之间的空间。
  允许值：<长度>
（15）box-shadow
  描述：属性应用阴影于元素。
  允许值：h-shadow v-shadow blur spread color inset
  注意：h-shadow:必需的，水平阴影的位置，允许负值。v-shadow:必需的，垂直阴影的位置，允许负值。blur:可选,模糊距离。 spread:可选，阴影的大小。color:可选，阴影的颜色。inset:可选,从外层的阴影（开始时）改变阴影内侧阴影。
（16）box-sizing
  描述：属性允许您以特定的方式定义匹配某个区域的特定元素，默认值是content-box，设置或检索对象的盒模型组成模式，对应的脚本特性为boxSizing。
  允许值：content-box | border-box | inherit
（17）float
  描述：浮动
  允许值：none | left | right
（18）clear
  描述：清除
  允许值：none | left | right | both

1.7. Flex布局

（1）flex-direction
  描述：设置主轴的方向（即元素的排列方向）。
  允许值：row | row-reverse | column | column-reverse
  注意：row:主轴为水平方向，起点在左端(默认值)。row-reverse:主轴为水平方向，起点在右端。column:主轴为垂直方向，起点在上沿。column-reverse:
（2）flex-wrap
  描述：设置是否换行。
  允许值：nowrap | wrap | wrap-reverse
  注意：nowrap:不换行(默认值)。wrap:换行，第一行在上方。wrap-reverse:换行，第一行在下方。
（3）flex-flow
  描述：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowarap。
（4）justify-content
  描述：设置主轴上的对齐方式。
  允许值：flex-start | flex-end | center | space-between | space-around
  注意：flex-start:左对齐(默认值)。flex-end:右对齐。center:居中。space-between:两端对齐，项目之间的间隔都相等。space-around:每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
（5）align-items
  描述：设置交叉轴上的对齐方式。
  允许值：stretch | flex-start | flex-end | center | baseline
  注意：flex-start:交叉轴的起点对齐。flex-end:交叉轴的终点对齐。center:交叉轴的中点对齐。baseline:项目的第一行文字的基线对齐。stretch:如果项目未设置高度或设置auto，将占满整个容器的高度（默认值）。
（6）align-content
  描述：设置d多根轴线的对齐方式。如果只有一根轴线，该属性不起作用。
  允许值：stretch | flex-start | flex-end | center | baseline
  注意：flex-start:交叉轴的起点对齐。flex-end:交叉轴的终点对齐。center:交叉轴的中点对齐。baseline:项目的第一行文字的基线对齐。stretch:如果项目未设置高度或设置auto，将占满整个容器的高度。
（7）flex-grow
  描述：设置放大比例。默认为0，即如果存在剩余空间，也不放大。
（8）flex-shrink
  描述：设置缩小比例。默认为1，即如果空间不足将缩小。
（9）flex-basis
  描述：flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
（10）flex
  描述：flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
（11）order
  描述：设置排列顺序。数值越小排列越靠前，默认为0。
（12）align-self
  描述：设置单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
  允许值：auto | flex-start | flex-end | center | baseline | stretch
  注意：flex-start:交叉轴的起点对齐。flex-end:交叉轴的终点对齐。center:交叉轴的中点对齐。baseline:项目的第一行文字的基线对齐。stretch:如果项目未设置高度或设置auto，将占满整个容器的高度。

1.8. 伪类选择器

（1）link: 超链接未被访问。
（2）visited: 超链接已被访问。
（3）active: 元素被激活。
（4）hover: 鼠标悬浮。
（5）focus: 元素获取了焦点。
（6）before: 元素前面插入内容。
（7）after: 元素后面插入内容。
（8）first-line: 元素内的第一行文本。
（9）first-letter: 元素内的第一个字符。
（10）first-child: 父元素的第一个子元素。
（11）last-child: 父元素的最后一个子元素。
（12）nth-child(n): 父元素的第n个子元素。
（13）nth-last-child(n): 父元素的倒数第n个元素。
（14）nth-of-type(n): 父元素的第n个元素，且所有匹配的子元素被分离出来单独排序。
（15）nth-last-of-type(n): 父元素的倒数第n个元素，且所有匹配的子元素被分离出来单独排序。
（16）first-of-type: 父元素的第一个同类型的子元素。
（17）last-of-type: 父元素的最后一个同类型的子元素。
（18）only-child: 父元素只包含一个匹配的子元素。