当前位置: 首页 > Web前端 > CSS

HTML、CSS知识学习整理

时间:2023-03-30 14:37:29 CSS

命名1.驼峰命名法:(1)大驼峰命名法:首字母大写。(2)小驼峰命名法:首字母小写。2.文件资源命名:(1)不允许有空格。(2)建议只使用小写字母,除了一些用于解释文档的情况(如README、LICENSE等),一般不要使用大写字母。(3)包含多个单词时,用半角连字符(-)分隔单词。(4)使用相对路径导入资源。一般不指定资源携带的具体协议。3.变量命名:(1)命名方式:小驼峰命名。(2)命名规范:类型+对象(如:numTitle)。4、功能:(1)命名方式:小驼峰命名。(2)命名规则:前缀为动词(如:getName)。5、常量:(1)命名方式:全部大写。(2)命名规范:用大写字母和下划线命名,用下划线分隔单词。6、类的成员:(1)公共属性和方法:命名方式与变量命名相同,即小驼峰命名。(2)私有属性和方法:前缀为下划线,后接与公共属性和方法相同的命名方式,驼峰式。7.注释:(1)单行注释:双斜线与注释文本之间留一个空格。(2)代码后注释:双斜杠与代码之间、注释文本之间有一个空格。(3)多行注释:首尾至少三行,首行/*,末行*/,其他行以*开头,注释正文与*留空格。(4)函数(方法)注解:1)语法:/***函数描述*@keyword*/2)常用注解关键字:@param(参数)、@return(返回值)、@author(作者)、@version(版本)、@example(测试)规范1、HTML规范:(1)文档规范:使用HTML5的文档声明类型。(2)脚本加载:所有浏览器推荐,CSS放在,JS放在HTML代码下面,里面。(3)语义:根据创建元素的初始含义使用,不要单独使用

