HTML+CSS
关注
分享
扫一扫
海阔天空ZMZ
这个作者很懒，什么都没留下…
展开
-
简述CSS中的“BFC”规则
BFC(块级格式化上下文)BFC(Block formatting context)直译为"块级格式化上下文"。元素的显示模式我们前面讲过 元素的显示模式 display。分为 块级元素 行内元素 行内块元素 ，其实，它还有很多其他显示模式。那些元素会具有BFC的条件不是所有的元素模式都能产生BFC，w3c 规范：display 属性为 block, list-item, ta...原创 2019-08-02 16:33:14 · 476 阅读 · 0 评论 -
简单利用CSS做出小三角图标
在浏览网页时，我们有时会看到这种三角形的小图标这里我们只需要一组简单的CSS代码即可实现首先创建一个盒子容器<body> <div class="box"></div></body>创建如下CSS代码<style> .box { width: 0px; height: 0px...原创 2019-07-28 10:40:00 · 657 阅读 · 0 评论 -
简述CSS3的弹性盒布局，以及适用场景
1）背景介绍：网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便2009年，W3C 提出了一种新的方案—-Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。（2）知识剖析：...原创 2019-08-05 18:09:25 · 1588 阅读 · 0 评论 -
父子嵌套时的一个问题
现象:当子元素设置上外边距时,父盒子会和子元素一并向下移动解决方案:1: 给父元素设置1px上外边框或者1px上内边距(分割公共区域)2: 既然默认渲染导致外边距塌陷 就要使用浏览器的一个规则去改变默认渲染.规则:BFC (块级格式化上下文) 私人领域BFC规则不是浏览器的默认规则,所以我们得触发BFC规则overflow:hidden —>可以触发BFC规则...原创 2019-07-27 17:09:07 · 233 阅读 · 0 评论 -
CSS经典多栏布局（多列自适应布局、等高布局、圣杯布局、双飞翼布局）
一、多列自适应布局自适应: 盒子宽度随着屏幕宽度发生变化 百分比1:两列自适应布局要求:左侧盒子固定,右侧盒子100% 左侧盒子加左浮动属性 ===>浮动元素会覆盖标准盒子2: 三列自适应布局左右两侧固定宽度,中间盒子自适应技术点: 负外边距 margin-left:-px + 相对定位 (left-,right-)+ 浮动并排二、等高布局hei...原创 2019-08-01 11:06:27 · 827 阅读 · 0 评论 -
前端常见的几个浏览器兼容问题及解决方法
1:ie8下图片边框问题<a><img src="./a/1.jpg"></a>解决办法:img { border:0; //去掉ie8下图片边框 display:block; or vertical-align:middle; 取消下间隙}2:图片下间隙解决: (1) 图片转换块元素 ...原创 2019-08-01 10:50:40 · 297 阅读 · 0 评论 -
CSS选择器
今天总结一下有关CSS选择器的相关笔记基础选择器1: 全局选择器 * {} （通配符）* { 选择的是包含body在内以及body的所有子元素} 2: 标签选择器标签名 { 属性名:属性值; 选择的是标签名符合所写的元素} 例如：div { }3:id选择器选择的是id名字为XXX的元...原创 2019-07-27 09:32:57 · 215 阅读 · 0 评论 -
移动端常见布局
像素单位（相对单位）以下是1英寸下 像素分布为10的分布图（10px/1英寸）PPI（Pixels Per Inch）每一英寸的像素数量称为 像素密度。最典型的例子，iPhone 3gs的屏幕像素是320×480，iPhone 4s的屏幕像素是640×960。刚好两倍，然而两款手机都是3.5英寸的。在现实中，这两者效果却是一样的。这是因为Retina屏幕把2×2个像素当1个像素使用。比如原本4...原创 2019-08-03 14:57:50 · 365 阅读 · 0 评论 -
移动端布局之弹性盒（flex Box）
Web 应用的样式设计中，布局是非常重要的一部分。布局用来确定页面上不同组件和元素的尺寸和位置。随着响应式用户界面的流行，Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率。响应式用户界面设计中最重要的一环就是布局。需要根据窗口尺寸来调整布局，从而改变组件的尺寸和位置， 以达到最佳的显示效果。这也使得布局的逻辑变得更加复杂。弹性盒模型可以用简单的方式满足很多常见的复杂的布局需求。该布局模型在主...原创 2019-08-03 14:14:44 · 1238 阅读 · 0 评论 -
CSS3动画
一：过渡过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。帧动画：通过一帧一帧的画面按照固定顺序和速度播放。补间动画是各个状态的连接（关键帧）语法格式:transition: 要过渡的属性 花费时间 运动曲线 何时开始;二：变形 tran...原创 2019-08-03 11:14:19 · 267 阅读 · 0 评论 -
css3新增选择器+属性
1：c3属性前缀CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式。它暗示该CSS属性或规则尚未成为W3C标准的一部分。chrome 、Safiri 浏览器 ： -webkit-FireFox : -moz-IE: -ms-opera : -o-先写标准的CSS3属性,在写css3属性2：c3选择器(1)毗邻选择 和兄弟选择器/* E1 + E2 毗...原创 2019-08-03 09:54:51 · 422 阅读 · 0 评论 -
H5新增语义化标签以及属性
结构标签（1）<section></section> 独立内容模块 ，可以h1-h6组成大纲 ，表示文档结构，有章节、页眉、页脚或其他部分。（2）article （文章） 文章核心部分 （3）aside 标签内容之外相辅的信息 侧边栏（4）header 头部/标题(5)footer 底部(6)nav 导航（7）<figure>标签 代替原...原创 2019-08-03 09:44:20 · 2078 阅读 · 0 评论 -
CSS预处理语言——less
会计站项目1：采用rem+媒体查询+less实现less文件夹下的文件内容 【adapter.less适配文件index.less 首页对应less文件mixin.less 混合文件reset.less 重置样式文件var.less 变量定义文件】rem适配方案不好维护 设备会更新 设计稿尺寸 预设基准值咱们主要适配主流设备即可 十几种2:var.less 设置变量 ...原创 2019-08-02 21:07:11 · 313 阅读 · 0 评论 -
CSS中浮动的作用与影响（包含清除浮动影响的方法）
今天来总结一下浮动浮动(float)作用:解决盒子并排问题标准流: 一行一个 从左侧边界开始放置浮动带来一个现象, 盒子并排放置 —> 脱离标准流 ,成为浮动流—> 不占界面位置float:left / right / none(默认值) ;left: 找父元素的左边界停靠right: 找父元素的右边界停靠none: 保持原有的位置 标准流每一个并排的盒子身上都...原创 2019-07-28 11:02:06 · 917 阅读 · 0 评论