css,html备忘录

时间:2022-09-28 09:04:50

1.background:url()#000 ;代表当图片不够充满容器时,用黑色填满。

2.height:inherit;继承父级元素的高度。

当子元素给了绝对定位,父元素不给相对定位,子元素也能适配高度。

3.网上有在线excel表格转json数据。

4.对于现代浏览器,例如webkit内核的浏览器,或者移动端,是可以实现多行文本内容超出点点点…最后一行显示的,典型的CSS组合如下:

.box {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
其中-webkit-line-clamp就是控制行数的,是3就是显示3行,3行结束点点点,如果是2则最多2行。

5.textarea中设置value属性是不生效的,可以用js赋值,或者用placeholder。

6.placeholder的文字颜色不可被改变。

7.IE对小数像素采取取整的策略,类似于Math.floor()方法,就算你大小为11.999999像素,最后还是显示11像素文字的大小;

而Firefox等一些浏览器则采取四舍五入的策略,类似于Math.round()方法,11.4像素就表现为11像素,11.5像素就表现为12像素。

可以利用此项规则解决一些偏差在一像素内的ie和其他浏览器的兼容问题。

8.传统<script>属性支持一个名为defer的属性值,可以让JS资源异步加载,同时保持顺序

<!-- 同步 -->
<script src="1.js"></script>

<!-- 异步但顺序保证 -->
<script defer src="2.js"></script>
<script defer src="3.js"></script>

9.<a href="#" rel="internal">123</a>瞬间回到顶部

10.设置多个背景background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;用逗号隔开。

background-origin:有三个属性值:content-box, padding-box,和 border-box

background-attchment:背景图片跟不跟随滚动条滚动

11.改变输入框光标颜色:CSS caret-color属性可以改变输入框插入光标的颜色。input { color: #333; caret-color: red;}

12.conic-gradient锥形渐变,mask遮罩属性。

13.shape-outside:可以让内联元素以不规则的形状进行外部排列

14.background-size是css3中新增的属性,background-size的cover特定值会保持图像本身的宽高比例,将图片缩放到正好完全覆盖定义背景的区域。

15.CSS中原生的变量定义语法是:--*,变量使用语法是:var(--*),其中*表示我们的变量名称。
:root { //根元素
--1: #369;
}
body {
background-color: var(--1);
}

16.要想使图片边框不存在,img标签需带有属性alt=“ ”。

17.如果想利用 position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;实现子盒子垂直水平居中;则子盒子需要给width和height;

18.position:sticky;
position属性中最有意思的就是sticky了,设置了sticky的元素,在屏幕范围(viewport)时该元素的位置并不受到定位影响(设置是top、left等属性无效),
当该元素的位置将要移出偏移范围时,定位又会变成fixed,根据设置的left、top等属性成固定位置的效果。(不会脱离文档流)

19.当父元素有transfrom属性时,给子元素设置fixed会被影响,会被解析成absolute。

20.解决复选框,单选框与文字不对齐:(此处列举两种,给复/单选框加样式)
基于vertical-align:top;height:父盒子的高度;margin-top:0;
基于vertical-align:text-top;height:文字的大小;margin-top:0;

21.flex-grow:默认值0;分配剩余空间的扩张比例;

flex-basis:默认值auto;倘若设置了此属性,那么计算剩余空间之前要优先减去此属性,且它的层级比width高,会将width覆盖。

有一点需要注意,如果flex-basis和width其中有一个是auto,那么另外一个非auto的属性优先级会更高。(也就是非auto的会覆盖auto的)。

flex-shrink:默认值1;分配多余的空间压缩比例。

设为0则代表无论如何都不压缩此子盒子。

flex:flex-grow flex-shrink flex-basis;默认0 1 auto;
当flex取值为none,则计算值为0 0 auto;
当flex取值为auto,则计算值为1 1 auto;
当flex取值为一个非负数字,则该数字为flex-grow的值,计算值为 非负数字 1 0%;
当flex取值为一个长度或百分比,则该值为flex-basis的值,计算值为1 1 该值;
当flex取值为两个非负数字,则分别视为flex-grow flex-shrink的值,计算值为两个非负数字 0%;
当flex取值为一个非负数字和一个长度或百分比,则分别视为flex-grow flex-basis的值,计算值为非负数字 1 长度或百分比;

22.crossorigin="anonymous"表示,读取文件不需要身份信息,即不需要 cookie 和 HTTP 认证信息。
如果设为crossorigin="use-credentials",就表示浏览器会上传 cookie 和 HTTP 认证信息,同时还需要服务器端打开 HTTP 头信息Access-Control-Allow-Credentials。

23.<map><area /></map>
<img> 标签中的 usemap 属性与 map 元素 name 属性相关联,创建图像与映射之间的联系。

24.<base /> 标签为页面上的所有链接规定默认地址或默认目标。在head中用

25.<bdo dir="rtl">Here is some text</bdo>规定文本输出的方向

26.<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进(增加外边距),而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。

27.<cite> 标签通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。

28.<fieldset>左上角有文字的框
legend 元素为 fieldset 元素定义标题(caption)。

29.当margin-top、padding-top的值是百分比时,分别是如何计算的?相对最近父级块级元素的width,相对最近父级块级元素的width.

30.背景图片设置display:none或visibility:hidden则不会请求图片路径.

31.em单位,em单位是一个相对单位,用户的浏览器默认渲染的字体大小是16px;而em则是相对于父级的字体大小进行缩放;从而达到页面整体放大和缩小。

32.em的值=1/父级的font-size*需要转化的像素比。

33.em兼容问题html {font-size: 100%;}body {font-size: 1em;}

34.rem单位,rem是一个相对单位,rem是相对于根元素的字体大小进行缩放,根元素泛指html。

35.height:calc(100vh - )计算高度;-前后必须空格