,灵活使用正确的标签。(4)alt属性不为空。(5)结构、性能、行为分离。尽量在文档和模板中只包含结构化的HTML;将表示代码移动到样式表中;将动作行为移动到脚本中;为了尽可能减少三者之间的联系,在文档和模板脚本文件中引入尽可能少的样式和模板。(6)HTML只关心内容。HTML只显示内容信息;尽量不要为了解决视觉设计效果而引入特定的HTML结构;尽量不要将作为专门为视觉设计而设计的元素,使用的意义在于呈现相同的Content相关信息。2.CSS规范:(1)id和class的命名可以反映元素的用途和用途。(2)避免在CSS选择器中使用标签名称。(3)尽量使用子选择器,如.header>ul{...}。(4)尽量使用缩写属性,如:background:#ffffffurl(a.png)no-repeatfixedtop;。(5)0后面尽量不要带单位,如:margin:0;。(6)属性序列格式:结构属性(display->position->overflow,float,clear->margin,padding)->表现属性(background,border->font,text)。CSS布局1.传统盒模型:(1)文档流布局:最基本的布局,按照文档的顺序显示。(2)浮动布局:使用浮动属性使元素显示在文档流之外。(3)定位布局:通过position属性定位,属性值有:static、relative、absolute、fixed。1)static:元素块正常生成。2)relative:相对定位。定位是相对于元素的原始位置完成的。元素偏移一定距离,并保留其原始空间。3)absolute:绝对定位。相对于它的包含块定位,除了静态定位外,也可以说是相对于第一个父元素定位。元素在原来正常文档流中占用的空间将被关闭,不再占用空间。4)fixed:相对于浏览器窗口的位置。2.常用的CSS布局:(1)固定宽度水平居中:1)margin:0auto;2)绝对定位居中:父容器相对定位,子容器绝对定位,top:50%;左:50%;margin-left和margin-top都设置为宽度和高度的一半的负值;3)使用transform(注意浏览器兼容ie9+,不适合移动开发):父容器相对定位,子容器绝对定位,top:50%;left:50%;transform:translate(-50%,-50%);(2)未知宽度水平居中:子容器设置inline-block属性,父容器设置text-align:center;(3)多个Block级元素水平居中:1)为子容器设置inline-block属性,为父容器设置text-align:center;2)flex布局:设置display:flex;justify-content:center为父容器;即设置子元素在主轴上的对齐方式设置为居中。(4)单行元素垂直居中:设置子元素的行高等于height,即设置height和line-height相等。(5)多行元素垂直居中:table-cell方式:父容器设置为display:table;子容器设置为显示:表格单元格;垂直对齐:中间;。3.flex布局:(1)弹性布局,使用方法是将display属性设置为flex,或者在行中设置flex。(2)注意事项:1)带有webkit内核的浏览器要加上-webkit前缀。2)设置flex布局后,子元素的float、clear、vertical-align属性无效。(3)flex布局,父容器属性:1)flex-direction:主轴方向。row(默认值,水平方向的起点在左边),row-reverse(水平方向的起点在右边),column(垂直方向的起点在上面),column-reverse(垂直方向的起点在底部)。2)flex-wrap:子容器超越父容器的排列方式。nowrap(默认值,无换行符),wrap(换行符,上面第一行),wrap-reverse(换行符,下面第一行)。3)flex-flow:flex-direction属性和flex-wrap属性的简写形式,默认值为rownowrap。4)justify-content:子容器在主轴上的排列方向。flex-start(默认,左对齐),flex-end(右对齐),center(居中),space-between(两端对齐,等间距),space-around(两边等间距)。5)align-items:子容器在横轴上的排列方向。flex-start(横轴起点对齐)、flex-end(横轴终点对齐)、center(横轴中点对齐)、baseline(横轴基线对齐)项目中第一行文字),stretch(默认值,不设置高度或者设置为auto会占用整个容器的高度)。6)align-content:定义多个轴的对齐方式,该属性对一个轴无效。flex-start(横轴起点对齐)、flex-end(横轴终点对齐)、center(横轴中点对齐)、space-between(两端对齐)横轴的分布,轴间距均匀分布),space-around(轴两边等间距),stretch(默认值,轴占据整个横轴)。(4)flex布局、子容器属性:1)order:子容器排列的顺序。2)flex-grow:子容器剩余空间的拉伸比例。3)flex-shrink:超出空间的子容器的压缩比。该属性生效,父容器属性必须设置为nowrap。4)flex-basis:子容器未拉伸时的原始大小。5)flex:子元素的flex属性是flex-grow、flex-shrink和flex-basis的简写。6)align-self:允许单个项目与其他项目有不同的对齐方式。可以覆盖父容器的align-items属性。默认值为auto,表示继承父元素的align-items属性。如果没有父元素,相当于stretch。4、Grid网格布局:(1)Grid布局,使用方法是通过display属性将属性值设置为grid或inline-grid或subgrid。(2)注意:1)当元素有网格布局时,column、float、clear、vertical-align属性无效。2)设置网格布局后,网格容器的所有子元素都会自动成为网格项(griditem),然后设置列(grid-template-columns)和行(grid-template-rows)的大小,设置grid-template-columns有多少个参数,生成的网格列表就有多少列。如果不设置grid-template-columns,默认只有一列,宽度为父元素的100%。(3)cssfrunit:一种新的自适应单元,用于分配一系列长度值中的剩余空间。(4)创建行或列的最小或最大尺寸:minmax()函数。第一个参数定义网格轨道的最小值,第二个参数定义网格轨道的最大值。可以接受任何长度值,也可以接受自动值。auto值允许网格轨道根据内容的大小拉伸或挤压。(5)创建重复网格轨道:repeat()属性。创建大小相等的网格项和多个网格项。第一个参数定义网格轨道应该重复多少次,第二个参数定义每个轨道的尺寸。(6)创建列间距:grid-column-gap。(7)创建行间距:grid-row-gap。(8)定义网格区域:grid-template-areas。grid-template-areas布局优点:无需设置高度(父容器和grid-template-rows的值,或者当grid-template-rows设置为auto时,slider的高度和content保持一致,会基于其中的高度适应性)。网络格布局举例:html部分:header
sidebar
内容
  • 列表
  • 列表
  • 列表
  • 列表
  • 列表
  • 列表
footer
css部分:.grid_container{padding:20px;文本对齐:居中;字体大小:16px;颜色:#ffffff;显示:网格;网格列间隙:5px;网格行间距:5px;背景色:#FAE3D9;grid-template-areas:"headerheader""sidebarcontent""footerfooter";网格模板行:自动;grid-template-columns:200px;}.header{grid-area:header;填充:20px;背景色:#61C0BF;}.sidebar{网格-区域:侧边栏;填充:15px;背景颜色:#BBDED6;}.content{网格区域:内容;填充:15px;背景色:#FFB6B9;}.content>ulli{padding:3px0;文本对齐:左;左填充:30px;box-sizing:border-box;}.??footer{grid-area:footer;填充:20px;background-color:#61C0BF;}截图显示意思: