css
gxgalaxy
这个作者很懒,什么都没留下…
展开
-
css之position
1.绝对定位(absolute):脱离原来位置进行定位,可以使用left right top bottom进行定位html代码<!DOCTYPE html><html lang="en"><head> <meter charset="utf-8"> <title>hhhh</title>原创 2018-08-10 00:04:58 · 154 阅读 · 0 评论 -
css之margin塌陷和margin合并问题
margin塌陷:垂直方向上的margin父子元素会结合在一起,会取其中最大值。实例:html代码<!DOCTYPE html><html lang="en"><head> <meter charset="utf-8"> <title>margin</title> &l原创 2018-08-10 16:21:52 · 290 阅读 · 0 评论 -
CSS权重
选择器 权重值 !important infinity 行间样式 1000 id 100 class|属性|伪类 10 标签|伪元素 1 通配符 0 CSS中各个选择器之间权重的进制为256进制优先级一样的时候谁在后面,谁起作用(覆盖)在CSS中infinity+1就是要比infinity大一例子:...原创 2018-08-07 23:45:56 · 1495 阅读 · 1 评论 -
CSS常用的几种选择器
1.id选择器:(一一对应,一个id对应一个元素)为标有特定 id 的 html元素指定特定的样式。以 "#" 来定义。 例子:html代码<div id="only">哈哈哈哈哈</div>css代码#only{ background-color: red;}div中的元素背景颜色显示为红色2.类(class)选择器:(多对多,一个元...原创 2018-08-07 23:44:48 · 1503 阅读 · 0 评论 -
css三大元素
1.行级元素 内联元素 inline feature:内容决定元素所在位置 不可通过css改变宽高 example: span strong em a del2.块级元素 block feature:独占一行 可以通过css改变宽高 example: div p ul li ol form addre...原创 2018-08-09 00:17:01 · 421 阅读 · 0 评论 -
css之图片并列间隙问题
在各个网站上我们很容易看到有多张图片并列呈现如下:根据习惯写出了以下html和css代码 <img src="1.jpg" > <img src="1.jpg" > <img src="1.jpg" > <img src="1.jpg" >img{ width: 100px;原创 2018-12-13 17:27:59 · 1284 阅读 · 0 评论 -
CSS之两栏布局
在页面布局过程中,我们常常会要用到两栏布局或者三栏布局,现在将两栏布局的代码总结如下:两栏布局通常有以下几种情况:1.一边宽度固定,一边自适应2.一边宽度不固定,一边自适应一边宽度固定,一边自适应:方法一:左侧float:left;右侧margin-left;代码 html<div class="demo"> <div class="left"&g...原创 2019-04-23 00:27:36 · 263 阅读 · 0 评论 -
CSS实现毛玻璃效果实例
这里写自定义目录标题CSS实现毛玻璃效果效果图整体实现思路源代码CSS实现毛玻璃效果我们经常会在页面中看到使用毛玻璃效果来美化页面的实例。整个实现过程比较简单,需要用到css中filter属性中的blur函数以及伪元素。效果图整个效果如下:整体实现思路对元素直接使用模糊会将其内容全部模糊掉,为了保证文字不会模糊掉所以我们通过伪元素来解决这个问题。模糊效果并不会应用到其背后的...原创 2019-08-21 20:32:50 · 452 阅读 · 0 评论