css，html备忘录

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 - )计算高度；-前后必须空格

巴特西

css，html备忘录

最新文章

热门文章