HTML+CSS
weixin_45674894
面向对象,而无实际对象
展开
-
link和@import引入CSS文件 的区别
link 和@import 的区别@import是CSS2.1之后发布的,CSS2.1,之前的使用不了,link没有限制@import需要等页面html结构加载完毕后,才会引入CSS样式,link是同时引入@import只能引入CSS文件,link可以引入除了CSS的其他文件@improt引入的CSS不能通过JS操作样式,link引入可以...原创 2019-10-28 13:57:02 · 351 阅读 · 0 评论 -
flex布局(弹性布局、伸缩布局)
flex是CSS3中的一种布局方式主要介绍下弹性布局的常用的一些属性当一个盒子设置为display:flex的时候,盒子会变为一个弹性盒子,盒子内部的子元素会默认沿着主轴方向排布,此时会引出主轴和侧轴的概念。主轴:默认水平向右(类似于X轴)侧轴:与主轴垂直的就是侧轴,默认垂直向下(类似于Y轴)主轴方向(flex-direction)弹性盒子的主轴方向默认水平向右,但是可以通过flex-...原创 2019-10-09 17:29:36 · 3163 阅读 · 0 评论 -
外边距的BUG及解决方式
1.相邻块元素垂直外边距的合并当上下相邻的两个元素相遇的时候,上面元素的有margin-bottom,下面的元素有margin-top时,两者之间的间距并不是上下边距之和,而是取两者之间的较大者,这种现象称之为外边距的塌陷。如下图所示解决方法:避免就好!2.嵌套块元素垂直外边距的合并对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,则父元素的上外边距会与子元素的上外边距发生合并,合...原创 2019-10-09 15:24:28 · 721 阅读 · 0 评论 -
响应式布局的基本介绍及原理
响应式布局的介绍响应式布局(respond layout)是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端(pc、手机、平板)什么是响应式布局早期:同一个页面需要开发不同设备的版本,公司开发成本较高pc端需要开发写一套页面,专门给pc端看移动端再开发一套页面,专门给移动端看响应式布局:同一个页面只需要开发一套网页,...原创 2019-10-19 10:56:00 · 3035 阅读 · 0 评论 -
移动端rem布局基本介绍及原理
rem布局em和rem的认识在布局中,除了px之外,还有两个常见的单位,em和remem: 相对于当前元素的字体大小→ 1em = 当前标签的font-sizerem: 相对于根元素(html)的字体大小→ 1rem = html标签的font-size浏览器默认的font-size的大小为16pxrem布局的效果:屏幕越大,标签就越大屏幕越小,标签就越小rem布局的...原创 2019-10-19 10:22:28 · 5348 阅读 · 0 评论 -
移动端开发视口的概念及作用
移动开发的现状移动端屏幕尺寸更小移动端和pc端开发本质上一样的,都是用HTML/CSS/JavaScript的技术。问题: 移动端开发与传统的pc端开发有什么区别?浏览器不同(兼容性区别)pc端:浏览器种类很多,需要添加不同的私有前缀谷歌浏览器 苹果浏览器、 UC浏览器、QQ浏览器、欧朋浏览器、百度手机浏览器、360安全浏览器、搜狗浏览器、猎豹浏览器…移动端:浏览...原创 2019-10-18 21:20:41 · 1049 阅读 · 0 评论 -
用LESS函数写CSS样式简单上手教程
LESS在写css的时候,可以直接写一个.css文件,但是实际开发中也会使用less的方法写css。less的写法比css的写法功能更加强大。Less简介Less 是一门 CSS 预处理语言,它扩展了 CSS 的写法,增加了变量、函数等特性。注意点:在less中,完全兼容css的语法,所以可以直接在less文件中写css没问题浏览器不认识less文件,需要需要使用less中的样式,...原创 2019-10-18 18:19:28 · 4879 阅读 · 1 评论 -
移动端流式布局(百分比布局)
流式布局布局特征:高度写死,宽度自适应。并不是百分百还原设计图比如:设计图是针对320px屏幕设计的,那么只有在320设备的屏幕中,才是完美的效果,其他情况都会拉伸小图片、小图标、文字大小一般写死大图片一般宽度自适应,高度等比例缩放(例如:轮播图)经典的流式布局:左侧固定,右侧自适应方法有很多种,简单例举3种。//html结构如下: <div c...原创 2019-10-13 12:37:30 · 2552 阅读 · 6 评论 -
清除浮动的四种方式
方法一: 定高法强行给父元素添加一个高度弊端:后期不好维护方法二: 额外标签法在浮动元素最后面添加一个块级元素给这个块级元素添加一个clear:both就可以解决这个问题弊端:每一次清除浮动都需要添加一个额外标签 <div class="father"> <div class="son"></div> <div style=...原创 2019-10-11 09:33:42 · 327 阅读 · 0 评论 -
CSS3 Grid 网格布局教程-转载自阮一峰
一、概述网格布局(Grid)是最强大的 CSS 布局方案。它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了。上图这样的布局,就是 Grid 布局的拿手好戏。Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。Flex 布局是轴线布局,只能指定"项目...转载 2019-10-22 10:10:14 · 411 阅读 · 0 评论