Html css样式总结

1.Html css样式总结

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：

1. #a{
2.         height:200px;
3.         width:200px;
4.         position: relative;
5.         background-color:red;
6.         left:50px;
7.         top:50px;
8. }
9. #b{
10.         height:50px;
11.         width:50px;
12.         position: absolute;
13.         background-color:green;
14.         left:20px;
15.         top:20px;
16. }

复制代码

html：

1. <div id = "a">a
2.     <div id = "b">b
3.     </div>
4. </div>

复制代码

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

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

css：

1. #a{
2.         height:200px;
3.         width:200px;
4.         position: relative;
5.         background-color:red;
6. }
7. #b{
8.         height:200px;
9.         width:200px;
10.         position:relative;
11.         background-color:green;
12.         left:50px;
13.         top:50px;
14. }

复制代码

html：

1. <div id = "a">
2. </div>
3. <div id = "b">
4. </div>

复制代码

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

1. #a{
2.         height:200px;
3.         width:200px;
4.         position: relative;
5.         background-color:red;
6.         left:50px;
7.         top:50px;
8. }
9. #b{
10.         height:200px;
11.         width:200px;
12.         position:relative;
13.         background-color:green;
14.         left:20px;
15.         top:20px;
16. }

复制代码

html：

1. <div id = "a">
2. </div>
3. <div id = "b">
4. </div>

复制代码

1.1.2. position:absolute

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

1.     <div class="relative-layout">
2.              <span class="relative-item">relative布局</span>
3.     </div>

复制代码

1. /*relative布局*/
2. .relative-layout {
3.     background-color: grey;
4.     position: relative;
5.     padding: 20px;
6. }
8. .relative-item {
9.     position: absolute;
10.     right: 0.02rem;
11.     top: 0.11rem;
12.     background: red;
13.     color: #2ac845;
14. }

复制代码

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

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

1.       <div class="fixed-layout">
2.                 <div class="fixed-inner"></div>
3.             </div>
4.             <div class="fixed-layout2">
5.                 <div class="fixed-inner2"></div>
6.             </div>

复制代码

1. /*fixed布局*/
2. .fixed-layout {
3.     height: 150px;
4.     width: 150px;
5.     background-color: grey;
6.     position: absolute;
7.     z-index: 1;
8. }
10. .fixed-inner {
11.     height: 50%;
12.     width: 50%;
13.     background: red;
14.     position: absolute;
15.     left: 50%;
16.     top: 50%;
17.     transform: translate(-50%, -50%);
18.     z-index: 10;
19. }
20. .fixed-layout2{
21.     position: absolute;
22.     z-index: 2;
23.     height: 100px;
24.     width: 100px;
25.     background: green;
26. }
27. .fixed-inner2{
28.     position: absolute;
29.     left: 50%;
30.     top: 50%;
31.     z-index: 8;
32.     height: 50%;
33.     width: 50%;
34.     background: yellow;
35. }

复制代码

  当两个拥有子元素的父级元素（绿色和灰色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:波浪线。

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

复制代码

（11）white-space
  描述：设置元素内部空缺的处置处罚方式
  允许值：normal | pre | nowrap | pre-wrap | pre-line | inherit
  注意：normal:默认，空缺会被欣赏器忽略。 pre:空缺会被欣赏器保留，其行为方式类似 HTML中的

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。