Una

接下来的日子，陆续把未总结的问题补充起来......
  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

随笔分类 -  HTML（5）/CSS（3）

1 2 下一页

pc端布局的一点思考
摘要：编写pc端页面需要注意些什么？ 1、自适应最小屏幕，在小屏幕上样式不能错乱。 在桌面屏幕各分辨率使用比例中可以看到各桌面分辨率的使用比例，日常pc端开发我们会考虑到适配1024宽度大小的屏幕。 对于管理系统，设置内容宽度最小为1024，这样当屏幕小于1024时，保证样式不会乱。 2、自适应更大的屏幕 阅读全文
posted @ 2019-02-18 18:09 youyi2016 阅读(284) 评论(0) 推荐(0)

problem：浏览器如何区分html超文本和普通文本
摘要：运营同学问：后端返回的一串元素标签，我想在网页中显示的时候，将标签中的内容渲染出来，不希望直接显示标签。 回答：bootstrap加模版组织的网页，模版渲染的数据只能渲染字符串，不能转化富文本。 运营同学问：浏览器是怎么区分富文本和字符串？ ... 上面的对话其实存在很多问题： 1、浏览器应该是如何 阅读全文
posted @ 2018-12-02 19:34 youyi2016 阅读(1670) 评论(0) 推荐(0)

显示输入框时光标自动定位到输入框内容的最后
摘要：思路就是利用input元素中的setSelectionRange方法 setSelectionRange(posstart,posend)用来选中被focus的输入框的特定范围. 开始位置和结束位置设置为内容的总长度，光标就会定位到内容最右边。 需要注意到是，元素一定要被选中然后才能通过setSel 阅读全文
posted @ 2018-11-21 20:00 youyi2016 阅读(7403) 评论(0) 推荐(0)

记元素布局自适应问题
摘要：pc端自适应屏幕问题： 1、每个数字需要跟随进度条的后面显示，进度条和数字必须包裹在一个元素里面，这个元素为一定百分比的父元素 2、进度条长度随着屏幕大小自适应，所以元素长度需要用百分比计算，这个占父元素的一定比例 3、有个最大长度，即总长度 4、每一个行有多个元素，所以用了flex布局，设置百分比 阅读全文
posted @ 2018-11-14 21:21 youyi2016 阅读(203) 评论(0) 推荐(0)

元素等比缩放解决方案
摘要：一、元素等比缩放解决方案 包含内容的元素使用绝对定位布局，利用元素的padding的百分比属性去设置元素的高度。 padding可以设置的值： 1、长度，非负的固定宽度 2、百分比，相对于父元素的宽度。 阅读全文
posted @ 2018-09-18 15:03 youyi2016 阅读(362) 评论(0) 推荐(0)

元素高度自适应屏幕高度解决方案
摘要：一、js实现 body标签高度设置为100%，通过resize事件监听浏览器的大小改变，动态设置元素高度为body高度。 二、css实现 calc计算高度，值得注意的是calc中运算符+／-两边必须留空格才能被解析为正确的表达式。 calc规则： 除以零会导致HTML解析器生成错误。 在+与-运营商 阅读全文
posted @ 2018-09-18 14:18 youyi2016 阅读(727) 评论(0) 推荐(0)

有趣的background
摘要：前言 background是css的简写形式，可以一次性定义各种背景属性，包括color、image、origin、size，repeat方式等等。 background在活动项目中用的还是比较多的，例如布局图片、画具有规则图案的边框（类似虚线框的样式）等等。 background-color和ba 阅读全文
posted @ 2018-08-24 19:28 youyi2016 阅读(184) 评论(0) 推荐(0)

前端入门应该掌握的html+css知识点
摘要：* 文档流 元素从上自下从左到右排列，即文档流 （所以一个普通的元素前面有一个向右浮动的元素，这个元素不会和这个浮动元素发生重叠，但是如果这个普通元素前面是一个向左浮动的元素，可以看到 元素会和浮动元素重叠） * 布局种类 布局分为： 块级布局（float、多列）、行级布局、定位布局、表格布局、弹性 阅读全文
posted @ 2017-07-22 06:50 youyi2016 阅读(407) 评论(0) 推荐(0)

