yigerendegeming的博客

CSS 焦点元素:focus 伪类 选择器用于选取获得焦点的元素 。 我们这里主要针对的是 表单元素，像确定光标:hover语法：.total input { border: 1px solid #ccc; height: 30px; width: 40px; transition: all .5s;}/*这个input 获得了焦点*/.total input:focus { width: 80px; border: 1px solid skyblue;}bord

css3 过度 transition过度（transition）是CSS3中具有颠覆性的特征之一，我们可以在不使用Flash动画或JavaScript 的情况下，当元素从一种样式变换到另一种样式时为元素添加的效果。过度动画：是从一个状态渐渐的过度到另一个状态可以让我们页面更好看，更动感十足。虽然低版本浏览器不支持（ie9以下版本）但是不会影响页面布局。我们现在常和hover 一起搭配使用。语法格式：transition： 要过度的属性 花费时间 曲线运动 何时开始；何时开始默认0s，可

https://www.w3school.com.cn/tiy/t.asp?f=csse_cursor

由于图片默认与图片基线对齐，所以底侧有空白缝隙首先要明白什么是基线、中线、顶线、底线解决办法法1：vertical-align：middle | bottom | top; 只要不是基线对齐就行，用中线（middle）、底线（bottom）、顶线（top）法2：display：block； 转换为块级元素也不会存在这样的问题...

绝对定位水平居中，对margin中的auto无效left：50%margin-left：-100%；

CSS圆角边框https://jingyan.baidu.com/article/ed15cb1bbd27591be36981e1.html

去掉列表的默认样式li{ list-style: none;}

CSS塌陷合并问题我们发现两个元素上下间距并不是结构上div1的margin-bottom的值加上div2的margin-top的值100px，而是仅为60px, 它选择了上下两个元素中margin-top与margin-bottom的最大值作为两者的间距，这就是margin合并现象。这与我们想象中的样式不一样，子级元素并没有在父级元素的右下角，它好像现对于浏览器边框定位了。我们增大子级元素的margin-top，发现当margin-top的值大于一定值时，父级元素跟着子级元素移动了一段距离。这种现

CSS文字居中和盒子居中的区别文字居中：text-align: center;盒子居中：margin：0 auto;

块级盒子水平居中

盒子加内边距和变宽的溢出问题1、盒子大小 = 内容的宽度和高度 + 内边距(padding) + 变宽(border)2、盒子会自动撑大的解决办法算出盒子大小（由上头公式），然后修改width和height使其放的下3、如果这个盒子没有宽度，就不会被撑开...

优先级1、权重计算公式 * < 标签 < 类 < id < 行内样式表 < ！important 0,0,0,0 0,0,0,1 0,0,1,0 0,1,0,0 1,0,0,0 无穷大 2、权重可叠加 eg： div ul li == 0,0,0,3 .nav ul li == 0,0,1,2 a:hover == 0,0,1,1 .nav .fist == 0,0,2,0注意：p标签中内容没有被选中，所以权重为0，0，0，0

标签显示模式1、块级元素：一行一个eg： ~ 、 、 、 、 、 等特点： 一行一个 可以控制 高度 hight 、宽度 width 、外边距、内边距 宽度默认容器（父级）的宽度的100%2、行内元素：一行多个eg：、、、、、、、、 等特点： 一行多个 高宽无效 宽默认它本身内容的宽度 **行内元素只能访文本和其他行内元素**3、行内块元素：一行多个eg： 、 等特点： 一行多个 和相邻行内元素在同一行，但是之间会有空白缝隙。 默认宽度是他本身内容的宽

锚点定位html同一页面 点击位置 <a href="#tree">点这儿</a> 目标位置 <h1 id="tree">跳到这儿</h1>

Web标准构成三个方面结构 对网页元素的整合（HTML）表现 对网页元素大小、颜色等外观的设置（CSS）行为 对网页模型的定义及交互的编写（JavaScript）