乐清建设公司网站,网站推广优化外包公司,如何设立网站,松江网站关键词优化前提回顾
1. 超文本标记语言#xff08;HTML#xff09;是一种标记语言#xff0c;用来结构化我们的网页内容并赋予内容含义#xff1b;
#xff08;超文本标记语言#xff08;英语#xff1a;HyperText Markup Language /ˈhaɪpətekst ˈmɑːkʌp ˈlŋɡwɪdʒ /…前提回顾
1. 超文本标记语言HTML是一种标记语言用来结构化我们的网页内容并赋予内容含义
超文本标记语言英语HyperText Markup Language /ˈhaɪpətekst ˈmɑːkʌp ˈlæŋɡwɪdʒ /简称HTML是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是一组段落、一个重点信息列表、也可以含有图片和数据表。
2. 层叠样式表CSS是一种样式规则语言用来为网站设置样式布局的代码。
CSSCascading Style Sheets /kæˈskeɪdɪŋ staɪl ʃiːts/层叠样式表是为 web 内容添加样式的代码用于设置和布置网页——例如更改内容的字体、颜色、大小和间距将其拆分为多个列或添加动画和其他装饰功能。
3.JavaScript 是一种脚本编程语言你用它来给你的网站添加交互功能
JavaScript 是一种脚本编程语言它可以在网页上实现复杂的功能网页展现给你的不再是简单的静态信息而是实时的内容更新
CSS 布局
CSS 页面布局技术允许我们对网页中的元素设置控制它们相对正常布局流、周边元素兄弟、父容器或者主视口/窗口的位置
正常布局流display属性弹性盒子网格浮动定位CSS 表格布局多列布局
正常布局流normal flow是指在不对页面进行任何布局控制时浏览器默认的 HTML 布局方式。 display属性讨论布局的时候重要的两个值是 display: flex 和 display: grid
display : none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | compact | run-in | ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group | box | inline-box
none 隐藏对象。与visibility属性的hidden值不同其不为被隐藏的对象保留其物理空间
inline 指定对象为内联元素。
block 指定对象为块元素。
list-item 指定对象为列表项目。
inline-block 指定对象为内联块元素。CSS2
table 指定对象作为块元素级的表格。类同于html标签tableCSS2
inline-table 指定对象作为内联元素级的表格。类同于html标签tableCSS2
table-caption 指定对象作为表格标题。类同于html标签captionCSS2
table-cell 指定对象作为表格单元格。类同于html标签tdCSS2
table-row 指定对象作为表格行。类同于html标签trCSS2
table-row-group 指定对象作为表格行组。类同于html标签tbodyCSS2
table-column 指定对象作为表格列。类同于html标签colCSS2
table-column-group 指定对象作为表格列组显示。类同于html标签colgroupCSS2
table-header-group 指定对象作为表格标题组。类同于html标签theadCSS2
table-footer-group 指定对象作为表格脚注组。类同于html标签tfootCSS2
compact 分配对象为块对象或基于内容之上的内联对象CSS3
run-in 分配对象为块对象或基于内容之上的内联对象CSS3
ruby 将对象作为表格脚注组显示CSS3
ruby-base 将对象作为表格脚注组显示CSS3
ruby-text 将对象作为表格脚注组显示CSS3
ruby-base-group 将对象作为表格脚注组显示CSS3
ruby-text-group 将对象作为表格脚注组显示CSS3
box 将对象作为弹性盒模型显示CSS3
inline-box 将对象作为内联块级弹性盒模型显示CSS3 弹性盒子Flex是Flexible Box的缩写意为”弹性布局”用来为盒状模型提供最大的灵活性。
布局的传统解决方案基于盒状模型依赖 display属性 position属性 float属性。它对于那些特殊布局非常不方便
2009年W3C提出了一种新的方案—-Flex布局可以简便、完整、响应式地实现各种页面布局。目前它已经得到了所有浏览器的支持这意味着现在就能很安全地使用这项功能。 主轴main axis是沿着 flex 元素放置的方向延伸的轴比如页面上的横向的行、纵向的列。该轴的开始和结束被称为 main start 和 main end。交叉轴cross axis是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。设置了 display: flex 的父元素在本例中是 section被称之为 flex 容器flex container。在 flex 容器中表现为弹性的盒子的元素被称之为 flex 项flex item
display: flex / inline-flex;flex 将对象作为弹性伸缩盒显示
inline-flex将对象作为内联块级弹性伸缩盒显示
在父类中设置的样式 flex-direction子类在主轴上的分布 flex items默认都是沿着main axis主轴从main start 开始往main end 方向排布 flex-direction决定了main axis的方向有4个取值
row默认从左往右row-reverse从右往左column从上往下column-reverse从下往上 justify-content子类在主轴上的对齐方式 justify-content决定了flex items在main axis 上的对齐方式共6个取值
flex-start默认值与 main start 对齐flex-end与 main end 对齐center居中对齐space-betweenflex items之间的距离相等与main start、main end两端对齐space-evenlyflex items之间的距离相等与main start、main end之间距离等于flex items之间的距离space-aroundflex items之间的距离相等与main start、main end之间距离等于flex items之间的距离的一半 align-content子类在交叉轴上的分布 align-content决定了多行flex items在cross axis上的对齐方式用法和 justify-content类似共7个取值
stretch默认值与align-items的stretch类似flex-start与cross start对齐flex-end与cross end对齐center居中对齐space-betweenflex items之间的距离相等与cross start、cross end两端对齐space-evenlyflex items之间的距离相等与cross start、cross end之间距离等于flex items之间的距离space-aroundflex items之间的距离相等与cross start、cross end之间距离等于flex items之间的距离的一半 align-items子类在交叉轴上的对齐方式 align-items决定了flex items在cross axis上的对齐方式共6个取值
normal在弹性布局中效果和stretch一样stretch当flex items在cross axis方向的size为auto时会自动拉伸至填充flex containerflex-start与cross start对齐flex-end与cross end对齐center居中对齐baseline与基准线对齐 flex-wrap子类的多行显示
flex-wrap决定了flex container是单行还是多行共3个取值
nowrap默认单行wrap多行wrap-reverse多行对比wrapcross start与cross end相反 在子类中设置的样式
flex-grow子类的扩展 flex-grow决定了flex items如何扩展
可以设置任意非负数字正小数、正整数、0默认值为0 当flex container在main axis方向上有剩余size时flex-grow属性才会有效 如果所有flex items的flex-grow总和sum超过1
每个flex items扩展的size flex container的剩余size*flex-grow / sum 如果所有flex items的flex-grow总和sum不超过1
每个flex items扩展的size flex container的剩余size*flex-grow flex items扩展后的最终size不能超过max-width 、max-height flex-shrink子类的收缩 flex-shrink决定了flex items如何收缩
可以设置任意非负数字正小数、正整数、0默认值为1 当flex items在main axis方向上超过了flex container的size时flex-shrink属性才会有效
align-self子类在交叉轴上的对齐方式 flex items可以通过align-self覆盖flex container设置的align-items共6个取值
auto默认值遵从flex container设置的align-items stretch、flex-start、flex-end、center、baseline效果和align-items一样 flex flex是flex-growflex-shrink、flex-basis的简写flex属性可以指定1/2/3个值
