企业官网建设流程全解析

可以做思维导图的网站,cn域名有名的网站,网站备案账户名如何查询,APP网站怎么做尺寸单位: px,em,rem,frimg各单位定义px (像素): 相对固定的单位#xff0c;代表屏幕上的一个物理点。在高分辨率屏幕上#xff0c;1个CSS像素可能对应多个物理像素。em: 相对单位#xff0c;相对于父元素的字体大小。如果父元素字体大小为16px#xff0c;则1em 16px。rem…尺寸单位: px,em,rem,frimg各单位定义px (像素): 相对固定的单位代表屏幕上的一个物理点。在高分辨率屏幕上1个CSS像素可能对应多个物理像素。em: 相对单位相对于父元素的字体大小。如果父元素字体大小为16px则1em 16px。rem (root em): 相对单位相对于根元素(html)的字体大小。如果html的字体大小为16px则1rem 16px。fr (fraction unit): Grid布局专用单位表示网格容器中可用空间的比例份额。当多个元素使用fr单位时它们会按照比例分配剩余空间。使用原则组合使用原则“全局用 rem局部用 em细节用 px”若尺寸不依赖任何字体大小如边框→ 用 px。若尺寸仅依赖父元素 / 自身字体大小如按钮内边距→ 用 em。若尺寸需要全局统一缩放如页面字体、容器宽度→ 用 rem。盒子模型盒子模型Box Model 由 4 个部分从内到外依次组成内容区content、内边距padding、边框border、外边距margin。box-sizing: content-box; 设置模型为标准盒模型 (W3C 盒模型)width,height 仅包含内容宽度不包含内边距、边框、外边距。即总宽度 内容宽度 内边距 边框 外边距。box-sizing: border-box; 设置模型为怪异盒模型 (IE 盒模型)width,height 仅包含内容宽度内边距、边框但不包含外边距。即设置的 width 值 内容宽度 内边距 边框宽度。position 定位关键术语定义定位祖先元素指元素的祖先节点中position属性值不为static的最近元素。对于absolute定位它是定位的参考系对于sticky定位它决定了粘性效果的有效范围。包含块(containing block)元素布局和定位的参考框。对于position为static或relative的元素包含块通常是其最近的块级祖先元素的内容区域对于absolute定位元素包含块是其定位祖先元素的padding区域对于fixed定位元素包含块是视口。position属性值position: static | relative | absolute | fixed | sticky;static: 静态定位默认值,遵循常规流布局不参与定位。元素的position属性值为static时元素的top、right、bottom、left属性值不会生效。relative: 相对定位 ,相对于其正常位置进行偏移不脱离文档流。自身在常规流中的位置仍然保留增加top、right、bottom、left这些属性后便会相对于自身在常规流中的位置进行定位absolute: 绝对定位,相对于定位祖先元素进行偏移定位,元素将完全脱离文档流。绝对定位元素的定位参考系是其最近的「定位祖先元素」即position值不为static的祖先元素。若祖先元素中存在position为relative、absolute、fixed或sticky的元素则该元素会作为定位参考系。若不存在任何定位祖先元素元素会最终相对于根元素html进行定位而非body元素。fixed: 固定定位,,相对于视口(viewport)进行偏移定位元素将完全脱离文档流固定定位的元素不会随页面滚动而移动始终保持在视口的固定位置。固定定位元素会完全脱离文档流不占据任何布局空间sticky: 粘性定位是一种位置感知的混合定位方式,优先相对于最近的可滚动祖先元素定位结合了 relative 和 fixed 定位的特点根据滚动位置动态切换行为当元素在视口内可见未达到触发点时表现为 relative 定位遵循正常文档流当元素滚动到指定的触发位置由top/right/bottom/left定义时表现为 fixed 定位固定在视口的指定位置sticky 定位的元素始终相对于其最近的可滚动祖先元素或视口视口滚动时进行定位sticky关键特性与注意事项必须至少设置 top、right、bottom、left 四个偏移属性中的一个否则 sticky 定位不会生效元素将表现为 static 定位元素的粘性效果仅在其包含块containing block的范围内有效超出包含块边界后将停止固定z-index 属性在 sticky 元素中有效可以控制层叠顺序与 fixed 定位的区别sticky 元素不会脱离文档流布局空间且其固定效果受限于父容器float 浮动浮动元素会部分脱离文档流不占据正常文档流的垂直空间但仍会在水平方向上影响周围元素的排列其他元素会环绕在其周围。float: left | right | none | inherit;left: 元素向左浮动将向左移动直到遇到另一个浮动元素或父元素的边缘。right: 元素向右浮动将向右移动直到遇到另一个浮动元素或父元素的边缘。none: 元素不浮动默认值。inherit: 规定从父元素继承 float 属性的值。浮动元素的排列规则如果元素A是浮动的且A元素上一个元素也是浮动的那么A元素会跟随在上一个元素的后边如果一行放不下这两个元素那么A元素会被挤到下一行。如果A元素上一个元素是标准流中的元素那么A的相对垂直位置不会改变即A的顶部总是和上一个元素的底部对齐。元素浮动前在标准流中是竖向排列的浮动后可以实现横向排列效果。注意浮动元素默认会收缩宽度以适应内容除非显式设置宽度且可能导致父元素高度塌陷等问题。img本来五个元素应该垂直排列其中div1和div5都在标准流中。但由于div2和div3设置了float: right;、div4设置了float: left;具体表现为div2和div3会向右浮动直到右边缘div4会向左浮动直到左边缘div5会遵循标准流的排列规则紧贴在div1下面由于浮动元素会部分脱离文档流div4会浮动在div5的上方。清除浮动clear: left | right | both | none;left: 元素的左侧不允许有浮动元素。right: 元素的右侧不允许有浮动元素。both: 元素的左右两侧均不允许有浮动元素。none: 元素允许有浮动元素默认值。对于CSS的清除浮动(clear)请记住这个规则只能影响使用清除的元素本身不能影响其他元素。img由于给div3加上了clear: right;它会不允许右侧有其他浮动元素因此即使div2和div3都设置了float: right;div3也会另起一行紧贴在div2的下方排列;布局模型flex布局display: flex;设置为flex弹性布局,称为Flex容器flex container所有子元素自动成为容器成员称为Flex项目flex itemimgmain axis 主轴默认水平方向从左到右。cross axis 交叉轴与主轴垂直默认垂直方向从上到下。main start 主轴起点。main end 主轴终点。cross start 交叉轴起点。cross end 交叉轴终点。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size占据的交叉轴空间叫做cross size。flex容器属性注意带有-reverse后缀的值会保持布局轴的方向不变水平/垂直但反转项目在该轴上的排列顺序起点变终点终点变起点,同时也会反转对齐点如justify-content: flex-start会变成从右向左对齐。flex-direction 属性决定主轴的方向即项目的排列方向.box {flex-direction: row | row-reverse | column | column-reverse;}row默认值主轴为水平方向起点在左端。row-reverse主轴为水平方向起点在右端。column主轴为垂直方向起点在上沿。column-reverse主轴为垂直方向起点在下沿。flex-wrap属性定义如果一条轴线排不下如何换行.box{flex-wrap: nowrap | wrap | wrap-reverse;}nowrap默认不换行。wrap换行第一行在上方。wrap-reverse换行第一行在下方。flex-flow属性是flex-direction属性和flex-wrap属性的简写形式.box{flex-flow: flex-direction flex-wrap;}默认值为row nowrapjustify-content属性定义了项目在主轴上的对齐方式.box{justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;}flex-start默认值左对齐。flex-end右对齐。center居中对齐。space-between两端对齐项目之间的间隔相等。space-around每个项目两侧的间隔相等。所以项目之间的间隔比项目与边框的间隔大一倍。space-evenly项目与项目之间的间隔相等项目与边框的间隔也相等。align-items属性定义项目在交叉轴上如何对齐.box{align-items: flex-start | flex-end | center | baseline | stretch;}flex-start交叉轴的起点对齐。flex-end交叉轴的终点对齐。center交叉轴的中点对齐。baseline: 项目的第一行文字的基线对齐。stretch默认值如果项目未设置高度或设为auto将占满整个容器的高度。align-content属性定义了多根轴线的对齐方式如果项目只有一根轴线该属性不起作用。.box{align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch;}flex-start与交叉轴的起点对齐。flex-end与交叉轴的终点对齐。center与交叉轴的中点对齐。space-between与交叉轴两端对齐轴线之间的间隔平均分布。space-around每根轴线两侧的间隔相等。所以轴线之间的间隔比轴线与边框的间隔大一倍。space-evenly轴线与边框的间隔也相等。stretch默认值轴线占满整个交叉轴。项目的属性order属性定义项目的排列顺序。数值越小排列越靠前默认为0。.item {order: integer;}flex-grow属性定义项目的放大比例默认为0即如果存在剩余空间也不放大。.item {flex-grow: number;}如果所有项目的flex-grow属性都为1则它们将等比例放大占满剩余空间。flex-shrink属性定义了项目的缩小比例默认为1即如果空间不足该项目将缩小。.item {flex-shrink: number;}如果所有项目的flex-shrink属性都为1当空间不足时它们将等比例缩小。如果一个项目的flex-shrink属性为0其他项目都为1则空间不足时前者不缩小。flex-basis属性定义了在分配多余空间之前项目占据的主轴空间main size.item {flex-basis: length | auto; /* default auto */}flex属性是flex-grow, flex-shrink 和 flex-basis的简写默认值为0 1 auto。后两个属性可选。.item {flex: none | [ flex-grow flex-shrink? || flex-basis ]}该属性有两个快捷值auto (1 1 auto) 和 none (0 0 auto)。align-self属性允许单个项目有与其他项目不一样的对齐方式可覆盖align-items属性。默认值为auto表示继承父元素的align-items属性如果没有父元素则等同于stretch。.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;}Grid布局displaygrid; 则该容器是一个块级元素display: inline-grid; 则容器元素为行内元素img网格线 grid line划分网格的线称为网格线。网格线会被编号帮我们定位每一个网格项目。如果有m列则有m1根垂直网格线有n行则有n1根水平网格线编号从左到右从上到下为123排列也有从右到左从下到上的-1-2-3排列网格单位 grid cell网格容器里面一个个网格项目元素就是网格单位网格轨道 grid track一个网格轨道就是网格中两条平行线之间的空间就好比表格中行或列网格区域 grid area多个网格线包围的总空间。网格区域可以包含任意数量的网格单元。CSS Grid灵活布局函数与关键字repeat()函数该函数接收两个参数第一个参数为重复次数第二个参数为需要重复的值用于重复指定的网格轨道模式简化具有多个相同尺寸列或行的网格定义。repeat(次数, 尺寸);示例/* 创建4个宽度均为100px的列 */grid-template-columns: repeat(4, 100px);/* 创建3个等宽列 */grid-template-columns: repeat(3, 1fr);minmax()函数minmax()函数产生一个长度范围接收两个参数第一个参数为最小值第二个为最大值。定义一个尺寸范围网格轨道的大小将在这个范围内自适应调整。minmax(最小值, 最大值);示例/* 创建列宽至少为100px最多为1fr的3列 */grid-template-columns: repeat(3, minmax(100px, 1fr));auto关键字根据内容自动调整网格轨道的大小。/* 第一列宽度根据内容自动调整第二列占据剩余空间 */grid-template-columns: auto 1fr;auto-fill关键字在可用空间内尽可能多地创建指定尺寸的网格轨道即使没有足够的内容填充。/* 在容器中尽可能多地创建200px宽的列 */grid-template-columns: repeat(auto-fill, 200px);/* 结合minmax使用创建响应式列 */grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));auto-fit关键字与auto-fill类似但会折叠空的网格轨道使非空轨道扩展填充剩余空间。/* 在容器中创建适应内容的列空列会被折叠 */grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));Grid属性grid-template-columns/rows 网格轨道的宽高(列宽和行高)grid-template-columns定义每一列的列宽grid-template-rows定义每一行的行高/* 直接定义行列数、列宽行高 *//* 定义了三列 每一行50px */grid-template-columns: 50px 50px 50px;/* 定义了三行 每一行50px */grid-template-rows: 50px 50px 50px;/* 定义网格线的名称按需求而定大小前面使用数组可以定义网格线的名称可以有很多个名称多个名称用空格隔开。 *//* 定义了三列 每一行50px 并给网格线命名为a b c d */grid-template-columns: [a] 50px [b] 50px [c] 50px [d];/* 定义了三行 每一行50px 并给网格线命名为a b c d */grid-template-rows: [a] 50px [b] 50px [c] 50px [d];grid-template-areas网格布局区域 和 grid-area网格项目定位grid-template-areas:该属性一般与grid-area一起使用grid-template-areas属性在容器上制定各个区域并命名grid-areagrid-area属性指定项目放在哪一个区域内。grid-area为项目属性/* 网格布局区域 */.container {grid-template-areas:header header headersidebar main mainfooter footer footer;}/* 项目属性 */.header {grid-area: header;}省略...img. 表示空轨道不占用任何空间命名的网格区域必须包含在grid-template-areas属性中定义的区域内。grid-row-gap grid-column-gap grid-gap 设置间距在现代浏览器中相关属性已经进行了简化grid- 前缀被移除grid-row-gap设置行间距grid-column-gap设置列间距grid-gap同时设置行间距和列间距/* 设置行间距为20px */row-gap: 20px;/* 设置列间距为30px */column-gap: 30px;/* 同时设置行间距为20px列间距为30px */grid-gap: 20px 30px;Grid 布局中的简写属性grid-template grid-gapgrid-templategrid-template-columns、grid-template-rows、grid-template-areas的简写属性grid-gapgrid-row-gap、grid-column-gap的简写属性/* 定义网格布局 */grid-template:header header header 50px /*第一行高度为50px*/sidebar main main 1fr /*第二行高度为1fr*/footer footer footer 50px /*第三行高度为50px*// 200px 1fr 200px; /*列宽为200px 1fr 200px*//* 同时设置行间距为20px列间距为30px */grid-gap: 20px 30px;grid-auto-flow 网格排列顺序grid 容器的子元素默认会按照先行后列的顺序放置grid-auto-flow 属性决定默认值是 row。也可以设成 column变成先列后行row dense按行排列并尝试填充空白区域。column dense按列排列并尝试填充空白区域。justify-items属性、align-items属性以及place-items属性控制所有网格项目在其单元格内的对齐方式justify-items定义网格项目在单元格内沿行轴水平方向的对齐方式。align-items定义网格项目在单元格内沿列轴垂直方向的对齐方式。place-items是 justify-items 和 align-items 的简写属性用于同时设置这两个属性。justify-items: start | end | center | stretch;align-items: start | end | center | stretch;place-items: align-items justify-items;start项目在当前轴的起始位置end项目在当前轴的结束位置center项目在当前轴的中间位置stretch项目会拉伸以填充整个单元格。justify-content 属性、align-content 属性以及 place-content 属性控制整个网格区域在Grid容器中的对齐方式justify-content定义网格区域在容器内沿行轴水平方向的对齐方式。align-content定义网格区域在容器内沿列轴垂直方向的对齐方式。place-content是 justify-content 和 align-content 的简写属性用于同时设置这两个属性。justify-content: start | end | center | stretch | space-around | space-between | space-evenly;align-content: start | end | center | stretch | space-around | space-between | space-evenly;place-content: align-content justify-contentstart项目在当前轴的起始位置end项目在当前轴的结束位置center项目在当前轴的中间位置stretch当网格总大小小于容器大小时拉伸网格填满整个容器space-around项目周围留有空白。space-between项目之间有空白第一个项目在起始位置最后一个项目在结束位置。space-evenly项目之间有空白包括第一个项目和最后一个项目。grid-auto-columnsgrid-auto-rows 隐式网格轨道的宽高(列宽和行高)grid-auto-columns 和 grid-auto-rows 定义了当网格项超出显式网格范围时浏览器自动创建的列和行的大小即隐式网格的大小grid-auto-columns定义隐式网格列的宽度。grid-auto-rows定义隐式网格行的高度。如果不指定这两个属性浏览器完全根据单元格内容的大小决定新增网格的列宽和行高项目属性grid-column-start 属性、grid-column-end 属性、grid-row-start 属性以及grid-row-end 属性grid-column-start属性网格项在列方向的起始网格线。grid-column-end属性网格项在列方向的结束网格线。grid-row-start属性网格项在行方向的起始网格线。grid-row-end属性网格项在行方向的结束网格线。指定网格线的起始和结束位置来定义网格项占据的列和行范围img.wrapper {display: grid;grid-gap: 10px;grid-template-rows: [a] 1fr [b] 1fr [c] 1fr [d] 1fr [e];grid-template-columns: [a] 1fr [b] 1fr [c] 1fr [d] 1fr [e];}/* 直接写入索引 */#div1 {background-color: red;grid-row: 2 / 3;grid-column: 2 / 3;}/* 使用命名网格线 */#div2 {background-color: green;grid-row: c / d;grid-column: b / c;}grid-column属性是 grid-column-start 和 grid-column-end 的简写属性。grid-row属性是 grid-row-start 和 grid-row-end 的简写属性。span 关键字表示网格项跨越多列或多行img