- 博客(15)
- 收藏
- 关注
RSS订阅原创 外边距问题及解决方法
2.如果父元素也有margin-top值，会与子元素的margin-top值合并，取两者较大值；现象：元素呈并列关系，在垂直方向相邻的margin外间距相遇，会出现叠加现象；分别给这两个元素套一个父元素，并为父元素设置overflow:'hidden'1.元素嵌套关系，子元素的margin-top值会叠加给父元素；原因：并列关系的两个元素共用了一个外间距区域。2.为父元素设置overflo：hidden；父元素和子元素公用一个上外边距区域。1、兄弟关系外间距塌陷问题。兄弟关系外间距塌陷问题。...
2022-08-15 10:07:14
99
1
原创 背景属性 渐变
backgrond: repeating-radial-gradient(渐变形状/圆心, 颜色1 范围1, 颜色2 范围2, ...);background:repeating-linear-gradient(方向, 颜色1 范围1, 颜色2 范围2,...);column-rule-color属性：关键词、十六进制色值、rgb(r,g,b)、rgba(r,g,b,a)颜色：关键词、十六进制色值、rgb(r,g,b)、rgba(r,g,b,a)/* 背景被裁剪到内填充区域，在内容区、内填充区显示 */..
2022-08-15 10:05:38
146
原创 弹性盒子 重点
弹性盒子是CSS3的一种新的布局模式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和空白空间的分配操作方便，布局简单，移动端使用广泛PC端浏览器支持情况较差IE11或更低版本中，不支持或部分支持在盒模型中较为灵活弹性盒模型的内容包括：弹性容器、弹性子元素——项目原理：为父元素设置flex属性，控制子元素的位置及排列方式应用场景 : 移动端。...
2022-08-15 10:03:40
69
原创 移动端布局方案
在750px设计搞下，如果使用vw单位换算，可以理解成100vw = 750px，1px = 0.13333333vw；原理：确定基准值以常见的750像素宽度的设计稿为例，根据vw单位的原理100vw = 750px,即 1vw = 7.5px，根据设计稿中的px值，转换成对应的vw值进行布局，也可以直接写px。比如说 html 的 font-size 大小为 100px, 一个 div 的 width 为 1rem，则 div 的 width大小为100px。...
2022-08-15 10:00:46
326
原创 3D变形：平移、旋转、缩放
a 指的是一个旋转角度值，如果为正值，元素围绕 Z 轴顺时针旋转；a 指的是一个旋转角度值，如果为正值，元素围绕X轴顺时针旋转；a 指的是一个旋转角度值，如果为正值，元素围绕Y轴顺时针旋转；angle：一个角度值，指定在 3D 空间旋转角度，正值顺时针旋转，反之元素逆时。x：是一个 0 到１之间的数值，主要用来描述元素围绕 X 轴旋转的矢量值。y：是一个 0 到１之间的数值，主要用来描述元素围绕 Y 轴旋转的矢量值。z：是一个 0 到１之间的数值，主要用来描述元素围绕 Z 轴旋转的矢量值。...
2022-08-15 09:58:50
225
原创 2d转换的方法
* skew(30deg,45deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 45 度 */单位：deg 当角度值为正数时，元素沿着顺时针方向旋转 当角度值为负数时，元素沿着逆时针方向旋转。transform: translate(x,y) 沿着x轴和y轴移动。沿着中心点旋转，默认值。transform: translateX(x) 沿着x轴移动。transform: scale(x,y) 沿着x轴和y轴缩放。transform: skew(x,y) 沿着x轴和y轴倾斜。...
2022-08-15 09:58:08
162
原创 CSS显示模式
本身属性为displayblock;的元素称为块级元素常见块级元素div,h1-h6,p,ul,li,dl,dt,ol本身属性为displayinline;的元素称为行级元素常见行级元素本身属性为displayinline-block的元素称为行级块元素常见行内块元素img、input(表单元素后续会讲到)没有设置宽高的时候，宽继承父元素的宽度，高度由内容撑开默认独立成行——默认垂直布局宽度默认由内容撑开高度默认由内容撑开可以设置宽高。...
2022-08-01 16:29:02
88
原创 固定定位，绝对定位，相对定位
如果元素的四个边的位置是使用“top”、“right”、“bottom”和“left”来描述的，那么元素的“height”和“width”将隐式地由偏移量决定。使用margin属性的负间距实现具有width属性和height属性的绝对定位元素的居中。表示“将元素放在文档布局流的默认位置，HTML元素的默认值，即没有定位，遵循正常的文档流对象。注意定位并不是一种用来做主要页面布局的方式，主要用于管理和微调页面中的一个特殊项的位置。/*-定位元素本身的宽度的一半*//*定位元素盒的高度的一半*/...
2022-08-01 16:27:20
241
原创 1、垂直对齐方式 vertical-align属性
常用的值baseline;默认值，基线对齐英文字母x的下端top;顶端对齐bottom;底端对齐middle;中部对齐典型应用图片与图片垂直方向的对齐图片与文字垂直方向的对齐图片与文本框垂直方向的对齐。
2022-07-21 15:55:42
941
原创 复合选择器
*鼠标悬停到.box3上，让p标签和h3标签的文字颜色都变为blue*//*鼠标悬停到.box1盒上，让其本身的背景颜色变为蓝色*//*鼠标悬停到.box2盒上，让p标签文字颜色变为红色*/hover不仅可以表示链接的悬停，也可以用于其他标签中。avisited{链接访问过后的样式}aactive{鼠标按下的样式}ahover{鼠标悬停的样式}alink{链接的默认样式}四个伪类状态都有效L-v-H-a。用于设置链接的不同状态。兄弟之间的hover。...
2022-07-18 18:44:57
50
原创 表格结构标签
caption语法：作用：定义表格的标题默认样式：居中于表格之上注意： caption 标签必须紧随 table 标签之后thead语法:作用:用于组合 HTML 表格的表头内容tbody语法:作用:用于组合 HTML 表格的主体内容提示：一个表格允许包含多个tfoot语法：作用：用于组合 HTML 表格的页脚内容总结每个表格只能定义一个标题thea...
2022-07-14 18:05:59
82
原创 常用HTML标签
文本格式化标签span标签:无语义标签，用于区分样式没有实际的语义，可以理解为一个小盒子，里面一般装着一个或几个文本内容应用场景：控制局部文本的样式b标签：一个实体标签，它里面包围的文本显示粗体效果strong标签：一个语义标签，强调语气，它里面包围的文本显示粗体效果i标签：它里面包围的文本显示斜体效果em标签：一个语义标签，强调语气，它里面包围的文本显示斜体效果del标签：删除线sup标签：上标sub标签：下标特性宽度默认由内容撑开高度默认由内容撑开默认横向显示——水平布局，一行排不下，自动折行换行和空格
2022-07-12 18:09:09
58
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人