- 博客(6)
- 收藏
- 关注
RSS订阅原创 前端入门学习之定位知识点详解与图片间隙问题——day06
图片间隙问题 产生原因:图片与文字基线对齐 解决方法: img{ display:block;},将图片转成块,改变了图片本身作为内联块的特性: 独占一行; 父元素的text-align对它不再生效,应使用margin:auto; Img{vertical-align:middle/bottom/top}; 默认是baseline(基线对齐),改变图片(内联元素)垂直方向的对齐方式; 不改变图片最为内联块的特性; 设置图片父级标签的 font-size:0;line-height
2021-04-01 16:59:22
175
原创 前端入门学习之margin塌陷和浮动问题解决方法——day05
margin塌陷(折叠,叠加)问题 前提:普通文档流内的 块元素,垂直方向的,没有padding,border时: 元素嵌套(父,子元素): 子元素的垂直方向的margin值会与父元素发生塌陷; 表现:子元素把margin传递给父元素; 一大一小取最大;两者相同取当前; 解决方法: 绕开问题: 转换思路,改变子元素的margin值或为父元素加padding值; 不影响最终效果的前提下给父元素加border,padding值 给父元素加overflow: hidden auto scrol
2021-04-01 16:57:53
192
原创 前端入门学习之表单元素列举和图片居中的方法——day04
图片居中 给图片父级加text-algin加center; padding-left; img{display:block;margin:0 auto;} margin应用 实现已知宽度的块元素水平居中:margin:0 auto; auto浏览器自动计算,参考父元素和元素宽度 margin-top:-1px;表示缩短边框之间距离; 元素特性分析 块级元素: 独占一行; 默认宽度100% (未定宽度的情况下,总占位为100%); 支持宽高,行高四个方向的padding,margin,line-h
2021-04-01 16:54:39
231
原创 前端入门学习之盒模型——day03
回顾 HTML基础: HTML文档基本结构/基本语法; ※常用的HTML标签,常用的属性; 块级元素,独占一行(默认宽度100%),画大块 div,h,p,ul,ol,dl,dt,dd,br,hr; 行级元素:不独占一行,在一行并列排列,细节修饰 span,a,strong,b,em,i,b,sup,sub,del,img; <!DOCTYPE html> <html lang="en"> <head> <meta chars
2021-04-01 16:53:03
81
原创 前端入门学习之css基础篇——day02
语义化 定义:用合理的标签和属性去格式化文档(组合文档结构) 语义化的好处: 在CSS样式丢失的情况下,依然能保证基本文档结构; 增强代码的可读性,有利于后期维护,团队协作; 有利于搜索引擎优化(机器读懂) 有利于用户体验(alt,title) css基础 Cascading style sheet级联样式表,负责表现层,用于定义样式结构,图片和文字样式; 语法:选择器(样式声明组); 引入样式的方式: 行间(内联,内嵌): 位置:放于开始标签的内部; 语法格式:style=“具
2021-04-01 16:49:31
55
原创 前端入门学习之HTML常见的标签——day01
前端工具 ps:测图 量图 修图 编辑器:vscode 浏览器: 主流浏览器:chrome谷歌,Firefox火狐,Safari,IE浏览器,Opera浏览器 最重要和最核心的组件:渲染引擎(浏览器内核) IE浏览器:Trident内核 双内核-兼容模式 极速模式 webkit Safari:Webkit内核 Firefox:Gecko内核 Opera:Presto内核->Webkit内核->Blink内核 Chrome:Blink内核
2021-04-01 16:44:30
74
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人