Css3样式
第一章 CSS基础篇
2 盒子模型
（1）IE 盒子模型
给一个标签添加：box-sizing:border-box；
这个标签就转换为了怪异盒模型
标签得实际宽度 = 设置的宽度
如果设置了padding和border就是从设置的实际宽高中减去，减去后才是内容的宽高。
（2）标准 W3C 盒子模型
给一个标签添加：box-sizing:content-box；(元素默认)
这个标签就转换为了w3c盒模型
标签得实际宽度 = 设置的宽度 + border宽度 + padding的宽度
3 像素
传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，并且拥有比较良好的兼容性。但是你知道吗？从css3开始，浏览器对逻辑单位的支持又提升到了另外一个境界，增加了rem、vh、vw、vm等一些新的长度单位，我们可以利用这些新的单位开发出比较良好的响应式页面，随之覆盖多种不同分辨率的终端，包括移动设备等。现在让我们来看下这些长度单位有什么区别。在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。
（1）px，1个Viewport像素，相对长度单位。像素px是相对于显示器屏幕分辨率而言的。px就是pixel的缩写，意为像素。px就是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。px实际是pixel（像素）的缩写；
（2）pt，作为物理像素，设备像素（物理像素），顾名思义，显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位pt；
（3）em，em是一种相对长度单位，相对于自身元素的字号大小，如果没有设置即参照父容器的字号大小或浏览器默认字号大小。举例：如一个div#box的宽度设置为#box{ width:10em }，其字号大小#box{ font-size:14px },则此div的宽度为140px；
（4）rem，rem是css3的新标准也是一种相对长度单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。css: html{ font-size:14px}，此根标签内有元素div#box的宽度为：#box{ width：10rem }，则此div的宽度换算成像素则为140px。使用场景： 一般移动端的UI设计稿的宽度分为640px,和750px两种,但是要想使用一份代码就适配所有屏幕，就必须使用相对单位，这时候使用rem是最好的选择。使用方法：我们将UI设计稿人为均分成几等份，使用媒体查询判断屏幕的大小，针对判断出的每一种屏幕大小，给其html根元素的字号大小设置为为均分后的每一等份的大小。如：UI设计稿宽度为640px,我们将UI设计稿均分为20等份,那么我们就可以通过媒体查询，给320px的屏幕设置HTML根元素的字号大小为16px（320/20）,给640px大小的屏幕设置html根元素字号大小为32px(640/20),则我们在后续书写代码的时候，ui设计稿上的一个div的盒子宽度为160px,我们使用rem单位将其表示为width：5rem,则此盒子无论在320px的屏幕下还是在640px的屏幕下都将显示为屏幕的1/4的宽度。
（5）%，一般宽泛的讲是相对于父元素，但是并不是十分准确。对于普通定位元素就是我们理解的父元素。对于position: absolute;的元素是相对于已定位的父元素。对于position: fixed;的元素是相对于ViewPort（可视窗口）；
（6）vw，css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。
（7）vh，css3新单位viewpoint height的缩写，vh就是当前屏幕可见高度的1%也就是height:100vh == height:100%，但是当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0，但是设置height:100vh，该元素会被撑开屏幕高度一致。举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px；
（8）vm，css3新单位，相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm举个例子：浏览器高度900px，宽度1200px，取最小的浏览器高度，1 vm = 900px/100 = 9 px。由于现在vm的兼容性较差，这里就不做展示了；
4 字体
在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件font 简写属性在一个声明中设置所有字体属性；
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight:bold;
}
font-family，字体样式设定时，需考虑浏览器中有无该字体
font-size，字体大小，注意度量单位
font-weight，除了normal（正常）、bold（粗体）、bolder（特粗）、lighter（细体）外，还有9种以像素为度量为单位的设置方式
font-style，也就是字型
line-height，就是行距。注意，行距只能以是字体大小值为 line-height: 200%
font-variant，可以将正常文字一半尺寸后大写显示，但IE目前不支持这项属性
text-transform，这项属性能轻而易举地控制字母大小写，有首字大写capitalize、大uppercase、小写lowercase和无none，使所有继承文字和变形参数被忽略，文字将以正常形式显示）等4种
text-decoration，用于控制链接文本的显示形态，有下划线underline，下划线overline、删除线line-through、闪烁blink，无none ，等5种修饰方式
5 背景
(1) background-repeat设置如何平铺对象的位置
repeat 背景图像将向垂直和水平方向重复。这是默认
repeat-x 只有水平位置会重复背景图像
repeat-y 只有垂直位置会重复背景图像
no-repeat background-image 不会重复
inherit 指定 background-repeat 属性设置应该从父元素继承
(2) background-position 属性设置背景图像的起始位置
left top left center left bottom right top right center right bottom center top center center center bottom
#id{
background-image: url("../../assets/images/1.png"), url("../../assets/images/logo.png");
background-position: right bottom, left top;
background-repeat: no-repeat, no-repeat;
padding: 15px;
}
例如：background:#ff0000 url(/image/bg.jpg) no-repeat fixed center;
(3) background-color设置背景颜色
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
p.no2 {background-color: gray; padding: 20px;}
(1)color是定义字体的颜色;
(2)backgroud可以定义背景的一切内容，包括颜色、图片以及图片位置;
(3)background-color只能定义背景的颜色;
(4)bgcolor ，是标签body的属性，比如p标签用bgcolor就没有作用。<p>不支持bgcolor属性，只能用style标签添加CSS样式。在HTML的<table>标签中，比如<td>,<th>,<tr>,<table>一般都是使用bgcolor，而在CSS中，<p>标签使用color，<td>使用<background>。<p style='background-color:red'>才可以设置背景颜色。像backgroundColor 与 background-color 这样的属性，他们的属性值是一样的，改变两个中任何一个属性的值，另一个属性的值也会随之改变，但是JS中变量不能用“-”；
(4) background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定，CSS3中可以指定背景图片
div
{
background:url(img_flwr.gif); //指定图片大小
background-size:80px 60px;
background-repeat:no-repeat;
}
div
{
background:url(img_flwr.gif); //伸展背景图像完全填充内容区域：
background-size:100% 100%;
background-repeat:no-repeat;
}
length， 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)。
percentage ，将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度，各个值之间以空格 隔开指定高和宽，以逗号 , 隔开指定多重背景。如果只给出一个值，第二个是设置为"auto(自动)"。
cover，此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain，此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
(5) background-origin，属性指定background-position属性应该是相对位置注意如果背景图像,如果background-attachment是固定的，这个属性就么有效果。
padding-box背景图像填充框的相对位置
border-box 背景图像边界框的相对位置
content-box 背景图像的相对位置的内容框
#MyDIV
{
padding:25px;
border:10px dotted #000000;
background-image:url('/i/eg_smile.gif');
background-origin:content-box;
background-repeat:no-repeat;
}
6.属性
| 类型 | 描述 | |
| px(pixel,像素) | Absolute | 1个Viewport像素，相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 |
| pt(point,磅) | Absolute | 1pt = 1/72英寸，物理长度单位，指的是72分之一英寸 |
| pc | Absolute | 1pc = 12pt |
| % | Relative | 相对于父元素的字体尺寸 |
| em | Relative | 相对于父元素的字体尺寸，相对长度单位。相对于当前对象内文本的字体尺寸 |
| rem | Relative | 相对长度单位,(即root em) 相对于html标签的字体尺寸,相对的只是HTML根元素 |
| keyword | Relative | xx-small, x-small, small, medium, large, x-large, xx-large |
| vw | Relative | 相当于Viewport宽度的1/100,相对于视口的宽度 |
| vh | Relative | 相当于Viewport高度的1/100,相对于视口的高度 |
| vmin | Relative | 相当于Viewport高宽中长度相对较小的1/100,关于视口高度和宽度两者的最小值 |
| vmax | Relative | 相当于Viewport高宽中长度相对较大的1/100,关于视口高度和宽度两者的最大值 |
3.1 弹性布局
主轴 (main size) 是弹性容器的主要轴线，弹性项目(items)是沿着这个轴线布置的。请注意，它不一定是水平的；它取决于flex-direction属性（见下文）。在开始学习之前，我们先确定一下页面（容器）布局。
3.1.1基本概念
主轴：Flex组件布局方向的轴线，子元素默认沿着主轴排列。主轴开始的位置称为主轴起始点，结束位置称为主轴结束点。
交叉轴：垂直于主轴方向的轴线。交叉轴开始的位置称为交叉轴起始点，结束位置称为交叉轴结束点。
3.1.2布局方向(flex-direction)
（1）弹性布局定义
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性任何一个容器都可以指定为Flex布局。
.box{
display: flex;
}
行内元素也可以使用Flex布局。
.box{
display: inline-flex;
}
Webkit内核的浏览器，必须加上-webkit前缀。
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”
（1）flex-direction
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
(4)例子属性
display:inline-block;
3.1.3布局换行(flex-warp)
弹性布局分为单行布局和多行布局。默认情况下，Flex容器中的子元素都排在一条线（又称“轴线”）上。wrap属性控制当子元素主轴尺寸之和大于容器主轴尺寸时，Flex是单行布局还是多行布局。在多行布局时，通过交叉轴方向，确认新行堆叠方向。
flex-warp.
第二章 高级篇
1. 弹性布局
弹性布局（Flex）提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方向的尺寸称为主轴尺寸，在交叉轴方向的尺寸称为交叉轴尺寸。弹性布局在开发场景中用例特别多，比如页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等。
1.1 基本概念
主轴：Flex组件布局方向的轴线，子元素默认沿着主轴排列。主轴开始的位置称为主轴起始点，结束位置称为主轴结束点。
交叉轴：垂直于主轴方向的轴线。交叉轴开始的位置称为交叉轴起始点，结束位置称为交叉轴结束点。
主轴 (main size) 是弹性容器的主要轴线，弹性项目(items)是沿着这个轴线布置的。请注意，它不一定是水平的；它取决于flex-direction属性（见下文）。在开始学习之前，我们先确定一下页面（容器）布局。
1.2 布局方向(flex-direction)
(1) 弹性布局定义
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性任何一个容器都可以指定为Flex布局。
.box{
display: flex;
}
行内元素也可以使用Flex布局。
.box{
display: inline-flex;
}
Webkit内核的浏览器，必须加上-webkit前缀。
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”
(2) flex-direction
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
1.3 布局换行(flex-warp)
弹性布局分为单行布局和多行布局。默认情况下，Flex容器中的子元素都排在一条线（又称“轴线”）上。wrap属性控制当子元素主轴尺寸之和大于容器主轴尺寸时，Flex是单行布局还是多行布局。在多行布局时，通过交叉轴方向，确认新行堆叠方向。
flex-warp. nowrap（默认值）：不换行。如果子组件的宽度总和大于父元素的宽度，则子组件会被压缩宽度。
nowrap ：（默认） 不换行。
wrap ：换行，第一行排满后自动换到第二行。
wrap-reverse ：换行，与 wrap 不同的是如果出现换行，换行后的元素在第一行上方。
备注：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。flex-flow 是 flex-direction 和 flex-wrap 的简写形式，默认值为 row nowrap。
1.4主轴对齐(justify-content)
通过justifyContent参数设置在主轴方向的对齐方式。justify-content单行x轴，它可能取5个值，具体对齐方式与主轴的方向有关。下面假设主轴为从左到右。
flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
1.5 交叉轴对齐(align-items)
容器和子元素都可以设置交叉轴对齐方式，且子元素设置的对齐方式优先级较高。align-items 单行y轴：它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
1.6多行对齐
align-content多⾏情况下的对⻬⽅式，类似justify-content的对⻬⽅式。（多行情况下在交叉轴的对齐方式）。align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。align-content 有以下六个值：
flex-start ：与交叉轴的起点对齐。
flex-end ：与交叉轴的终点对齐。
center ：与交叉轴的中点对齐。
space-between ：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around ：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch：轴线占满整个交叉轴。
2. 水平居中
2.1 文本居中
text-align对文本元素设置水平居中，给一个宽为400px高为200px的div盒子，盒子里面放置了块元素div、行内元素span、行内块元素input。现在，我们给这个盒子添加一个css样式：text-align:center。下图是实现结果，我们看到，span标签和input标签均实现水平居中；看到div1你可能以为它水平居中，但是从div2中可以发现，div标签并没有实现水平居中，只是里面的文字水平居中了。不难总结出：text-align对文本、行内元素、行内块元素生效，对块元素却是无效的。不过，有个疑问的地方，虽然div标签没有水平居中，但是div标签里面的文字却是水平居中的，为什呢原来是因为css具有继承性，div标签继承到了父元素的text-align属性，使得div内部的文本对div水平居中。
2.2 空间居中
(1) margin：0 auto
对块元素实现水平居中，实现原理：块级元素在水平方向上具有满屏特性，表现为水平方向上占满整个父容器的宽度，所以，当水平方向上padding、border，width都是定值时，margin左右外边距设置为auto，默认会由margin左右平分剩余空间。从而达到水平居中效果。
(2) 使用position和transform
position: absolute;
left: 50%;
transform: translateX(-50%);
实现原理： position: absolute;给元素设置绝对定位，left: 50%;让其距离左边偏移父元素的50%，然后通过 transform: translateX(-50%);让其向左平移自身宽度的50%，从而实现一个水平居中的效果。
3. 空间定位
3.1 绝对定位
第三章 CSS3属性篇
1. 属性
1.1 box-sizing
(1) content-box默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
(2) border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减 去(border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。
注：border-box 不包含 margin。
content-box（实际宽度为：200+10*2+15*2） 内容宽度为:200
border-box:
实际宽度为：200
内容宽度为:200-10*2-15*2
2.标签
2.1 文本标签
（1）<p>和<br>
本文介绍了HTML中用于换行的两种方式——<br>和<p>标签的区别。<p>标签用于创建段落，段落间默认有空白行间隔，而<br>标签则简单地进行换行，不产生额外间距。在表格中，由于表格自身换行特性，<br>标签并不适用。理解并正确使用这两个标签对于优化HTML布局至关重要。
区别：
<p>：段落标签，格式：<p> 文本 <p/> ， 顾名思义，<p>是将文本分成段落的时候使文本实现换行，并且段落文本之间会有一行空白行隔开
<br>：换行标签，格式：文本 <br> ,<br>只需要单独使用即可实现换行，而<p><p/>是常见的一对才能使用，<br>实现换行后直接网页中文本直接在下一行显示出来，中间不会出现空白行。<p><p/>也可以通过css设置对应p标签中margin:0; padding:0;即p{ margin:0; padding:0;}，使<p>相当于一个<br>
(2) opacity
设置一个div元素的透明度级别：
value 指定不透明度。从0.0（完全透明）到1.0（完全不透明）
inherit Opacity属性的值应该从父元素继承；
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
5
0- 0
已为社区贡献1条内容
所有评论(0)