1、テキストALIGN
アクション:水平方向の配置をラベルその内容を設定します
テキスト整列:左; //左揃えのテキスト(デフォルト)
テキスト整列:センター; //揃えテキスト
テキスト整列:右; //右寄せテキスト
図2に示すように、フォントサイズ
役割:フォントサイズを設定します。
フォントサイズ:20ピクセル;
フォントサイズ:1.2rem。
フォントサイズ:80%;
3、フォント重量
役割:フォントウェイトを設定します。
フォント重量:太字; //太字、700に相当
フォント - 重さ:100〜900;
フォント重量:大胆; //太字、900に相当
フォント重量:軽い; //变细
フォント重量:ノーマル; //通常、400に対応します
4フォントスタイル
役割:フォントを設定が傾斜しています
font-style: italic; // 斜体
フォントスタイル:ノーマル; //通常の
5、テキスト装飾
役割:行のテキストを設定します
テキスト装飾:下線; //アンダースコアにテキストを設定します
テキスト装飾:上線; //スクライブラインにテキストを設定します
テキスト装飾:ライン・スルー; //真ん中の行にテキストを設定します
テキスト装飾:なし; //テキスト行を削除
6、テキストのインデント
役割:最初の行のインデントのテキストを設定
テキストインデント:-30px; //左インデント
テキストインデント:30px; //右インデント
テキストインデント:2rem; //右にインデント
7、背景
(1)背景色:背景色
背景色:赤。
(2)背景画像:背景画像
背景画像:のURL(../ IMG / pic.png)。
(3)背景リピート:背景画像タイル
背景リピート:なしリピート; //ないタイル
背景リピート:リピート - X; //水平にタイル張り
背景リピート:リピート-yは、垂直方向にタイル張り//
背景リピート:リピート; //水平方向と垂直方向のタイル(デフォルト)
(4)バックグラウンド位置:背景画像の位置(垂直位置における水平方向の位置)
背景位置:20ピクセル30px; //ピクセル値の位置を調整します
背景位置:左中央、使用の位置を調整する//方向。水平方向:左、中央、右、垂直方向:上部、中央、下部
背景の位置:センター底+ 30px; //ミックス
背景位置:100pxに下; //ミックス
(5)バックグラウンドサイズ:背景画像サイズ(水平サイズ垂直サイズ)
背景サイズ:は50px 80px; //広い背景画像50ハイ80
背景サイズ:100ピクセル;幅100、高さ、幅の適応を持つ//背景画像
背景サイズ:カバー、ラベルの背景全体を埋めるために拡大し、その増幅に応じて//背景画像アスペクト比、同じアスペクト比とタグを埋め込む画像アスペクト比場合、同一でない場合にだけ、容器に充填ラベル背景画像の一部につながる表示することができません
background-size:contain; // 背景图片按照自身宽高比例进行放大,放大至正好包含在标签里面,如果图片宽高比和填充的标签宽高比相同,正好填充满标签容器,如果不相同,会导致有一部分标签的背景没有背景图片
(6)背景样式缩写
background: pink url(.../img/pic.png) no-repeat center top/300px 100px;
8、inherit:继承
不是所有的样式都会自动继承,比如说width、height、background这些样式不会自动继承,那么会自动继承的样式一般是与字体文本相关的样式比如Color、font-size、font-style、font-weight、text-indent、text-decoration、Text-align等这些样式会自动继承给后代标签
9、盒子模型
(1)盒子模型的结构
内容层:width height
padding层:padding-top,padding-bottom,padding-left,padding-right
border层:border-top,border-bottom,border-left,border-right
值:1px solid red;(dotted:圆点虚线;dashed:矩形虚线)
margin层:margin-top,margin-bottom,margin-left,margin-right
(2)margin在垂直方向的重叠问题
第一种:兄弟关系的重叠
当两个标签的margin在垂直方向上相遇时就会产生重叠,重叠以后会以较大的margin值作为两个标签之间的margin值
第二种:父子关系的重叠
父标签在没有设置border,padding的情况下,如果在垂直方向设置了margin就会与子标签在垂直方向的margin相遇产生重叠
如果不想产生重叠可以给父标签加border或者padding
(3)IE盒子模型与标准盒子默认的区别
IE盒模型和标准盒模型都有内容层、padding、border、margin,不同的在于IE盒模型的width、height包含内容层、padding层、border层的尺寸;而标准盒模型的width、height只包含内容层的尺寸
IE盒模型和标准盒模型之间的转换
box-sizing:border-box; // 呈现IE盒模型
box-sizing:content-box; // 呈现标准盒模型
10、块级标签水平对齐方式
margin-left:auto; // 标签靠右对齐
margin-right:auto; // 标签靠左对齐
margin:auto; // 标签居中对齐
11、line-height
(1)实现文本垂直居中
当行高和标签高度相同时就可以实现文本垂直居中
(2)实现行与行之间的距离
(3)行高可以撑开块级标签和内联块标签的高度,不能撑开内联标签的高度
12、min-width、max-width
min-width: 600px; 标签的最小宽度不能小于600px、最大宽度无限制
说明标签的宽度范围为:600px~无限制
max-width: 500px; 标签的最大宽度不能超过500px,最大宽度只能是500px,最小宽度可以到0
说明标签的宽度范围为:0~500px 之间
13、float(浮动)
作用:设置标签靠左或者靠右对齐
靠左边对齐叫左浮动,样式写法:float:left;
靠右边对齐叫右浮动,样式写法:float:right;
浮动的特点:
(1)内联标签和内联块标签加了浮动后display默认值会变成block,可以设置块级标签的样式
(2)浮动的标签不会独占一整行,没有设置width时,宽度由内容撑开
(3)浮动的标签后面如果有一个没有加浮动的块级标签,这个没有浮动的块级标签会认为浮动的标签不存在,所以会产生重叠
(4)在一行中有浮动的标签也有一些没有浮动的标签(如:内联标签、内联块标签),在一行空间没有占满的情况下,这些没有浮动的标签会与浮动的标签显示在同一行,不过拥有左浮动的标签会显示在最左边,拥有右浮动的标签会显示在最右边;内联标签和内联块标签会识别浮动的标签,不会产生重叠
(5)没有浮动的块级标签内部如果有一个浮动的子标签,那么这个没有浮动的父标签会认为浮动的子标签不存在,就会造成父标签的高度塌陷,变成0
(6)块级标签加了浮动以后,再使用margin:0 auto;是不能实现水平居中的
清除浮动:
clear:left; // 清除左浮动
clear:right; // 清除右浮动
clear:both; // 清除左右浮动
使用clear清除浮动需要注意的问题:
(1)带有clear样式的标签必须是块级标签,如果是其它类型的标签可能会导致clear样式失效
(2)带有clear样式的标签不能是浮动的标签,否则clear样式会失效
(3)带有clear样式的标签最好不要设置margin-top值,否则会出现混乱现象
14、显示和隐藏
(1)隐藏标签
display:none; // 这种隐藏不占据空间
visibility:hidden; // 这种隐藏占据空间,标签隐藏了,但是所占据的位置还在
opacity:0; // 这种隐藏占据空间。支持IE9+
filter:alpha(opacity=0-100) // 支持IE6-8
(2)溢出隐藏
属性:overflow:水平内容溢出和垂直内容溢出处理
属性:overflow-x:水平内容溢出处理
属性:overflow-y:垂直内容溢出处理
属性值:hidden; // 隐藏溢出的内容
属性值:visible; // 显示溢出的内容
属性值:scroll; // 溢出的内容可以通过拖动滚动条显示,没有内容溢出也会出现滚动条
属性值:auto; // 溢出的内容可以通过拖动滚动条显示,没有内容溢出不会出现滚动条
(3)单行文本溢出显示省略号
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
(4)多行文本溢出显示省略号
overflow:hidden;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-origin:vertical;
15、position(定位)
(1)固定定位
position:fixed;
相对于窗口进行定位,把标签固定在浏览器的窗口中,不随页面滚动可以同过top、bottom、left、right调整位置
(2)相对定位
position:relative;
相对于原来的位置进行偏移
特点:原来的位置占据空间,偏移后的位置不占据空间
(3)绝对定位
position:absolute;
如果绝对定位的标签的祖辈标签没有设置定位,当前标签会相对于窗口进行定位,定位的标签会随页面滚动,如果祖辈标签设置定位,当前标签会相对于祖辈标签进行定位
固定定位与绝对定位的特点:
(1)块级元素加了固定定位或绝对定位就会失去默认宽度,宽度由内容撑开
(2)内联元素、内联块元素加了固定定位或绝对定位display变成block
(3)标签加了固定定位或绝对定位后就不再占据页面的空间了,可能会产生重叠问题
(4)标签加了固定定位或绝对定位后使用浮动样式无效
(5)标签加了固定定位或绝对定位后,在不设置width、height样式的情况下,可以通过设置left与right拉伸标签的宽度,通过top与bottom拉伸标签的高度
(6)标签加了固定定位或绝对定位后,在设置了width、margin-left:auto;、margin-right:auto;、left:0;、right:0;可以让定位的标签水平居中。在设置了height、margin-top:auto;、margin-bottom:auto;、top:0;、bottom:0;可以让定位的标签垂直居中。
16、border-radius
border-radius:20px/40px; // 表示四个角的水平半径为20px,垂直半径为40px
border-radius:20px; // 表示四个角的水平半径和垂直半径都为20px
border-radius:10px 20px 30px 40px; // 表示上右下左四个角的圆角半径
标签宽高相同的情况下可以使用border-radius:50%;实现圆形
17、box-shadow
box-shadow:内阴影/外阴影(默认) 水平距离 垂直距离 虚化程度 阴影大小 阴影颜色
box-shadow:2px 5px 5px 0px black;
box-shadow:inset 2px 5px 5px 0px black;