重学前端

立体图形呈现步骤。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

 ![image.png](tos-cn-i-73owjymdk6/


1.额外标签法 在父元素内容的最后添加一个块级元素， 设置CSS属性 clear: both; 2.单伪元素法 .clearfix:after { content: ""; display: bloc

相对定位 relative 不脱标 保持标签原有显示模式 参照自己原来的位置 绝对定位 absolue 脱标 行内块的特点（宽高生效） 参照relative的祖先位置/若无则浏览器可视区域 固定定位

清除图片底的小空格：vertical-align 除了baseline(默认)都可以用.......

1.行内元素/行内块元素居中 2. 行元素居中 3.CSS定位居中 实现步骤： 1.绝对定位 2.水平、垂直边 偏移为50% 3.子级向左上移动自身尺寸的一半 4. flex居中 align-item


1 布局思路：先整体再局部，从外到内，从上到下，从左到右 2.CSS实现思路： 。。。。。。。。。。。。。。。。。。。

``` css *{ margin: 0; padding: 0; box-sizing: border-box; } li{ line-style: none; } a{ text-decorati

1.盒子模型属性 2.文字样式 3.圆角，阴影等修饰属性。。。。。。。。。。。。。。。。。。。。。。。

行级元素在设置完宽之后用margin:0 auto;....................................

CSS外边距塌陷问题, 解决方法; 1.取消子级margin, 父级设置padding 2.父级设置overflow:hidden 3.父级设置border-top

!imporant优先级最高 继承优先级最低 此外 行内样式 > ID选择器 > 类选择器 > 标签选择器 从左到右逐个进行比较个数就行