H5+C3布局相关.md

H5 / 2022-03-08

渐变

CSS3 定义了两种类型的渐变(gradients):

线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向

background: linear-gradient(direction, color-stop1, color-stop2,...);

径向渐变(Radial Gradients)- 由它们的中心定义

background: radial-gradient(center, shape size, start-color,...,last-color);

变形

2D新转换属性

以下列出了所有的转换属性:

Property描述CSS
transform适用于2D或3D转换的元素3
transform-origin允许您更改转化元素位置

2D 转换方法

函数描述
matrix(n,n,n,n,n,n)定义 2D 转换,使用六个值的矩阵。
translate(x,y)定义 2D 转换,沿着 X 和 Y 轴移动元素。
translateX(n)定义 2D 转换,沿着 X 轴移动元素。
translateY(n)定义 2D 转换,沿着 Y 轴移动元素。
scale(x,y)定义 2D 缩放转换,改变元素的宽度和高度。
scaleX(n)定义 2D 缩放转换,改变元素的宽度。
scaleY(n)定义 2D 缩放转换,改变元素的高度。
rotate(angle)定义 2D 旋转,在参数中规定角度。
skew(x-angle,y-angle)定义 2D 倾斜转换,沿着 X 和 Y 轴。
skewX(angle)定义 2D 倾斜转换,沿着 X 轴。
skewY(angle)定义 2D 倾斜转换,沿着 Y 轴。

3D转换属性

下表列出了所有的转换属性:

属性描述CSS
transform向元素应用 2D 或 3D 转换。3
transform-origin允许你改变被转换元素的位置。3
transform-style规定被嵌套元素如何在 3D 空间中显示。3
perspective规定 3D 元素的透视效果。3
perspective-origin规定 3D 元素的底部位置。3
backface-visibility定义元素在不面对屏幕时是否可见。3

3D 转换方法

函数描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)定义 3D 转换,使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)定义 3D 转化。
translateX(x)定义 3D 转化,仅使用用于 X 轴的值。
translateY(y)定义 3D 转化,仅使用用于 Y 轴的值。
translateZ(z)定义 3D 转化,仅使用用于 Z 轴的值。
scale3d(x,y,z)定义 3D 缩放转换。
scaleX(x)定义 3D 缩放转换,通过给定一个 X 轴的值。
scaleY(y)定义 3D 缩放转换,通过给定一个 Y 轴的值。
scaleZ(z)定义 3D 缩放转换,通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)定义 3D 旋转。
rotateX(angle)定义沿 X 轴的 3D 旋转。
rotateY(angle)定义沿 Y 轴的 3D 旋转。
rotateZ(angle)定义沿 Z 轴的 3D 旋转。
perspective(n)定义 3D 转换元素的透视视图。

过渡

过渡属性

所有的过渡属性:

属性描述CSS
transition简写属性,用于在一个属性中设置四个过渡属性。3
transition-property规定应用过渡的 CSS 属性的名称。3
transition-duration定义过渡效果花费的时间。默认是 0。3
transition-timing-function规定过渡效果的时间曲线。默认是 "ease"。3
transition-delay规定过渡效果何时开始。默认是 0。3
div
{
transition-property: width;
transition-duration:1s;
transition-timing-function: linear;
transition-delay:2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}

盒模型

在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框,主要包括以下用户界面属性:

  • resize:none | both | horizontal | vertical | inherit
  • box-sizing: content-box | border-box | inherit
  • outline:outline-color outline-style outline-width outine-offset

resize属性指定一个元素是否应该由用户去调整大小。

box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。

outline-offset 属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。

CSS3伸缩布局盒模型(弹性盒)

CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

弹性盒子中常用到的属性:

属性描述
display指定 HTML 元素盒子类型。
flex-direction指定了弹性容器中子元素的排列方式
justify-content设置弹性盒子元素在主轴(横轴)方向上的对齐方式。
align-items设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式。
flex-wrap设置弹性盒子的子元素超出父容器时是否换行。
align-content修改 flex-wrap 属性的行为,类似 align-items, 但不是设置子元素对齐,而是设置行对齐
flex-flowflex-direction 和 flex-wrap 的简写
order设置弹性盒子的子元素排列顺序。
align-self在弹性子元素上使用。覆盖容器的 align-items 属性。
flex设置弹性盒子的子元素如何分配空间。

