1. 实现三角形
三角形实现原理:宽度width为0;height为0;(1)有一条横竖边(上下左右)的设置为border-方向:长度 solid red,这个画的就是底部的直线。其他边使用border-方向:长度 solid transparent。(2)有两个横竖边(上下左右)的设置,若斜边是在三角形的右边,这时候设置top或bottom的直线,和右边的斜线。若斜边是在三角形的左边,这时候设置top或bottom的直线,和左边的斜线。
2. 实现水平居中
(1) 内联元素水平居中
利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素(inline), 内联块(inline-block), 内联表(inline-table), inline-flex元素水平居中都有效
(2) 内联块级元素水平居中
通过把固定宽度块级元素的margin-left和margin-right设成auto,就可以使块级元素水平居中。
(3) 多级块状元素水平居中
使用inline-block: 如果一行中有两个或两个以上的块级元素,通过设置块级元素的显示类型(display)为inline-block和父容器的text-align属性为center.从而使多块级元素水平居中。
利用display:flex: 利用弹性布局(flex),实现水平居中,其中justify-content 用于设置弹性盒子元素在主轴(横轴)方向上的对齐方式,本例中设置子元素水平居中显示。
3. 垂直居中
(1) 单行内联元素垂直居中
通过设置内联元素的高度(height)和行高(line-height)相等,从而使元素垂直居中。
(2) 多行元素垂直居中
利用表(table)布局: 设置父元素显示类型(display)为table。子元素显示类型(display)为table-sell。利用表布局的vertical-align: middle可以实现子元素的垂直居中
利用flex布局: 利用flex布局实现垂直居中,设置显示类型(display)为flex.其中flex-direction: column定义主轴方向为纵向。因为flex布局是CSS3中定义,在较老的浏览器存在兼容性问题。
利用‘精灵元素ghost element’:即在父容器内放一个100%高度的伪元素,让文本和伪元素垂直对齐,从而达到垂直居中的目的。
(3) 块级元素垂直居中
固定高度的块级元素:父元素position设置为relative,子元素position设置为absolute。通过绝对定位元素距离顶部(top)50%,并设置margin-top向上偏移元素高度的一半,就可以实现垂直居中了。
未知高度的块级元素:当垂直居中的元素的高度和宽度未知时,我们可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。
4. 水平垂直居中
固定宽高元素水平垂直居中: 通过margin平移元素整体宽度(包括padding等)的一半,使元素水平垂直居中。
未知宽高元素水平垂直居中:利用2D变换,在水平和垂直两个方向都向反向平移宽高的一半,从而使元素水平垂直居中。transform: translate(-50%, -50%);
利用flex布局(display:flex):其中justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式(center);而align-items属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式(center)。
利用grid布局(display:grid):兼容性较差,不推荐
在屏幕上水平垂直居中:常规的登录及注册页面都需要用到。要保证较好的兼容性,还需要用到表布局。
5. CSS3新增
(1) transform变形
对元素进行平移(translate)、旋转(rotate)、缩放(scale)、倾斜(skew)
transform 不会对其它元素布局产生影响
(2) Transition过渡
指定从一个状态到另一个状态时如何过渡
(3) Animation复杂动画
可以实现更复杂的样式变化效果
使用方法:定义关键帧样式;应用动画到元素上
6. 盒子模型
从外到内依次是:margin(外边距),border(边框),padding(内边距),content(内容)
7. 清除浮动
给浮动元素的父元素添加高度:如果一个元素要浮动,那么它的父元素一定要有高度。高度的盒子,才能关住浮动。可以通过直接给父元素设置height,实际应用中我们不大可能给所有的盒子加高度,不仅麻烦,并且不能适应页面的快速变化;另外一种,父容器的高度可以通过内容撑开(比如img图片),实际当中此方法用的比较多。
clear:both; 在最后一个子元素新添加最后一个冗余元素,然后将其设置clear:both,这样就可以清除浮动。这里强调一点,即在父级元素末尾添加的元素必须是一个块级元素,否则无法撑起父级元素高度。
伪元素清除浮动: 结合 :after 伪元素和 hasLayout。 可以完美兼容当前主流的各大浏览器
给父元素使用overflow:hidden; 这种方案让父容器形成了BFC(块级格式上下文),而BFC可以包含浮动,通常用来解决浮动父元素高度坍塌的问题。
br标签清浮动: br标签存在一个属性:clear。这个属性就是能够清除浮动的利器,在br标签中设置属性clear,并赋值all。即能清除掉浮动。
8. css选择器
1、标签选择器 div h1 p
2、id选择器 #id
3、类选择器 .class
4、子代选择器 ul > li
5、后代选择器 div p
6、通配符选择器 *
7、属性选择器 div[height=100px]
8、伪类选择器 a:hover (link, visited,hover,active)
可继承样式:font-size、font-family、color
不可继承的样式:border、padding、margin、height、width
9. 样式的优先级
优先级就近选择:同权重情况下,样式定义最近的为准
同权重:内联样式(标签内部)> 嵌入样式表(当前文件中)>外部样式(外部文件中)
\1. 使用了 !important声明的规则。
\2. 内嵌在 HTML 元素的 style属性里面的声明。
\3. 使用了 ID 选择器的规则。
\4. 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
\5. 使用了元素选择器的规则。
\6. 只包含一个通用选择器的规则。
10. CSS3新增伪类
p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。
11. 重绘和重排
减少重绘重排的方法有:
· 不在布局信息改变时做DOM查询,
· 使用csstext,className一次性改变属性
· 使用fragment
· 对于多次重排的元素,比如说动画。使用绝对定位脱离文档流,使其不影响其他元素