技术标签: css
属性选择器(a[rel = “external”])
结构伪类选择器( li:nth-child)
可继承的属性: font-size, font-family, color
不可继承的样式: border, padding, margin, width, height
优先级(就近原则): !important > [ id > class > tag ] !important
比内联优先级高
标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin
低版本IE盒子模型:宽度=内容宽度(content+border+padding)+ margin
比如要在一个容器里并排显示两个同样的盒子。用标准模型时肯定会这样设置每个盒子width:50%。再怎么去调整padding都会在两个盒子的内部去调整,不会再影响布局。
CSS3中运用box-sizing属性来特定定义匹配在某个区域的特定元素。
box-sizing:content-box
,表示按照标准的盒模型显示。
box-sizing:border-box
,表示按照IE盒模型来显示,通过已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
dom.style.width/height;//设置获取的是内联样式
dom.currentStyle.width/height;//只有IE支持
window.getComputedStyle(dom).width/height;//兼容性好
dom.getBoundingClientRect().width/height;//适用场所:计算一个元素的绝对位置
用来控制元素的盒子模型的解析模式,默认为content-box
context-box:W3C的标准盒子模型,设置元素的 height/width 属性指的是content部分的高/宽
border-box:IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽
p:first-of-type 选择属于其父元素的首个 < p> 元素的每个 < p> 元素。
p:last-of-type 选择属于其父元素的最后 < p> 元素的每个 < p> 元素。
p:only-of-type 选择属于其父元素唯一的 < p> 元素的每个 < p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 < p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 < p> 元素。
:enabled
:disabled 控制表单控件的禁用状态。
:checked,单选框或复选框被选中。
:before在元素之前添加内容,也可以用来做清除浮动
:after在元素之后添加内容
水平居中div:
border: 1px solid red;
margin: 0 auto;
height: 50px;
width: 80px;
水平垂直居中一个浮动元素(position定位)
第一种:未知元素宽高
<div class="outer">
<span>居中显示</span>
</div>
<style>
.outer{
width:300px;
height:300px;
position:relative;
background-color:#ccc;
}
span{
float:left;
position:absolute;
backgroond-color:red;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
</style>
第二种:已知元素宽高的
<div class="outer">
<span>居中显示</span>
</div>
<style>
.outer{
width:300px;
height:300px;
position:relative;
background-color:#ccc;
}
span{
float:left;
position:absolute;
backgroond-color:red;
width:150px;
height:50px;
top:50%;
left:50%;
margin:-25px 0px 0px -75px;
}
</style>
如何垂直居中一个img(display : table-cell 或者 position定位)
<div class="outer">
<img src="nz.jpg" alt="">
</div>
<style>
.outer{
width: 300px;
height: 300px;
border: 1px solid #cccccc;
display: table-cell;
text-align: center;
vertical-align: middle;
}
img{
width: 150px;
height: 150px;
}
</style>
绝对定位的div水平垂直居中:
border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: auto;
left: 0;
right: 0;
top:0;
bottom:0;
因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
简单来说就是——无特殊情况下,containing block(包含块)就是最近的块元素的content area(内容区)。
无论属于哪种,都要先找到其祖先元素中最近的 position 值不为 static 的元素,然后再判断:
若此元素为 inline 元素,则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形;
否则,则由这个祖先元素的 padding box 构成。
如果都找不到,则为 initial containing block。
补充:
当一个元素的visibility属性被设置成collapse值后,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 “hidden”。
display:none 不显示对应的元素,在文档布局中不再分配空间(回流+重绘)
visibility:hidden 隐藏对应元素,在文档布局中仍保留原来的空间(重绘)
display属性规定元素应该生成的框的类型;position属性规定元素的定位类型;float属性是一种布局方式,定义元素在哪个方向浮动。
类似于优先级机制:position:absolute/fixed优先级最高,有他们在时,float不起作用,display值需要调整。float 或者absolute定位的元素,只能是块元素或表格。
避免过度约束
避免后代选择符
避免链式选择符
使用紧凑的语法
避免不必要的命名空间
避免不必要的重复
最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
避免!important,可以选择其他选择器
尽可能的精简规则,你可以合并不同类里的重复规则
修复解析错误
避免使用多类选择符
移除空的css规则
正确使用display的属性:由于display的作用,某些样式组合会无效,徒增样式体积的同时也影响解析性能。
display:inline后不应该再使用width、height、margin、padding以及float。
display:inline-block后不应该再使用float。
display:block后不应该再使用vertical-align。
display:table-*后不应该再使用margin或者float。
不滥用浮动:虽然浮动不可避免,但不可否认很多css bug是由于浮动而引起。
不滥用web字体
对于中文网站来说Web Fonts可能很陌生,国外却很流行。web fonts通常体积庞大,而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。
不声明过多的font-size:这是设计层面的问题,设计精良的页面不会有过多的font-size声明。
不在选择符中使用ID标识符,主要考虑到样式重用性以及与页面的耦合性。
不给h1~h6元素定义过多的样式
全站统一定义一遍heading元素即可,若需额外定制样式,可使用其他选择符作为代替。
不重复定义h1~h6元素
值为0时不需要任何单位
标准化各种浏览器前缀:通常将浏览器前缀置于前面,将标准样式属性置于最后,类似:
.foo{
-moz-border-radius: 5px;
border-radius: 5px;
}
CSS选择器的解析是从右向左解析的。若从左向右的匹配,发现不符合规则,需要进行回溯,会损失很多性能。若从右向左匹配,先找到所有的最右节点,对于每一个节点,向上寻找其父节点直到找到根元素或满足条件的匹配规则,则结束这个分支的遍历。
两种匹配规则的性能差别很大,是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点(叶子节点),而从左向右的匹配规则的性能都浪费在了失败的查找上面。
而在 CSS 解析完毕后,需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree,最终用来进行绘图。在建立 Render Tree 时(WebKit 中的「Attachment」过程),浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果(Style Rules)来确定生成怎样的 Render Tree。
使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体(中易宋体)从 Vista 开始只提供 12、14、16 px 这三个大小的点阵,而 13、15、17 px时用的是小一号的点。(即每个字占的空间大了 1 px,但点阵没变),于是略显稀疏。
何时使用margin:
何时使用padding:
兼容性的问题:在IE5 IE6中,为float的盒子指定margin时,左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display:inline解决。
当按百分比设定一个元素的宽度时,它是相对于父容器的宽度计算的,但是,对于一些表示竖向距离的属性,例如 padding-top , padding-bottom , margin-top , margin-bottom 等,当按百分比设定它们时,依据的也是父容器的宽度,而不是高度。
原理: 有点类似于轮播,整体的元素一直排列下去,假设有5个需要展示的全屏页面,那么高度是500%,只是展示100%,剩下的可以通过transform进行y轴定位,也可以通过margin-top实现
overflow:hidden;transition:all 1000ms ease;
响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端,而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta声明的viewport。
<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>
视差滚动(Parallax Scrolling)通过在网页向下滚动的时候,控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。
CSS3实现
优点:开发时间短、性能和开发效率比较好,缺点是不能兼容到低版本的浏览器
jQuery实现
通过控制不同层滚动速度,计算每一层的时间,控制滚动效果。
优点:能兼容到各个版本的,效果可控性好
缺点:开发起来对制作者要求高
插件实现方式
例如:parallax-scrolling,兼容性十分好
单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。
::before就是以一个子元素的存在,定义在元素主体内容之前的一个伪元素。并不存在于dom之中,只存在在页面之中。
:before 和 :after 这两个伪元素,是在CSS2.1里新出现的。起初,伪元素的前缀使用的是单冒号语法,但随着Web的进化,在CSS3的规范里,伪元素的语法被修改成使用双冒号,成为::before ::after
行高是指一行文字的高度,具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height,没有定义height属性,最终其表现作用一定是line-height。
单行文本垂直居中:把line-height值设置为height一样大小的值可以实现单行文字的垂直居中,其实也可以把height删除。
多行文本垂直居中:需要设置display属性为inline-block。
p{
font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例
-webkit-font-smoothing
在window系统下没有起作用,但是在IOS设备上起作用
-webkit-font-smoothing
:antialiased是最佳的,灰度平滑。
position:fixed;在android下无效怎么处理?
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
多数显示器默认频率是60Hz,即1秒刷新60次,所以理论上最小间隔为1/60*1000ms = 16.7ms。
行框的排列会受到中间空白(回车空格)等的影响,因为空格也属于字符,这些空白也会被应用样式,占据空间,所以会有间隔,把字符大小设为0,就没有空格了。
解决方法:
外层div使用position:relative;高度要求自适应的div使用position: absolute; top: 100px; bottom: 0; left: 0
png是便携式网络图片(Portable Network Graphics)是一种无损数据压缩位图文件格式.
优点是: 压缩比高,色彩好。 大多数地方都可以用。
jpg是一种针对相片使用的一种失真压缩方法,是一种破坏性的压缩,在色调及颜色平滑变化做的不错。在www上,被用来储存和传输照片的格式。
gif是一种位图文件格式,以8位色重现真色彩的图像。可以实现动画效果.
webp格式是谷歌在2010年推出的图片格式,压缩率只有jpg的2/3,大小比png小了45%。缺点是压缩的时间更久了,兼容性不好,目前谷歌和opera支持。
页面加载自上而下 当然是先加载样式。
写在body标签后由于浏览器以逐行方式对HTML文档进行解析,当解析到写在尾部的样式表(外联或写在style标签)会导致浏览器停止之前的渲染,等待加载且解析样式表完成之后重新渲染,在windows的IE下可能会出现FOUC现象(即样式失效导致的页面闪烁问题)
CSS Sprites小图片背景共享技术。它把一堆小的图片整合到一张大的图片上。然后利用CSS的 background-image,background- repeat,background-position 的组合进行背景定位。利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能;CSS Sprites能减少图片的字节。
优势:
1.很好的减少网页的请求,大大提高页面的性能;
2.减少图片的字节;
3.解决了网页设计师在图片命名上的困扰;
4.更换风格方便,维护方便。
劣势:
1.图片合并时需预留好足够空间,宽屏、高分辨率的屏幕下易出现背景断裂;
2.开发较麻烦,测量繁琐;(可使用样式生成器)
3.维护麻烦,背景少许改动有可能影响整张图片,使得字节增加还要改动css。
值 | 描述 |
---|---|
inline | 默认。此元素会被显示为内联元素,元素前后没有换行符。 |
block | 此元素将显示为块级元素,此元素前后会带有换行符。 |
none | 此元素不会被显示(隐藏)。 |
inline-block | 行内块元素。(CSS2.1 新增的值) |
list-item | 此元素会作为列表显示。 |
table | 此元素会作为块级表格来显示(类似table),表格前后带有换行符 |
值 | 描述 |
---|---|
absolute | 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 |
fixed | 生成固定定位的元素,相对于浏览器窗口进行定位。(老IE不支持)元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 |
relative | 生成相对定位的元素,相对于其正常位置进行定位,不脱离文档流。因此,“left:20” 会向元素的 LEFT 位置添加 20 像素。 |
static | 默认值。没有定位,元素出现在正常的文档流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
inherit | 规定应该从父元素继承 position 属性的值。 |
css 定位还有一个新增属性,粘性定位 sticky,它主要用在对 scroll 事件的监听上;
粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。例如:
#one {
position: sticky; top: 10px; }
在 viewport 视口滚动到元素 top 距离小于 10px 之前,元素为相对定位。之后,元素将固定在与顶部距离 10px 的位置,直到 viewport 视口回滚到阈值以下。
双边距BUG float引起的 使用display
3像素问题 使用float引起的 使用dislpay:inline -3px
超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
Ie z-index问题 给父级添加position:relative
Png 透明 使用js代码 改
Min-height 最小高度 !Important 解决’
select 在ie6下遮盖 使用iframe嵌套
为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的,使用over:hidden,zoom:0.08 line-height:1px)
ie 6 不支持!important
出现浮动的原因:
浮动元素碰到包含它的边框或者浮动元素的边框停留。在CSS规范中,浮动定位不属于正常的页面流,而是独立定位的,所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。
关于css的定位机制:普通流,浮动,绝对定位(position:fixed是position:absolute的一个子类)。浮动的框可以左右移动,直到它的外边缘遇到包含框或者另一个浮动框的边缘,所以才说浮动定位不属于正常的页面流。文档中的普通流就会表现得和浮动框不存在一样,当浮动框高度超出包含框的时候,就会出现包含框不会自动伸缩高度类笔盒浮动元素。所以,只含有浮动元素的父容器在显示时不需要考虑子元素的位置,就造成显示父容器像空容器一样。
浮动带来的问题:
清除浮动的方式:
1、父级div定义height
原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题
优点:简单,代码少,容易掌握
缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题
建议:不推荐使用,只建议高度固定的布局时使用
2、结尾处加空 div 标签 clear:both
原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度
优点:简单,代码少,浏览器支持好,不容易出现怪问题
缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,让人感觉很不爽
建议:不推荐使用,但此方法是以前主要使用的一种清除浮动方法
3、父级 div 定义 overflow:hidden
原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度
优点:简单,代码少,浏览器支持好
缺点:不能和position配合使用,因为超出的尺寸的会被隐藏
建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用
4、父级div定义伪类 :after 和 zoom
原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题
优点:浏览器支持好,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
缺点:代码多,不少初学者不理解原理,要两句代码结合使用,才能让主流浏览器都支持
建议:推荐使用,建议定义公共类,以减少CSS代码
(1) 在子元素后添加一个空div div{clear:both;}
(2) 在父元素中{overflow:hidden|auto;zoom:1}
(3) :after伪选择符,在父容器的尾部自动创建一个子元素
.clearfix:after {
content: "\0020";display: block;height: 0;clear: both;
}
.clearfix {
zoom: 1;
}
"clearfix"是父容器的class名称,"content:“020”;"是在父容器的结尾处放一个空白符,
"height: 0;"是让这个这个空白字符不显示出来,"display: block; clear: both;"是确保这个空白字符是非浮动的独立区块。:after选择符IE 6不支持,添加一条IE 6的独有命令"zoom:1;"就行了.
预处理器例如:LESS、Sass、Stylus
,用来预编译Sass或less
,增强了css代码的复用性,还有层级、mixin、变量、循环、函数等,具有很方便的UI组件模块化开发能力,极大的提高工作效率。
后处理器例如:PostCSS
,通常被视为在完成的样式表中根据CSS规范处理CSS,让其更有效;目前最常做的是给CSS属性添加浏览器私有前缀,实现跨浏览器兼容性的问题。
CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题”,例如可以在 CSS 中使用变量、简单的逻辑程序、函数(如右侧代码编辑器中就使用了变量$color)等等在编程语言中的一些基本特性,可以让你的 CSS 更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。
其它 CSS 预处理器语言:
为什么要使用它们?
结构清晰,便于扩展。
可以方便地屏蔽浏览器私有语法差异。这个不用多说,封装对浏览器语法差异的重复处理,减少无意义的机械劳动。
可以轻松实现多重继承。
完全兼容 CSS 代码,可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展,所以老的 CSS 代码也可以与 LESS 代码一同编译。
第一种回答:
伪类: :focus、:hover、:active
伪元素::before、:after
伪类本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息;
伪元素本质上是创建了一个有内容的虚拟容器;
CSS3中伪类和伪元素的语法不同;
可以同时使用多个伪类,而只能同时使用一个伪元素;
第二种回答:
伪类:伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id、class、属性等静态的标志。由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类。
:first-child :visitive :hover :active :focus :lang
伪元素:与伪类针对特殊状态的元素不同的是,伪元素是对元素中的特定内容进行操作,它所操作的层次比伪类更深了一层,也因此它的动态性比伪类要低得多。实际上,设计伪元素的目的就是去选取诸如元素内容第一个字(母)、第一行,选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以叫伪元素。
:first-line
:first-letter
:before
:after
外部样式表,引入一个外部css文件
内部样式表,将css代码放在 标签内部
内联样式,将css样式直接定义在 HTML 元素内部
最基本的:设置 display 属性为 none,或者设置 visibility 属性为 hidden
技巧性:设置宽高为 0,设置透明度为 0,设置 z-index 位置在 -1000
解决各浏览器对 CSS 解释不同所采取的,区别不同浏览器制作不同CSS样式的设置就叫作 CSS Hack。
块级元素( block )特性:
总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性:
和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变
(也就是padding和margin的left和right是可以设置的)。
浏览器默认的天生inline-block
元素(拥有内在尺寸,可设置高宽,但不会自动换行):< input> 、< img> 、< button> 、< textarea>。
外边距重叠就是 margin-collapse。
在CSS当中,相邻的两个盒子的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。
折叠结果遵循下列计算规则:
rgba()和opacity都能实现透明效果
不同是opacity作用于元素,以及元素内的所有内容的透明度,
rgba()只作用于元素的颜色或其背景色。(设置rgba透明的元素的子元素不会继承透明效果!)
垂直方向:line-height
水平方向:letter-spacing (letter-spacing 属性增加或减少字符间的空白)
letter-spacing的妙用:可以用于消除inline-block元素间的换行符空格间隙问题。
px和em都是长度单位,区别是:px的值是固定的,指定是多少就是多少,计算比较容易。em得值不是固定的,并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。
不同的浏览器对一些元素有不同的默认样式,如果不处理,在不同的浏览器下会存在必要的风险。
可能会用Normalize来代替重置样式文件。它没有重置所有的样式风格,但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理,但又不扰乱其他的东西(如粗体的标题)。
不能。它只能移动x,y轴的位置。translate3d可以。
功能上的差别:HTML是一种基本的WEB网页设计语言;XHTML是一个基于XML的置标语言,XHTML可兼容各大浏览器、手机以及PDA,并且浏览器也能快速正确地编译网页。
书写习惯上:
(1) XHTML 所在标签都必须小写
(2) XHTML 标签必须成双成对
(3) XHTML 标签顺序必须正确
(4) XHTML 所有属性都必须使用双引号
(5) 不XHTML 允许使用target=”_blank”
(6) XHTML 文档必须拥有根元素。
(7) XHTML 元素必须被正确地嵌套。
结构层 Html 表示层 CSS 行为层 js
选择器{属性1:值1;属性2:值2;……}
废弃的元素包括:
< frame>
< frameset>
< noframe>
< applet>
< big>
< center>
< basefront>
内联,内嵌,外链,导入
(1) link 属于 XHTML 标签,除了加载 CSS 外,还能用于定义RSS,定义 rel 连接属性等作用,无兼容性,支持使用javascript改变样式;而@import是CSS提供的,只能用于加载CSS,不支持使用 javascript 改变样式;
(2) 页面被加载的时,link 会被同时加载,而@import 引用的CSS会等到页面加载完再加载;
(3) import是CSS2.1 提出的,CSS2.1以下浏览器不支持,只在IE5以上才能被识别,而link是XHTML标签,无兼容问题。
主要分成两部分:渲染引擎(layout engineer或Rendering Engine)
和 JS 引擎
。
(1)渲染引擎:负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户以及其他它所需要编辑、显示网络的应用程序都需要内核。
(2)JS引擎则:解析和执行JavaScript 来实现网页的动态效果;
最开始渲染引擎和 JS 并没有区分的很明确,后来JS引擎越来越独立,内核就倾向于只渲染引擎。
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,容易维护、改版方便,不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;
HTML5没有使用SGML或者XHTML,他是一个全新的东西,因此不需要参考DTD,对于HTML5,你仅需放置下面的文档类型代码告诉浏览器识别这是HTML5文档
CSS列布局帮助你分割文本变为列,例如考虑下面的杂志新闻在一个大的文本中,但是我们需要在他们之间使用边界划分为3列,这里HTML5的列布局就有所帮助了
设置 background-position:center;
让一种字体标识为斜体(oblique),如果没有这种格式,就使用italic字体
继承:在一个属性应用于一个特定标签之后,该标签的子标签也应该应用该属性。这一行为称为继承。但并不是所有的属性都会被继承。如文字样式一般都继承,盒图的宽高一般不 继承,总之该继承的都会继承,不该继承的都不继承。
重用:一个样式文件,可以多个页面使用,这对于一些公共样式的重构是很有用的。
涉及到人手、分工、同步
(1) 先期团队必须确定好全局样式,编码模式等
(2) 编写习惯必须一致
(3) 标注样式编写人,各模块都及时标注(标注关键样式调用的地方)
(4) 页面进行标注
(5) Css与html分文件夹并行存放,命名都要统一
(6) Js分文件夹存放,命名以该JS功能为准英文翻译
(7) 图片采用整合的.png格式文件使用,尽量整合在一起,方便将来的管理。
Word-break:break-all;
文章浏览阅读685次,点赞5次,收藏6次。物理小区识别码(PCI)规划是移动通信网络中下行链路层上,对各覆盖小区编号进行合理配置,以避免PCI冲突、PCI混淆以及PCI 模3干扰等现象。PCI 规划对于减少物理层的小区间互相干(ICI),增加物理下行控制信道(PDCCH)的吞吐量有着重要的作用,尤其是对于基站小区覆盖边缘的用户和发生信号切换的用户,能有效地降低信号干扰,提升用户的体验。
文章浏览阅读690次,点赞10次,收藏16次。根据数据表,当28BYJ-48电机在全步模式下运行时,每步对应于11.25°的旋转。这意味着每转有32步 (360°/11.25° = 32)。链接: https://pan.baidu.com/s/1iucYeZGygwHi3DYeds4gqA?电机转一圈有360°,那么转一圈的脉冲数 = 360 / 5.625 * 64 = 4096 个脉冲。28BYJ-48是一款5线单极步进电机,运行电压为5V。如上图所示,步距角=5.625°/64。一、28BYJ-48 步进电机。二、CubeMX配置。_stm32 步进电机
文章浏览阅读712次,点赞8次,收藏9次。通过将图像切成patch线形层编码成token特征编码的方法,用transformer的encoder来做图像分类multihead和我原有的理解偏差修正。我以为的是QKV会有N块相同的copy(),每一份去做后续的linear等操作。代码里是直接用linear将QKV分为一整个大块,用permute/rearrange的操作切成了N块,f(Q,K)之后再恢复成一整个大块,很强。_vision transformer论文
文章浏览阅读180次。今天在安装好了es,启动和配置花了点时间,这里记录一下。配置elasticsearch.yml,参数大致如下:属性说明cluster.name集群名称,默认elasticsearchnode.name节点名称node.attr.rack节点服务器所在的机架信息path.data索引数据存储路径path.log日志存储路径bootstr..._es安装完
文章浏览阅读1.2k次。【代码】php程序控制打印机自动打印。_php实现打印机打印
文章浏览阅读2.9k次。Frequency Separation for Real-World Super-Resolution[PAPER]_frequency separation for real-world super-resolution
文章浏览阅读927次,点赞19次,收藏24次。在科技论文中,凡是引用前人(包括作者自己过去)已发表的文献中的观点、数据和材料等,都要对它们在文中出现的地方予以标明,并在文末(致谢段之后)列出参考文献表。这项工作叫作参考文献著录。科学研究具有继承性,需要研究者充分了解前人的工作,吸收前人的研究精华,开拓创新。因此,撰写科技论文不可避免地要引用、参考别人的文献。论文列参考文献,一是交代作者的研究背景,反映出真实的科学依据,介绍他人的研究成果,又便于感兴趣的读者查阅,进行深入研究。
文章浏览阅读2.4k次。插件项目中需要打印的地方全部使用idea的logger类import com.intellij.openapi.diagnostic.Logger;/** * @Author: XIELINHUA * @Date: 2019/7/23 12:28 */public class ApkTools extends DumbAwareAction { private static..._idea 导出安卓日志
文章浏览阅读280次。要先搞清楚这三者区别首先需要给文章点个赞。呸呸呸,说错了,需要先弄明白什么是迭代,先补充一下迭代的概念在进入正题的讲解。迭代:像list,tuple,dict这样的数据类型,我们通过for...in...语法从中依次拿到数据进行使用,这样的遍历过程,就叫做迭代正文开始1,可迭代对象简单来说,某个对象内部具有__iter__方法,那么它就是可迭代对象(Iterable)。全剧终!事情..._请说一下迭代器,可迭代对象,生成器的定义,区别,优缺点。
文章浏览阅读8.3k次,点赞4次,收藏8次。关于Delphi/Object PascalDelphi是一种基于 Object Pascal 的编程语言,用于桌面、移动、Web 和控制台软件开发。在 1995 年首次亮相之前的最初开发过程中,Delphi 是一种尚未命名的产品的代号。function DigitSum(AValue: Int64): Integer;begin if AValue mod 10 = AValue then Result := AValue else Result := (AVa.._delphi/object pascal
文章浏览阅读3.7k次,点赞5次,收藏5次。el-upload 上传文件,去掉默认动画效果。_去除el-upload上传动画
文章浏览阅读776次。CenOS7 离线安装Mysql5.7 (rpm)_centos离线安装mysql5.7