flex

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

**注意:**如果元素不是弹性盒模型对象的子元素,则 flex 属性不起作用。

默认值:0 1 auto
继承:
可动画化:是,参见个别的属性。请参阅 可动画化(animatable)
版本:CSS3
JavaScript 语法:object.style.flex="1"尝试一下
CSS 语法
flex: *flex-grow* *flex-shrink* *flex-basis*|auto|initial|inherit;
属性值
描述
flex-grow一个数字,规定项目将相对于其他灵活的项目进行扩展的量。
flex-shrink一个数字,规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis项目的长度。合法值:"auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
auto与 1 1 auto 相同。
none与 0 0 auto 相同。
initial设置该属性为它的默认值,即为 0 1 auto。请参阅 initial
inherit从父元素继承该属性。请参阅 inherit

媒体查询

设置Meta标签

首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

参数解释:

  • **width = device-width:**宽度等于当前设备的宽度
  • **initial-scale:**初始的缩放比例(默认设置为1.0)
  • **minimum-scale:**允许用户缩放到的最小比例(默认设置为1.0)
  • **maximum-scale:**允许用户缩放到的最大比例(默认设置为1.0)
  • **user-scalable:**用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)
加载兼容文件JS

因为IE8既不支持HTML5也不支持CSS3 Media,所以我们需要加载两个JS文件,来保证我们的代码实现兼容效果:

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
设置文档模式

IE的文档模式永远都是最新的:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

不过我最近又发现了一个更给力的写法:

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

怎么这段代码后面加了一个chrome=1,这个Google Chrome Frame(谷歌内嵌浏览器框架GCF),如果有的用户电脑里面装了这个chrome的插件,就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算,无比给力,不过如果用户没装这个插件,那这段代码就会让IE以最高的文档模式展现效果。这段代码我还是建议你们用上,不过不用也是可以的。

进入CSS3 Media写法
@media screen and (max-width: 960px){
    body{
        background: #000;
    }
}

这个应该算是一个media的一个标准写法,CSS代码:当页面小于960px的时候执行它下面的CSS.

应该有人会发现上面这段代码里面有个screen,他的意思是在告知设备在打印页面时使用衬线字体,在屏幕上显示时用无衬线字体。但是目前我发现很多网站都会直接省略screen,因为你的网站可能不需要考虑用户去打印时,你可以直接这样写:

@media (max-width: 960px){
    body{
        background: #000;
    }
}
回归CSS3 Media

等于960px尺寸的代码:

@media screen and (max-device-width:960px){
	body{
		background:red;
	}
}
@media screen and (min-width:960px){
	body{
		background:orange;
	}
}
我们还可以混合使用上面的用法:
@media screen and (min-width:960px) and (max-width:1200px){
	body{
		background:yellow;
	}
} 
Media所有参数汇总

以上就是我们最常需要用到的媒体查询器的三个特性,大于,等于,小于的写法。媒体查询器的全部功能肯定不止这三个功能,下面是我总结的它的一些参数用法解释:

  • **width:**浏览器可视宽度。
  • height:浏览器可视高度。
  • device-width:设备屏幕的宽度。
  • device-height:设备屏幕的高度。
  • orientation:检测设备目前处于横向还是纵向状态。
  • aspect-ratio:检测浏览器可视宽度和高度的比例。(例如:aspect-ratio:16/9)
  • device-aspect-ratio:检测设备的宽度和高度的比例。
  • color:检测颜色的位数。(例如:min-color:32就会检测设备是否拥有32位颜色)
  • color-index:检查设备颜色索引表中的颜色,他的值不能是负数。
  • monochrome:检测单色楨缓冲区域中的每个像素的位数。(这个太高级,估计咱很少会用的到)
  • resolution:检测屏幕或打印机的分辨率。(例如:min-resolution:300dpi或min-resolution:118dpcm)。
  • grid:检测输出的设备是网格的还是位图设备。

##盒模型

盒子模型(box model)

在HTML中,可以把元素看做盒子,盒子包括:实际内容(content)、内边距(padding)、边框(border)、外边距(margin)

标准盒模型和怪异盒模型

标准盒模型

标准盒模型(W3C盒子模型),设置的width或height是对 实际内容(content)的width或height进行设置,内容周围的border和padding另外设置,即盒子模型的width(height)=设置的content的宽高+padding+border+margin
注:除内容content外,其他为上下左右都有

怪异盒模型

怪异盒模型(IE盒子模型),设置的width或height是对 实际内容(content)+内边距(padding)+边框(border)之和的width和height进行设置的,其盒模型的width(height)=设置的width(height)+外边距margin

box-sizing的应用

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。(个人认为可以理解为指定盒模型的类型,即上述两种类型)

box-sizing值为content-box时:宽度和高度分别应用到元素的内容框,在宽度和高度之外绘制元素的内边距和边框。(即 标准盒模型)
box-sizing值为border-box时:为元素设定的宽度和高度决定了元素的边框盒,就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制,通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。(即 怪异盒模型)
box-sizing值为inherit时:规定应从父元素继承 box-sizing 属性的值。

##选择器

选择器汇总

选择器示例示例说明CSS
.class.intro选择所有class="intro"的元素1
#id#firstname选择所有id="firstname"的元素1
**选择所有元素2
elementp选择所有

元素

1
element,elementdiv,p选择所有
元素和

元素

1
element elementdiv p选择
元素内的所有

元素

1
element>elementdiv>p选择所有父级是
元素的

元素

2
element+elementdiv+p选择所有紧接着
元素之后的

元素

2
[attribute][target]选择所有带有target属性元素2
[attribute=value][target=-blank]选择所有使用target="-blank"的元素2
[attribute~=value][title~=flower]选择标题属性包含单词"flower"的所有元素2
[attribute|=language][lang|=en]选择一个lang属性的起始值="EN"的所有元素2
:linka:link选择所有未访问链接1
:visiteda:visited选择所有访问过的链接1
:activea:active选择活动链接1
:hovera:hover选择鼠标在链接上面时1
:focusinput:focus选择具有焦点的输入元素2
:first-letterp:first-letter选择每一个

元素的第一个字母

1
:first-linep:first-line选择每一个

元素的第一行

1
:first-childp:first-child指定只有当

元素是其父级的第一个子级的样式。

2
:beforep:before在每个

元素之前插入内容

2
:afterp:after在每个

元素之后插入内容

2
:lang(language)p:lang(it)选择一个lang属性的起始值="it"的所有

元素

2
element1~element2p~ul选择p元素之后的每一个ul元素3
[attribute^=value]a[src^="https"]选择每一个src属性的值以"https"开头的元素3
[attribute$=value]a[src$=".pdf"]选择每一个src属性的值以".pdf"结尾的元素3
[attribute*=value]a[src*="44lan"]选择每一个src属性的值包含子字符串"44lan"的元素3
:first-of-typep:first-of-type选择每个p元素是其父级的第一个p元素3
:last-of-typep:last-of-type选择每个p元素是其父级的最后一个p元素3
:only-of-typep:only-of-type选择每个p元素是其父级的唯一p元素3
:only-childp:only-child选择每个p元素是其父级的唯一子元素3
:nth-child(n)p:nth-child(2)选择每个p元素是其父级的第二个子元素3
:nth-last-child(n)p:nth-last-child(2)选择每个p元素的是其父级的第二个子元素,从最后一个子项计数3
:nth-of-type(n)p:nth-of-type(2)选择每个p元素是其父级的第二个p元素3
:nth-last-of-type(n)p:nth-last-of-type(2)选择每个p元素的是其父级的第二个p元素,从最后一个子项计数3
:last-childp:last-child选择每个p元素是其父级的最后一个子级。3
:root:root选择文档的根元素3
:emptyp:empty选择每个没有任何子级的p元素(包括文本节点)3
:target#news:target选择当前活动的#news元素(包含该锚名称的点击的URL)3
:enabledinput:enabled选择每一个已启用的输入元素3
:disabledinput:disabled选择每一个禁用的输入元素3
:checkedinput:checked选择每个选中的输入元素3
:not(selector):not(p)选择每个并非p元素的元素3
::selection::selection匹配元素中被用户选中或处于高亮状态的部分3
:out-of-range:out-of-range匹配值在指定区间之外的input元素3
:in-range:in-range匹配值在指定区间之内的input元素3
:read-write:read-write用于匹配可读及可写的元素3
:read-only:read-only用于匹配设置 "readonly"(只读) 属性的元素3
:optional:optional用于匹配可选的输入元素3
:required:required用于匹配设置了 "required" 属性的元素3
:valid:valid用于匹配输入值为合法的元素3
:invalid:invalid用于匹配输入值为非法的元素

