css在标题左右插入两条线

利用css伪元素after和befeore在h标题左右插入两条线

 

Views: 35
飞鱼

css覆盖层特效:鼠标移上图片

css覆盖是网页中一种常见的显示模式,既鼠标移上图片显示文字或图标

1,鼠标移上图片显示图标并居中

2,鼠标移上图片,底部显示文字

3,鼠标移上,背景变色[......]

阅读全文

Views: 31
飞鱼

div利用position与transform实现盒子水平垂直居中

有2个div盒子,外层的盒子box宽高300,背景颜色是蓝色。里边的盒子box1宽高是200,背景颜色是红色。html,css如下

正常情况下,盒子box1位于盒子box的左上角,如下图。

box1位于box左上角

现在我想让box1在box[......]

阅读全文

Views: 31 Tags: , ,
飞鱼

Css BFC(Block Formatting Context)

BFC(Block Formatting Context)是Web页面中盒模型布局的CSS渲染模式。它的定位体系属于常规文档流。

浮动,绝对定位元素,inline-blocks, table-cells, table-captions,和overflow的值不为visible的元素,(除了这个[......]

阅读全文

飞鱼

Css中绝对定位Position:absolute是相对谁进行定位的

在css中,绝对定位position:absloute会查找最近的父(祖)元素中带有 (已定位)元素,如果这些父(祖)元素都没有定位,那么Position:absolute直接相对body进行绝对定位

已定位指的是position除static定位以外的值!

Position有4个值st[......]

阅读全文

Views: 29 Tags:
飞鱼

html置换元素(替换元素)和非置换元素(不可替换元素)

替换元素:

替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。

例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来,而如果查看(x)html代码,则看不到图片的实际内容;

又例如根据<input>标签的type属性来决定是显示[......]

阅读全文

飞鱼

css中width百分比值是针对父元素的

css中,width值如果设置百分比,那么这个元素的宽度值是父元素宽度值的百分百

例如图片img

<img src=.. width=70%>

那么这个图片的宽度值是父元素宽度的70%

比如这个图片本身宽度是1000px;

父元素的宽度是500px

那[......]

阅读全文

Views: 30 Tags: ,
飞鱼

关于position absolute的TRBL四个值都为0的研究

当position:absolute的TRBL四个值都为0的情况下,

如果设置position:absolute的元素没有设置宽度和高度,那么TRBL四个值都为0的时候,元素完全覆盖带有position的父元素

默认情况下,[......]

阅读全文

Views: 37 Tags: , ,
飞鱼

html5新标签main用法

<main>标签是html5的新标签,详细用法参考:http://w3c.github.io/html/grouping-content.html#the-main-element

<main> 标签规定文档的主要内容。

<main> 元素中的内容对于[......]

阅读全文

Views: 69 Tags: ,
飞鱼

html5新标签hgroup用法

hgroup我们把它拆分的话就h和group

h代表h1,h2....等标题

group代表组合,群组

所以合起来的意思应该是 标题的组合

用法

比如,在一篇文章中有一个主标题,一个副标题,那么我们可以采用[......]

阅读全文

Views: 57 Tags: ,
飞鱼