前端知识回顾
摘要：2017-1-17 (面试题：http://www.qdfuns.com/notes/35376/2fada0407dae579a95d1622436f5e0ab.html) （前端面试，大漠：http://www.w3cplus.com/css/write-to-front-end-develop 阅读全文
posted @ 2017-07-22 06:45 youyi2016 阅读(347) 评论(0) 推荐(0)

三角形的实现方法（马）
摘要：张老师css实现的对话框系列 阅读全文
posted @ 2017-07-18 15:34 youyi2016 阅读(147) 评论(0) 推荐(0)

让页面滚动条不增大页面宽度
摘要：一、好用的插件perfect-scrollbar 在项目中快速利用perfect-scrollbar 基础使用方法：npm安装perfect-scrollbar npm install perfect-scrollbar 可以直接在项目文件中引入对应的perfect-scrollbar.css和pe 阅读全文
posted @ 2017-06-07 07:18 youyi2016 阅读(5281) 评论(0) 推荐(0)

HTML 代码复用实践 （静态页面公共部分提取复用）
摘要：原文： HTML 代码复用实践 上面的链接里面安装配置步骤已经非常详细，这里主要记录我操作过程中遇到的几个问题 gulp-file-include 的使用 按上面的步骤安装之后，node_modules下会有gulp和gulp-file-include 还有一个我们创建的空的gulp-file-in 阅读全文
posted @ 2016-11-10 10:48 youyi2016 阅读(1564) 评论(0) 推荐(0)

ife-task0003学习收获总结
摘要：+ 编写可维护的css原则是，尽量减少改动时要编辑的地方（减少代码重复）。 + CSS布局奇淫技巧之-高度自适应 高度自适应：通过绝对定位来解决高度自适应的问题，元素不设置高度，设置绝对定位，将top、bottom设置为0，可以设置自适应高度。 额外补充： 通过绝对定位解决宽度自适应的问题 不设置r 阅读全文
posted @ 2016-11-07 17:50 youyi2016 阅读(247) 评论(0) 推荐(0)

HTML5本地存储
摘要：一、HTML5本地存储 阅读全文
posted @ 2016-10-16 08:58 youyi2016 阅读(170) 评论(0) 推荐(0)

HTML5常识总结（一）
摘要：一、HTML5的发展历程 + html演变的几个版本： html2.0、html3.2、html4.0、html4.01、html5。 + 其中在html4.01发布之后，还发布了xtml1.0，它是基于html4.01的，没有新增任何新的元素和属性；xhtml遵循更严格的语法规范，xhtml定义的 阅读全文
posted @ 2016-09-03 21:27 youyi2016 阅读(353) 评论(0) 推荐(0)

瀑布流布局
摘要：一、总结： 首先是分清楚设计稿的结构，下面瀑布流布局首先是将容器分出三个有固定宽度的div，第一列多张图片的横向排列采用inline-block布局的方式，但是三列的横向显示只采用inline-block的布局方式，这里不是很尽如人意。后面两列还结合了position的方式定位才达到理想的效果。刚开 阅读全文
posted @ 2016-08-05 22:16 youyi2016 阅读(1322) 评论(0) 推荐(0)

关于css中列表（ul ol）存在默认间距的问题
摘要：一、总结： 有时候我们要给列表（ul ol 本身就是属于块级元素）的上表框或下边框设置颜色，如下： 但是在给内联块级元素（inline-block）的上表框或下边框设置颜色的时候，就没有这么简单： 在前辈的博客中了解到：ul或ol中的li与li之间之所以会有间隙，是因为空白符引起的。 因为我们一般都 阅读全文
posted @ 2016-08-05 14:42 youyi2016 阅读(7870) 评论(0) 推荐(0)

css布局实践总结（part2）
摘要：一、总结: 在第一篇css布局实践心得总结中总结了通过给元素设置position：absolute的方式让元素处在BFC（块级格式化上下文）的环境中，处在BFC环境中的元素是独立的，它和外面其他元素毫无关系。 今天很兴奋的是实践到了通过将元素设置成inline-block的方式让元素处在BFC的环境 阅读全文
posted @ 2016-08-03 22:17 youyi2016 阅读(230) 评论(0) 推荐(0)

line-height让文本在块级元素中居中显示总结
摘要：一、总结： line-height不仅可以用在段落文本中控制行与行之间的间距，还可以用来控制文本在li这种块级元素中的位置。 文本行间距的大小由字体的大小决定,行间距的大小的设置方法有5种方式： 关于line-height的详细讲解可以参考沁园春的博客：深入了解css的行高Line Height属性 阅读全文
posted @ 2016-08-03 21:38 youyi2016 阅读(407) 评论(0) 推荐(0)

css布局实践心得总结
摘要：一、摘要： 今天在写一个页面，对css中的BFC（块级格式化范围）有了一点体会，今天把遇到的问题和解决方案总结下来，额外还总结一下强大的负外边距的使用心得。 二、总结： 主体部分整体居中显示，主体部分看上去像是三列，实质上只有一列，两边的内容都是放在中间的文本里面，这里就是用了强大的负外边距达到的效 阅读全文
posted @ 2016-07-31 22:16 youyi2016 阅读(3223) 评论(0) 推荐(1)

1 2 下一页