html+css【全记录】（不断更新）
#html+css【全记录】
- text-align: 文字对齐方式
- a标签的target的值 https://blog.csdn.net/BOKEhhh/article/details/89043764?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control
- HTML DOM
scrollTo()方法
定义和用法 scrollTo() 方法可把内容滚动到指定的坐标。 语法 scrollTo(xpos,ypos)
- css引入
<link rel="stylesheet" href="">
<style></style>
- css选择器
id 用#
class 用.
伪元素选择器和伪类选择器
伪元素选择器常用：
::before::after::first-letter::first-line注意：
p:first-child //p作为第一个元素出现的
div:nth-child(2) //div作为第二个元素出现的 区别于加了空格的div :nth-child(2)
.box2 :nth-child(1) //匹配box2的第一个孩子
#box :nth-child(2) //匹配box的第二个孩子
//前面两个是伪选择器
//后面两个是后代选择器，有空格！！
//=====================================================
div > span
- border
border: 1px solid red
//上 左右 下 3个值的时候
//上 右 下 左 4个值的时候
//上下 左右 2个值的时候
//4个方向 1个值的时候
border的形成原理，利用其特性做三角形。（width: 0 height: 0;,然后根据需要，将其颜色变透明transparent，如果需要最小化，border大小设置为0 比如border-width: 0 40px 40px;）
推荐文章：https://www.jianshu.com/p/9a463d50e441
background-clip属性的通俗作用就是指定元素背景所在的区域,有四种取值 1、border-box border-box是默认值，表示元素的背景从border区域（包括border）以内开始保留背景。 2、padding-box padding-box表示元素的背景从padding区域(包括padding)以内开始保留。 3、content-box content-box表示元素的背景从内容区域以内开始保留。 4、text content-box表示元素的背景保留在前景内容中（文字），和其形状大小相同,目前仅支持chrome浏览器
CSS 扩大可点击区域的 2 种方法 推荐文章;https://www.cnblogs.com/hukuangjie/p/12955259.html
- text-decoration:文字修饰，比如下划线，删除线
- @media 如果文档宽度小于 300 像素则修改背景颜色(background-color):
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
-
背景图 background-repeat:no-repeat" css样式 设置背景图片的重复样式为不重复，也就是说背景图片不平铺，只显示一张 background-position center居中 25% 75% 基于背景区域的开始位置 background-position-x background-size: eg cover缩放背景图 覆盖背景区 保持原图宽高比 可能背景图部分看不到 contain缩放以完全显示背景图，保持原图宽高比 可能有空白区域 百分数eg 50%
-
img元素
widthvertical-alignsrcalt -
table-cell display：table-cell；会使元素表现的类似一个表格中的单元格td，利用这个特性可以实现文字的垂直居中效果。同时它也会破坏一些CSS属性，使用table-cell时最好不要与float以及position: absolute一起使用，设置了table-cell的元素对高度和宽度高度敏感，对margin值无反应，可以响应padding的设置，表现几乎类似一个td元素。
-
white-space 规定段落中的文本不进行换行： p { white-space: nowrap }
-
overflow: hidden
-
只显示一行text-overflow 只对块级元素起作用 ellipsis 以省略号显示 clip 截断显示
-
只显示两行或以上的内容使用-webkit-line-clamp -webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。 限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
\-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。
-
animation 给某个html元素设置一个动画
-
transition 过渡动画
-
屏幕尺寸分为相对单位和绝对单位 相对单位：em(相对自身或者父元素的font-size【同时可用来计算相对单位长度除了字体大小的功能以外】) rem(这个是根据根元素html的font-size来计算 vw(比如50vw 可视区域的宽度的一半) vh(可视区域的高度) vmax(vw和vh最大的) vmin(vw和vh最小的)) 绝对单位：px
-
css权重 *通用选择器
style > id > class > element -
body{margin 0 padding 0}
-
less 和 sass弥补css没有逻辑表达的弱点
-
css布局 float position flex grid 流式