选择器优先级

浏览器通过优先级来判断哪些属性值与一个元素最为相关,从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。

不同级别

  • 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。

  • 作为style属性写在元素内的样式

  • id选择器

  • 类选择器

  • 标签选择器

  • 通配符选择器

  • 浏览器自定义或继承

    总结排序:!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

同一级别

同一级别中后写的会覆盖先写的样式

CSS 继承

继承:子元素继承父元素的样式,但是并不是所有属性都是默认继承的。

inherited:yes 来判断属性是否可以继承

无继承性的属性
  • display:规定元素应该生成的框的类型

  • 文本属性:

    • vertical-align:垂直文本对齐
    • text-decoration:规定添加到文本的装饰
    • text-shadow:文本阴影效果
    • white-space:空白符的处理
    • unicode-bidi:设置文本的方向
  • 盒子模型的属性:

    width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left

  • 背景属性:background、background-color、background-image、background-repeat、background-position、background-attachment

  • 定位属性:float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

  • 生成内容属性:content、counter-reset、counter-increment

  • 轮廓样式属性:outline-style、outline-width、outline-color、outline

  • 页面样式属性:size、page-break-before、page-break-after

  • 声音样式属性:pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

有继承性的属性
  • 字体系列属性

font:组合字体

font-family:规定元素的字体系列

font-weight:设置字体的粗细

font-size:设置字体的尺寸

font-style:定义字体的风格

font-variant:设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。

font-stretch:对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。

font-size-adjust:为某个元素规定一个 aspect 值,这样就可以保持首选字体的 x-height。

  • 文本系列属性

text-indent:文本缩进

text-align:文本水平对齐

line-height:行高

word-spacing:增加或减少单词间的空白(即字间隔)

letter-spacing:增加或减少字符间的空白(字符间距)

text-transform:控制文本大小写

direction:规定文本的书写方向

color:文本颜色

  • 元素可见性:visibility

  • 表格布局属性:caption-side、border-collapse、border-spacing、empty-cells、table-layout

  • 列表布局属性:list-style-type、list-style-image、list-style-position、list-style

  • 生成内容属性:quotes

  • 光标属性:cursor

  • 页面样式属性:page、page-break-inside、windows、orphans

  • 声音样式属性:speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

所有元素可以继承的属性
  • 元素可见性:visibility

  • 光标属性:cursor

内联元素可以继承的属性
  • 字体系列属性

  • 除text-indent、text-align之外的文本系列属性

块级元素可以继承的属性
  • text-indent、text-align

position

absolute生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
static默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit规定应该从父元素继承 position 属性的值。
sticky它主要用在对scroll事件的监听上,简单说在滑动过程中,某个元素的距离其父元素的距离达到 sticky 粘性定位 要求时;

display

