CSS
文章平均质量分 56
表现
Double_路
学不可一蹴而就,坚持是胜利之光
展开
-
CSS动画的两种做法
CSS动画的两种做法一、 使用transformtransform语法:四个常用功能:位移translate transform:translateX(200px);(y轴也是一样的)Z轴需要有一个视点,就是要告诉浏览器以哪个位置做参考,调节时会以那个点为参照变远或者变近,视点要添加在父元素上,用perspective:1000px;指定,它表示离画面中心1000px远。可以缩写为transform:translate(200px,200px,200px);缩放scale t原创 2021-04-22 21:51:39 · 539 阅读 · 0 评论 -
浏览器的渲染过程和渲染方式
浏览器渲染过程(简洁过程):根据HTML构建HTML树(DOM);根据css构建css树(cssom);将两棵树合并成一颗渲染树(render tree);Layout布局(文档流,盒模型,计算大小和位置);Paint绘制(把边框颜色,文字颜色,阴影等画出来);Compose合成(根据层叠关系展示画面),把不同的层拍平成为一个画面 ;如下图:以上内容总结于https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_M原创 2021-04-20 19:10:41 · 188 阅读 · 0 评论 -
CSS的定位
CSS定位1. position: static;默认值,表示该元素存在于文档流中。2. position: relative;(相对定位,但不脱离文档流)-可以指定偏移量top和left,占据的位置不变,只是显示的位置和之前有一个便宜,如果后面还有元素,和没有指定偏移量时是一模一样的。-还可以和absolute搭配使用,给absolute元素做爸爸-还可以和z-index配合使用:-z-index:auto默认值(计算出来的值是0,但是和0又不一样),不创建新层叠上下文-z-index:0原创 2021-04-20 18:03:07 · 79 阅读 · 0 评论 -
flex布局
flex布局1.让一个元素变成flex容器:.container{display: flex;/* inline-flex */flex-direction:row;(默认值是row,元素一字排开,column是竖着排,row-reverse是从右往左,column-reverse是从下往上)flex-wrap:wrap;(位置不够的时候换行,nowrap是不换行,这是一个人默认的值,一般用换行)justify-content:flex-start;(默认是尽量往左靠,flex-end是尽量往右原创 2021-04-17 16:12:19 · 140 阅读 · 0 评论 -
web中的溢出隐藏
溢出隐藏:属性:overflow:可选值:visible:默认hidden:将溢出的部分隐藏,截断scroll:添加滚动条,横向和纵向都有auto:一旦溢出就添加滚动条,横向和纵向根据情况添加属性:overflow-x:x轴上的溢出解决方式,可选值也有上面的四种overflow-y:y轴上的溢出解决方式,可选值也有上面的四种...原创 2021-02-04 10:49:08 · 607 阅读 · 0 评论 -
css中的选择器
层次选择器:后代:M N{ }父子:M>N{ }兄弟:M~N{ }相邻:M+N{ }属性选择器:M[attr] { }= :完全匹配*= 部分匹配^= 起始匹配$= 结束匹配伪类选择器:M:伪类{ }:hover 鼠标移入时的样式 (可以添加给所有的标签):active 鼠标按下时的样式 (可以添加给所有的标签):link 访问前的样式 (只能添加给a标签):visited 访问后的样式 (只能添加给a标原创 2021-02-04 10:24:13 · 102 阅读 · 0 评论 -
CSS中position属性值有哪些?
CSS中position属性值有哪些?1、position:relative;相对定位1> 不影响元素本身特性(无论区块元素还是内联元素会保留其原本特性)2> 不会使元素脱离文档流(元素原本位置会被保留,即改变位置也不会占用新位置)3> 没有定位偏移量时对元素无影响(相对于自身原本位置进行偏移)4>提升层级(用z-index样式的值可以改变一个定位元素的层级关系,从而改变元素的覆盖关系,值越大越在上面,z-index只能在position属性值为relative或absolu原创 2020-12-18 22:17:37 · 3063 阅读 · 1 评论 -
内边距的折叠
内边距的折叠<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>内边距的折叠</title> <style> .box1,.box2{原创 2020-11-04 15:38:39 · 194 阅读 · 0 评论 -
盒子的垂直布局
盒子的垂直布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>垂直方向的布局</title> <style> .box1{原创 2020-11-04 15:37:34 · 312 阅读 · 0 评论 -
盒子的水平布局
盒子的水平布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子的水平布局</title> <style> .box1{原创 2020-11-04 15:35:40 · 338 阅读 · 0 评论 -
CSS中的盒子模型
CSS中的盒子模型<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒模型</title> <style> .box1{原创 2020-11-04 15:33:54 · 155 阅读 · 0 评论