![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css笔记
Yomuki
这个作者很懒,什么都没留下…
展开
-
CSS笔记——transform 2D/移动/旋转/缩放
一、2D转换移动 translate 类似于定位 1.1 语法 transform: translate(x,y); transform: translateX(n); transform: translateY(n); 1.2 注意点 不会影响到其他元素的位置 百分比单位是相对于自身元素的大小 对行内标签没有效果 1.3 应用效果 鼠标经过,元素的上浮效果。 百分比单位可用于某些情况下的居中效果。(先走大盒子一半,再走自身大小一半) 二、2D转换旋转 rotate 再二维平面内,顺原创 2020-11-28 20:40:07 · 225 阅读 · 0 评论 -
移动web——rem
一、rem rem(root em)是一个相对单位,类似于em,em据使用它的元素的大小决定(很多人错误以为是根据父类元素,实际上是使用它的元素继承了父类的属性才会产生的错觉)。 rem的基准是相对于html元素的字体大小。 例如:根元素(html)设置fonr-size=12px;非根元素设置width: 2rem;则换成px表示就是24px。 html { font-size: 24px; } .div2 {原创 2020-12-01 14:14:05 · 105 阅读 · 0 评论 -
CSS笔记——3D
一、三维坐标系 和 透视 透视 perspective 网页产生3D效果需要透视 模拟人类的视觉位置,可认为安排一只眼睛去看 透视也称为视距:视距就是人的眼睛到屏幕的距离 越近成像越大,越远成像越小;即Z轴越大,成像越大 透视的单位是像素 透视写到3D元素的父盒子上 二、3D位移 translate3d(x,y,z) 2.1 语法 translate3dX(); 左右 translate3dY(); 上下 translate3dZ(); 内外 Z轴上一般用精确单位(px)...原创 2020-11-29 13:42:34 · 160 阅读 · 0 评论 -
CSS笔记——浮动和布局/清除浮动
一、传统网页布局的三种方式 网页布局的本质——用CSS来摆放盒子。用盒子进行排序 普通流(标准流) 浮动 定位 标准流(普通流,文档流) 标签按照默认规定好的方式排列 块级元素会独占一行,从上向下顺序排列。常用元素有:div,hr,p,h1-h6,ul,ol,dl,form,table 行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行。常用元素:span,a,i,em等 标准流是最基本的布局方式 实际开发中,一个页面基本包含了三种布局方式。 二、浮动 为什么需要浮动?浮动可原创 2020-11-28 20:45:30 · 141 阅读 · 0 评论 -
CSS笔记——定位
一、定位的目的 使某个元素自由的在盒子内移动或固定在某个位置,并且压住其他盒子。 二、定位的组成 定位 = 定位模式 + 边偏移 定位模式用于指定一个元素在文档中的定位方式。边偏移决定了元素的最终位置 2.1定位模式 定位模式决定元素的定位方式,由position属性决定 absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。原创 2020-11-28 20:44:58 · 180 阅读 · 0 评论 -
CSS笔记——元素的显示和隐藏
display none 不占位 常用 visibility visible/hidden 占位 overflow visible/hidden/scroll/auto 一、 display display: none; display隐藏元素后,不再占有原来的位置。 二、visibility visible 默认值。元素是可见的。 hidden 元素是不可见的。 collapse 当在表...原创 2020-11-28 20:44:36 · 132 阅读 · 0 评论 -
CSS笔记——常见布局技巧margin负值,文字围绕,行内块,强化三角
一、margin负值使用 解决边框1+1=2的问题。 div { display: inline-block; float: left; width: 30px; height: 200px; border: 1px solid red; margin-left: -1px; } div:nth-child(1)原创 2020-11-28 20:41:28 · 164 阅读 · 0 评论 -
CSS学习——元素显示模式以及display
一、块元素 常见的块元素有 <h1-6> ,<p>,<div>,<ul>,<ol>,<li> 块元素特点: 自己独占一行 高度,宽度,外边距,内边距都可以控制 宽度默认是容器(父级宽度)的100% 是一个容器,里面可以放行业和块级元素 注意点: 文字类的元素内不能使用块级元素 <p>标签主要用于存放文字,所以<p>下不能放<div>及其其他块级元素 同理 h1-6也是 二、行内元素.原创 2020-11-28 20:41:04 · 234 阅读 · 1 评论 -
CSS笔记——CSS3新特性(选择器,盒子模型,过渡,模糊,计算)
IE9+ 移动端支持优于PC段端 应用相对广泛 一、新增选择器 类选择器,属性选择器,伪类选择器,权重都为10 1.1 属性选择器 [att] 所有带att属性的元素 [att="val"] 所有att属性=val的元素 [att~="val"] 适用于多个属性值的(空格分开)a val y [att|="val"] 适用于连字符属性值x-val-y [att^="val"] 以val开头的属性值 [att$="val"] 以val结尾的属性原创 2020-11-28 20:40:47 · 152 阅读 · 0 评论 -
CSS笔记——动画
一、基本使用 先定义,再使用。 @keyframes donghua1{ 0% { transform: translate(0px); } 100% { transform: translate(1200px); } } .dhbox1 { animation: donghua1 1s; } 动画序列: 二、常用属性 @keyframes 定义动画 animation 简写 animation-na原创 2020-11-28 20:40:27 · 68 阅读 · 0 评论