描述
none此元素不会被显示。
block此元素将显示为块级元素,此元素前后会带有换行符。
inline默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block行内块元素。(CSS2.1 新增的值)
list-item此元素会作为列表显示。
run-in此元素会根据上下文作为块级元素或内联元素显示。
compactCSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
markerCSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
table此元素会作为块级表格来显示(类似 ),表格前后带有换行符。
inline-table此元素会作为内联表格来显示(类似 ),表格前后没有换行符。)。)。)。)。)。)
table-row-group此元素会作为一个或多个行的分组来显示(类似
table-header-group此元素会作为一个或多个行的分组来显示(类似
table-footer-group此元素会作为一个或多个行的分组来显示(类似
table-row此元素会作为一个表格行显示(类似
table-column-group此元素会作为一个或多个列的分组来显示(类似
table-column此元素会作为一个单元格列显示(类似
table-cell此元素会作为一个表格单元格显示(类似
table-caption此元素会作为一个表格标题显示(类似
inherit规定应该从父元素继承 display 属性的值。

浮动

高度塌陷

清除浮动的方式

在父元素的最后加一个冗余元素并为其设置clear:both
div class="box">
    <div class="div">1</div>
    <div class="div">2</div>
    <div class="clear"></div>
</div>
.box{ width:700px; margin:0 auto; border:2px solid green;}
.div{ width:300px; height:200px; background:red; float:left;}
.div{ width:300px; height:200px; background:red; float:left; margin-left: 10px;}
.clear{ height:0px; clear:both; overflow: hidden;}

####采用伪元素,这里我们使用:after。添加一个类clearfix: (推荐)
在我们需要清除浮动时,只需要给父元素追加clear类即可,既方便又符合语义化。
该方法的缺点是,IE6/IE7不识别:after伪元素,存在兼容性问题

<div class="box clearfix">
    <div class="div">1</div>
    <div class="div">2</div>
</div>
.box{ width:700px; margin:0 auto; border:2px solid green;}
.div{ width:300px; height:200px; background:red; float:left;}
.div{ width:300px; height:200px; background:red; float:left; margin-left: 10px;}
.clearfix:after { 
     content:""; 
     display:table; /*采用此方法可以有效避免浏览器兼容问题*/
     clear:both;
}

CSS3新增伪类

新增伪类作用
p:first-of-type选择属于其父元素的首个

元素的每个

元素。

p:last-of-type选择属于其父元素的最后

元素的每个

元素。

p:only-of-type选择属于其父元素唯一的

元素的每个

元素。

p:only-child选择属于其父元素唯一的子元素的每个

元素。

p:nth-child(n)选择属于其父元素的第n个子元素的每个

元素。

p:nth-last-child(n)选择属于其父元素的倒数第n个子元素的每个

元素。

p:nth-of-type(n)选择属于其父元素第n个

元素的每个

元素。

p:nth-last-of-type(n)选择属于其父元素倒数第n个

元素的每个

元素。

p:last-child选择属于其父元素最后一个子元素的每个

元素。

p:empty选择没有子元素的每个

元素(包括文本节点)。

p:target选择当前活动的

元素。

:not(p)选择非

元素的每个元素。

:enabled控制表单控件的可用状态。
:disabled控制表单控件的禁用状态。
:checked单选框或复选框被选中。
伪类作用
:hover将样式添加到鼠标悬浮的元素
:active将样式添加到被激活的元素
:focus将样式添加到获得焦点的元素
:link将样式添加到未被访问过的链接
:visited将样式添加到被访问过的链接
:first-child将样式添加到元素的第一个子元素
:lang定义指定的元素中使用的语言

##CSS3 过渡

通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。

internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。

Safari 需要前缀 -webkit-。

**注释:**Internet Explorer 9 以及更早的版本,不支持 transition 属性。

**注释:**Chrome 25 以及更早的版本,需要前缀 -webkit-。

https://www.w3school.com.cn/css3/css3_transition.asp

transition属性

transform属性

BFC

不定宽高垂直水平居中

元素已知宽高垂直水平居中

布局

不定宽高垂直水平居中

元素已知宽高垂直水平居中

左侧固定右侧自适应中

两侧固定中栏自适应

右侧固定左侧自适应