![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML+CSS
大雄-dx
这个作者很懒,什么都没留下…
展开
-
display:flex 布局详解(1)
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。一、Flex布局是什么?Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box1{ display: flex;}.box2{ display: i...转载 2018-06-30 16:53:28 · 22550 阅读 · 0 评论 -
页面优化方法
1) 避免head标签js堵塞:所有放在head标签里面的js和css都会堵塞渲染;如果这些css和js需要加载很久的话,那么页面就空白了;用google的cdn加载一个jQuery文件是访问不了的,所以标签一直在转圈,页面没有任何显示; 有两种解决办法,第一种是把script放到body后面,这也是很多网站采取的方法。第二种是给script加defer或者async的属性,一旦s...转载 2018-07-23 09:10:03 · 2350 阅读 · 0 评论 -
javascript 事件处理 IE和标准dom 的差别
一个事件其实在页面上 有多个元素相应事件处理,点击页面上的一个button,会发生什么?其实 是相当于先后点击了按钮,它的容器,及这个页面.也就是说没一个元素都按照特定的顺序响应那个事件.事件的发生顺序在IE和mozilla在事件支持上的主要差别. 事件流 冒泡技术.冒泡型事件的基本思想,事件按照从特定的事件目标开始到最不确定的事件目标.例如: <html> ...转载 2018-07-25 11:05:25 · 183 阅读 · 0 评论 -
CSS3 Transitions, Transforms和Animation使用简介与应用展示
一、前言兼目录索引《天龙八部》里的虚竹小和尚之前可以说是和尚的先进人物与代表模范,各类清规戒律谨记与严守。但是,后来呢,花姑娘送到跟前,什么戒律都成了浮云,禁不住诱惑享乐去了。啊,我现在似乎有类似的感觉,本来不打算深究CSS3的一些属性的,但是其效果以及实际应用价值之诱惑实在巨大,还是抵挡不住,折腾下了这篇文章。劳民伤财的工程越少越好,所以,这里干脆把CSS3 动画相关的几个属性凑合到一起了,...转载 2018-07-18 07:22:42 · 238 阅读 · 0 评论 -
CSS清除浮动的几种方式
1.为父元素添加overflow:hidden<div style="overflow:hidden"> <img src="images/search.jpg"/> <img src="images/tel.jpg"/> <img src="images/weixin.png"/&原创 2018-07-04 17:01:59 · 139 阅读 · 0 评论 -
伪类选择器和伪元素
伪类选择器什么是伪类?伪类就是与类一样能够定义样式,但却不是真正意义上的类。 不是真正意义上的类?也就是说你可以在css中定义它的样式,就像定义类一样,但是你在HTML中不能找到该伪类的踪影。 HTML中没有伪类的踪影,那它是如何实现样式的呢?浏览器会在后台向这些伪类增加和删除元素。对于<a>元素,我们可以用“多重人格”来形容它。对于该标签,它一共有五种状态::link, :visit...原创 2018-07-04 15:02:16 · 1930 阅读 · 0 评论 -
HTML特殊字符的html、js、css写法汇总
⇠ 箭头类符号UNICODE符号UNICODEHTMLJSCSSHTMLJSCSS⇠&#8672\u21E0\21E0⇢&#8674\u21E2\21E2⇡&#8673\u21E1\21E1⇣&#8675\u21E3\21E3↞&#8606\u219E\219E↠&#8608\u21A0\21A0↟&#8607\u219F\219F↡&am...转载 2018-07-04 10:24:08 · 331 阅读 · 0 评论 -
CSS属性选择器*=,|=,^=,$=,*=的区别
要求value是完整单词类型的比较符号:~=,|=拼接字符串类型的比较符号:*=,^=,$=1.attribute属性中包含value: [attribute~=value] 属性中包含独立的单词为value e.g:[title~=flower] --> <img src="/i/eg_tulip.jpg" title="tulip flower" /> ...转载 2018-07-04 09:56:31 · 570 阅读 · 0 评论 -
CSS中的transform与transition
transform:转换对元素进行移动、缩放、转动、拉长或拉伸。方法:translate():元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数有两个div,它们的css样式如下:12345678910111213141516.before { width: 70px; height: 70px; ...转载 2018-07-11 01:19:16 · 203 阅读 · 0 评论 -
css中“~”(波浪号)、“,”(逗号)、“+”(加号)和“>”(大于号)详解
p~ul{ background:#8e8e8e; } <p>段落P</p> <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li>原创 2018-07-04 09:37:13 · 57447 阅读 · 0 评论 -
css如何将div画成三角形
首先了解一下盒模型:盒模型先看一段代码:#div1{ height: 100px; border-style: solid; border-width: 100px 100px 100px 100px; border-color: red forestgreen blue cyan; ...转载 2018-07-04 00:00:40 · 690 阅读 · 0 评论 -
border-box和content-box最直观的区别和解释
Chrome浏览器box-sizing默认是content-box,content-box就是元素的width和height决定了元素的宽高,这意味着元素的border和padding等不能算在元素的width和height中 ,padding和border的改变不能改变width和height的值。 代码: <!DOCTYPE html><html>...转载 2018-07-03 21:33:26 · 29553 阅读 · 4 评论 -
css知多少系列,借助别人的力量提升自己的能力。
css知多少》的读者建议是了解css基础知识(或者刚刚入门),但是没有系统学习、归纳、总结过的人,还有那些整天忙于coding、bug、加班当饭吃的,而没有时间去看书学习的码工们。《css知多少》里虽然内容不多,但是都是我觉得应该讲的基础,那些不需要讲的基础我就没有讲。所以,如果你是css大牛,那你不必看了(来给我指正一下我也欢迎啊!);如果你css都没有入门,那你也不用看了,我是从来不会写入门教...转载 2018-07-03 21:04:48 · 242 阅读 · 0 评论 -
关于html标签中b和strong,i与em两个的区别(物理标记和逻辑标记)
什么是物理标记?什么是逻辑标记? 物理元素所强调的是一种物理行为,比如说我把一段文字用b标记加粗了,我的意思是告诉浏览器应该给我加粗了显示这段文字,从单词的语义也可以分析得出,b是Bold(加粗)的简写,所以这个b标记所传达的意思只是加粗,没有任何其它的作用。 而Strong我们从字面理解就可以知道他是强调的意思,所以我们用这个标记向浏览器传达了一个强调某段文字的消息,而这个Stron...转载 2018-07-03 20:58:13 · 1456 阅读 · 0 评论 -
display:flex 布局详解(2)
flex的使用实例 之前的随笔从阮一峰老师那里学到了flex的基本用法及作用,现在来把flex具体运用到实例中,看看flex的弹性布局效果。1. flex设置元素垂直居中对齐在之前的一篇文章中记载过如何垂直居中对齐,方法有很多,但是在学习了flex布局之后,垂直居中更加容易实现HTML代码:<div class="demo"> <div class="inner">...转载 2018-06-30 17:10:55 · 15597 阅读 · 1 评论 -
less特性
前言CSS的短板 作为前端学习者的我们 或多或少都要学些 CSS ,它作为前端开发的三大基石之一,时刻引领着 Web 的发展潮向。 而 CSS 作为一门标记性语言,可能 给初学者第一印象 就是简单易懂,毫无逻辑,不像编程该有的样子。在语法更新时,每当新属性提出,浏览器的兼容又会马上变成绊脚石,可以说 CSS 短板不容忽视。 问题的诞生往往伴随着技术的兴起, 在 Web 发展...转载 2018-08-07 11:22:59 · 451 阅读 · 0 评论